:root {
    /* Brand */
    --color-primary: #23627A;
    --color-accent: #87CFB7;
    --color-danger: #FF6B6B;

    --color-accent-hover: #5DAF95;

    /* Neutrals */
    --color-surface: #fff;
    --color-text: #000;
    --color-text-secondary: #707070;
    --color-bg-page: #DFDFDF;
    --color-border-subtle: #d5d4d4;
    --color-border-input: #bfbfbf;

    /* M3 design-export token, referenced with a fallback across several templates */
    --m-3-sys-light-on-surface-variant: #49454F;
}

/* Shared month navigation (common/_month_nav.html) — used by attendance, approvals, purchase and employee dashboards.
   Its host row (.header / .attendance-header / .top-part-user) is a container-query container named
   "month-nav-host" — the space actually squeezing month-nav comes from that row's other content
   (headline, stats, profile block), which shrinks independently of the viewport, so a viewport
   @media query would never line up with when month-nav itself runs out of room. */
.month-nav { grid-column: 2; justify-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-family: Roboto; max-width: 100%; }
.month-nav-arrow { font-size: 22px; color: var(--color-primary); padding: 0 8px; }
.month-nav-current { background: var(--color-accent); color: #FFF; padding: 6px 12px; border-radius: 16px; font-size: 13px; text-decoration: none; }
.month-nav-current-inactive { background: darkgray; }

/* Ultra-narrow: keep the two arrows glued together on their own line instead of
   breaking wherever they happen to run out of space (picker / arrows / current-month, each on its own row). */
@container month-nav-host (max-width: 620px) {
    .month-nav-picker { order: 1; flex: 1 1 100%; text-align: center; }
    .month-nav-arrow-prev { order: 2; }
    .month-nav-arrow-next { order: 3; }
    .month-nav-current { order: 4; flex: 1 1 100%; text-align: center; }
}

.month-nav-picker { position: relative; }
.month-nav-label {
    font-family: Roboto; font-weight: 450; font-size: 18px; min-width: 160px; text-align: center;
    background: none; border: none; padding: 16px 8px; cursor: pointer; color: var(--color-text);
}
.month-nav-label:hover { color: var(--color-primary); }
.month-nav-dropdown {
    display: none;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px;
    background: var(--color-surface); border: 1px solid var(--color-border-input); border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    flex-direction: row; gap: 4px; padding: 8px; z-index: 20;
}
.month-nav-dropdown.open { display: flex; }
.month-nav-dropdown-col { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; min-width: 90px; }
.month-nav-dropdown-item { color: var(--color-text); padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 16px; white-space: nowrap; }
.month-nav-dropdown-item:hover { background: var(--color-accent); color: #FFF; }
.month-nav-dropdown-active { color: var(--color-primary); font-weight: 600; }


.main-content { background:#FFF; border-radius:12px; }
.main-content .content { padding: 16px; }
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; container-type: inline-size; container-name: month-nav-host; }
.header .headline { color:#000; font-family:Roboto; font-size:20px; font-weight:500; }


/* Purchases */
.purchase-list{ display:flex; flex-direction:column; margin-top:16px; border:1px solid #D6DAE8; border-radius:8px; overflow:hidden; }
.purchase-row{ display:flex; align-items:center; gap:16px; padding:12px 16px; font-family:Roboto; border-bottom:1px solid #D6DAE8; }
.purchase-row:last-child{ border-bottom:none; }
.purchase-row:hover{ background:#F4F6FB; }
.purchase-date{ color:#5D6B85; min-width:90px; }
.purchase-summary{ color:var(--color-primary); min-width:90px; }

.purchase-user{ font-weight:600; min-width:180px; }
.purchase-description{ flex:1; color:#5D6B85; }
.purchase-amount{ font-variant-numeric:tabular-nums; color:var(--color-primary); font-weight:500; }
.no-purchases{ color:#707070; font-family:Roboto; padding:20px 0; }