:root {
    --ink: #111111;
    --muted: #716d5e;
    --paper: #fff6d8;
    --white: #fffff3;
    --green: #f6d77a;
    --green-2: #e8c24f;
    --gold: #f6d77a;
    --line: #e7dcba;
    --danger: #a83d32;
    --shadow: 0 20px 60px rgba(42, 34, 4, .09);
}

.app-body,
.management-content { background: #fffff3; }

.eyebrow,
.module-link,
.back-link,
.actions a,
.actions button { color: #7a5d00; }

.button-primary {
    background: #f5d36f;
    color: #111;
    border: 2px solid #111;
    box-shadow: 3px 3px 0 #111;
}
.button-primary:hover { background: #f8df91; color: #111; transform: translate(1px, 1px); box-shadow: 2px 2px 0 #111; }
.button-secondary,
.button-quiet { background: #fffff3; border: 1px solid #cfc59b; color: #111; }

.module-card,
.form-card,
.table-card { background: #fffff3; border-color: #111; }
.module-card { border-width: 2px; box-shadow: 5px 5px 0 #f6d77a; }
.module-card.active:hover { box-shadow: 7px 7px 0 #f6d77a; }

th { background: #f9e6a8; color: #111; border-bottom: 2px solid #111; }
td { border-bottom-color: #e8e0bd; }

.filter-bar input,
.filter-bar select,
.form-control { background: #fffff3; border-color: #bcb287; }
.filter-bar input:focus,
.filter-bar select:focus,
.form-control:focus { outline: 2px solid #f6d77a; outline-offset: 1px; border-color: #111; }

.message { background: #fff0bd; color: #4b3900; border-left: 4px solid #f6d77a; }

.login-page { background: #f6d77a; }
.login-card { background: #fffff3; border: 2px solid #111; box-shadow: 8px 8px 0 #111; }
.login-logo { display: block; width: 150px; height: 150px; margin: 0 auto 22px; border-radius: 50%; object-fit: cover; mix-blend-mode: multiply; }
.login-card h1 { text-align: center; }
.login-card input { background: #fffff3; border-color: #bcb287; }

.button-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.menu-filter-bar select { min-width: 210px; }
.menu-overview { display: flex; justify-content: space-between; gap: 20px; margin: 4px 0 18px; color: #716d5e; font-size: 13px; }
.menu-overview p { margin: 0; }
.menu-overview strong { color: #111; }
.menu-overview span, .menu-price span { color: #716d5e; }
.menu-price { white-space: nowrap; font-weight: 800; }
.menu-table-card td:first-child { min-width: 270px; }
.menu-category-section { margin-top: 34px; }
.menu-category-section:first-of-type { margin-top: 0; }
.menu-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 3px 10px; }
.menu-category-heading h2 { margin: 0; font: 700 27px/1.1 Georgia, serif; }
.menu-category-heading .eyebrow { margin: 0 0 4px; }
.menu-category-heading > span { padding: 4px 9px; border: 1px solid #cfc59b; border-radius: 999px; color: #716d5e; font-size: 12px; font-weight: 800; white-space: nowrap; }
.checkbox-control { width: 19px; height: 19px; margin: 5px 0 0; accent-color: #e8c24f; }

.chip-code { padding: 3px 7px; border-radius: 6px; background: #f3edda; font: 700 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.attendance-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin: -6px 0 22px; }
.attendance-summary > div { display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid #111; border-radius: 12px; background: #fffff3; box-shadow: 3px 3px 0 #f6d77a; }
.attendance-summary strong { font: 700 30px/1 Georgia, serif; }
.attendance-summary span { margin-top: 7px; color: #716d5e; font-size: 12px; font-weight: 800; }
.attendance-filter-bar label { display: flex; align-items: center; gap: 6px; color: #716d5e; font-size: 13px; font-weight: 700; }
.attendance-filter-bar input[type="date"] { width: 145px; padding: 10px; border: 1px solid #bcb287; border-radius: 9px; background: #fffff3; font: inherit; }
.status-clock-in { background: #dcefe2; color: #1d6538; }
.status-clock-out { background: #eee9dc; color: #675c40; }
.attendance-month-filter-bar { align-items: end; }
.attendance-month-filter-bar label { display: flex; flex-direction: column; gap: 5px; color: #716d5e; font-size: 13px; font-weight: 700; }
.attendance-month-filter-bar input[type="month"] { padding: 10px; border: 1px solid #bcb287; border-radius: 9px; background: #fffff3; font: inherit; }
.attendance-month-title { margin: 4px 0 13px; font: 700 25px/1.1 Georgia, serif; }
.attendance-monthly-card { box-shadow: 4px 4px 0 #f6d77a; }
.attendance-monthly-table { min-width: 2650px; font-size: 12px; }
.attendance-monthly-table th, .attendance-monthly-table td { padding: 9px 7px; text-align: center; }
.attendance-worker-column { position: sticky; left: 0; z-index: 2; min-width: 175px; text-align: left !important; background: #fffff3; box-shadow: 2px 0 0 #e7dcba; }
.attendance-monthly-table thead .attendance-worker-column { z-index: 4; background: #f9e6a8; }
.attendance-total-column { min-width: 85px; background: #fff8dd; white-space: nowrap; }
.attendance-day-heading { min-width: 75px; white-space: nowrap; }
.attendance-day-heading strong, .attendance-day-heading small { display: block; }
.attendance-day-heading small { margin-top: 2px; color: #716d5e; }
.attendance-day-heading.weekend { background: #f1df9c; }
.attendance-day-cell { min-width: 75px; vertical-align: top; }
.attendance-duration { display: block; white-space: nowrap; }
.attendance-duration { color: #1d6538; font-size: 12px; }
.attendance-empty { color: #b9b092; }
.attendance-month-note { margin: 14px 2px; color: #716d5e; font-size: 13px; }

.invoice-filter-bar label { display: flex; align-items: center; gap: 6px; color: #716d5e; font-size: 13px; font-weight: 700; }
.invoice-filter-bar input[type="date"] { width: 145px; padding: 10px; border: 1px solid #bcb287; border-radius: 9px; background: #fffff3; font: inherit; }
.invoice-overview { margin: 4px 0 14px; color: #716d5e; font-size: 13px; }
.invoice-overview strong { color: #111; }
.invoice-actions-cell { min-width: 116px; }
.invoice-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.invoice-details { position: relative; text-align: left; }
.invoice-details summary { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #111; cursor: pointer; list-style: none; }
.invoice-details summary::-webkit-details-marker { display: none; }
.invoice-details summary svg, .action-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.invoice-details summary:hover, .action-icon:hover { color: #7a5d00; }
.action-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #111; }
.action-icon-danger { color: #a83d32; }
.action-icon-danger:hover { color: #7e211b; }
.invoice-detail-panel { min-width: 650px; margin-top: 12px; padding: 17px; border: 1px solid #111; background: #fff9e6; box-shadow: 4px 4px 0 #f6d77a; }
.invoice-detail-panel p { margin: 4px 0; }
.invoice-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; }
.invoice-pdf-links { display: flex; gap: 14px; margin: 14px 0; font-weight: 800; }
.invoice-pdf-links a { color: #7a5d00; }
.invoice-lines-wrap { overflow-x: auto; }
.invoice-lines-table { min-width: 620px; border: 1px solid #cfc59b; font-size: 13px; }
.invoice-lines-table th, .invoice-lines-table td { padding: 9px 10px; }
.invoice-lines-table tfoot td { border-top: 2px solid #111; background: #f9e6a8; }
.hash-note { display: block; margin-top: 14px; color: #716d5e; overflow-wrap: anywhere; }
.danger-action { color: #a83d32 !important; }
.invoice-upload-card { max-width: 720px; }
.invoice-form h2 { margin: 0 0 18px; font: 700 25px/1.1 Georgia, serif; }
.invoice-lines-heading { margin-top: 38px !important; padding-top: 26px; border-top: 2px solid #111; }
.invoice-edit-line { margin-top: 16px; padding: 17px; border: 1px solid #cfc59b; border-radius: 10px; background: #fffdf4; }
.line-form-grid { grid-template-columns: 70px 1fr 2fr 85px 105px 125px 120px 80px; gap: 10px; align-items: end; }
.line-form-grid .form-field label { font-size: 11px; }
.line-form-grid .form-control { min-width: 0; width: 100%; padding: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
    .line-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .invoice-detail-panel { min-width: 520px; }
}

@media (max-width: 800px) {
    .button-group { justify-content: flex-start; }
    .menu-filter-bar select { flex: 1; min-width: 180px; }
    .menu-overview { display: block; }
    .menu-overview p + p { margin-top: 5px; }
    .menu-category-heading h2 { font-size: 23px; }
    .invoice-filter-bar label { width: calc(50% - 6px); justify-content: space-between; }
    .invoice-filter-bar input[type="date"] { width: 130px; }
    .invoice-detail-panel { min-width: 460px; }
    .invoice-detail-grid { grid-template-columns: 1fr; }
    .line-form-grid { grid-template-columns: 1fr 1fr; }
    .attendance-summary { grid-template-columns: 1fr 1fr; }
    .attendance-filter-bar label { width: calc(50% - 6px); justify-content: space-between; }
    .attendance-filter-bar input[type="date"] { width: 130px; }
    .attendance-month-filter-bar label { width: auto; }
}