/* ===========================================================================
   ui-depth.css — elevation, motion and material.
   Loaded LAST so it layers over the existing sheets without editing them, and can
   be removed by deleting one <link> if it is not wanted.
   ---------------------------------------------------------------------------
   Deliberately touches only shadow, transition, transform-on-press, blur and focus.
   It does NOT change any size, margin, padding or position, because the layout is
   already tuned and a depth pass has no business moving things. That constraint is
   verified by measuring element geometry with and without this sheet.
   =========================================================================== */

:root {
  /* Elevation as a scale rather than ad-hoc shadows. Each step pairs a tight
     contact shadow with a wider ambient one, which is what stops a raised surface
     reading as a flat grey halo. */
  --elev-1: 0 1px 1px rgba(43, 43, 44, .04), 0 1px 3px rgba(43, 43, 44, .05);
  --elev-2: 0 1px 2px rgba(43, 43, 44, .05), 0 3px 8px rgba(43, 43, 44, .07);
  --elev-3: 0 2px 4px rgba(43, 43, 44, .06), 0 8px 20px rgba(43, 43, 44, .10);
  --elev-4: 0 4px 8px rgba(43, 43, 44, .08), 0 18px 44px rgba(43, 43, 44, .16);

  /* Motion. Short, and decelerating rather than linear — a control that eases out
     feels like it settled, one that moves linearly feels like it was dragged.
     --ease-spring overshoots slightly, reserved for things that appear. */
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-spring: cubic-bezier(.2, 1.15, .3, 1);

  --ring: 0 0 0 3px color-mix(in srgb, var(--saw, #9B6344) 28%, transparent);
}

@media screen {

  /* ---- Surfaces ------------------------------------------------------------
     One elevation per role, so depth reads as hierarchy: cards sit just off the
     page, menus float above them, modals above everything. */
  .settings-card, .panel, .rep-card { box-shadow: var(--elev-1); }
  .b-card { box-shadow: var(--elev-1); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
  .b-card:hover { box-shadow: var(--elev-2); }
  .gf-menu, .modal, #buildModal, #bayPickerModal { box-shadow: var(--elev-4); }

  /* ---- Material ------------------------------------------------------------
     Translucency plus blur on the layers that sit over content, so what is behind
     stays legible as context without competing. Guarded on support: without
     backdrop-filter these fall back to the opaque colour already set. */
  @supports (backdrop-filter: blur(12px)) {
    .modal-overlay { backdrop-filter: blur(14px) saturate(120%); background: color-mix(in srgb, var(--ink, #2B2B2C) 26%, transparent); }
    nav.tabbar { backdrop-filter: blur(16px) saturate(140%); }
    .gf-menu { backdrop-filter: blur(20px) saturate(150%); background: color-mix(in srgb, var(--card, #fff) 88%, transparent); }
  }

  /* ---- Appearance ----------------------------------------------------------
     Things that appear should arrive, not blink into place. Kept to ~200ms and a
     few pixels; anything more reads as sluggish on a tool used all day. */
  .modal-overlay.open > .modal,
  .modal-overlay.open > #buildModal,
  .modal-overlay.open > #bayPickerModal { animation: uiRise var(--dur-3) var(--ease-spring) both; }
  .gf-menu { animation: uiPop var(--dur-2) var(--ease-out) both; transform-origin: top left; }

  @keyframes uiRise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes uiPop  { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }

  /* ---- Press feedback ------------------------------------------------------
     Scoped to buttons only. Transforms create a containing block for absolutely
     positioned descendants, so applying this to layout containers — shop bays,
     gantt rows, tracks — would move their children. Buttons have no such
     descendants, and the effect is momentary. */
  .btn, .tab, .lr-tab, .g-mode-btn, .print-pick-btn, .sbx-rate-btn, .gf-field-btn, .pg-seg {
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out);
  }
  .btn:active, .tab:active, .lr-tab:active, .g-mode-btn:active,
  .print-pick-btn:active, .sbx-rate-btn:active, .gf-field-btn:active { transform: scale(.97); }
  .btn:hover { box-shadow: var(--elev-1); }
  .btn.primary:hover { box-shadow: var(--elev-2); }

  /* ---- Inputs -------------------------------------------------------------- */
  input, select, textarea {
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
                background var(--dur-1) var(--ease-out);
  }

  /* ---- Focus --------------------------------------------------------------
     :focus-visible only, so a mouse click does not leave a ring behind but keyboard
     navigation is always obvious. This is an accessibility fix as much as a visual
     one — the tool had no consistent focus treatment. */
  :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--ring); }

  /* ---- Sticky headers -----------------------------------------------------
     A sticky header with no shadow looks pasted on when rows scroll under it. */
  .hours-grid thead th, .sbx-table thead th, .data-table thead th { box-shadow: 0 1px 0 var(--line-strong, #CFC7BB); }

  /* ---- Scrollbars ---------------------------------------------------------
     Thin and only visible against the surface they belong to. */
  .g-scroll, .hours-grid-wrap, .sbx-wrap, .gf-list, .lr-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong, #CFC7BB) transparent;
  }
  .g-scroll::-webkit-scrollbar, .hours-grid-wrap::-webkit-scrollbar,
  .sbx-wrap::-webkit-scrollbar, .gf-list::-webkit-scrollbar, .lr-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
  .g-scroll::-webkit-scrollbar-thumb, .hours-grid-wrap::-webkit-scrollbar-thumb,
  .sbx-wrap::-webkit-scrollbar-thumb, .gf-list::-webkit-scrollbar-thumb, .lr-table-wrap::-webkit-scrollbar-thumb {
    background: var(--line-strong, #CFC7BB); border-radius: 6px; border: 3px solid transparent; background-clip: content-box;
  }
  .g-scroll::-webkit-scrollbar-thumb:hover, .hours-grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-faint, #8E877E); background-clip: content-box; }

  /* ---- Row hover ----------------------------------------------------------
     Background only. Never transform: these rows contain absolutely positioned
     bars and markers whose coordinates are computed in JS. */
  .data-table tbody tr, .sbx-row { transition: background var(--dur-1) var(--ease-out); }
}

/* ---------------------------------------------------------------------------
   Motion is a preference, not a given. Everything above degrades to instant.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:active, .tab:active, .lr-tab:active, .g-mode-btn:active,
  .print-pick-btn:active, .sbx-rate-btn:active, .gf-field-btn:active { transform: none; }
}

/* Print carries no depth: shadows and blur waste ink and can render as grey boxes. */
@media print {
  * { box-shadow: none !important; backdrop-filter: none !important; animation: none !important; }
}