/* Presencia — app layer over the Nocturne tokens. Only what inline styles
   cannot express: status colors, responsive layout, hover/pseudo states. */

/* Light, natural retheme: warm off-white grounds, forest-green accent, no violet.
   Overrides the token sheet loaded before this file. */
:root {
  --color-bg: #f4f3ef;
  --color-surface: #ffffff;
  --color-text: #1f2320;
  --color-accent: #3f6b54;
  --color-accent-2: #3f6b54;
  --color-divider: color-mix(in srgb, #1f2320 12%, transparent);

  --color-accent-100: #eaf1ec;
  --color-accent-200: #d4e3d9;
  --color-accent-300: #b0cbbb;
  --color-accent-400: #7fa993;
  --color-accent-500: #5c8a72;
  --color-accent-600: #3f6b54;
  --color-accent-700: #325742;
  --color-accent-800: #274233;
  --color-accent-900: #1b2e24;

  --color-accent-2-100: #eaf1ec;
  --color-accent-2-200: #d4e3d9;
  --color-accent-2-300: #b0cbbb;
  --color-accent-2-400: #7fa993;
  --color-accent-2-500: #5c8a72;
  --color-accent-2-600: #3f6b54;
  --color-accent-2-700: #325742;
  --color-accent-2-800: #274233;
  --color-accent-2-900: #1b2e24;

  --color-neutral-100: #f8f8f6;
  --color-neutral-200: #ededea;
  --color-neutral-300: #dcdcd7;
  --color-neutral-400: #c2c2bc;
  --color-neutral-500: #a0a09a;
  --color-neutral-600: #7d7d77;
  --color-neutral-700: #5c5c57;
  --color-neutral-800: #40403c;
  --color-neutral-900: #2a2a27;

  --shadow-sm: 0 0 0 1px rgba(31, 35, 32, 0.09);
  --shadow-md: 0 1px 2px rgba(31, 35, 32, 0.06), 0 6px 16px rgba(31, 35, 32, 0.08);
  --shadow-lg: 0 0 0 1px rgba(31, 35, 32, 0.06), 0 14px 36px rgba(31, 35, 32, 0.14);
}

.tag-accent, .tag-accent-2 { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.table th, .text-muted, .card-meta, figcaption, .field > label { color: var(--color-neutral-700); }

.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { border-right: 1px solid var(--color-divider); padding: 14px 12px 24px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.side-group-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); padding: 0 10px 6px; }
.navitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-neutral-800); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.navitem:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.navitem[aria-current="page"] { background: var(--color-accent-100); color: var(--color-accent-700); box-shadow: inset 2px 0 0 var(--color-accent); }
.navitem .ni-badge { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--color-accent-600); color: #fff; }
.navitem .ni-ico { width: 18px; text-align: center; opacity: .85; font-size: 15px; }

.content { padding: 22px 28px 72px; max-width: 1120px; min-width: 0; }
.content .card:has(> .table), .content .card:has(> table.table) { overflow-x: auto; }
.content table.table { min-width: 560px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); padding-bottom: 6px; }
.day { background: var(--color-surface); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 7%, transparent); }
.day.is-blank { background: transparent; box-shadow: none; }
.day.is-weekend { background: var(--color-neutral-100); }
.day.is-today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.halves { display: flex; gap: 4px; min-width: 0; }
.half-lbl-long { display: none; }
.pv-list .half-lbl-long { display: inline; }
.pv-list .half-lbl-short { display: none; }
.half { flex: 1 1 0; min-width: 0; overflow: hidden; min-height: 40px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--color-text) 14%, transparent); background: transparent; color: var(--color-neutral-600); font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .04em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: transform .08s ease, filter .12s ease; }
.half:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(31,35,32,.12); }
.half:disabled { cursor: default; }
.half.st-present { border-style: solid; border-color: transparent; background: #e7f0e9; color: #2f6b45; }
.half.st-absent { border-style: solid; border-color: transparent; background: #fbeae6; color: #a8412c; }
.half.st-conge { border-style: solid; border-color: transparent; background: #fbf1e0; color: #8a5c14; }
.half.st-rtt { border-style: solid; border-color: transparent; background: #e6eef3; color: #33607f; }

/* Compact direction — 1b */
.pv-dense .day { padding: 4px; gap: 3px; }
.pv-dense .halves { flex-direction: column; gap: 2px; }
.pv-dense .half { min-height: 17px; font-size: 9px; }

/* List direction — 1c */
.pv-list .cal-head { display: none; }
.pv-list .cal-grid { display: flex; flex-direction: column; gap: 4px; }
.pv-list .day { flex-direction: row; align-items: center; gap: 12px; padding: 7px 10px; }
.pv-list .day.is-blank { display: none; }
.pv-list .halves { flex: 1; max-width: 440px; }
.pv-list .half { min-height: 44px; font-size: 11px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.st-present { background: #4b8a63; }
.dot.st-absent { background: #c0563c; }
.dot.st-conge { background: #b8862f; }
.dot.st-rtt { background: #4a7a9b; }
.dot.st-none { background: var(--color-neutral-400); }

.pop { position: fixed; z-index: 90; width: 214px; padding: 6px; border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.pop-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.pop-opt:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.pop-opt .kbd { margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 4px; color: var(--color-neutral-700); box-shadow: inset 0 0 0 1px var(--color-neutral-300); }

.btn, .chipbtn { white-space: nowrap; }
.chipbtn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-neutral-800); font: inherit; font-size: 13px; cursor: pointer; }
.chipbtn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.chipbtn[aria-pressed="true"] { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); border-color: var(--color-accent); }

.tile { background: var(--color-surface); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 7%, transparent); }
.rowbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 7%, transparent); }
.rowbtn:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }

.mobile-only { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .content { padding: 14px 14px 96px; }
  .mobile-only { display: flex; }
  .cal-head { display: none; }
  .cal-grid { display: flex; flex-direction: column; gap: 4px; }
  .day { flex-direction: row; align-items: center; gap: 12px; padding: 7px 10px; }
  .day.is-blank { display: none; }
  .halves { flex: 1; }
  .half-lbl-long { display: inline; }
  .half-lbl-short { display: none; }
  .half { min-height: 44px; font-size: 11px; }
  .pv-dense .halves, .pv-dense .half { flex-direction: row; min-height: 44px; font-size: 11px; }
}