/* ================================================================
   Promon Portal — Liquid Glass presentation layer
   Loaded after app.css, theme.css, and page-local styles.
   This file is intentionally presentation-only and theme-aware.
   ================================================================ */

:root {
  /* Promon-blue light palette: crisp text over cool, luminous glass. */
  --color-accent: #00689d;
  --color-accent-2: #0b83c6;
  --color-accent-rgb: 0, 104, 157;
  --color-text-primary: #081d31;
  --color-text-secondary: #263f57;
  --color-text-muted: #526b81;
  --color-border: #c7dceb;
  --color-success: #047857;
  --color-warning: #944200;
  --color-danger: #ad1f32;
  --glass-page-a: #e6f5ff;
  --glass-page-b: #f7fbff;
  --glass-page-c: #eaf1ff;
  --glass-surface: rgba(255, 255, 255, 0.74);
  --glass-surface-soft: rgba(255, 255, 255, 0.54);
  --glass-surface-strong: rgba(255, 255, 255, 0.90);
  --glass-surface-solid: #f8fcff;
  --glass-outline: rgba(63, 117, 158, 0.25);
  --glass-highlight: rgba(255, 255, 255, 0.94);
  --glass-shadow: 0 22px 60px rgba(17, 73, 112, 0.16), inset 0 1px 0 var(--glass-highlight);
  --glass-shadow-soft: 0 10px 32px rgba(17, 73, 112, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  --glass-shadow-hover: 0 26px 64px rgba(17, 73, 112, 0.21), 0 0 30px rgba(var(--color-accent-rgb), 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --glass-input: rgba(255, 255, 255, 0.76);
  --glass-overlay: rgba(15, 23, 42, 0.42);
  --glass-popup-surface: rgba(247, 252, 255, 0.91);
  --glass-popup-band: rgba(225, 241, 252, 0.68);
  --glass-popup-outline: rgba(42, 132, 190, 0.32);
  --glass-blur: blur(20px) saturate(155%);
  --glass-blur-soft: blur(12px) saturate(135%);
  --glass-radius-sm: 14px;
  --glass-radius: 18px;
  --glass-radius-lg: 24px;
  --glass-radius-xl: 30px;
  --glass-transition-fast: 180ms ease;
  --glass-transition: 260ms cubic-bezier(.2, .8, .2, 1);
  --glass-cyan: #16b7d8;
  --glass-blue: #00689d;
  --glass-violet: #3f6fe5;
}

:root[data-theme="dark"] {
  /* Information-first Promon dark: charcoal foundations with high-contrast data text. */
  --color-bg: #05070b;
  --color-surface: #101720;
  --color-surface-hover: #192433;
  --color-accent: #36aeea;
  --color-accent-2: #167fbd;
  --color-accent-rgb: 54, 174, 234;
  --color-text-primary: #ffffff;
  --color-text-secondary: #e1e9f2;
  --color-text-muted: #b3c2d2;
  --color-border: #35506a;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-text-strong: #ffffff;
  --color-text-faint: #95a9bd;
  --color-text: var(--color-text-primary);
  --color-muted: var(--color-text-muted);
  --color-bg-secondary: #162131;
  --color-bg-hover: #1d2b3e;
  --glass-page-a: #05070b;
  --glass-page-b: #090c12;
  --glass-page-c: #0b1018;
  --glass-surface: rgba(20, 29, 40, 0.90);
  --glass-surface-soft: rgba(28, 40, 55, 0.76);
  --glass-surface-strong: rgba(15, 22, 31, 0.96);
  --glass-surface-solid: #141d28;
  --glass-outline: rgba(119, 179, 220, 0.34);
  --glass-highlight: rgba(220, 241, 255, 0.11);
  --glass-shadow: 0 24px 66px rgba(0, 0, 0, 0.58), inset 0 1px 0 var(--glass-highlight);
  --glass-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(211, 235, 250, 0.06);
  --glass-shadow-hover: 0 28px 72px rgba(0, 0, 0, 0.64), 0 0 26px rgba(var(--color-accent-rgb), 0.10), inset 0 1px 0 rgba(211, 235, 250, 0.10);
  --glass-input: rgba(12, 19, 28, 0.94);
  --glass-overlay: rgba(0, 0, 0, 0.72);
  --glass-popup-surface: rgba(14, 18, 25, 0.96);
  --glass-popup-band: rgba(25, 33, 45, 0.90);
  --glass-popup-outline: rgba(54, 174, 234, 0.30);
  --glass-cyan: #36aeea;
  --glass-blue: #087bb8;
  --glass-violet: #2563a9;
}

:root[data-theme="dark"] body.glass-app {
  background-image:
    radial-gradient(circle at 8% 4%, rgba(0, 104, 157, .14), transparent 30rem),
    radial-gradient(circle at 94% 8%, rgba(37, 99, 169, .11), transparent 34rem),
    linear-gradient(145deg, #040609, #080b10 55%, #0a0e15);
}
:root[data-theme="dark"] body.glass-app::before,
:root[data-theme="dark"] body.glass-app::after { opacity: .07; }

.glass-interview-test,
.glass-html-runner {
  --color-bg: #f8fbff;
  --color-surface: #ffffff;
  --color-surface-hover: #eef5fb;
  --color-accent: #0891b2;
  --color-accent-2: #2563eb;
  --color-accent-rgb: 8, 145, 178;
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-border: #d8e4ef;
}

:root[data-theme="dark"] body.glass-interview-test,
:root[data-theme="dark"] body.glass-html-runner {
  --color-bg: #020b18;
  --color-surface: #0b2038;
  --color-surface-hover: #12304e;
  --color-accent: #4cc2ff;
  --color-accent-2: #168bd2;
  --color-accent-rgb: 76, 194, 255;
  --color-text-primary: #f4f9ff;
  --color-text-secondary: #cbdbea;
  --color-text-muted: #9ab0c5;
  --color-border: #284663;
}

html { background: var(--glass-page-a); }

body.glass-app {
  min-height: 100vh;
  color: var(--color-text-primary);
  background-color: var(--glass-page-a);
  background-image:
    radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--glass-cyan) 22%, transparent), transparent 27rem),
    radial-gradient(circle at 91% 12%, color-mix(in srgb, var(--glass-violet) 20%, transparent), transparent 31rem),
    radial-gradient(circle at 58% 94%, color-mix(in srgb, var(--glass-blue) 16%, transparent), transparent 35rem),
    linear-gradient(145deg, var(--glass-page-a), var(--glass-page-b) 58%, var(--glass-page-c));
  background-attachment: fixed;
  overflow-x: hidden;
}

body.glass-app::before,
body.glass-app::after {
  content: '';
  position: fixed;
  z-index: 0;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(78px);
  opacity: 0.16;
  pointer-events: none;
  will-change: transform;
}

body.glass-app::before { top: 18%; left: 12%; background: var(--glass-cyan); }
body.glass-app::after {
  inset: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  background-image: url('../images/promon-edge-flow.svg');
  background-position: right center;
  background-size: min(72rem, 62vw) 112vh;
  background-repeat: no-repeat;
  filter: none;
  opacity: .21;
  transform-origin: right center;
}

body.glass-app::before { animation: glassAmbientDriftOne 12s ease-in-out infinite alternate; }
body.glass-app::after { animation: glassWaveDrift 18s cubic-bezier(.45,.05,.55,.95) infinite alternate; }

@keyframes glassAmbientDriftOne {
  to { transform: translate3d(5rem,-2rem,0) scale(1.12); }
}
@keyframes glassWaveDrift {
  0% {
    background-position: right center;
    transform: translate3d(1.2vw,-3vh,0) scale(1.02) rotate(-.18deg);
  }
  50% {
    background-position: right center;
    transform: translate3d(0,0,0) scale(1.045) rotate(0deg);
  }
  100% {
    background-position: right center;
    transform: translate3d(1.2vw,3vh,0) scale(1.02) rotate(.18deg);
  }
}

:root[data-theme="dark"] body.glass-app::after {
  opacity: .14;
  filter: brightness(1.35) saturate(1.15) drop-shadow(0 0 18px rgba(54,174,234,.12));
}

.glass-app .app-layout,
.glass-app > nav,
.glass-app > main,
/* Full-screen dialogs AND the glass-select/glass-date popup menus all get appended
   straight to <body> (see dashboard/index.blade.php's boardSettingsOverlay/
   kanbanResolutionOverlay reparent, pmReparentModalsToBody(), and ui.js's
   enhanceSelect()/enhanceDate() doing `document.body.appendChild(menu)`) so their
   `position:fixed` isn't broken by an ancestor's overflow:hidden. Once appended
   there they become `.glass-app > div` too, so this rule's `position:relative`
   would fight their own fixed-positioning rule for the "position"/"z-index"
   properties. Exclude them with :not(:where(...)) rather than plain :not() —
   :where() always contributes zero specificity, so this exclusion can list any
   number of classes without ever outweighing a two-class rule like
   `.glass-app .glass-select-menu { position:fixed }` (0-2-0) the way a chain of
   plain :not(.class) clauses would (each adds a class to this selector's own
   specificity, and combined with the `div` type selector that's enough to beat
   it — this file used to get that wrong here; don't reintroduce that chain). */
.glass-app > div:not(:where(.board-settings-overlay,.org-modal-bg,.org-edit-modal-bg,.edit-modal-backdrop,.rc-modal-backdrop,.approval-doc-modal,.doc-edit-overlay,.glass-select-menu,.glass-date-menu,.glass-confirm-overlay)) { position: relative; z-index: 1; }

