/* CrabKids Stock Dashboard — custom theme layered on Bootstrap 5 */

:root {
    --ck-coral: #ff6b5e;     /* CrabKids accent — warm, playful, kid-brand appropriate */
    --ck-coral-dark: #e8533f;
    --ck-navy: #1f2a44;      /* sidebar base */
    --ck-navy-light: #2c3a5c;
    --ck-ink: #1d2330;
    --ck-paper: #f5f6fa;
    --ck-green: #2bb673;
    --ck-amber: #e0a324;
    --ck-red: #e25555;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ck-ink);
}

.sidebar {
    background: linear-gradient(180deg, var(--ck-navy) 0%, #161e33 100%);
}

.sidebar .nav-link {
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    opacity: 0.85;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.sidebar .nav-link:hover {
    background: var(--ck-navy-light);
    opacity: 1;
}

.sidebar .nav-link.active {
    background: var(--ck-coral);
    opacity: 1;
    font-weight: 600;
}

/* KPI cards */
.kpi-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eceef3;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 2px rgba(20, 25, 40, 0.04);
}

.kpi-card .kpi-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a93a6;
    font-weight: 600;
}

.kpi-card .kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ck-ink);
    line-height: 1.15;
    margin-top: 0.15rem;
}

.kpi-card .kpi-sub {
    font-size: 0.82rem;
    color: #8a93a6;
    margin-top: 0.35rem;
}

.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.kpi-icon.coral { background: var(--ck-coral); }
.kpi-icon.green { background: var(--ck-green); }
.kpi-icon.amber { background: var(--ck-amber); }
.kpi-icon.navy  { background: var(--ck-navy); }

.trend-up   { color: var(--ck-green); font-weight: 600; }
.trend-down { color: var(--ck-red); font-weight: 600; }

.panel {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eceef3;
    padding: 1.4rem;
    box-shadow: 0 1px 2px rgba(20, 25, 40, 0.04);
}

.panel-title {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.panel-subtitle {
    font-size: 0.85rem;
    color: #8a93a6;
    margin-bottom: 1rem;
}

.table-low-stock thead th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8a93a6;
    border-bottom: 2px solid #eceef3;
    font-weight: 600;
}

.badge-stock-out {
    background: var(--ck-red);
}
.badge-stock-low {
    background: var(--ck-amber);
    color: #fff;
}

.page-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.page-subheading {
    color: #8a93a6;
    margin-bottom: 1.5rem;
}

.date-filter-bar {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eceef3;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
}