/* ==========================================================
   CARDS
========================================================== */

.card{

    background:var(--card);

    color:var(--text);

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

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 8px 24px rgba(15,23,42,.04);

    transition:.2s;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card-header{

    color:var(--text-strong);

}

.card:hover{

    box-shadow:
        0 4px 12px rgba(15,23,42,.06),
        0 16px 32px rgba(15,23,42,.08);

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:20px 24px;

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

    background:var(--card);

}

.card-title{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:var(--text-strong);

}

.card-subtitle{

    margin-top:4px;

    font-size:13px;

    color:var(--text-muted);

}

.card-body{

    padding:24px;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 24px;

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

    background:var(--surface-alt);

}

/* ==========================================================
   SMALL CARDS
========================================================== */

.card-sm .card-body{

    padding:16px;

}

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

.stats-grid{

    display:grid;

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

    gap:20px;

}

.stat-card{

    background:var(--card);

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

    border-radius:14px;

    padding:22px;

    transition:.2s;

}

.stat-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(15,23,42,.08);

}

.stat-title{

    font-size:13px;

    color:var(--text-muted);

    margin-bottom:8px;

}

.stat-value{

    font-size:32px;

    font-weight:700;

    color:var(--text-strong);

    line-height:1;

}

.stat-footer{

    margin-top:14px;

    font-size:13px;

    color:var(--text-faint);

}

/* ==========================================================
   DASHBOARD
========================================================== */

.stat-card-row{

    display:flex;

    align-items:center;

    gap:16px;

}

.stat-icon{

    width:48px;

    height:48px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.stat-icon-gold{ background:rgba(201,162,39,.12); color:var(--gold); }
.stat-icon-success{ background:rgba(34,197,94,.12); color:var(--success); }
.stat-icon-danger{ background:rgba(239,68,68,.12); color:var(--danger); }
.stat-icon-warning{ background:rgba(245,158,11,.12); color:var(--warning); }
.stat-icon-info{ background:rgba(99,102,241,.12); color:#6366F1; }

.quick-actions-grid{

    display:grid;

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

    gap:12px;

}

.quick-action{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 16px;

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

    border-radius:12px;

    text-decoration:none;

    color:var(--text);

    font-weight:600;

    font-size:14px;

    transition:.15s;

}

.quick-action:hover{

    border-color:var(--gold);

    background:var(--surface-alt);

}

.quick-action i{

    color:var(--gold);

    flex-shrink:0;

}

.top-product-row{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

}

.top-product-row:last-child{

    margin-bottom:0;

}

.top-product-rank{

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--gold);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;

    flex-shrink:0;

}

.top-product-info{

    flex:1;

    min-width:0;

}

.top-product-name{

    font-size:13px;

    font-weight:600;

    color:var(--text-strong);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.top-product-bar-track{

    height:6px;

    border-radius:4px;

    background:var(--surface-alt);

    overflow:hidden;

    margin-top:6px;

}

.top-product-bar-fill{

    height:100%;

    background:var(--gold);

    border-radius:4px;

}

.top-product-qty{

    font-size:13px;

    font-weight:600;

    color:var(--text-muted);

    white-space:nowrap;

    flex-shrink:0;

}

/* ==========================================================
   FILTER CARD
========================================================== */

.filter-card{

    background:var(--card);

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

    border-radius:14px;

    padding:18px 22px;

    margin-bottom:24px;

}

/* ==========================================================
   SETTINGS TILES
========================================================== */

.settings-tile{

    display:block;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

}

.settings-tile:hover{

    border-color:var(--gold);

}

.settings-tile-disabled{

    cursor:default;

    opacity:.7;

}

.settings-tile-disabled:hover{

    border-color:var(--border-alt);

}

.settings-tile-icon{

    width:48px;

    height:48px;

    border-radius:12px;

    background:rgba(201,162,39,.12);

    color:var(--gold);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

}

/* ==========================================================
   TABLE CARD
========================================================== */

.table-card{

    background:var(--card);

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

    border-radius:14px;

    overflow:hidden;

}