/* ==========================================================
   PSICOTIKA - TRAVIAN TOOLKIT
   TOOLS
   Version 1.0
========================================================== */


/* ==========================================================
   TOOL GRID
========================================================== */

.toolGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));

    gap:28px;

    margin:25px 0;

}


/* ==========================================================
   TOOL PANEL
========================================================== */

.toolPanel{

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:10px;

    padding:25px;

    transition:.25s;

}

.toolPanel:hover{

    border-color:var(--gold);

    box-shadow:0 8px 18px rgba(0,0,0,.30);

}

.toolPanel h3{

    margin-bottom:20px;

    color:var(--gold);

    font-size:22px;

}


/* ==========================================================
   TOOL HEADER
========================================================== */

.toolHeader{

    margin-bottom:30px;

}

.toolHeader h2{

    margin-bottom:8px;

}

.toolHeader p{

    margin-bottom:0;

}


/* ==========================================================
   ACTION BAR
========================================================== */

.toolActions{

    display:flex;

    justify-content:center;

    margin:35px 0;

}


/* ==========================================================
   RESULTS PANEL
========================================================== */

.resultPanel{

    margin-top:30px;

}


/* ==========================================================
   RESULT ROW
========================================================== */

.resultRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid var(--border);

}

.resultRow:last-child{

    border-bottom:none;

}

.resultRow span{

    color:var(--text-soft);

    font-size:15px;

}

.resultRow strong{

    color:white;

    font-size:22px;

    font-weight:600;

}


/* ==========================================================
   INFO BOX
========================================================== */

.infoBox{

    background:#1F1914;

    border-left:4px solid var(--gold);

    padding:18px;

    border-radius:8px;

    margin:20px 0;

}

.infoBox h4{

    color:var(--gold);

    margin-bottom:10px;

}

.infoBox p{

    margin:0;

}


/* ==========================================================
   WARNING BOX
========================================================== */

.warningBox{

    background:#332111;

    border-left:4px solid #C97A2D;

    padding:18px;

    border-radius:8px;

    margin:20px 0;

}


/* ==========================================================
   SUCCESS BOX
========================================================== */

.successBox{

    background:#18301F;

    border-left:4px solid #52C16E;

    padding:18px;

    border-radius:8px;

    margin:20px 0;

}


/* ==========================================================
   TABLES
========================================================== */

.toolTable{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.toolTable th{

    background:var(--bg-panel);

    color:var(--gold);

    padding:14px;

    text-align:left;

    border-bottom:1px solid var(--border);

}

.toolTable td{

    padding:14px;

    border-bottom:1px solid #35281C;

}

.toolTable tr:hover{

    background:#2E231A;

}


/* ==========================================================
   SMALL STATS
========================================================== */

.statGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

    gap:18px;

    margin-top:20px;

}

.statCard{

    background:#211912;

    border:1px solid var(--border);

    border-radius:8px;

    padding:18px;

    text-align:center;

}

.statCard h4{

    color:var(--gold);

    margin-bottom:10px;

    font-size:15px;

}

.statCard strong{

    display:block;

    font-size:26px;

    color:white;

}


/* ==========================================================
   LOADING
========================================================== */

.loading{

    text-align:center;

    padding:60px;

    color:var(--text-soft);

    font-size:18px;

}