::selection { color: #0f2e3d; background: #bfe6f2; }

.skip-link {
  position: fixed;
  z-index: 10000;
  top: -5rem;
  left: 1rem;
  padding: .65rem 1rem;
  color: #04121e;
  background: #67e8f9;
  border-radius: var(--glass-radius-sm);
  font-weight: 700;
  transition: top var(--glass-transition-fast);
}
.skip-link:focus { top: 1rem; }

/* ── Primary shell ───────────────────────────────────────────── */
.glass-app .sidebar {
  background: linear-gradient(180deg, var(--glass-surface-strong), var(--glass-surface));
  border-right: 1px solid var(--glass-outline);
  box-shadow: 16px 0 50px rgba(15, 42, 75, .12), inset -1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.glass-app .sidebar-logo,
.glass-app .app-switcher,
.glass-app .sidebar-footer { border-color: var(--glass-outline); }
.glass-app .sidebar-footer { background: color-mix(in srgb, var(--glass-surface-soft) 72%, transparent); }
.glass-app .sidebar-logo-img { filter: drop-shadow(0 8px 16px rgba(var(--color-accent-rgb), .15)); }
.glass-app .nav-divider { background: var(--glass-outline); }
.glass-app .nav-section-label { color: var(--color-text-muted); opacity: .76; }

.glass-app .sidebar-nav a {
  border: 1px solid transparent;
  transition: color var(--glass-transition-fast), background var(--glass-transition-fast), border-color var(--glass-transition-fast), transform var(--glass-transition-fast), box-shadow var(--glass-transition-fast);
}
.glass-app .sidebar-nav a:hover {
  color: var(--color-accent);
  background: linear-gradient(105deg, rgba(var(--color-accent-rgb), .12), color-mix(in srgb, var(--glass-violet) 8%, transparent));
  border-color: rgba(var(--color-accent-rgb), .15);
  transform: translateX(3px);
}
.glass-app .sidebar-nav a.active {
  color: var(--color-accent);
  background: linear-gradient(105deg, rgba(var(--color-accent-rgb), .20), color-mix(in srgb, var(--glass-violet) 11%, transparent));
  border-color: rgba(var(--color-accent-rgb), .22);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 22px rgba(var(--color-accent-rgb), .10);
}
.glass-app .sidebar-nav a.active::before {
  background: linear-gradient(180deg, var(--glass-cyan), var(--glass-violet));
  box-shadow: 0 0 14px rgba(var(--color-accent-rgb), .48);
}

.glass-app .sidebar-raise-btn {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2) 58%, var(--glass-violet));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 12px 28px rgba(var(--color-accent-rgb), .22), inset 0 1px rgba(255,255,255,.30);
}
.glass-app .sidebar-raise-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(var(--color-accent-rgb), .30), inset 0 1px rgba(255,255,255,.36); }

.glass-app #sidebar-toggle-btn,
.glass-app .icon-btn {
  color: var(--color-text-secondary);
  background: var(--glass-surface-soft);
  border-color: var(--glass-outline);
  box-shadow: inset 0 1px var(--glass-highlight);
}
.glass-app #sidebar-toggle-btn:hover,
.glass-app .icon-btn:hover { color: var(--color-accent); background: rgba(var(--color-accent-rgb), .10); border-color: rgba(var(--color-accent-rgb), .28); }

.glass-app .main-content { min-width: 0; background: transparent; }
.glass-app .topbar {
  background: color-mix(in srgb, var(--glass-surface-strong) 82%, transparent);
  border-color: var(--glass-outline);
  box-shadow: 0 10px 34px rgba(15, 42, 75, .11), inset 0 -1px rgba(255,255,255,.04);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-app .topbar-user-chip { background: var(--glass-surface-soft); border-color: var(--glass-outline); box-shadow: inset 0 1px var(--glass-highlight); }
.glass-app .sidebar-avatar,
.glass-app .topbar-avatar {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--glass-violet));
  box-shadow: 0 8px 22px rgba(var(--color-accent-rgb), .20);
}
.glass-app .page-content { animation: glassFadeUp .42s cubic-bezier(.2,.8,.2,1) both; }

/* Creation and edit screens share one centered, softly blurred canvas. */
.glass-form-page .page-content {
  position: relative;
  isolation: isolate;
  padding-top: clamp(1rem, 2.5vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 4vw, 3.5rem);
}
.glass-form-page .page-content::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: .65rem;
  border: 1px solid color-mix(in srgb, var(--glass-popup-outline) 72%, transparent);
  border-radius: 38px;
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--color-accent-rgb), .16), transparent 34rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--glass-violet) 15%, transparent), transparent 38rem),
    color-mix(in srgb, var(--glass-overlay) 22%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: inset 0 1px var(--glass-highlight), 0 18px 60px rgba(15, 42, 75, .10);
  pointer-events: none;
}
.glass-form-page .page-content > :not(style):not(script) {
  width: min(100%, 1440px);
  max-width: 1440px !important;
  margin-right: auto;
  margin-left: auto;
}
.glass-form-page .page-content > .card,
.glass-form-page .page-content > [class$="-card"] {
  background: var(--glass-popup-surface);
  border-color: var(--glass-popup-outline);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  backdrop-filter: blur(30px) saturate(155%);
  box-shadow: 0 28px 80px rgba(15, 55, 88, .22), inset 0 1px var(--glass-highlight);
}

