/* ================================================================
   DTTASA PORTAL — SHARED PREMIUM UI LAYER
   Auto-injected on all authenticated app pages by build.js.
   Uses existing CSS custom properties from each page's :root.
   Does NOT override layout properties (padding, border-radius, width).
   ================================================================ */

/* ── GLOBAL TOUCH + INTERACTION ── */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}
a, button, [onclick], .mi, .btn, .nav-group-hdr,
.hdr-icon-btn, .mhr-tab, .nav-item,
input, select, textarea {
  touch-action: manipulation;
}
.mi, .nav-group-hdr, .nav-group-lbl, .nav-item {
  -webkit-user-select: none;
  user-select: none;
}

/* ── ENHANCED GLASSMORPHISM (only backdrop + shadow — no layout) ── */
.glass {
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 8px 32px rgba(0,0,0,.24),
    0 2px 6px rgba(0,0,0,.08);
  transition:
    border-color .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s cubic-bezier(.16,1,.3,1),
    transform .35s cubic-bezier(.16,1,.3,1);
}
.glass-gold {
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(212,175,55,.12),
    0 6px 24px rgba(212,175,55,.06),
    0 8px 32px rgba(0,0,0,.18);
}
.glass-green {
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(67,177,75,.12),
    0 6px 24px rgba(67,177,75,.06),
    0 8px 32px rgba(0,0,0,.18);
}

/* ── PREMIUM ANIMATION KEYFRAMES ── */
@keyframes suiSlideUp {
  from { opacity:0; transform:translateY(24px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes suiSlideDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes suiScaleIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes suiGlassReveal {
  from { opacity:0; transform:translateY(28px) scale(.95); filter:blur(6px); }
  to   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes suiBorderPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%  { box-shadow: 0 0 16px 0 rgba(212,175,55,.18); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
@keyframes suiShimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes suiFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes suiSubtleFloat {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-2px); }
}

/* ── SKELETON SHIMMER UPGRADE ── */
.skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,.04) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: suiShimmer 1.8s ease-in-out infinite !important;
}

/* ── BUTTON PHYSICS ── */
.btn {
  transition:
    background .25s cubic-bezier(.16,1,.3,1),
    color .25s cubic-bezier(.16,1,.3,1),
    border-color .25s cubic-bezier(.16,1,.3,1),
    box-shadow .25s cubic-bezier(.16,1,.3,1),
    transform .12s cubic-bezier(.16,1,.3,1);
}
.btn:active {
  transform: scale(.96) !important;
  transition-duration: .06s !important;
}
.hdr-icon-btn:active {
  transform: scale(.9);
  transition: transform .06s;
}
.btn-gold:hover {
  box-shadow: 0 6px 24px rgba(212,175,55,.25), 0 2px 6px rgba(212,175,55,.12);
}
.btn-green:hover {
  box-shadow: 0 6px 24px rgba(67,177,75,.25), 0 2px 6px rgba(67,177,75,.12);
}
.btn-red:hover {
  box-shadow: 0 6px 24px rgba(255,72,72,.2), 0 2px 6px rgba(255,72,72,.1);
}

/* ── HEADER COMPACTION ON SCROLL (toggled by mobile-ui.js) ── */
body.hdr-compact #hdr,
body.hdr-compact #hh-hdr,
body.hdr-compact #ops-header,
body.hdr-compact #sac-hdr,
body.hdr-compact #lv-hdr,
body.hdr-compact #ac-hdr,
body.hdr-compact #aa-hdr,
body.hdr-compact #pl-hdr,
body.hdr-compact #cm-header {
  background: rgba(4,8,4,.96) !important;
  backdrop-filter: blur(60px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── APPLE-STYLE SMOOTH SCROLL ── */
.sb-inner, .sidebar-inner,
#workspace, #main, #hh-main, #ops-main-wrap, #sac-main, #lv-main,
.mhr-wrap, .rota-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,.2);
}

/* ── TOAST GLASS ENHANCEMENT ── */
#toast {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ── FOCUS STATES (accessibility + premium ring) ── */
.btn:focus-visible,
.mi:focus-visible,
.hdr-icon-btn:focus-visible,
.nav-item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold, #f0c832);
  outline-offset: 2px;
}

/* ── SMOOTH IMAGE LOADING ── */
img { transition: opacity .25s ease; }

/* ================================================================
   MOBILE — 820px and below
   ================================================================ */
@media (max-width: 820px) {

  /* iOS input zoom prevention (font-size ≥16px) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Touch targets ≥44px */
  .btn, .mi, .nav-item,
  .hdr-icon-btn, .nav-group-hdr,
  .mhr-tab {
    min-height: 44px;
  }
  .btn-sm { min-height: 36px; }

  /* Header height harmonisation */
  #hdr, #hh-hdr, #ops-header, #sac-hdr,
  #lv-hdr, #ac-hdr, #aa-hdr, #cm-header {
    transition: background .3s, box-shadow .3s;
  }

  /* Page-pill: icon only */
  .page-pill span,
  .page-title-pill span {
    display: none;
  }
  .page-pill, .page-title-pill {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Notification dropdowns: full-width */
  .hdr-notif-dd, .notif-dd, .sys-notif-dd {
    width: calc(100vw - 20px) !important;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ================================================================
   MOBILE — 640px and below
   ================================================================ */
@media (max-width: 640px) {

  /* Modals: near-full-width */
  [class*="modal-box"],
  [class*="modal-content"],
  .wz-box {
    max-width: calc(100vw - 24px) !important;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 14px !important;
  }

  /* Tables: allow horizontal scroll */
  .rota-scroll, .dtbl-wrap, [style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   MOBILE — 540px and below
   ================================================================ */
@media (max-width: 540px) {

  /* Back button: icon only */
  .hdr-back-btn span,
  .back-btn span,
  .hdr-back-label {
    display: none;
  }
  .hdr-back-btn, .back-btn {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* User name hidden */
  .hdr-user-chip span:not(.hdr-user-av),
  #hdr-name {
    display: none;
  }
}

/* ================================================================
   SAFE AREAS (notched / Dynamic Island devices)
   ================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #workspace, #main, #hh-main, #lv-main, #sac-main,
  #ops-main-wrap, .mhr-wrap {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .skel { animation: none !important; }
}

/* ================================================================
   LIGHT + BROWSER THEME ADJUSTMENTS
   ================================================================ */
[data-theme="light"] .glass,
[data-theme="browser"] .glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 16px rgba(0,0,0,.06),
    0 1px 3px rgba(0,0,0,.03) !important;
}
[data-theme="light"] .skel,
[data-theme="browser"] .skel {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.03) 25%,
    rgba(0,0,0,.08) 50%,
    rgba(0,0,0,.03) 75%
  ) !important;
}
[data-theme="light"] body.hdr-compact #hdr,
[data-theme="light"] body.hdr-compact [id$="-hdr"],
[data-theme="light"] body.hdr-compact #ops-header,
[data-theme="light"] body.hdr-compact #cm-header {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04) !important;
}
[data-theme="browser"] body.hdr-compact #hdr,
[data-theme="browser"] body.hdr-compact [id$="-hdr"],
[data-theme="browser"] body.hdr-compact #ops-header,
[data-theme="browser"] body.hdr-compact #cm-header {
  background: rgba(236,236,236,.98) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.03) !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb,
[data-theme="browser"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.08);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
[data-theme="browser"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.15);
}