/* ================================================================
   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,
.glass-app > div { 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) { 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;
  border-width: 1px;
  border-radius: 16px !important;
}
.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 :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 has inline legacy background values. */
.glass-app #notif-panel {
  background: var(--glass-surface-strong) !important;
  border-color: var(--glass-outline) !important;
  border-radius: var(--glass-radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.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
) {
  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);
}
.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: color-mix(in srgb,var(--glass-surface-strong) 84%,transparent);
  border-color: var(--glass-outline);
  box-shadow: 0 10px 34px rgba(15,42,75,.12);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.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;
}

/* ── 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; }
}