/* Shared cream and forest palette, matching the sign-in screen. */
:root {
  --bg: #eeeede;
  --card: rgba(255, 251, 239, .93);
  --card-solid: #fffbef;
  --fill: rgba(81, 102, 75, .08);
  --fill2: #e1e3d7;
  --sep: rgba(81, 102, 75, .18);
  --text: #243e31;
  --text2: #596650;
  --text3: #6c765f;
  --blue: #315d49;
  --blue2: #3d6e56;
  --green: #3d7652;
  --orange: #946724;
  --red: #a04432;
  --surface: linear-gradient(150deg, rgba(255, 251, 239, .98), rgba(244, 241, 224, .97));
  --surface-solid: #fffbef;
  --surface-soft: #eeeedf;
  --surface-green: #e5ebdb;
  --edge: #cdd0ba;
  --shadow: 0 8px 25px rgba(36, 62, 49, .07), 0 1px 2px rgba(36, 62, 49, .05);
  --accent-gradient: linear-gradient(145deg, #396b53, #274f3d);
  --r: 18px;
  color-scheme: light;
  accent-color: var(--blue);
}

body { background: var(--bg); }
.blobs-bg { display: none; }
#screen-main { isolation: isolate; }
#screen-main::before {
  content: '';
  position: fixed;
  inset: -4px;
  z-index: -1;
  background:
    linear-gradient(145deg, rgba(239, 239, 222, .92), rgba(235, 236, 216, .85)),
    url('./assets/login-forest-desktop.webp') center / cover no-repeat;
  filter: blur(2px);
  pointer-events: none;
}
.navbar {
  background: rgba(249, 247, 231, .92);
  border-bottom-color: var(--sep);
  box-shadow: 0 2px 16px rgba(36, 62, 49, .04);
}
.navbar-inner { max-width: 1100px; }
.nav-avatar { background: var(--accent-gradient); box-shadow: 0 2px 8px rgba(36, 62, 49, .20); color: #fff8e7; }
.btn-nav-icon, .article-clear-btn { background: var(--fill); }

.page-tabs {
  background: rgba(255, 251, 239, .90);
  border-color: var(--edge);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.page-tab { transition: color .15s, background .15s; }
.page-tab.active { background: var(--accent-gradient); color: #fff8e7; box-shadow: 0 3px 12px rgba(36, 62, 49, .20); }
.page-tab:hover:not(.active) { background: var(--fill); color: var(--text); }

.g-card, .article-trigger, .article-dropdown, .pending-list, .op-card,
.history-day, .report-stat, .payroll-employee, .employee-row, .shift-import-panel {
  background: var(--surface);
  border-color: var(--edge);
  box-shadow: var(--shadow);
}
.article-trigger:active, .article-option:active, .article-option:hover { background: var(--surface-green); }
.article-wrap.open .article-trigger { box-shadow: var(--shadow); }
.article-dropdown { box-shadow: 0 18px 44px rgba(36, 62, 49, .18); }
.article-search-row, .article-list, .article-option { background: var(--surface-solid); }
.article-search-row { background: var(--surface-soft); border-bottom-color: var(--sep); }
.article-retry-btn { background: var(--surface-green); }
.spinner-sm { border-color: rgba(49, 93, 73, .2); border-top-color: var(--blue); }
.g-card-row:focus-within, .glass-group-row:focus-within { background: rgba(49, 93, 73, .06); }
.op-card.selected {
  border-color: var(--blue);
  background: var(--surface-green);
  box-shadow: 0 0 0 1px rgba(49, 93, 73, .16), 0 5px 15px rgba(36, 62, 49, .12);
}
.op-card.selected::before { background: linear-gradient(135deg, rgba(49, 93, 73, .08), transparent 65%); }
.op-check { box-shadow: 0 2px 8px rgba(36, 62, 49, .24); }

.btn-primary, .btn-send-all {
  background: var(--accent-gradient);
  color: #fff8e7;
  box-shadow: 0 5px 18px rgba(36, 62, 49, .24), 0 1px 3px rgba(36, 62, 49, .16);
}
.btn-primary:active, .btn-send-all:active { box-shadow: 0 2px 10px rgba(36, 62, 49, .20); }
.btn-primary.editing { background: linear-gradient(145deg, #9b773c, #805d29); box-shadow: 0 5px 16px rgba(128, 93, 41, .20); }
.btn-primary:disabled, .btn-send-all:disabled { background: var(--fill2); color: #53634f; box-shadow: none; }
#btn-submit:not(:disabled):not(.editing) {
  background: linear-gradient(145deg, #946124, #78491c);
  box-shadow: 0 5px 18px rgba(128, 83, 33, .24), 0 1px 3px rgba(128, 83, 33, .16);
}
.btn-cancel-edit, .pending-item-edit { background: #f0e7d2; color: #805d29; border-color: #d7c298; }
.pending-item.editing { background: #f4ecd9; }
.pending-item-repeat { background: #e6ecdf; color: var(--blue); }
.pending-item-repeat:active { background: #d5e0cc; }
.pending-item-del { background: #f3e4d9; }
.pending-item-del:active { background: #ead0c4; }
.pending-item-edit:active { background: #e9d9b9; }
.pending-count { background: var(--blue); color: #fff8e7; }
.queue-day { background: var(--surface-green); }
.queue-status { color: #785723; }
.btn-send-day { background: var(--surface-solid); border-color: #b7c4a9; }

.report-toolbar input, .report-toolbar select, .report-btn {
  background: var(--surface-solid);
  border-color: #bdc4ad;
  color: var(--text);
}
.report-btn { color: var(--blue); }
.report-btn:hover:not(:disabled), .btn-send-day:hover:not(:disabled) { background: var(--surface-green); border-color: #91a383; }
.report-toolbar input[type='checkbox'] {
  -webkit-appearance: checkbox;
  appearance: auto;
  accent-color: var(--blue);
  border-radius: 4px;
}
.report-toolbar input:focus, .report-toolbar select:focus {
  border-color: #789376;
  box-shadow: 0 0 0 3px rgba(49, 93, 73, .12);
}
button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid #9c7737;
  outline-offset: 3px;
}
.report-btn:disabled { opacity: .62; }
.status-confirmed { background: #e5eddc; color: #315d3e; }
.status-pending { background: #f4e6c8; color: #785723; }
.status-uncertain { background: #e8e8d6; color: #596344; }
.report-error, .error-box { background: #f7e8df; border-color: #d9a48a; color: #8d3827; }
.payroll-warning, .archive-badge { color: #785723; }
.payroll-employee[open] > summary { background: var(--surface-green); }
.payroll-employee > summary:hover { background: rgba(229, 235, 219, .6); }
.shift-editor { background: #e9eddd; border-color: #becbae; }
.shift-cell:hover, .shift-cell:focus-visible { outline: 2px solid #789376; background: #dfe8d3; }
.shift-cell .delta { color: var(--blue); }
.shift-cell .fact-missing { color: #785723; }
.shift-cell .delta-normal, .import-normal { color: #315d3e; }
.shift-cell .delta-exceeded, .import-review { color: #8b4e20; }
.shift-import-panel progress { accent-color: var(--blue); }

.timesheet-wrap { background: var(--surface-solid); border-color: #aab89e; box-shadow: var(--shadow); }
.timesheet-period { background: var(--accent-gradient); color: #fff8e7; padding: 12px 16px; }
.timesheet th, .timesheet td { border-color: #d4d9c4; }
.timesheet thead th, .timesheet thead th.name-col { background: #eeefdc; }
.timesheet th.name-col { background: #e3e9d6; }
.timesheet thead .weekend { background: #dce5cc; }
.timesheet td.weekend { background: #f0f1e4; }
.timesheet .total-col, .timesheet thead .total-col { background: #e3ebd7; }
.timesheet tfoot th, .timesheet tfoot td { background: #e6ebd8; }
.timesheet .no-hours { color: #7b856c; }
.timesheet-scroll::-webkit-scrollbar-thumb { background: #a8b596; }
.import-table th { background: #e4ead7; }

.toast-success { background: var(--accent-gradient); box-shadow: 0 8px 28px rgba(36, 62, 49, .28); }
.toast-error { background: linear-gradient(145deg, #ac5940, #8d3827); box-shadow: 0 8px 28px rgba(141, 56, 39, .24); }
.toast-info { background: var(--surface-solid); border-color: var(--edge); box-shadow: 0 8px 28px rgba(36, 62, 49, .16); }
#screen-login .btn-primary .spinner, .btn-primary .spinner, .btn-send-all .spinner {
  border-color: rgba(255, 248, 231, .3);
  border-top-color: #fff8e7;
}

@media (hover: hover) {
  .btn-primary:hover:not(:disabled):not(.editing), .btn-send-all:hover:not(:disabled) {
    background: linear-gradient(145deg, #42785d, #315d49);
  }
  #btn-submit:hover:not(:disabled):not(.editing) {
    background: linear-gradient(145deg, #9a6427, #82511f);
  }
}
@media (max-width: 600px) {
  #screen-main::before {
    background:
      linear-gradient(180deg, rgba(239, 239, 222, .93), rgba(235, 236, 216, .88)),
      url('./assets/login-forest-mobile.webp') center / cover no-repeat;
  }
  .report-toolbar { align-items: stretch; }
  .report-toolbar > label:not(.check-label) { flex: 1 1 145px; min-width: 0; }
  .report-toolbar .check-label { flex: 1 0 100%; }
  .page-tabs { scrollbar-width: thin; scrollbar-color: #a8b596 transparent; }
  .page-tabs::-webkit-scrollbar { height: 3px; }
  .page-tabs::-webkit-scrollbar-thumb { border-radius: 4px; background: #a8b596; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}