.glass-form-page .page-content .card {
  border-color: var(--glass-popup-outline);
  background: var(--glass-popup-surface);
  box-shadow: 0 24px 70px rgba(15, 55, 88, .18), inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  backdrop-filter: blur(30px) saturate(155%);
}
.glass-form-page .page-content .page-header {
  padding: .8rem 1rem;
  border: 1px solid var(--glass-popup-outline);
  border-radius: var(--glass-radius-lg);
  background: linear-gradient(115deg, var(--glass-popup-band), color-mix(in srgb, var(--glass-popup-band) 70%, transparent));
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Route-aware widths keep simple forms readable and let data-heavy modules
   use the space available on large screens. */
.route-admin-register .page-content > :not(style):not(script) {
  width: min(100%, 720px);
  max-width: 720px !important;
}
.route-interview-create-test .ct-container,
.route-hour-tracking-log .page-content > :not(style):not(script) {
  width: min(100%, 1280px);
  max-width: 1280px !important;
}
.route-profile-show .page-content > :not(style):not(script),
.route-admin-users-edit .page-content > :not(style):not(script) {
  width: min(100%, 1360px);
  max-width: 1360px !important;
}

@media (min-width: 1280px) {
  .glass-app:not(.glass-form-page) .page-content > [style*="max-width"] {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Ticket details use a content-weighted master/detail layout. The detail
   fields automatically become two columns only when their card is wide enough. */
.glass-app .ticket-detail-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(390px, .7fr);
  gap: 1.25rem;
}
.glass-app .ticket-primary-column,
.glass-app .ticket-secondary-column { min-width: 0; align-self: start; }
.glass-app .ticket-details-card { container-type: inline-size; }
@container (min-width: 540px) {
  .glass-app .ticket-details-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.25rem !important;
  }
  .glass-app .ticket-details-list .detail-row {
    grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr);
    column-gap: .65rem;
    min-width: 0;
  }
  .glass-app .ticket-details-list .detail-row > :last-child {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

.glass-app .alert { overflow-wrap: anywhere; }

/* All creation/edit dialogs use a centered glass stage over blurred content. */
.glass-app :is([class*="modal-overlay"],[class$="-modal-bg"],[class$="-backdrop"]) {
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--glass-overlay) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

/* ── Promon brand polish: clarity and generously rounded geometry ── */
body.glass-app {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}
.glass-app :is(h1,h2,h3,h4,h5,h6,.topbar-title,.card-title,.section-title) {
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.glass-app :is(p,td,.form-help,.help-text,.description) { line-height: 1.6; }
.glass-app :is(label,.form-label,[class$="-label"]):not(.nav-section-label) {
  color: var(--color-text-secondary);
  font-weight: 600;
}
.glass-app :is(.text-muted,.form-help,.help-text,.description,small) { color: var(--color-text-muted); }

/* ── Information-first readability ─────────────────────────────
   Ticket data must remain easier to read than the decorative glass layer.
   These shared rules establish a practical text floor. Rich-text descendants
   inherit these defaults naturally, while explicit user-selected foreground,
   background, and font-size styles remain visible. */
.glass-app {
  font-size: 15px;
  line-height: 1.55;
}
.glass-app :is(.text-xs,small,.badge,[class*="-meta"],[class*="-hint"],[class*="-help"],.nav-section-label) {
  font-size: max(.78rem, 12.5px);
  line-height: 1.45;
}
.glass-app :is(.text-sm,td,th,.form-label,label,.section-title,.card-title) {
  font-size: max(.84rem, 13.5px);
}
.glass-app :is(td,th,.text-muted,.form-help,.help-text,.description,small) {
  opacity: 1;
}
.glass-app .btn-sm {
  min-height: 32px;
  padding: .38rem .72rem;
  font-size: max(.8rem, 12.8px);
}
.glass-app .comment-body,
.glass-app [contenteditable="true"] {
  color: var(--color-text-secondary) !important;
  font-size: max(.9rem, 14px) !important;
}
.glass-app .comment-body [style*="background-color"]:not(.mention-chip),
.glass-app [contenteditable="true"] [style*="background-color"]:not(.mention-chip) {
  padding-inline: .12em;
  border-radius: .25em;
}

/* Semantic labels use text/background pairs with dependable contrast. */
.glass-app :is(.badge-critical,.badge-high,.card-pri-badge) {
  color: #fb7185 !important;
  background: #fff1f2 !important;
  border-color: #fda4af !important;
}
.glass-app .badge-closed {
  color:#64748b !important;
  background:#f1f5f9 !important;
  border-color:#cbd5e1 !important;
}
.glass-app :is(.badge-in-progress,.badge-pending,.badge-awaiting-approval) {
  color: #f59e0b !important;
  background: #fffbeb !important;
  border-color: #fcd34d !important;
}
.glass-app .sla-badge-overdue { color:#fb7185 !important; background:#fff1f2 !important; border-color:#fda4af !important; }
.glass-app .sla-badge-warning { color:#f59e0b !important; background:#fffbeb !important; border-color:#fcd34d !important; }
.glass-app .sla-badge-upcoming { color:#38bdf8 !important; background:#f0f9ff !important; border-color:#7dd3fc !important; }
.glass-app :is(.sla-badge-resolved,.sla-badge-ok) { color:#10b981 !important; background:#ecfdf5 !important; border-color:#6ee7b7 !important; }
.glass-app .doc-icon.pdf { background:#a91628 !important; }
.glass-app .card-avatar:not(img) { color:#07131f !important; text-shadow:0 1px rgba(255,255,255,.42); }
.glass-app [style*="background:var(--color-accent"] {
  color:#fff !important;
  background:#00637b !important;
}
.glass-app .av-circle { color:#334155; }
.glass-app .btn-pdf { color:#9f2118; border-color:#b72b20; }
.glass-app .btn-excel { color:#146c37; border-color:#178047; }
.glass-app .btn-json { color:#175f8e; border-color:#1c73a8; }

:root[data-theme="dark"] .glass-app :is(.text-muted,.form-help,.help-text,.description,small) {
  color: #b8c7d7;
}
:root[data-theme="dark"] .glass-app :is(.sidebar-nav a,.card-updated,.card-avatar-name,.card-stat) {
  color: #d6e1ec;
}
:root[data-theme="dark"] .glass-app .nav-section-label { color:#aebfd0; }
:root[data-theme="dark"] .glass-app :is(.badge-critical,.badge-high,.card-pri-badge) {
  color:#ff9aa4 !important;
  background:rgba(169,22,40,.24) !important;
  border-color:#d84a5a !important;
}
:root[data-theme="dark"] .glass-app .card-cat-badge {
  color:#bce9ff !important;
  background:rgba(54,174,234,.16) !important;
  border-color:rgba(126,207,250,.44);
}
:root[data-theme="dark"] .glass-app :is(.badge-in-progress,.badge-pending,.badge-awaiting-approval) {
  color:#ffc66d !important;
  background:rgba(164,85,0,.24) !important;
  border-color:#c87922 !important;
}
:root[data-theme="dark"] .glass-app :is(.calendar-nav button,.export-btn,.view-btn) {
  color:var(--color-text-primary);
}
:root[data-theme="dark"] .glass-app .view-btn.active {
  color:#041723 !important;
  background:#66cfff !important;
  border-color:#8bddff !important;
  font-weight:750;
}
:root[data-theme="dark"] .glass-app .week-event-deadline { color:#4b5563 !important; font-weight:650; }
:root[data-theme="dark"] .glass-app :is(.week-event-title,.week-event-meta,.week-event-deadline) { font-size:max(.8rem,13px); }
:root[data-theme="dark"] .glass-app .btn-pdf { color:#ff948b; border-color:#ff776c; }
:root[data-theme="dark"] .glass-app .btn-excel { color:#66dfa0; border-color:#45c883; }
:root[data-theme="dark"] .glass-app .btn-json { color:#72c9f5; border-color:#55b4e3; }
:root[data-theme="dark"] .glass-app .av-circle { color:#dce7f2; }
:root[data-theme="dark"] .glass-app :is(.iv-stat-value,.rc-stat-val) { color:#6fdcff !important; }

.glass-app .sla-badge { min-height:20px; padding:.2rem .5rem; font-size:max(.72rem,12px); line-height:1.2; }
.glass-app .calendar-day.other-month { opacity:.72; }
.glass-app .kanban-column-header .kanban-column-title {
  color:var(--color-text-primary) !important;
  font-size:max(.78rem,12.5px) !important;
}
.glass-app .kanban-column-header .col-count {
  color:var(--color-text-primary) !important;
  background:color-mix(in srgb,var(--color-accent) 12%,var(--glass-surface-strong)) !important;
  border:1px solid var(--glass-outline);
  font-size:max(.76rem,12px) !important;
}
.glass-app .card-cat-badge {
  color:#17445f !important;
  background:#e3f3fb !important;
  border:1px solid #77b6d3;
  font-size:max(.76rem,12px) !important;
}
.glass-app :is(.sla-chip.ok,.sla-chip.resolved) { color:#006b4c !important; }
.glass-app .sla-chip.warning { color:#783700 !important; }
.glass-app .sla-chip.danger { color:#861426 !important; }
.glass-app .sla-day-bar { min-height:20px; padding:.18rem .4rem; font-size:max(.72rem,12px); line-height:1.25; }
.glass-app .sla-day-bar.overdue { color:#941b2b; background:#fff0f2; border-color:#c63d4d; }
.glass-app .sla-day-bar.due-soon { color:#753000; background:#fff0d7; border-color:#b84c00; }
.glass-app #statOnTrack { color:#006b4c !important; }
.glass-app .stat-item:has(#statSLABreaches) > span,
.glass-app .trend-down { color:#861426 !important; }
.glass-app .trend-up { color:#006b4c !important; }
.glass-app .sb-stat.red .sb-stat-value { color:#a91628; }
.glass-app .sb-stat.blue .sb-stat-value,
.glass-app :is(.iv-stat-value,.rc-stat-val) { color:#00637b; }
.glass-app .sb-stat.green .sb-stat-value { color:#047857; }
.glass-app .sb-tab-btn.active { color:#fff !important; background:#00637b !important; border-color:#00637b !important; }
.glass-app :is(.sm-no-sel,.rm-no-sel,.rm-room-type,.sm-panel-title span) { color:var(--color-text-muted); font-size:max(.78rem,12.5px); }
:root:not([data-theme="dark"]) .glass-app [style*="color:#10B981"],
:root:not([data-theme="dark"]) .glass-app [style*="color: #10B981"] { color:#047857 !important; }
:root:not([data-theme="dark"]) .glass-app [style*="color:#f87171"],
:root:not([data-theme="dark"]) .glass-app [style*="color: #f87171"] { color:#ad1f32 !important; }
:root:not([data-theme="dark"]) .glass-app [style*="color:#ef4444"],
:root:not([data-theme="dark"]) .glass-app [style*="color: #ef4444"],
:root:not([data-theme="dark"]) .glass-app [style*="color:#EF4444"],
:root:not([data-theme="dark"]) .glass-app [style*="color: #EF4444"] { color:#861426 !important; }
.glass-app :is(.iv-create-btn,.rc-tab.active,.rc-btn:not(.rc-btn-danger):not(.rc-btn-view):not(.rc-btn-muted)) {
  color:#fff !important;
  background:#00637b !important;
  border-color:#00637b !important;
}
.glass-app :is(.iv-create-btn,.rc-tab.active,.rc-btn:not(.rc-btn-danger):not(.rc-btn-view):not(.rc-btn-muted)):hover {
  background:#004f64 !important;
}
.glass-app :is(a.btn,button.btn)[style*="background:var(--color-danger)"] {
  color:#fff !important;
  background:#a91628 !important;
}
.glass-app [style*="color:#94a3b8"],
.glass-app [style*="color: #94a3b8"] { color:var(--color-text-muted) !important; }

/* Map common light-only inline utility colors to readable theme tokens. */
:root[data-theme="dark"] .glass-app [style*="color:#1e293b"],
:root[data-theme="dark"] .glass-app [style*="color: #1e293b"],
:root[data-theme="dark"] .glass-app [style*="color:#0f172a"],
:root[data-theme="dark"] .glass-app [style*="color: #0f172a"] { color:var(--color-text-primary) !important; }
:root[data-theme="dark"] .glass-app [style*="color:#374151"],
:root[data-theme="dark"] .glass-app [style*="color: #374151"],
:root[data-theme="dark"] .glass-app [style*="color:#475569"],
:root[data-theme="dark"] .glass-app [style*="color: #475569"],
:root[data-theme="dark"] .glass-app [style*="color:#334155"],
:root[data-theme="dark"] .glass-app [style*="color: #334155"] { color:var(--color-text-secondary) !important; }
:root[data-theme="dark"] .glass-app [style*="color:#64748b"],
:root[data-theme="dark"] .glass-app [style*="color: #64748b"],
:root[data-theme="dark"] .glass-app [style*="color:#6b7280"],
:root[data-theme="dark"] .glass-app [style*="color: #6b7280"] { color:var(--color-text-muted) !important; }
:root[data-theme="dark"] .glass-app table [style*="background:#f9fafb"],
:root[data-theme="dark"] .glass-app table [style*="background: #f9fafb"] { background:var(--glass-surface-strong) !important; }
:root[data-theme="dark"] .glass-app table [style*="border-top:1px solid #f1f5f9"] { border-color:var(--color-border) !important; }
:root[data-theme="dark"] .glass-app #statOnTrack { color:#70e6b4 !important; }
:root[data-theme="dark"] .glass-app .stat-item:has(#statSLABreaches) > span { color:#ff9aa4 !important; }
:root[data-theme="dark"] .glass-app .trend-down { color:#ff9aa4 !important; }
:root[data-theme="dark"] .glass-app .trend-up { color:#70e6b4 !important; }
:root[data-theme="dark"] .glass-app .sb-stat.red .sb-stat-value { color:#ff9aa4; }
:root[data-theme="dark"] .glass-app .iv-empty { color:var(--color-text-muted); border-color:var(--color-border); }
:root[data-theme="dark"] .glass-app :is(.sla-chip.ok,.sla-chip.resolved) { color:#70e6b4 !important; }
:root[data-theme="dark"] .glass-app .sla-chip.warning { color:#ffc66d !important; }
:root[data-theme="dark"] .glass-app .sla-chip.danger { color:#ff9aa4 !important; }

@media (min-width: 769px) {
  .glass-app .sidebar {
    height: calc(100vh - 24px);
    margin: 12px 0 12px 12px;
    border: 1px solid var(--glass-outline);
    border-radius: 28px;
  }
  .glass-app .topbar {
    top: 12px;
    height: calc(var(--topbar-height) - 2px);
    margin: 12px 14px 0;
    padding-inline: 1.35rem;
    border: 1px solid var(--glass-outline);
    border-radius: 22px;
  }
}

.glass-app .sidebar-nav a,
.glass-app .app-switcher-item { border-radius: 15px !important; }
.glass-app .sidebar-raise-btn,
.glass-app .btn,
.glass-app button:not(.sidebar-overlay):not(.mobile-nav-toggle):not(.attachment-tile):not(.pm-list-add) { border-radius: 999px !important; }
.glass-app .icon-btn,
.glass-app #sidebar-toggle-btn { border-radius: 50%; }
.glass-app .topbar-user-chip { border-radius: 999px; }

/* Attachment thumbnails (ticket description + comments) must stay square/cube-shaped,
   never the pill/circle shape the generic button rule above applies to every <button>.
   Radius itself is set inline per-tile (image tiles vs. colored extension badges use
   different rounding), so this selector only needs to exist so `:not(.attachment-tile)`
   above matches and opts these out of the !important pill rule — nothing to declare here. */

/* Attachment preview lightboxes (image/text/pdf/docx) — pinned to the viewport with
   explicit longhand offsets (not the `inset` shorthand) and !important so no other
   rule/theme can nudge them off-center, no matter which comment/scroll position
   opened them. Toggled via the .is-open class instead of inline style.display. */
.attachment-lightbox {
  display: none;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 10050 !important;
  overflow: auto;
  box-sizing: border-box;
}
.attachment-lightbox.is-open {
  display: flex !important;
}

.glass-app .card,
.glass-app .stat-card,
.glass-app .chart-card,
.glass-app .admin-panel,
.glass-app .approval-banner,
.glass-app .kanban-column,
.glass-app .empty-state,
.glass-app [class$="-card"] { border-radius: var(--glass-radius-lg) !important; }

.glass-app .form-control,
.glass-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.glass-app textarea,
.glass-app select,
.glass-app [class$="-input"],
.glass-app [class$="-select"] {
  min-height: 44px;
  padding: 0 1rem;
  border-width: 1px;
  border-radius: 16px !important;
}
.glass-app textarea { padding: .75rem 1rem; }
.glass-app textarea { border-radius: 20px !important; }
.glass-app select { cursor: pointer; }
.glass-app select option {
  color: var(--color-text-primary);
  background: var(--glass-surface-solid);
}

/* Native option popups are OS-rendered and stay square, so the visible control
   is an accessible glass listbox while the original select keeps form behavior. */
.glass-app .glass-select {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  width: auto;
  min-width: 160px;
  min-height: 0 !important;
  padding: 0 !important;
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  vertical-align: middle;
}
.glass-app :is(.form-group,.field,[class$="-field"],[class$="-field-stack"]) > .glass-select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.glass-app .glass-select[hidden] { display: none !important; }
.glass-app select.glass-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.glass-app .glass-select-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .65rem 1rem;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: 500;
  text-align: left;
  background: var(--glass-input);
  border: 1px solid var(--glass-outline);
  box-shadow: inset 0 1px 4px rgba(15,42,75,.09), inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  cursor: pointer;
  border-radius: 16px !important;
}
.glass-app .glass-select-trigger:hover,
.glass-app .glass-select.is-open .glass-select-trigger {
  border-color: rgba(var(--color-accent-rgb), .68);
  background: color-mix(in srgb, var(--glass-input) 86%, var(--color-accent) 8%);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), .12), inset 0 1px var(--glass-highlight);
}
.glass-app .glass-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glass-app .glass-select-arrow {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin: -4px 3px 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--glass-transition-fast);
}
.glass-app .glass-select.is-open .glass-select-arrow { margin-top: 4px; transform: rotate(225deg); }
.glass-app .glass-select-menu {
  position: fixed;
  z-index: 10020;
  display: grid;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--glass-surface-strong) 94%, transparent);
  border: 1px solid rgba(var(--color-accent-rgb), .32);
  border-radius: 22px;
  box-shadow: var(--glass-shadow), inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
}
.glass-app .glass-select-menu[hidden] { display: none !important; }
.glass-app .glass-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: .62rem .9rem;
  color: var(--color-text-secondary);
  font: inherit;
  font-weight: 500;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.glass-app .glass-select-option:hover,
.glass-app .glass-select-option:focus-visible {
  color: var(--color-text-primary);
  background: rgba(var(--color-accent-rgb), .12);
  border-color: rgba(var(--color-accent-rgb), .18);
  outline: none;
}
.glass-app .glass-select-option.is-selected {
  color: #fff;
  background: linear-gradient(110deg, var(--color-accent), var(--color-accent-2), var(--glass-violet));
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 8px 20px rgba(var(--color-accent-rgb), .20);
}
.glass-app .glass-select-option.is-selected::after { content: '✓'; margin-left: .75rem; font-weight: 800; }
.glass-app .glass-select-option:disabled { opacity: .45; cursor: not-allowed; }
.glass-app .glass-select.glass-select-compact { width:72px; min-width:72px; max-width:72px; }
.glass-app .glass-select-compact .glass-select-trigger { min-height:32px; height:32px; padding:.3rem .55rem; border-radius:12px !important; font-size:.75rem; }
.glass-app .glass-select-compact .glass-select-arrow { width:7px; height:7px; margin-right:1px; }
.glass-app .glass-select-menu:has(.glass-select-option) { border-radius:20px !important; }
.glass-app .dashboard-ticket-filter .glass-select { width: 100%; min-width: 0; }
.glass-app .dashboard-ticket-filter .glass-select-trigger { height: 40px; min-height: 40px; padding: .48rem .82rem; border-radius: 14px !important; }
.glass-app .dashboard-ticket-filter .glass-select-arrow { margin-right: 1px; }
.glass-app .policy-report-filter .glass-select { width: 100%; max-width: 100%; min-width: 0; }
.glass-app .policy-report-filter .glass-select-trigger { height: 42px; min-height: 42px; }
.glass-app :is(.table-wrapper,[class$="-table-wrap"],[class$="-table-wrapper"]) {
  border-radius: var(--glass-radius-lg) !important;
  overflow: auto;
}

/* Tabs are complete rounded controls; legacy underline borders caused the
   half-rounded appearance on status and document pages. */
.glass-app :is(.tab-nav,[role="tablist"]) {
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem !important;
  background:var(--glass-surface-soft);
  border:1px solid var(--glass-outline) !important;
  border-radius:18px !important;
  overflow:hidden;
}
.glass-app :is(.tab-button,[role="tab"]) {
  bottom:auto !important;
  min-height:38px;
  padding:.55rem 1rem !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  background:transparent;
}
.glass-app :is(.tab-button,[role="tab"]).active,
.glass-app :is(.tab-button,[role="tab"])[aria-selected="true"] {
  color:#fff !important;
  background:linear-gradient(110deg,var(--color-accent),var(--color-accent-2)) !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 7px 18px rgba(var(--color-accent-rgb),.22);
}
.glass-app :is([class$="-dropdown"],[class$="-menu"],[class$="-popover"]) {
  color: var(--color-text-primary);
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-outline);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-app :is(.modal,.modal-content,[class$="-modal"],[role="dialog"]) {
  border-radius: var(--glass-radius-xl) !important;
}
.glass-app :is(.badge,[class*="badge-"],.status-pill,.priority-pill) { border-radius: 999px; }
.glass-app :is(.alert,.pagination a,.pagination span,.rich-text-toolbar) { border-radius: var(--glass-radius); }

/* Improve legacy page-local gray text in dark mode without changing semantic colors. */
[data-theme="dark"] .glass-app [style*="color:#0F172A" i],
[data-theme="dark"] .glass-app [style*="color: #0F172A" i],
[data-theme="dark"] .glass-app [style*="color:#1e293b" i],
[data-theme="dark"] .glass-app [style*="color: #1e293b" i] { color: var(--color-text-primary) !important; }
[data-theme="dark"] .glass-app [style*="color:#334155" i],
[data-theme="dark"] .glass-app [style*="color: #334155" i],
[data-theme="dark"] .glass-app [style*="color:#374151" i],
[data-theme="dark"] .glass-app [style*="color: #374151" i],
[data-theme="dark"] .glass-app [style*="color:#475569" i],
[data-theme="dark"] .glass-app [style*="color: #475569" i] { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .glass-app [style*="color:#64748b" i],
[data-theme="dark"] .glass-app [style*="color: #64748b" i],
[data-theme="dark"] .glass-app [style*="color:#6b7280" i],
[data-theme="dark"] .glass-app [style*="color: #6b7280" i] { color: var(--color-text-muted) !important; }
[data-theme="dark"] .glass-app [style*="background:#F8FAFC" i],
[data-theme="dark"] .glass-app [style*="background: #F8FAFC" i],
[data-theme="dark"] .glass-app [style*="background:#F1F5F9" i],
[data-theme="dark"] .glass-app [style*="background: #F1F5F9" i] { background: var(--glass-surface-soft) !important; }
[data-theme="dark"] .glass-app [style*="border-color:#E2E8F0" i],
[data-theme="dark"] .glass-app [style*="border-color: #E2E8F0" i] { border-color: var(--glass-outline) !important; }

/* The artwork is transparent. Use a clean white wordmark in dark mode without
   adding a plaque, border, or background around the Promon name. */
[data-theme="dark"] img[src*="promon.webp"] {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) drop-shadow(0 5px 14px rgba(0,0,0,.28)) !important;
}

/* Friendly color-coded icon tiles are shared by every module navigation. */
.glass-app .sidebar-nav .nav-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 6px;
  flex: 0 0 32px;
  box-sizing: border-box;
  aspect-ratio: 1;
  opacity: 1;
  color: #0785b8;
  background: linear-gradient(145deg,rgba(22,183,216,.18),rgba(0,104,157,.10));
  border: 1px solid rgba(22,183,216,.22);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}
.glass-app .sidebar-nav .nav-icon [fill="none"] { fill: none !important; }
.glass-app .sidebar-nav .nav-icon :is(path,rect,circle,line,polyline,polygon) { stroke: currentColor; }
.glass-app :is(.nav-icon,.home-app-icon svg,.section-title svg) :is(path,rect,circle,line,polyline,polygon) {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glass-app .sidebar-nav a:nth-of-type(4n + 2) .nav-icon { color:#4f6ee8; background:linear-gradient(145deg,rgba(96,126,234,.20),rgba(79,110,232,.09)); border-color:rgba(96,126,234,.24); }
.glass-app .sidebar-nav a:nth-of-type(4n + 3) .nav-icon { color:#0b9e7a; background:linear-gradient(145deg,rgba(16,185,129,.20),rgba(11,158,122,.09)); border-color:rgba(16,185,129,.24); }
.glass-app .sidebar-nav a:nth-of-type(4n + 4) .nav-icon { color:#d97706; background:linear-gradient(145deg,rgba(245,158,11,.21),rgba(217,119,6,.09)); border-color:rgba(245,158,11,.25); }
.glass-app .sidebar-nav a.active .nav-icon { color:#fff; background:linear-gradient(135deg,var(--glass-cyan),var(--color-accent-2),var(--glass-violet)); border-color:rgba(255,255,255,.28); box-shadow:0 7px 18px rgba(var(--color-accent-rgb),.22),inset 0 1px rgba(255,255,255,.30); }
.glass-app :is(.section-title,.sidebar-title) > svg {
  box-sizing: content-box;
  padding: 6px;
  color: var(--color-accent);
  background: linear-gradient(145deg,rgba(var(--color-accent-rgb),.15),color-mix(in srgb,var(--glass-violet) 12%,transparent));
  border: 1px solid rgba(var(--color-accent-rgb),.20);
  border-radius: 10px;
}

/* Notification panel — solid opaque white so page content behind it never bleeds
   through; backdrop-filter kept purely for the frosted edge look, not for see-through. */
.glass-app #notif-panel {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.9) !important;
  border-radius: var(--glass-radius-lg) !important;
  box-shadow: 0 10px 30px rgba(31,73,125,.14), inset 0 1px 0 rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.glass-app #notif-list > div { border-color: var(--glass-outline) !important; transition: background var(--glass-transition-fast); }
.glass-app #notif-list > div:hover { background: rgba(var(--color-accent-rgb), .06); }

/* ── Shared surfaces ─────────────────────────────────────────── */
.glass-app .card,
.glass-app .stat-card,
.glass-app .chart-card,
.glass-app .admin-panel,
.glass-app .table-wrapper,
.glass-app .approval-banner,
.glass-app .kanban-column,
.glass-app .empty-state,
.glass-app [class$="-modal"],
.glass-app [class$="-dialog"] {
  background: var(--glass-surface);
  border-color: var(--glass-outline);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}

.glass-app .card,
.glass-app .stat-card,
.glass-app .chart-card,
.glass-app .admin-panel,
.glass-app [class$="-card"] {
  border-radius: var(--glass-radius-lg);
  border-color: var(--glass-outline);
  transition: transform var(--glass-transition), border-color var(--glass-transition), box-shadow var(--glass-transition), background var(--glass-transition);
}

.glass-app .card:hover,
.glass-app .stat-card:hover,
.glass-app .chart-card:hover {
  border-color: rgba(var(--color-accent-rgb), .28);
  box-shadow: var(--glass-shadow-hover);
}

/* Dark mode gets richer blue/cyan/indigo depth while text stays neutral. */
[data-theme="dark"] .glass-app .sidebar {
  background:
    radial-gradient(circle at 18% 12%, rgba(34,211,238,.14), transparent 18rem),
    linear-gradient(180deg, rgba(12,43,69,.94), rgba(13,36,64,.93) 55%, rgba(20,40,75,.94));
  border-color: rgba(76,194,255,.28);
}
[data-theme="dark"] .glass-app .topbar {
  background:
    linear-gradient(110deg, rgba(21,61,92,.88), rgba(24,49,82,.84) 58%, rgba(46,51,99,.78));
  border-color: rgba(99,190,242,.28);
  box-shadow: 0 14px 42px rgba(0,4,18,.42), inset 0 1px rgba(225,247,255,.12);
}
[data-theme="dark"] .glass-app :is(
  .card,.stat-card,.chart-card,.admin-panel,.table-wrapper,
  .approval-banner,.kanban-column,.empty-state,[class$="-card"],
  [class$="-table-wrap"],[class$="-table-wrapper"]
) {
  background:
    linear-gradient(145deg, rgba(31,76,108,.78), rgba(17,50,78,.80) 58%, rgba(38,45,91,.70));
  border-color: rgba(113,190,235,.26);
  box-shadow: 0 14px 42px rgba(0,5,18,.38), inset 0 1px rgba(221,246,255,.10);
}
[data-theme="dark"] .glass-app :is(.card,.stat-card,.chart-card,[class$="-card"]):hover {
  border-color: rgba(76,194,255,.48);
  box-shadow: 0 20px 56px rgba(0,5,18,.50), 0 0 28px rgba(76,194,255,.10), inset 0 1px rgba(221,246,255,.14);
}
[data-theme="dark"] .glass-app :is(
  .card,.stat-card,.chart-card,.admin-panel,.table-wrapper,
  .approval-banner,.kanban-column,.empty-state,[class$="-card"],
  [class$="-modal"],[class$="-dialog"]
) {
  outline:1px solid rgba(54,174,234,.10);
  outline-offset:-2px;
  box-shadow:0 14px 42px rgba(0,5,18,.42),0 0 22px rgba(54,174,234,.075),inset 0 1px rgba(221,246,255,.10);
}
[data-theme="dark"] .glass-app :is(input,textarea,.form-control,.glass-select-trigger):focus,
[data-theme="dark"] .glass-app :is(input,textarea,.form-control,.glass-select-trigger):focus-visible {
  border-color:rgba(89,200,250,.76) !important;
  box-shadow:0 0 0 3px rgba(54,174,234,.14),0 0 22px rgba(54,174,234,.10) !important;
}
[data-theme="dark"] .glass-app .glass-select-trigger {
  color: #eef7ff;
  background: linear-gradient(120deg, rgba(18,49,76,.98), rgba(28,51,86,.96));
  border-color: rgba(126,207,250,.46);
  box-shadow: inset 0 1px rgba(225,247,255,.10), 0 3px 10px rgba(0,5,18,.22);
}
[data-theme="dark"] .glass-app .glass-select-menu {
  background:
    linear-gradient(145deg, rgba(19,47,72,.99), rgba(12,34,56,.99) 62%, rgba(31,37,75,.98));
  border-color: rgba(100,203,255,.58);
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(0,3,14,.62), 0 0 34px rgba(76,194,255,.11), inset 0 1px rgba(225,247,255,.15);
}
[data-theme="dark"] .glass-app .glass-select-option { color:#dce8f5; }
[data-theme="dark"] .glass-app .glass-select-option:hover,
[data-theme="dark"] .glass-app .glass-select-option:focus-visible { color:#fff; background:rgba(56,189,248,.18); border-color:rgba(125,211,252,.30); }
[data-theme="dark"] .glass-app .sidebar-nav a { color:#c6d2e1; font-weight:560; }
[data-theme="dark"] .glass-app .sidebar-nav a .nav-icon { opacity:1; }
[data-theme="dark"] .glass-app .nav-section-label { color:#91a8c0; opacity:1; }
[data-theme="dark"] .glass-app .nav-divider { background:rgba(126,184,222,.22); opacity:1; }
[data-theme="dark"] .glass-app .sidebar-nav a:hover { color:#f4fbff; background:linear-gradient(105deg,rgba(22,139,210,.22),rgba(96,126,234,.14)); }
[data-theme="dark"] .glass-app .sidebar-nav a.active {
  color: #dff6ff;
  background: linear-gradient(105deg, rgba(22,139,210,.34), rgba(96,126,234,.22));
  border-color: rgba(76,194,255,.38);
}

.glass-app .page-header { border-color: var(--glass-outline); }
.glass-app .page-header h1,
.glass-app .page-header h2,
.glass-app .card-title,
.glass-app .section-title { letter-spacing: -.02em; }
.glass-app .stat-card-icon { box-shadow: inset 0 1px rgba(255,255,255,.20); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-app .sidebar,
  .glass-app .topbar,
  .glass-app .card,
  .glass-app .stat-card,
  .glass-app .chart-card,
  .glass-app .admin-panel,
  .glass-app .table-wrapper,
  .glass-app [class$="-modal"] { background: var(--glass-surface-solid); }
}

/* ── Buttons and action controls ─────────────────────────────── */
.glass-app .btn,
.glass-app button:not(.sidebar-overlay):not(.mobile-nav-toggle) {
  border-radius: var(--glass-radius-sm);
  transition: transform var(--glass-transition-fast), box-shadow var(--glass-transition-fast), background var(--glass-transition-fast), border-color var(--glass-transition-fast), color var(--glass-transition-fast);
}
.glass-app .btn:hover,
.glass-app button:not(:disabled):not(.sidebar-overlay):hover { transform: translateY(-1px); }
.glass-app .btn:active,
.glass-app button:not(:disabled):not(.sidebar-overlay):active { transform: translateY(0) scale(.98); }

.glass-app .btn-primary,
.glass-app [class*="btn-primary"],
.glass-app [class*="btn-accent"] {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2) 58%, var(--glass-violet));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), .20), inset 0 1px rgba(255,255,255,.28);
}
.glass-app .btn-primary:hover,
.glass-app [class*="btn-primary"]:hover { box-shadow: 0 12px 30px rgba(var(--color-accent-rgb), .30), inset 0 1px rgba(255,255,255,.34); }
.glass-app .btn-secondary {
  color: #fff;
  background: linear-gradient(135deg, #087ead, #176fc4 58%, #356fe0);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(3,105,161,.22), inset 0 1px rgba(255,255,255,.28);
}
.glass-app .btn-secondary:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, #076f9b, #145fae 58%, #2c61ca);
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 9px 22px rgba(3,105,161,.30), inset 0 1px rgba(255,255,255,.32);
}
.glass-app .btn-ghost { background: var(--glass-surface-soft); border-color: var(--glass-outline); }
.glass-app .btn-ghost:hover { background: rgba(var(--color-accent-rgb), .09); border-color: rgba(var(--color-accent-rgb), .27); }
.glass-app .btn-success { color: #fff; background: linear-gradient(135deg,#10b981,#059669); }
.glass-app .btn-danger,
.glass-app [class*="btn-danger"] { color: #fff; background: linear-gradient(135deg,#fb7185,#dc2626); border-color: rgba(255,255,255,.18); }
.glass-app button:disabled,
.glass-app .btn:disabled,
.glass-app button[aria-disabled="true"],
.glass-app .btn[aria-disabled="true"] {
  opacity: 1;
  color: color-mix(in srgb, var(--color-text-secondary) 82%, var(--color-text-primary));
  background: color-mix(in srgb, var(--glass-surface-strong) 82%, var(--color-border));
  border-color: color-mix(in srgb, var(--glass-outline) 72%, var(--color-text-muted));
  filter: saturate(.72);
  cursor: not-allowed;
  box-shadow: inset 0 1px rgba(255,255,255,.40), 0 2px 7px rgba(15,42,75,.10);
}
.glass-app :is(.btn-primary,.btn-secondary,.btn-success,.btn-danger):disabled,
.glass-app :is(.btn-primary,.btn-secondary,.btn-success,.btn-danger)[aria-disabled="true"] {
  color: rgba(255,255,255,.90);
  background: linear-gradient(135deg, #4d86a3, #4f75aa);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 2px 7px rgba(15,42,75,.13);
}
[data-theme="dark"] .glass-app button:disabled,
[data-theme="dark"] .glass-app .btn:disabled,
[data-theme="dark"] .glass-app button[aria-disabled="true"],
[data-theme="dark"] .glass-app .btn[aria-disabled="true"] {
  color: #afc1d4;
  background: #1b2a3b;
  border-color: #465d76;
  box-shadow: inset 0 1px rgba(220,240,255,.10), 0 0 0 1px rgba(76,194,255,.05);
}
[data-theme="dark"] .glass-app :is(.btn-primary,.btn-secondary,.btn-success,.btn-danger):disabled,
[data-theme="dark"] .glass-app :is(.btn-primary,.btn-secondary,.btn-success,.btn-danger)[aria-disabled="true"] {
  color: #dcecff;
  background: linear-gradient(135deg, #245a76, #344f7d);
  border-color: #52799d;
}

/* ── Forms ───────────────────────────────────────────────────── */
.glass-app .form-control,
.glass-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.glass-app textarea,
.glass-app select,
.glass-app [class$="-input"],
.glass-app [class$="-select"] {
  color: var(--color-text-primary);
  background-color: var(--glass-input);
  border-color: var(--glass-outline);
  box-shadow: inset 0 1px 4px rgba(15,42,75,.09), inset 0 1px var(--glass-highlight);
}
.glass-app input::placeholder,
.glass-app textarea::placeholder { color: var(--color-text-muted); opacity: .86; }
.glass-app select option { color: var(--color-text-primary); background: var(--color-surface); }
.glass-app input[type="checkbox"],
.glass-app input[type="radio"] { accent-color: var(--color-accent); }
.glass-app input[type="file"]::file-selector-button { color: var(--color-text-primary); background: var(--glass-surface-soft); border: 1px solid var(--glass-outline); border-radius: 8px; }

.glass-app .form-control:focus,
.glass-app input:focus,
.glass-app textarea:focus,
.glass-app select:focus,
.glass-app button:focus-visible,
.glass-app a:focus-visible,
.glass-app [tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 75%, white);
  outline-offset: 2px;
  border-color: rgba(var(--color-accent-rgb), .62);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), .13), inset 0 1px 4px rgba(15,42,75,.08);
}
.glass-app input:disabled,
.glass-app select:disabled,
.glass-app textarea:disabled { opacity: .68; background: color-mix(in srgb, var(--glass-input) 65%, transparent); }

/* ── Tables and pagination ───────────────────────────────────── */
.glass-app .table-wrapper,
.glass-app [class$="-table-wrap"],
.glass-app [class$="-table-wrapper"] {
  overflow-x: auto;
  border: 1px solid var(--glass-outline);
  border-radius: var(--glass-radius-lg);
  background: var(--glass-surface-soft);
  box-shadow: var(--glass-shadow-soft);
}
.glass-app table { color: var(--color-text-secondary); border-color: var(--glass-outline); }
.glass-app thead,
.glass-app table thead tr { background: color-mix(in srgb, var(--glass-surface-strong) 86%, var(--color-accent) 3%); }
.glass-app th { color: var(--color-text-primary); background: color-mix(in srgb, var(--glass-surface-strong) 88%, transparent); border-color: var(--glass-outline); }
.glass-app td { color: var(--color-text-secondary); border-color: color-mix(in srgb, var(--glass-outline) 68%, transparent); }
.glass-app tbody tr { background: rgba(255,255,255,.015); transition: background var(--glass-transition-fast); }
.glass-app tbody tr:nth-child(even) { background: rgba(var(--color-accent-rgb), .018); }
.glass-app tbody tr:hover { background: rgba(var(--color-accent-rgb), .07); }
.glass-app .pagination a,
.glass-app .pagination span { background: var(--glass-surface-soft); border-color: var(--glass-outline); }
.glass-app .pagination .active,
.glass-app .pagination [aria-current="page"] { color: #fff; background: linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); }

/* ── Badges, alerts, tabs and empty states ───────────────────── */
.glass-app .badge { border: 1px solid currentColor; box-shadow: inset 0 1px rgba(255,255,255,.10); }
.glass-app .alert {
  border: 1px solid var(--glass-outline);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  animation: glassNoticeIn .32s ease both;
}
.glass-app .alert-success { background: color-mix(in srgb,#10b981 16%,var(--glass-surface)); border-color: color-mix(in srgb,#10b981 38%,var(--glass-outline)); }
.glass-app .alert-error { background: color-mix(in srgb,#ef4444 15%,var(--glass-surface)); border-color: color-mix(in srgb,#ef4444 38%,var(--glass-outline)); }
.glass-app .empty-state { color: var(--color-text-muted); border: 1px dashed var(--glass-outline); border-radius: var(--glass-radius-lg); }
.glass-app [class*="tab-btn"],
.glass-app [class$="-tab"] { transition: color var(--glass-transition-fast), background var(--glass-transition-fast), border-color var(--glass-transition-fast), box-shadow var(--glass-transition-fast); }
.glass-app [class*="tab-btn"].active,
.glass-app [class$="-tab"].active { color: #fff; background: linear-gradient(135deg,var(--color-accent),var(--color-accent-2)); border-color: rgba(255,255,255,.20); box-shadow: 0 7px 20px rgba(var(--color-accent-rgb),.18); }

/* ── Kanban, drawers, modals and rich text ───────────────────── */
.glass-app .kanban-column { background: var(--glass-surface-soft); border-radius: var(--glass-radius-lg); }
.glass-app .kanban-column-header { background: rgba(var(--color-accent-rgb), .035); border-color: var(--glass-outline); }
.glass-app .kanban-card,
.glass-app .task-card { background: var(--glass-surface); border-color: var(--glass-outline); box-shadow: var(--glass-shadow-soft); }
.glass-app [class*="overlay"],
.glass-app [class$="-modal-bg"] { background: var(--glass-overlay); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.glass-app [class$="-modal"],
.glass-app [role="dialog"] { color: var(--color-text-primary); border: 1px solid var(--glass-outline); border-radius: var(--glass-radius-xl); }
.glass-app .rich-text-toolbar { background: var(--glass-surface-soft); border-color: var(--glass-outline); }

/* One shared popup language for every existing create/edit dialog. Display
   remains controlled by each module; this layer changes presentation only. */
.glass-app :is(
  .board-settings-overlay,
  .org-modal-bg,
  .org-edit-modal-bg,
  .edit-modal-backdrop,
  .rc-modal-backdrop,
  .approval-doc-modal,
  .doc-edit-overlay
) {
  padding: clamp(.75rem, 2vw, 1.5rem);
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--color-accent-rgb), .16), transparent 32rem),
    radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--glass-violet) 17%, transparent), transparent 36rem),
    color-mix(in srgb, var(--glass-overlay) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(125%) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}
.glass-app :is(
  .board-settings-modal,
  .org-modal,
  .org-edit-modal,
  .edit-modal,
  .rc-modal,
  .approval-doc-modal-panel,
  .doc-edit-modal
) {
  color: var(--color-text-primary) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--glass-popup-surface) 96%, transparent), color-mix(in srgb, var(--glass-popup-surface) 88%, var(--glass-violet) 4%)) !important;
  border: 1px solid var(--glass-popup-outline) !important;
  border-radius: var(--glass-radius-xl) !important;
  box-shadow: 0 34px 100px rgba(5, 24, 45, .34), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px var(--glass-highlight) !important;
  -webkit-backdrop-filter: blur(34px) saturate(165%) !important;
  backdrop-filter: blur(34px) saturate(165%) !important;
  animation: glassPopupIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.glass-app :is(
  .bsm-header,
  .edit-modal-head,
  .rc-modal-head,
  .approval-doc-modal-head,
  .doc-edit-head
) {
  background: linear-gradient(110deg, var(--glass-popup-band), color-mix(in srgb, var(--glass-popup-band) 76%, var(--glass-violet) 5%));
  border-color: var(--glass-popup-outline) !important;
}
.glass-app :is(
  .bsm-footer,
  .edit-modal-foot,
  .approval-doc-modal-foot,
  .org-modal-btns,
  .org-edit-actions,
  .doc-edit-foot
) {
  border-color: var(--glass-popup-outline) !important;
  background: color-mix(in srgb, var(--glass-popup-band) 64%, transparent);
}
.glass-app :is(.bsm-body,.edit-modal-body,.rc-modal-body,.approval-doc-modal-body,.doc-edit-body) {
  background: color-mix(in srgb, var(--glass-popup-surface) 52%, transparent);
}
.glass-app .bsm-col-item {
  background: color-mix(in srgb, var(--glass-input) 88%, transparent) !important;
  border-color: var(--glass-outline) !important;
  border-radius: var(--glass-radius) !important;
}
.glass-app :is(.bsm-status-tag,.bsm-btn,.bsm-add-btn) { border-radius: 999px !important; }
.glass-app :is(.org-modal,.org-edit-modal) { max-height: min(88vh, 760px); overflow: auto; }

/* Shared confirmation dialog for every mutating action except comments. */
.glass-confirm-overlay {
  position: fixed !important;
  z-index: 30000 !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 22% 18%, rgba(22,183,216,.18), transparent 30rem),
    radial-gradient(circle at 82% 78%, rgba(96,126,234,.20), transparent 34rem),
    color-mix(in srgb,var(--glass-overlay) 94%,transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}
.glass-confirm-overlay[hidden] { display: none !important; }
.glass-confirm-card {
  width: min(470px, 94vw);
  overflow: hidden;
  color: var(--color-text-primary);
  background: var(--glass-popup-surface);
  border: 1px solid var(--glass-popup-outline);
  border-radius: 30px;
  box-shadow: 0 34px 100px rgba(5,24,45,.38),inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: blur(34px) saturate(165%);
  backdrop-filter: blur(34px) saturate(165%);
  animation: glassPopupIn .25s cubic-bezier(.2,.8,.2,1) both;
}
.glass-confirm-visual {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1rem;
  background: linear-gradient(115deg,var(--glass-popup-band),color-mix(in srgb,var(--glass-violet) 10%,transparent));
  border-bottom: 1px solid var(--glass-popup-outline);
}
.glass-confirm-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  color: #fff;
  background: linear-gradient(135deg,var(--glass-cyan),var(--color-accent-2),var(--glass-violet));
  border-radius: 17px;
  box-shadow: 0 12px 28px rgba(var(--color-accent-rgb),.28),inset 0 1px rgba(255,255,255,.30);
}
.glass-confirm-card.is-danger .glass-confirm-icon { background: linear-gradient(135deg,#fb7185,#ef4444,#c026d3); }
.glass-confirm-title { margin: 0; font-size: 1.06rem; font-weight: 780; }
.glass-confirm-kicker { margin-top: .2rem; color: var(--color-text-muted); font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.glass-confirm-message { margin: 0; padding: 1.2rem 1.4rem; color: var(--color-text-secondary); font-size: .9rem; line-height: 1.6; }
.glass-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(132px, 148px)); justify-content: end; align-items: center; gap: .75rem; padding: 1rem 1.4rem 1.35rem; }
.glass-confirm-actions button { width: 100%; min-width: 0; min-height: 44px; padding: .68rem 1.2rem; border-radius: 13px; font: inherit; font-size: .88rem; line-height: 1; font-weight: 750; letter-spacing: .01em; cursor: pointer; transition: transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.glass-confirm-actions .glass-confirm-cancel {
  color: #fff !important;
  background: linear-gradient(135deg,#fb7185,#ef4444,#dc2626) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 9px 24px rgba(220,38,38,.28),inset 0 1px rgba(255,255,255,.28) !important;
}
.glass-confirm-actions .glass-confirm-proceed {
  color: #fff !important;
  background: linear-gradient(135deg,#0891b2,#087fbd,#2563eb) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 9px 24px rgba(37,99,235,.30),inset 0 1px rgba(255,255,255,.28) !important;
}
.glass-confirm-actions button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.glass-confirm-actions button:active { transform: translateY(0) scale(.98); }
.glass-confirm-actions button:focus-visible { outline: 3px solid rgba(255,255,255,.90); outline-offset: 3px; }
@media (max-width: 430px) {
  .glass-confirm-actions { grid-template-columns: 1fr; }
}

/* Glass date picker. The original input remains in the form and owns the
   submitted ISO value; this is only its rounded, theme-aware presentation. */
.glass-app .glass-date {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 150px;
  vertical-align: middle;
}
.glass-app input.glass-native-date {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.glass-app .glass-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  min-height: 44px;
  padding: .65rem 1rem;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  background: var(--glass-input);
  border: 1px solid var(--glass-outline);
  border-radius: 999px !important;
  box-shadow: inset 0 1px 4px rgba(15,42,75,.09), inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
.glass-app .glass-date-trigger:hover,
.glass-app .glass-date.is-open .glass-date-trigger {
  border-color: rgba(var(--color-accent-rgb), .68);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), .12), inset 0 1px var(--glass-highlight);
}
.glass-app .glass-date-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.glass-app .glass-date-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glass-app .glass-date-value.is-placeholder { color: var(--color-text-muted); }
.glass-app .glass-date-menu {
  position: fixed;
  z-index: 10030;
  width: min(340px, calc(100vw - 24px));
  padding: 14px;
  color: var(--color-text-primary);
  background: var(--glass-popup-surface);
  border: 1px solid var(--glass-popup-outline);
  border-radius: 26px;
  box-shadow: 0 28px 74px rgba(5,24,45,.32), inset 0 1px var(--glass-highlight);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  animation: glassPopupIn .22s cubic-bezier(.2,.8,.2,1) both;
}
.glass-app .glass-date-menu[hidden] { display: none !important; }
.glass-app .glass-date-head,
.glass-app .glass-date-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.glass-app .glass-date-head { margin-bottom: 10px; }
.glass-app .glass-date-title { flex: 1; font-size: .92rem; font-weight: 750; text-align: center; }
.glass-app .glass-date-nav {
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-text-primary);
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-outline);
  border-radius: 50% !important;
}
.glass-app .glass-date-weekdays,
.glass-app .glass-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.glass-app .glass-date-weekdays span { padding: 5px 0; color: var(--color-text-muted); font-size: .69rem; font-weight: 700; text-align: center; }
.glass-app .glass-date-day {
  aspect-ratio: 1;
  min-height: 36px;
  padding: 0;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px !important;
}
.glass-app .glass-date-day:hover:not(:disabled) { color: var(--color-text-primary); background: rgba(var(--color-accent-rgb),.12); border-color: rgba(var(--color-accent-rgb),.20); }
.glass-app .glass-date-day.is-other { opacity: .48; }
.glass-app .glass-date-day.is-today { border-color: rgba(var(--color-accent-rgb),.52); }
.glass-app .glass-date-day.is-selected { color: #fff; background: linear-gradient(135deg,var(--color-accent),var(--color-accent-2),var(--glass-violet)); box-shadow: 0 7px 18px rgba(var(--color-accent-rgb),.24); }
.glass-app .glass-date-day:disabled { opacity: .26; cursor: not-allowed; }
.glass-app .glass-date-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-outline); }
.glass-app .glass-date-action { padding: .45rem .8rem; color: var(--color-accent); font: inherit; font-size: .8rem; font-weight: 650; background: var(--glass-surface-soft); border: 1px solid var(--glass-outline); border-radius: 999px !important; }

/* Round off square data palettes throughout the application. */
.glass-app :is(
  .calendar-main,.calendar-day,.sidebar-card,.week-day-column,.day-event-card,
  .calendar-event,.week-event,.sla-ticket-item,.org-rp-cell,.org-sr-item,
  .org-modal-item,.td-info-item,.iv-stat-card,.rc-stat-card,.ht-project-card,
  .ht-team-card,.sb-card,.rm-room-card,.sm-cube-card,.board-card,.task-card,
  .sm-bottom-panel,.rm-booking-card
) {
  border-radius: var(--glass-radius) !important;
}
.glass-app :is(.calendar-main,.sidebar-card,.week-day-column,.calendar-day) {
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--glass-surface) 84%, transparent) !important;
  border-color: var(--glass-outline) !important;
  box-shadow: inset 0 1px var(--glass-highlight), 0 8px 24px rgba(15,55,88,.07);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
.glass-app .calendar-grid { gap: .65rem !important; }
.glass-app .calendar-day { animation: glassTileIn .34s cubic-bezier(.2,.8,.2,1) both; }
.glass-app .calendar-day:nth-child(7n + 2) { animation-delay: 25ms; }
.glass-app .calendar-day:nth-child(7n + 3) { animation-delay: 50ms; }
.glass-app .calendar-day:nth-child(7n + 4) { animation-delay: 75ms; }
.glass-app .calendar-day:nth-child(7n + 5) { animation-delay: 100ms; }
.glass-app .calendar-day:nth-child(7n + 6) { animation-delay: 125ms; }
.glass-app .calendar-day:nth-child(7n + 7) { animation-delay: 150ms; }
.glass-app :is(.calendar-day,.org-rp-cell,.td-info-item,.ht-project-card,.ht-team-card,.board-card,.task-card):hover {
  transform: translateY(-3px);
  border-color: rgba(var(--color-accent-rgb),.44) !important;
  box-shadow: var(--glass-shadow-hover);
}
.glass-app :is(.calendar-nav button,.view-btn,.export-btn) { border-radius: 999px !important; }
.glass-app :is(.calendar-event,.week-event,.day-event-card,.sla-ticket-item) {
  min-width: 0;
  border-radius: 18px !important;
}
.glass-app :is(.calendar-event,.week-event,.day-event-card,.sla-ticket-item) :is(h3,h4,.calendar-event-title,.week-event-title,.sla-ticket-title) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.glass-app .sla-day-bar { border-radius: 999px !important; }

@keyframes glassTileIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glassPopupIn {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .glass-app *, .glass-app *::before, .glass-app *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Develop feature families with page-local hardcoded colors ─ */
.glass-app :is(.org-search-results,.org-card,.org-reports-wrap,.org-modal,.org-edit-modal,.org-sync-btn,.org-edit-icon) {
  color: var(--color-text-secondary);
  background: var(--glass-surface);
  border-color: var(--glass-outline);
  box-shadow: var(--glass-shadow-soft);
}
.glass-app :is(.org-card-name,.org-rp-name,.org-bc-item.current,.org-modal h3,.org-edit-modal h3) { color: var(--color-text-primary); }
.glass-app :is(.org-card-role,.org-rp-role,.org-reports-hdr,.org-edit-form-group label) { color: var(--color-text-muted); }
.glass-app :is(.org-rp-cell,.org-reports-hdr) { border-color: var(--glass-outline); }
.glass-app :is(.org-rp-cell,.org-sr-item,.org-modal-item):hover { background: rgba(var(--color-accent-rgb),.07); }

.glass-app :is(.sm-cube-card,.sm-bottom-panel,.rm-room-card,.rm-booking-card,.sb-card) {
  color: var(--color-text-secondary);
  background: var(--glass-surface);
  border-color: var(--glass-outline);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
/* Clearer, more see-through glass for the seat/room map cards specifically. */
.glass-app :is(.sm-cube-card,.sm-bottom-panel,.rm-room-card,.rm-booking-card) {
  background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.glass-app :is(.sm-cube-card,.rm-booking-card,.sb-card):hover {
  transform: translateY(-3px);
  border-color: rgba(var(--color-accent-rgb),.34) !important;
  box-shadow: var(--glass-shadow-hover);
}
.glass-app .rm-room-card:not(.selected):hover {
  border-color: rgba(var(--color-accent-rgb),.34) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}
.glass-app :is(.sm-toolbar-title,.rm-toolbar-title,.sm-panel-title,.rm-panel-title,.rm-sel-info h4) { color: var(--color-text-primary); }
.glass-app :is(.sm-legend,.rm-legend,.sm-cube-card-label,.rm-room-card-label,.rm-sel-info p,.sm-field label,.rm-field-stack label) { color: var(--color-text-muted); }
.glass-app :is(.rm-selected-room,.rm-time-slot) { color: var(--color-text-secondary); background: var(--glass-surface-soft); border-color: var(--glass-outline); }

.glass-app :is(.iv-rule,.iv-domain-desc,.iv-stat-label,.rc-stat-label,.rc-form-label,.ct-label,.ct-duration-row span,.ct-token-label,.td-info-label,.ht-muted) { color: var(--color-text-muted); }
.glass-app :is(.ct-link-box,.td-info-item,.iv-take-card,.ht-project-card,.ht-team-card) { background: var(--glass-surface-soft); border-color: var(--glass-outline); }

/* Inline legacy surfaces that otherwise remain bright white in dark mode. */
.glass-app [style*="background:#fff"],
.glass-app [style*="background: #fff"],
.glass-app [style*="background:#FFFFFF"],
.glass-app [style*="background: #FFFFFF"] { background: var(--glass-surface-strong) !important; }

/* ── Standalone home and authentication screens ─────────────── */
.glass-home .home-navbar {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.glass-home .home-container,
.glass-app .login-card,
.glass-app .auth-form-box {
  background: var(--glass-surface);
  border: 1px solid var(--glass-outline);
  border-radius: var(--glass-radius-xl);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-home .home-container-header { background: var(--glass-surface-soft); border-color: var(--glass-outline); }
.glass-home .home-app-card { color: var(--color-text-secondary); background: var(--glass-surface-soft); border-color: var(--glass-outline); box-shadow: var(--glass-shadow-soft); }
.glass-home .home-app-card:hover { color: var(--color-accent); background: rgba(var(--color-accent-rgb),.09); border-color: rgba(var(--color-accent-rgb),.34); box-shadow: var(--glass-shadow-hover); }
.glass-home .home-app-icon { background: linear-gradient(135deg,rgba(var(--color-accent-rgb),.14),color-mix(in srgb,var(--glass-violet) 15%,transparent)); }
.glass-auth .login-split,
.glass-auth .auth-container { background: transparent; }
[data-theme="dark"] .glass-home :is(.home-container,.home-app-card,.home-work-quote),
[data-theme="dark"] .glass-auth :is(.login-card,.login-feature) {
  border-color: rgba(74,189,243,.36) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.54), 0 0 27px rgba(54,174,234,.11), inset 0 1px rgba(222,247,255,.10) !important;
}
[data-theme="dark"] .glass-home .home-app-card:hover {
  border-color: color-mix(in srgb,var(--module-color,var(--color-accent)) 45%,rgba(74,189,243,.36)) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 12px rgba(var(--module-rgb,var(--color-accent-rgb)),.10), inset 0 1px rgba(222,247,255,.10) !important;
}
/* Without this, the browser's native focus outline (restored on whichever card was last
   clicked into — e.g. returning to Home via the back button after opening a module)
   sits on that one card indefinitely, making it look permanently "selected" even with
   the mouse nowhere near it and no key ever pressed. Suppress the plain default outline
   for that case, but keep a normal, uniform indicator for genuine keyboard tabbing. */
.glass-home .home-app-card:focus {
  outline: none;
}
.glass-home .home-app-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Public interview test ───────────────────────────────────── */
.glass-interview-test .tt-header { background: var(--glass-surface-strong); border-color: var(--glass-outline); box-shadow: var(--glass-shadow-soft); backdrop-filter: var(--glass-blur); }
.glass-interview-test .tt-card,
.glass-interview-test .tt-question { color: var(--color-text-primary); background: var(--glass-surface); border-color: var(--glass-outline); box-shadow: var(--glass-shadow-soft); backdrop-filter: var(--glass-blur-soft); }
.glass-interview-test :is(.tt-token-form p,.tt-label,.tt-info-label,.tt-progress-text) { color: var(--color-text-muted); }
.glass-interview-test .tt-info-item,
.glass-interview-test .tt-result-item { background: var(--glass-surface-soft); border: 1px solid var(--glass-outline); }
.glass-interview-test .tt-option { color: var(--color-text-secondary); background: var(--glass-surface-soft); border-color: var(--glass-outline); }
.glass-interview-test .tt-option:hover { background: rgba(var(--color-accent-rgb),.08); border-color: rgba(var(--color-accent-rgb),.38); }
.glass-interview-test .tt-option.selected { background: rgba(var(--color-accent-rgb),.16); border-color: var(--color-accent); }

/* ── HTML runner ─────────────────────────────────────────────── */
.glass-html-runner { color: var(--color-text-primary,#0f172a); }
.glass-html-runner :is(.runner-shell,.upload-card,.preview-card,.card,.panel) { background: var(--glass-surface); border-color: var(--glass-outline); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); }

/* ── Mobile navigation ───────────────────────────────────────── */
.mobile-nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: .64rem;
  color: var(--color-text-primary);
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-outline);
  border-radius: var(--glass-radius-sm);
  box-shadow: inset 0 1px var(--glass-highlight);
  cursor: pointer;
}
.mobile-nav-toggle span { display: block; height: 2px; margin: 3px 0; border-radius: 2px; background: currentColor; }
.sidebar-overlay { display: none; }

@keyframes glassFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glassNoticeIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .glass-app .ticket-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .glass-app .page-content { padding: 1.35rem; }
  .glass-app .topbar-user-email { display: none; }
  .glass-app .kanban-board { grid-template-columns: repeat(2,minmax(270px,1fr)); overflow-x: auto; }
}

@media (max-width: 768px) {
  body.nav-open { overflow: hidden; }
  html.sidebar-collapsed .glass-app .sidebar,
  .glass-app .sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1001;
    width: min(86vw, 296px);
    transform: translateX(-105%);
    transition: transform var(--glass-transition);
  }
  .glass-app .sidebar.is-open { transform: translateX(0); }
  html.sidebar-collapsed .glass-app .sidebar-logo-text,
  html.sidebar-collapsed .glass-app .sidebar-raise-btn span,
  html.sidebar-collapsed .glass-app .sidebar-nav a span,
  html.sidebar-collapsed .glass-app .nav-section-label,
  html.sidebar-collapsed .glass-app .sidebar-footer-info { display: initial; }
  html.sidebar-collapsed .glass-app .sidebar-nav a { justify-content: flex-start; }
  html.sidebar-collapsed .glass-app .sidebar-raise-btn { justify-content: center; }
  html.sidebar-collapsed .glass-app .sidebar-logo-full { display: block; }
  html.sidebar-collapsed .glass-app .sidebar-logo-icon { display: none; }
  .mobile-nav-toggle { display: block; }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--glass-overlay);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--glass-transition);
  }
  .sidebar-overlay.is-visible { display: block; opacity: 1; pointer-events: auto; }
  .glass-app .topbar { padding-inline: 1rem; gap: .65rem; }
  .glass-app .topbar-left { min-width: 0; }
  .glass-app .topbar-left > a { min-width: 0; }
  .glass-app .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .glass-app .topbar-actions { gap: .35rem; }
  .glass-app .topbar-user-chip { padding: .2rem; background: transparent; border: 0; }
  .glass-app .page-content { padding: 1rem; }
  .glass-app .page-header { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .glass-app .page-header > div:last-child { width: 100%; flex-wrap: wrap; }
  .glass-app :is(.grid-2,.grid-3,.grid-4) { grid-template-columns: 1fr; }
  .glass-app .kanban-board { grid-template-columns: repeat(4,minmax(275px,84vw)); }
  .glass-app [class$="-modal"],
  .glass-app [role="dialog"] { width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow-y: auto; }
  .glass-app #notif-panel { position: fixed !important; top: 4.5rem !important; right: 1rem !important; left: 1rem !important; width: auto !important; max-width: none !important; }
}

@media (max-width: 480px) {
  .glass-app .topbar-actions .icon-btn { width: 31px !important; height: 31px !important; }
  .glass-app .card,
  .glass-app [class$="-card"] { border-radius: var(--glass-radius); }
  .glass-home .home-navbar-username { display: none; }
}

/* ── Shared icon-action sizing ─────────────────────────────────
   ui.js marks controls that contain only an SVG icon. This overrides the
   many legacy inline padding values without changing normal text buttons. */
.glass-app .ui-icon-action {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  flex: 0 0 40px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px var(--glass-highlight), 0 5px 14px rgba(15,42,75,.10);
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}
.glass-app .btn-sm.ui-icon-action {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex-basis: 38px;
}
.glass-app .ui-icon-action > svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px;
}
.glass-app .ui-icon-action:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px var(--glass-highlight), 0 9px 20px rgba(var(--color-accent-rgb),.20);
}
.glass-app .ui-icon-action:active { transform: translateY(0) scale(.96); }
.glass-app .ui-icon-action:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--color-accent) 38%,transparent);
  outline-offset: 2px;
}
.glass-app .ui-icon-action-group {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  flex-wrap: nowrap !important;
  min-height: 44px;
  padding-inline: .15rem;
}
.glass-app .topbar-actions .ui-icon-action {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex-basis: 36px;
}
.glass-app td:has(.ui-icon-action-group) { min-width: 112px; }
.glass-app td:has(> .ui-icon-action) { min-width: 56px; }
.glass-app .approval-doc-actions {
  min-width: 52px;
  align-items: center;
  justify-content: center;
  padding-inline: .3rem;
}
.glass-app .pagination-compact {
  gap: .65rem !important;
  min-height: 48px;
}
.glass-app .pagination-compact > .btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.glass-app .board-pagination {
  width: 100%;
  gap: .65rem !important;
}
.glass-app .board-pagination > .ui-icon-action {
  border: 1px solid color-mix(in srgb,var(--glass-outline) 78%,var(--color-accent) 22%) !important;
  background: color-mix(in srgb,var(--glass-surface-soft) 88%,var(--color-accent) 12%) !important;
  color: var(--color-text-primary) !important;
}
.glass-app .board-pagination > .ui-icon-action:not([style*="pointer-events: none"]):hover {
  color: #fff !important;
  border-color: var(--color-accent) !important;
  background: linear-gradient(135deg,var(--color-accent),var(--color-accent-2)) !important;
}
.glass-app .board-pagination-current {
  border-radius: 50% !important;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(var(--color-accent-rgb),.28);
}

@media (max-width: 480px) {
  .glass-app .topbar-actions .ui-icon-action {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex-basis: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body.glass-app { color: #111827; background: #fff !important; }
  body.glass-app::before,
  body.glass-app::after,
  .glass-app .sidebar,
  .glass-app .topbar,
  .sidebar-overlay { display: none !important; }
  .glass-app .main-content,
  .glass-app .page-content { padding: 0; background: #fff; }
  .glass-app .card,
  .glass-app table { color: #111827; background: #fff; box-shadow: none; backdrop-filter: none; }
}

/* Shine hover for the sidebar's primary action pill (Raise a Ticket /
   Reserve a Seat / Log your Hours / Upload Documents — all one shared
   class). Layered directly onto this element's own background instead of
   the clipping ::after overlay used elsewhere for shine (see app.css) —
   that overlay technique needs overflow:hidden, which changes a flex item's
   automatic min-height resolution from content-based to 0 and was altering
   this pill's rendered size. background-position animation can never affect
   box size, so this keeps the shine without touching the button's
   dimensions. Repeats the same base gradient from the `.sidebar-raise-btn`
   rule above (necessarily — background-image is a longhand override of the
   shorthand `background` set there) as a second, further-back layer so this
   still wins that property while every other declaration up there (color,
   border, box-shadow, and its own :hover transform/box-shadow) is untouched
   and keeps applying normally. */
.glass-app .sidebar-raise-btn {
  background-image:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%),
    linear-gradient(135deg, var(--color-accent), var(--color-accent-2) 58%, var(--glass-violet));
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position .65s cubic-bezier(.25, .46, .45, .94), transform var(--glass-transition-fast, .16s ease), box-shadow var(--glass-transition-fast, .16s ease);
}
.glass-app .sidebar-raise-btn:hover {
  background-position: -50% 0, 0 0;
}

/* Vault "+ New Item" is a full-width list footer, not a pill. Beats the generic
   `.glass-app button { border-radius: 999px !important }` even if that file is cached. */
.glass-app button.pm-list-add:not(.sidebar-overlay):not(.mobile-nav-toggle):not(.attachment-tile) {
  border-radius: 0 !important;
}