/** Admin Homepage **/
.page-heading{
    margin: 8px 0 16px;
}
.page-heading__title{
    margin: 0 0 4px;
    font-weight: 800;
    font-size: clamp(24px, 2.4vw, 32px);
    color: #1f2937;
}
.page-heading__sub{
    margin: 0;
    color: var(--muted, #6b7280);
    font-size: clamp(12px, 1.6vw, 16px);
}

.adb-shell.container { max-width: 1200px; margin: 0 auto; padding: 16px 0 24px; }
:root {
    --cream: #fffbf3;       /* page bg tint */
    --card:  #ffffff;       /* card bg */
    --stroke:#e9e3d9;       /* card border */
    --muted: #9aa0a6;
    --brown: #7a5a2e;       /* primary accent (bars/buttons/numbers) */
    --brown-600:#6a4f29;
    --brown-700:#5a4322;
    --green:#16a34a;
    --orange:#f59e0b;
    --shadow: 0 6px 18px rgba(0,0,0,.06);
    --radius: 14px;
    --qa-beige: #fffbf3;        /* base row bg (beige) */
    --qa-beige-dark: #7a5a2e;   /* hover/active dark beige (your primary) */
    --qa-stroke: #e9e3d9;
}
body { background: var(--cream); }

/* Heading area */
.adb-header { margin-bottom: 14px; }
.adb-greeting h2 { margin: 0 0 4px; font-size: clamp(24px, 2.2vw, 32px); color:#1f2937; }
.adb-greeting .muted { color: var(--muted); margin: 0; }

/* Grid */
/* Main grid: lock areas to match the prototype */
.adb-grid{
    display:grid;
    gap:14px;
    grid-template-columns: 1fr 1fr 1fr;           /* 3 equal columns */
    grid-template-areas:
    "kpis  kpis  kpis"                          /* row 1 */
    "chart chart quick";                        /* row 2 */
}

/* Place children into the areas */
.kpi-grid   { grid-area: kpis; }
.chart-card { grid-area: chart; }
.quick      { grid-area: quick; }


.kpi-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}

/* Responsive: stack everything for narrow screens */
@media (max-width: 920px){
    .adb-grid{
        grid-template-columns: 1fr;
        grid-template-areas:
      "kpis"
      "chart"
      "quick";
    }
    .kpi-grid{ grid-template-columns: 1fr; }      /* KPI cards stacked */
}

/* Clickable KPI cards */
.card-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;

    /* smooth hover */
    transition:
        transform 140ms ease,
        box-shadow 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease;
    will-change: transform, box-shadow;
}

/* child bits animate too */
.card-link .kpi-value,
.card-link .kpi-title {
    transition: transform 140ms ease, opacity 200ms ease;
}

.card-link:hover,
.card-link:focus-visible {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    background-color: #fffdf8;            /* tiny warm tint to match your palette */
    border-color: #e8dcc4;                 /* subtle highlight on the border */
}

.card-link:hover .kpi-value,
.card-link:focus-visible .kpi-value {
    transform: translateY(-2px);
}

/* pressed state */
.card-link:active {
    transform: translateY(0) scale(1.005);
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* strong, accessible focus ring for keyboard users */
.card-link:focus-visible {
    outline: 3px solid #d6c6a8;
    outline-offset: 2px;
    border-radius: 12px;
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .card-link,
    .card-link .kpi-value,
    .card-link .kpi-title {
        transition: none;
    }
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 14px;
}
.lower-grid {
    display: grid; gap: 14px;
    grid-template-columns: 2fr 1fr;
}
@media (max-width: 920px){
    .lower-grid { grid-template-columns: 1fr; }
}

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
}

/* KPI card */
.kpi .kpi-title { font-weight: 700; color:#111827; }
.kpi .kpi-value {
    font-size: clamp(32px, 4vw, 40px);
    font-weight: 800;
    color: var(--brown);
    line-height: 1.05;
    margin-top: 6px;
}
.kpi .kpi-sub { margin-top: 6px; font-size: clamp(16px, 4vw, 18px); }

/* Chart */
.chart-card .section-title { margin: 0 0 4px; font-weight: 800; }
.chart-card .muted { margin: 0 0 8px; display:block; }

.bar-chart{
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 10px 8px 8px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    min-height: 200px;
    background: #fff;
}
.bar-col{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 8px;
}
.bar{
    width: 100%;
    border-radius: 10px;
    background: var(--brown);
    box-shadow: inset 0 -6px 0 rgba(0,0,0,.05);
    min-height: 4px;
    transition: height .4s ease;
}
.bar-label{
    font-size: 12px;
    color:#374151;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick actions */
.quick .section-title{ margin:0 0 10px; font-weight:800; }
.quick{ padding:12px; }
.qa-item{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:14px;
    background: var(--qa-beige);
    border: 1px solid var(--qa-stroke);
    text-decoration:none; color: #2a2d30; font-weight:700;
    margin-bottom:10px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.qa-item:hover{
    background: var(--qa-beige-dark);
    color:#fff;                 /* make text white on hover */
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
/* Left circular icon */
.qa-icon{
    width:36px; height:36px; border-radius:9999px;
    display:grid; place-items:center;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    background:#fff; border:1px solid var(--qa-stroke);
}
.qa-item:hover .qa-icon{ background: rgba(255,255,255,.16); border-color: transparent; color:#fff; }

.qa-icon--green { background:#e8f5ee; color:#047857; }   /* add */
.qa-icon--amber { background:#fff1e6; color:#b45309; }   /* news */
.qa-icon--indigo{ background:#eef2ff; color:#4338ca; }   /* goal */
.qa-icon--slate { background:#f3f4f6; color:#374151; }   /* content */

/* Label */
.qa-text{ flex:1; }

/* Right light pill */
.qa-cta{
    padding:6px 12px;
    border-radius:9999px;
    background:#fff;
    border:1px solid #e5e7eb;
    color:#374151; font-weight:700; font-size:14px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    .qa-item{ transition:none; }
}

.muted{ color: var(--muted); }
.wrap-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }