:root {
  --bg-deep: #0a0a0a;
  --bg-base: #111111;
  --bg-elevated: #1a1a1a;
  --bg-surface: #222222;
  --bg-hover: #2a2a2a;
  --white: #ffffff;
  --text: #ffffff;
  --text-muted: #a3a3a3;
  --charcoal: #f5f5f5;
  --muted: #9ca3af;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --accent: #ffffff;
  --accent-dim: #d4d4d4;
  --notify: #ef4444;
  --notify-strong: #dc2626;
  --notify-bg: rgba(239, 68, 68, 0.14);
  /* legacy aliases */
  --ivory: var(--bg-deep);
  --gold: var(--accent);
  --gold-dim: var(--accent-dim);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Inter, system-ui, sans-serif;
  background: var(--bg-deep); color: var(--text);
}
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-dim); }
.muted { color: var(--muted); font-size: 0.92rem; }
.err { color: var(--notify); }
.notice { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text); padding: 1rem; border-radius: 8px; }

/* ?????? App shell & sidebar ?????? */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  color: #f5f5f5; border-right: 1px solid var(--border);
  align-self: stretch; min-height: 100vh;
  z-index: 200; transition: margin-left 0.22s ease, opacity 0.2s ease;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.15rem 1rem; border-bottom: 1px solid var(--border);
  position: relative;
}
.sidebar-collapse {
  margin-left: auto; flex-shrink: 0;
}
.btn-icon-dark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border-radius: 6px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75); cursor: pointer;
}
.btn-icon-dark:hover { background: rgba(255,255,255,0.1); color: #fff; }
.btn-icon-dark .nav-icon { width: 1.1rem; height: 1.1rem; }

@media (min-width: 961px) {
  .app-shell.sidebar-collapsed .sidebar {
    margin-left: -260px; opacity: 0; pointer-events: none;
  }
  .content-topbar .sidebar-toggle { display: inline-flex; }
}

.sidebar-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.sidebar-brand-text { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-brand-link { min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.sidebar-brand-link:hover .sidebar-title { color: #fff; }
.sidebar-title { font-size: 0.9rem; line-height: 1.25; color: var(--accent); letter-spacing: 0.02em; }
.sidebar-user { font-size: 0.78rem; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-nav { flex: 1; padding: 0.65rem 0.5rem; }
.nav-section {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 0.85rem 0.75rem 0.35rem; margin-top: 0.25rem;
}
.nav-section:first-child { margin-top: 0; padding-top: 0.15rem; }

.nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.58rem 0.75rem; margin-bottom: 0.15rem;
  border-radius: 8px; text-decoration: none;
  color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; font-weight: 500;
  border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-link.active {
  background: rgba(255, 255, 255, 0.12); color: #fff;
  box-shadow: inset 3px 0 0 #fff;
}
.nav-icon { display: inline-flex; flex-shrink: 0; width: 1.25rem; height: 1.25rem; opacity: 0.9; }
.nav-link.active .nav-icon { opacity: 1; color: #fff; }
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-label { line-height: 1.25; }

.sidebar-footer {
  padding: 0.75rem 0.5rem 1rem; border-top: 1px solid var(--border);
}
.sidebar-role {
  font-size: 0.72rem; text-transform: capitalize; padding: 0 0.75rem 0.5rem;
  color: rgba(255,255,255,0.45) !important;
}
.sidebar-logout { color: rgba(255,255,255,0.65); }
.sidebar-logout:hover { color: #fff; background: rgba(255,255,255,0.08); }

.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.content-topbar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem; background: var(--bg-base);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.content-topbar-titles { flex: 1; min-width: 0; }
.content-topbar-right {
  margin-left: auto;
  flex-shrink: 0;
  max-width: min(520px, 60vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.user-menu {
  position: relative;
  flex-shrink: 0;
}
.user-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--gk-btn-border, var(--border, #cbd5e1));
  background: var(--gk-btn-bg, var(--bg-elevated, #fff));
  color: var(--gk-btn-color, var(--text, #0f172a));
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1;
}
.user-avatar-btn:hover {
  border-color: var(--accent, #0d9488);
  color: var(--accent, #0d9488);
}
.user-avatar-initials { pointer-events: none; }
.user-menu-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 12.5rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  z-index: 80;
  isolation: isolate;
}
.user-menu-panel[hidden] {
  display: none !important;
}
.user-menu-head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem 0.45rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}
.user-menu-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.user-menu-role {
  font-size: 0.72rem;
  text-transform: capitalize;
}
.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 0.875rem;
  padding: 0.55rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
}
.user-menu-item:hover {
  background: var(--bg-muted, #f1f5f9);
}
.user-password-form label {
  display: block;
  margin-top: 0.75rem;
}
.user-password-form .luxe-input {
  margin-top: 0.3rem;
}
.user-password-ok {
  margin-top: 0.65rem;
  color: #047857;
  font-size: 0.875rem;
}
html[data-theme="dark"] .user-avatar-btn {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
}
html[data-theme="dark"] .user-menu-panel {
  background: #1a1d24;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
html[data-theme="dark"] .user-menu-item:hover {
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .user-password-ok { color: #34d399; }
.topbar-brand { display: flex; align-items: center; gap: 0.65rem; justify-content: flex-start; text-align: start; }
html[dir="rtl"] .topbar-brand { justify-content: flex-end; text-align: end; }
.topbar-brand-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.12),
    0 4px 16px rgba(15, 23, 42, 0.14);
}
.topbar-brand-text { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.topbar-brand-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.topbar-brand-onsite { margin: 0; font-size: 0.78rem; line-height: 1.35; }
.content-title { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.25; color: var(--text); }
.content-subtitle { margin: 0.2rem 0 0; font-size: 0.88rem; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
  cursor: pointer; flex-shrink: 0; box-shadow: none;
}
.btn-icon:hover { background: #f8fafc; border-color: #94a3b8; color: #0f766e; }
.btn-icon .nav-icon { width: 1.1rem; height: 1.1rem; }

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 150;
}
.sidebar-backdrop:not([hidden]) { display: block; }

.main { flex: 1; padding: 1rem 1.25rem 2rem; max-width: none; width: 100%; box-sizing: border-box; }
.page-body section { margin-top: 1.5rem; }
.page-body h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }

/* Legacy topbar (unused) ??? kept for print refs */
.topbar { display: none; }
.brand { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.brand-logo {
  height: 64px;
  width: 64px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.12),
    0 4px 14px rgba(15, 23, 42, 0.12);
}

@media (max-width: 960px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    min-height: 0; height: auto; max-height: 100vh; overflow-y: auto;
    transform: translateX(-100%);
    margin-left: 0 !important; opacity: 1; pointer-events: auto;
    transition: transform 0.22s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    scrollbar-width: thin; scrollbar-color: rgba(197, 162, 74, 0.35) transparent;
  }
  .app-shell.sidebar-collapsed .sidebar { margin-left: 0 !important; opacity: 1; }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
}

.list { display: grid; gap: 0.75rem; }
.card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.card-head { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; }
.badge { font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--bg-surface); color: var(--text-muted); text-transform: lowercase; }
.actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.btn-primary, .btn-outline {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: 2rem;
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: none;
}
a.btn-outline { display: inline-flex; text-decoration: none; text-align: center; box-sizing: border-box; }
.btn-primary {
  background: #fff;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.btn-primary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f766e;
}
.btn-outline {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #334155;
}
.btn-outline:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f766e;
}
html[data-theme="dark"] .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
}
html[data-theme="dark"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #5eead4;
}
html[data-theme="dark"] .btn-icon {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
}
html[data-theme="dark"] .btn-icon:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #5eead4;
}

.login-wrap { min-height: 100vh; min-height: 100dvh; padding: 1rem; }
.login-card { width: 100%; }
.login-card label { display: block; margin: 0.75rem 0; font-size: 0.9rem; }
.login-remember {
  display: flex !important; align-items: flex-start; gap: 0.55rem;
  margin: 0.35rem 0 0.75rem !important; cursor: pointer; font-weight: 500;
}
.login-remember input {
  width: auto !important; min-height: 0 !important; margin-top: 0.2rem;
  accent-color: #0f766e;
}
.login-remember span { line-height: 1.35; color: var(--text-muted, var(--muted)); font-size: 0.86rem; }
.login-biometric {
  width: 100%; margin: 0 0 0.75rem; justify-content: center;
}
.login-biometric-hint { margin: 0 0 0.75rem; font-size: 0.8rem; line-height: 1.4; }
.login-sso { margin-top: 1rem; }
.login-sso-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.25rem 0 0.85rem; color: var(--muted); font-size: 0.78rem;
}
.login-sso-divider::before, .login-sso-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.login-microsoft {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; text-decoration: none; font-weight: 650;
}
.login-microsoft-icon { width: 1.1rem; height: 1.1rem; }
.login-sso-hint { margin: 0.55rem 0 0; font-size: 0.78rem; }
.login-card input {
  width: 100%; margin-top: 0.35rem; padding: 0.65rem; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; background: var(--bg-surface); color: var(--text);
}

.table { width: 100%; border-collapse: collapse; background: var(--bg-elevated); font-size: 0.88rem; color: var(--text); }
.table th, .table td { border: 1px solid var(--border); padding: 0.5rem 0.65rem; text-align: left; }
.table th { background: var(--bg-surface); color: var(--text-muted); }

.stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; text-align: center; }
.stat-n { display: block; font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.stat-l { font-size: 0.78rem; color: var(--muted); text-transform: capitalize; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }

.public-header { background: var(--bg-base); border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; }
.public-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: start;
  max-width: 720px;
  /* Flush to reading-start: left in English (LTR), right in Arabic (RTL) ? not centered */
  margin-inline: 0 auto;
  margin-block: 0;
  width: 100%;
}
.public-header-text { min-width: 0; flex: 1; text-align: start; }
.public-form-logo {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  margin: 0;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.12),
    0 4px 14px rgba(15, 23, 42, 0.12);
  display: block;
}
.public-brand { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.public-main {
  max-width: 640px;
  width: 100%;
  margin-inline: 0 auto;
  margin-block: 0;
  padding: 1rem 1.25rem 2rem;
  text-align: start;
}
.public-step-label { margin: 1.25rem 0 0.5rem; font-size: 0.95rem; text-align: start; }
.combined-compliance-card { margin-bottom: 1rem; }
.combined-compliance-card .settings-subhead { margin-top: 0.25rem; }
.public-form label { display: block; margin: 0.65rem 0; font-size: 0.9rem; text-align: start; }
.public-form input,
.public-form select,
.public-form textarea,
.public-form button { text-align: start; }
html[dir="ltr"] .public-form input[type="number"],
html[dir="ltr"] .public-form input[type="email"],
html[dir="ltr"] .public-form input[type="tel"],
html[dir="ltr"] .public-form input[type="date"],
html[dir="ltr"] .public-form input[type="datetime-local"],
html[dir="ltr"] .public-form input[type="time"] { text-align: left; }
.access-zones-field .muted { display: block; margin-top: 0.35rem; font-size: 0.82rem; font-weight: 400; }
.public-work-window {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border, #e2e8f0);
  border-inline-start: 3px solid var(--teal-primary, #0f766e);
  border-radius: 10px;
  background: #f8fafc;
}
.public-work-window-title { font-weight: 600; font-size: 0.9rem; }
.public-work-window-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
}
.public-work-window-grid dt { font-size: 0.75rem; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.04em; }
.public-work-window-grid dd { margin: 0.1rem 0 0; font-weight: 600; color: var(--text, #0f172a); }
.public-work-window .muted { font-size: 0.82rem; }
html[data-theme="dark"] .public-work-window { background: rgba(255, 255, 255, 0.04); }
.zone-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.25rem 0 0.85rem;
}
.zone-suggestions .zone-chip {
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
}
.eq-field {
  margin: 0.65rem 0 0.85rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}
.eq-field legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 0.25rem;
}
.eq-hint { margin: 0.15rem 0 0.55rem; font-size: 0.82rem; }
.eq-none-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  font-weight: 500;
}
.eq-none-row input { width: 1.15rem; height: 1.15rem; }
.eq-suggestions { margin: 0 0 0.55rem; }
.eq-add-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.eq-add-row input { flex: 1; min-width: 0; }
.eq-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.eq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--surface-muted, #f8fafc);
  border-radius: 6px;
  font-size: 0.9rem;
}
.eq-remove {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 4px;
}
.eq-remove:hover { background: #fee2e2; color: #991b1b; }
.create-link-company-label,
.create-link-risk-label,
.create-link-email-label,
.create-link-zones-label {
  display: block;
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.create-link-company-label input,
.create-link-risk-label select,
.create-link-email-label input,
.create-link-zones-label textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  box-sizing: border-box;
}
.create-link-zones-label .muted {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 400;
}
.create-link-dialog .zone-suggestions {
  margin: -0.55rem 0 0.85rem;
}
.create-link-company-label .muted,
.create-link-risk-label .muted {
  display: none;
}
.create-link-ok {
  margin: 0 0 0.75rem;
  color: #34d399;
  font-size: 0.88rem;
}
#cl-company.is-invalid,
#cl-risk-tier.is-invalid,
#cl-email.is-invalid {
  border-color: #f87171;
  outline-color: rgba(248, 113, 113, 0.35);
}
.token-company-cell { min-width: 8rem; }
.date-parts-field {
  display: block;
  margin: 0.65rem 0;
  font-size: 0.9rem;
}
.date-parts-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.date-parts-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.date-parts-with-time .date-parts-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.date-parts-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 !important;
  min-width: 0;
}
.date-parts-caption {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}
.date-parts-cell select {
  width: 100%;
  margin: 0;
}
@media (max-width: 640px) {
  .date-parts-with-time .date-parts-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .date-parts-with-time .date-parts-cell:nth-child(4),
  .date-parts-with-time .date-parts-cell:nth-child(5) {
    grid-column: span 1;
  }
}
.login-card input, .form-grid input, .form-grid select, .form-grid textarea,
input, select, textarea {
  background: var(--bg-surface); color: var(--text); border-color: var(--border);
}
.public-form input, .public-form select, .public-form textarea {
  width: 100%; margin-top: 0.3rem; padding: 0.55rem; border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
.visitors-block { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; margin: 1rem 0; }

.week-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; }
.week-day { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; min-height: 80px; }
.week-day h3 { margin: 0 0 0.35rem; font-size: 0.78rem; color: var(--muted); }
.week-item { font-size: 0.75rem; margin-bottom: 0.25rem; }
.week-time { font-weight: 600; }
.week-empty { margin: 0; font-size: 0.75rem; }

.pass-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.pass-card { max-width: 420px; text-align: center; padding: 2rem; }
.pass-id { letter-spacing: 0.1em; }
.pass-qr { margin: 1rem auto; display: block; }
.pass-dl { text-align: left; font-size: 0.9rem; }
.pass-dl dt { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); margin-top: 0.5rem; }
.login-logo {
  width: 148px;
  height: 148px;
  max-width: min(148px, 52vw);
  max-height: min(148px, 52vw);
  display: block;
  margin: 0 auto 1.35rem;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: 4px solid #fff;
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.1),
    0 10px 32px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.08);
}
.public-header .login-logo {
  width: 88px;
  height: 88px;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
}
.login-footer { text-align: center; margin-top: 1rem; font-size: 0.85rem; }

.gk-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
@media (max-width: 900px) { .gk-layout { grid-template-columns: 1fr; } }
.detail-panel { position: sticky; top: 1rem; max-height: 90vh; overflow-y: auto; }
.id-thumb { max-width: 120px; max-height: 80px; border: 1px solid var(--border); margin-top: 0.25rem; }
.equip-list label { display: block; margin: 0.25rem 0; }
.overstay-badge { background: var(--notify-strong); color: #fff; }
.week-item-btn { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font-size: 0.75rem; padding: 0.15rem 0; }
.week-item-btn:hover { color: var(--accent); }

.form-grid { display: grid; gap: 0.65rem; max-width: 640px; }
.form-grid label { display: block; font-size: 0.9rem; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; margin-top: 0.25rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }

.team-wrap { max-width: 640px; margin: 0 auto; padding: 1rem; }
.team-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ?? Team chat ?? */
.team-chat-page {
  --im-bg: #ffffff;
  --im-chat-bg: #ffffff;
  --im-nav-bg: rgba(249, 249, 249, 0.94);
  --im-nav-border: rgba(60, 60, 67, 0.12);
  --im-text: #000000;
  --im-sub: rgba(60, 60, 67, 0.6);
  --im-incoming: #e9e9eb;
  --im-incoming-text: #000000;
  --im-outgoing: #007aff;
  --im-outgoing-text: #ffffff;
  --im-composer-bg: rgba(249, 249, 249, 0.94);
  --im-field-bg: #ffffff;
  --im-field-border: rgba(60, 60, 67, 0.18);
  --im-plus-bg: #e5e5ea;
  --im-plus-fg: #000000;
  --im-send: #007aff;
  --im-send-disabled: rgba(60, 60, 67, 0.18);
  --im-day-bg: rgba(242, 242, 247, 0.92);
  --im-day-text: rgba(60, 60, 67, 0.6);
  --im-empty: rgba(60, 60, 67, 0.45);
  --im-avatar-staff: #34c759;
  --im-avatar-contractor: #5856d6;
  --im-radius: 18px;
  --im-safe-bottom: env(safe-area-inset-bottom, 0px);
  --im-safe-top: env(safe-area-inset-top, 0px);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--im-chat-bg);
  color: var(--im-text);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html:has(.team-chat-page),
html:has(.team-chat-page) body,
html:has(.team-chat-page) #app {
  height: 100%;
  max-height: 100%;
  margin: 0;
  overflow: hidden;
}
.team-chat-page.is-embed {
  height: 100%;
  max-height: 100%;
}
@media (prefers-color-scheme: dark) {
  .team-chat-page:not([data-force-light]) {
    --im-bg: #000000;
    --im-chat-bg: #000000;
    --im-nav-bg: rgba(28, 28, 30, 0.92);
    --im-nav-border: rgba(84, 84, 88, 0.65);
    --im-text: #ffffff;
    --im-sub: rgba(235, 235, 245, 0.6);
    --im-incoming: #262628;
    --im-incoming-text: #ffffff;
    --im-outgoing: #0a84ff;
    --im-outgoing-text: #ffffff;
    --im-composer-bg: rgba(28, 28, 30, 0.92);
    --im-field-bg: #1c1c1e;
    --im-field-border: rgba(84, 84, 88, 0.65);
    --im-plus-bg: #3a3a3c;
    --im-plus-fg: #ffffff;
    --im-send-disabled: rgba(235, 235, 245, 0.18);
    --im-day-bg: rgba(44, 44, 46, 0.92);
    --im-day-text: rgba(235, 235, 245, 0.55);
    --im-empty: rgba(235, 235, 245, 0.45);
  }
}
html[data-theme="dark"] .team-chat-page {
  --im-bg: #000000;
  --im-chat-bg: #000000;
  --im-nav-bg: rgba(28, 28, 30, 0.92);
  --im-nav-border: rgba(84, 84, 88, 0.65);
  --im-text: #ffffff;
  --im-sub: rgba(235, 235, 245, 0.6);
  --im-incoming: #262628;
  --im-incoming-text: #ffffff;
  --im-outgoing: #0a84ff;
  --im-outgoing-text: #ffffff;
  --im-composer-bg: rgba(28, 28, 30, 0.92);
  --im-field-bg: #1c1c1e;
  --im-field-border: rgba(84, 84, 88, 0.65);
  --im-plus-bg: #3a3a3c;
  --im-plus-fg: #ffffff;
  --im-send-disabled: rgba(235, 235, 245, 0.18);
  --im-day-bg: rgba(44, 44, 46, 0.92);
  --im-day-text: rgba(235, 235, 245, 0.55);
  --im-empty: rgba(235, 235, 245, 0.45);
}
html[data-theme="light"] .team-chat-page {
  --im-bg: #ffffff;
  --im-chat-bg: #ffffff;
  --im-nav-bg: rgba(249, 249, 249, 0.94);
  --im-nav-border: rgba(60, 60, 67, 0.12);
  --im-text: #000000;
  --im-sub: rgba(60, 60, 67, 0.6);
  --im-incoming: #e9e9eb;
  --im-incoming-text: #000000;
  --im-outgoing: #007aff;
  --im-outgoing-text: #ffffff;
  --im-composer-bg: rgba(249, 249, 249, 0.94);
  --im-field-bg: #ffffff;
  --im-field-border: rgba(60, 60, 67, 0.18);
  --im-plus-bg: #e5e5ea;
  --im-plus-fg: #000000;
  --im-send-disabled: rgba(60, 60, 67, 0.18);
  --im-day-bg: rgba(242, 242, 247, 0.92);
  --im-day-text: rgba(60, 60, 67, 0.6);
  --im-empty: rgba(60, 60, 67, 0.45);
}

.team-chat-nav {
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  padding-top: var(--im-safe-top);
}
.team-chat-nav-blur {
  position: absolute; inset: 0;
  background: var(--im-nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--im-nav-border);
}
.team-chat-nav-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.75rem, 1fr) minmax(0, 2.4fr) minmax(4.75rem, 1fr);
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.5rem;
  min-height: 56px;
  direction: ltr;
}
.team-chat-nav-leading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.team-chat-brand-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 0.5px solid var(--im-nav-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.team-chat-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff;
}
.team-chat-brand-logo-fallback {
  width: 100%;
  height: 100%;
  background: rgba(120, 120, 128, 0.12);
}
.team-chat-nav-text {
  min-width: 0;
  text-align: center;
}
.team-chat-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-chat-sub {
  margin: 0.08rem 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--im-sub);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-chat-sub.is-overdue { color: #ff3b30; font-weight: 600; }
.team-chat-nav-trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  min-height: 36px;
}
.team-chat-nav-icon {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #007aff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}
.team-chat-nav-icon svg { width: 22px; height: 22px; }
.team-chat-nav-icon:active { opacity: 0.55; }
.team-chat-nav-done {
  appearance: none;
  border: none;
  background: transparent;
  color: #007aff;
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  padding: 0.2rem 0.15rem 0.2rem 0.35rem;
  cursor: pointer;
  min-height: 36px;
}
html[dir="rtl"] .team-chat-nav-text,
html[dir="rtl"] .team-chat-title,
html[dir="rtl"] .team-chat-sub {
  direction: rtl;
}

.team-chat-timing {
  position: relative;
  z-index: 1;
  border-top: 0.5px solid var(--im-nav-border);
  background: rgba(52, 199, 89, 0.12);
}
.team-chat-slack-banner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.95rem 0.65rem;
  border-bottom: 0.5px solid var(--im-nav-border);
  background: rgba(74, 21, 75, 0.08);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
}
.team-chat-slack-banner strong {
  color: #4A154B;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-theme="dark"] .team-chat-slack-banner {
  background: rgba(236, 178, 46, 0.08);
}
html[data-theme="dark"] .team-chat-slack-banner strong { color: #ecb22e; }
.team-chat-timing.is-overdue { background: rgba(255, 59, 48, 0.14); }
.team-chat-timing.is-pending { background: rgba(255, 149, 0, 0.14); }
.team-chat-timing-inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  padding: 0.4rem 0.9rem 0.55rem;
  font-size: 13px;
}
.team-chat-timing-label {
  color: var(--im-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.team-chat-timing-value {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--im-text);
}
.team-chat-timing.is-overdue .team-chat-timing-value { color: #ff3b30; }
.team-chat-timing-meta {
  color: var(--im-sub);
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.team-chat-modal[hidden] { display: none !important; }
.team-chat-modal-card {
  width: min(100%, 360px);
  background: var(--im-composer-bg, #f9f9f9);
  color: var(--im-text);
  border-radius: 16px;
  padding: 1.15rem 1.1rem 1rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.team-chat-modal-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.team-chat-modal-copy {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  color: var(--im-sub);
  line-height: 1.4;
}
.team-chat-modal-detail {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--im-sub);
  line-height: 1.35;
}
.team-chat-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.team-chat-modal-btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 0.72rem 1rem;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
}
.team-chat-modal-btn-primary {
  background: #007aff;
  color: #fff;
}
.team-chat-modal-btn-call {
  background: #34c759;
  color: #fff;
}
.team-chat-modal-btn-ghost {
  background: transparent;
  color: var(--im-sub);
  font-weight: 500;
}
.team-chat-extend-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.team-chat-extend-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--im-sub);
}
.team-chat-extend-input {
  border: 1px solid var(--im-field-border, rgba(60,60,67,0.18));
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--im-text);
  background: var(--im-field-bg, #fff);
}
.team-chat-extend-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--im-text);
}

.team-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--im-chat-bg);
}
.team-chat-day {
  display: flex; justify-content: center;
  margin: 0.85rem 0 0.55rem;
}
.team-chat-day span {
  font-size: 12px;
  font-weight: 600;
  color: var(--im-day-text);
  background: var(--im-day-bg);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}

.team-chat-empty {
  margin: auto;
  text-align: center;
  padding: 1.5rem 1rem;
  max-width: 16rem;
}
.team-chat-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 0.75rem;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--im-day-bg);
  color: var(--im-empty);
}
.team-chat-empty-icon svg { width: 28px; height: 28px; }
.team-chat-empty-title {
  margin: 0 0 0.25rem;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.team-chat-empty-copy {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--im-sub);
}

.team-chat-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  max-width: min(78%, 22rem);
  margin-top: 0.35rem;
}
.team-chat-bubble-wrap.is-stacked { margin-top: 0.12rem; }
.team-chat-bubble-theirs { align-self: flex-start; }
.team-chat-bubble-mine { align-self: flex-end; }
.team-chat-avatar,
.team-chat-avatar-spacer {
  display: none;
}
.team-chat-avatar {
  border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.team-chat-avatar-staff { background: var(--im-avatar-staff); }
.team-chat-avatar-contractor { background: var(--im-avatar-contractor); }
.team-chat-bubble-col { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.team-chat-bubble-mine .team-chat-bubble-col { align-items: flex-end; }
.team-chat-sender {
  font-size: 11px;
  font-weight: 500;
  color: var(--im-sub);
  margin: 0 0 0.15rem 0.55rem;
}
.team-chat-bubble {
  position: relative;
  padding: 0.45rem 0.7rem;
  border-radius: var(--im-radius);
  max-width: 100%;
}
.team-chat-bubble-staff:not(.team-chat-bubble-mine),
.team-chat-bubble-contractor:not(.team-chat-bubble-mine) {
  background: var(--im-incoming);
  color: var(--im-incoming-text);
  border-bottom-left-radius: 4px;
}
.team-chat-bubble-wrap.is-stacked.team-chat-bubble-theirs .team-chat-bubble {
  border-bottom-left-radius: var(--im-radius);
  border-top-left-radius: 4px;
}
.team-chat-bubble-wrap.is-tail.team-chat-bubble-theirs .team-chat-bubble {
  border-bottom-left-radius: 4px;
}
.team-chat-bubble-mine {
  background: var(--im-outgoing) !important;
  color: var(--im-outgoing-text) !important;
  border: none !important;
  border-bottom-right-radius: 4px;
}
.team-chat-bubble-wrap.is-stacked.team-chat-bubble-mine .team-chat-bubble-mine {
  border-bottom-right-radius: var(--im-radius);
  border-top-right-radius: 4px;
}
.team-chat-bubble-wrap.is-tail.team-chat-bubble-mine .team-chat-bubble-mine {
  border-bottom-right-radius: 4px;
}
.team-chat-bubble-image-only {
  padding: 0.2rem;
  background: transparent !important;
}
.team-chat-bubble-image-only.team-chat-bubble-mine {
  background: transparent !important;
}
.team-chat-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
  word-break: break-word;
}
.team-chat-bubble-has-image .team-chat-body { margin-top: 0.35rem; padding: 0 0.15rem 0.15rem; }
.team-chat-time {
  display: block;
  margin: 0.15rem 0.45rem 0;
  font-size: 11px;
  color: var(--im-sub);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.team-chat-bubble-wrap:hover .team-chat-time,
.team-chat-bubble-wrap:focus-within .team-chat-time,
.team-chat-bubble-wrap.is-tail .team-chat-time {
  opacity: 1;
}
.team-chat-image-btn {
  display: block; padding: 0; border: none; background: none; cursor: zoom-in;
  max-width: min(100%, 240px); border-radius: 14px; overflow: hidden;
}
.team-chat-image {
  display: block; width: 100%; max-height: 260px; object-fit: cover;
  background: rgba(120, 120, 128, 0.12);
  min-height: 80px;
}
.team-chat-image-missing {
  margin: 0;
  padding: 1rem 0.85rem;
  font-size: 13px;
  color: var(--im-sub);
  background: rgba(120, 120, 128, 0.12);
  border-radius: 12px;
}
.team-chat-photo-thumb {
  width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
  background: rgba(120, 120, 128, 0.18);
  display: block;
}
.team-chat-photo-thumb:not([src]) {
  display: none !important;
}
.team-chat-photo-unavailable {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--im-sub);
  background: rgba(120, 120, 128, 0.18);
}
.team-chat-photo-unavailable:not([hidden]) {
  display: flex;
}

.team-chat-composer {
  flex-shrink: 0;
  background: var(--im-composer-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--im-nav-border);
}
.team-chat-composer-safe {
  padding: 0.45rem 0.65rem calc(0.55rem + var(--im-safe-bottom));
}
.team-chat-name-row { margin-bottom: 0.4rem; }
.team-chat-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--im-field-border);
  border-radius: 18px;
  background: var(--im-field-bg);
  color: var(--im-text);
  font: inherit;
  font-size: 16px;
}
.team-chat-name-input:focus {
  outline: none;
  border-color: var(--im-outgoing);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
}
.team-chat-photo-preview {
  display: flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.45rem; padding: 0.45rem 0.55rem;
  border-radius: 14px; background: var(--im-day-bg);
}
.team-chat-photo-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.team-chat-photo-name {
  font-size: 13px; color: var(--im-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-chat-photo-remove {
  appearance: none; border: none; background: none; padding: 0;
  color: #ff3b30; font: inherit; font-size: 13px; font-weight: 600;
  text-align: left; cursor: pointer; min-height: 28px;
}
.team-chat-input-row {
  display: flex; align-items: flex-end; gap: 0.4rem;
}
.team-chat-attach {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: none; border-radius: 999px;
  background: var(--im-plus-bg);
  color: var(--im-plus-fg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.team-chat-attach svg { width: 18px; height: 18px; }
.team-chat-attach:active { opacity: 0.55; }
.team-chat-attach-wrap {
  position: relative;
  flex-shrink: 0;
}
.team-chat-attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 20;
  min-width: 220px;
  padding: 0.35rem;
  border-radius: 14px;
  background: var(--im-composer-bg, #f9f9f9);
  border: 0.5px solid var(--im-nav-border);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.team-chat-attach-menu[hidden] { display: none !important; }
.team-chat-attach-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--im-text);
  text-align: left;
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  font: inherit;
}
.team-chat-attach-option:hover,
.team-chat-attach-option:focus-visible {
  background: rgba(0, 122, 255, 0.12);
  outline: none;
}
.team-chat-attach-option-title {
  font-size: 15px;
  font-weight: 600;
}
.team-chat-attach-option-sub {
  font-size: 12px;
  color: var(--im-sub);
}
.team-chat-field {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.28rem 0.28rem 0.28rem 0.7rem;
  border: 1px solid var(--im-field-border);
  border-radius: 20px;
  background: var(--im-field-bg);
}
.team-chat-textarea {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--im-text);
  font: inherit;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  padding: 0.4rem 0;
  box-sizing: border-box;
}
.team-chat-textarea::placeholder { color: var(--im-sub); }
.team-chat-send {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none; border-radius: 999px;
  background: var(--im-send-disabled);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.team-chat-send.is-ready {
  background: var(--im-send);
}
.team-chat-send:disabled { cursor: default; }
.team-chat-send.is-ready:active { transform: scale(0.92); }
.team-chat-send svg { width: 18px; height: 18px; }
.team-chat-err {
  margin: 0 0 0.45rem;
  font-size: 13px;
  color: #ff3b30;
  font-weight: 500;
}
.team-chat-staff-note { display: none; }

.team-chat-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.team-chat-sheet[hidden] { display: none !important; }
.team-chat-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.32);
}
.team-chat-sheet-card {
  position: relative;
  width: min(100%, 420px);
  background: var(--im-composer-bg);
  color: var(--im-text);
  border-radius: 14px 14px 0 0;
  padding: 0.45rem 1rem calc(1rem + var(--im-safe-bottom));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.team-chat-sheet-handle {
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: rgba(60, 60, 67, 0.28);
  margin: 0.2rem 0 0.35rem;
}
.team-chat-sheet-card h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.team-chat-sheet-copy {
  margin: 0;
  font-size: 13px;
  color: var(--im-sub);
  text-align: center;
  line-height: 1.35;
}
.team-chat-sheet-qr {
  width: 168px;
  height: 168px;
  border-radius: 12px;
  background: #fff;
  padding: 0.4rem;
  box-sizing: border-box;
}
.team-chat-sheet-url {
  margin: 0 0 0.35rem;
  font-size: 11px;
  color: var(--im-sub);
  word-break: break-all;
  text-align: center;
  line-height: 1.4;
}
.team-chat-sheet-card .team-chat-modal-btn { width: 100%; }

@media (max-width: 720px) {
  .team-chat-bubble-wrap { max-width: 84%; }
}
.scanner-panel label { display: block; margin: 0.5rem 0; }
.scan-fields { background: #111; color: #eee; padding: 0.75rem; font-size: 0.75rem; max-height: 240px; overflow: auto; }
.scanner-preview img { max-width: 100%; max-height: 280px; border: 1px solid var(--border); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-panel { background: var(--white); border-radius: 8px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.25rem; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.modal-panel h2 { margin-top: 0; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-danger { border-color: #991b1b; color: #991b1b; }
.btn-danger:hover { background: #991b1b; color: #fff; }
.btn-danger-fill { background: #991b1b; border-color: #991b1b; color: #fff; }
.btn-danger-fill:hover { background: #7f1515; border-color: #7f1515; color: #fff; }
.table-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.luxe-input {
  width: 100%; margin-top: 0.25rem; padding: 0.5rem;
  border: 1px solid var(--border); border-radius: 6px; font: inherit;
}

.ui-dialog { max-width: 440px; }
.ui-dialog-themed {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22) !important;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
}
.ui-dialog-themed .modal-head,
.ui-dialog-themed .ui-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1.05rem 1.15rem 0.9rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.08), transparent);
}
.ui-dialog-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}
.ui-dialog-icon svg { width: 1.2rem; height: 1.2rem; display: block; }
.ui-dialog-head-text { min-width: 0; flex: 1; }
.ui-dialog-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f766e;
}
.ui-dialog-themed .modal-head h2,
.ui-dialog-themed .ui-dialog-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.3;
}
.ui-dialog-themed .ui-dialog-body {
  padding: 1rem 1.15rem;
}
.ui-dialog-themed .ui-dialog-body p { margin: 0 0 0.55rem; color: #334155; line-height: 1.45; }
.ui-dialog-themed .ui-dialog-body p:last-child { margin-bottom: 0; }
.ui-dialog-body-scroll {
  max-height: min(70vh, 36rem);
  overflow: auto;
}
.agency-ap-request-dialog {
  max-width: min(920px, 96vw);
  width: 100%;
}
.agency-ap-detail-popup { display: grid; gap: 0.85rem; }
.agency-ap-detail-lead { margin: 0; }
.agency-ap-detail-event { margin: 0; font-size: 1.05rem; }
.agency-ap-detail-section h4 { margin: 0 0 0.45rem; font-size: 0.92rem; }
.agency-ap-detail-section .table-wrap { overflow: auto; }
.agency-ap-detail-adjust { margin: 0; }
.agency-ap-detail-risk { margin: 0; }
.agency-ap-detail-period { grid-column: span 2; }
.agency-ap-period-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
}
.agency-ap-period-filters .agency-ap-filter.is-active {
  background: var(--gk-btn-active-bg, rgba(15, 118, 110, 0.08));
  border-color: var(--gk-btn-active-border, rgba(15, 118, 110, 0.35));
  color: var(--gk-btn-hover-color, #0f766e);
}
.agency-ap-period-badge { margin-top: 0.35rem; }
.agency-ap-past-hint { margin: 0 0 0.75rem; }
.agency-ap-approve:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .agency-ap-detail-period { grid-column: span 1; }
}
.ui-dialog-confirm-cue {
  margin-top: 0.75rem !important;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.12);
  color: #0f172a !important;
  font-size: 0.9rem;
  font-weight: 500;
}
.ui-dialog-field { display: block; margin: 0.65rem 0 0; font-size: 0.88rem; color: #334155; }
.ui-dialog-field .luxe-input,
.ui-dialog-field input,
.ui-dialog-field textarea {
  width: 100%;
  margin-top: 0.3rem;
  box-sizing: border-box;
}
.ui-dialog-form { margin: 0; }
.ui-dialog-themed .ui-dialog-actions,
.ui-dialog-themed .modal-actions {
  margin: 0;
  padding: 0.85rem 1.15rem 1.05rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: #f8fafc;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.ui-dialog-warning .ui-dialog-head,
.ui-dialog-warning .modal-head { background: linear-gradient(180deg, rgba(217, 119, 6, 0.1), transparent); }
.ui-dialog-warning .ui-dialog-icon { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.ui-dialog-warning .ui-dialog-kicker { color: #b45309; }
.ui-dialog-warning .ui-dialog-confirm-cue {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.16);
}
.ui-dialog-danger .ui-dialog-head,
.ui-dialog-danger .modal-head { background: linear-gradient(180deg, #b91c1c, #991b1b); color: #fff; }
.ui-dialog-danger .ui-dialog-head h2,
.ui-dialog-danger .modal-head h2 { color: #fff; }
.ui-dialog-danger .ui-dialog-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ui-dialog-danger .ui-dialog-kicker { color: #fecaca; }
.ui-dialog-danger .ui-dialog-confirm-cue {
  background: rgba(185, 28, 28, 0.07);
  border-color: rgba(185, 28, 28, 0.14);
}
.ui-dialog.ui-dialog-danger {
  border: 2px solid #b91c1c;
  background: #fef2f2;
}
.ui-dialog-success .ui-dialog-head,
.ui-dialog-success .modal-head { background: linear-gradient(180deg, rgba(21, 128, 61, 0.1), transparent); }
.ui-dialog-success .ui-dialog-icon { background: rgba(21, 128, 61, 0.12); color: #15803d; }
.ui-dialog-success .ui-dialog-kicker { color: #15803d; }
.ui-dialog-confirm .ui-dialog-icon { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
.ui-dialog-prompt .ui-dialog-icon { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
.ui-dialog-body p { margin: 0 0 0.75rem; }
.ui-dialog-body .form-grid { gap: 0.75rem; }
.ui-dialog-err { margin-top: 0.5rem; }
.btn-primary.btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-primary.btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.toast-host {
  position: fixed; top: 1rem; right: 1rem; z-index: 1100;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.75rem 1rem; border-radius: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  font-size: 0.9rem; pointer-events: auto;
  animation: toast-in 0.2s ease;
}
.toast-success { border-left: 4px solid var(--muted); }
.toast-info { border-left: 4px solid var(--accent-dim); }
.toast-error { border-left: 4px solid var(--notify); background: var(--notify-bg); }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 0.85rem; padding: 0 0.15rem; line-height: 1;
}
.toast-out { opacity: 0; transform: translateX(12px); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.create-link-panel {
  display: grid; gap: 0.75rem;
  width: min(420px, 100%); max-width: 100%;
  min-width: 0; box-sizing: border-box;
}
.create-link-panel img { border: 1px solid var(--border); padding: 0.5rem; background: #fff; max-width: 100%; height: auto; display: block; }
.create-link-result {
  display: flex; flex-direction: column; gap: 0.75rem;
  min-width: 0; max-width: 100%;
}
.create-link-result[hidden] { display: none !important; }
.create-link-exp { margin: 0; }
.create-link-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; max-width: 100%; }
.create-link-qr-err { margin: 0; font-size: 0.82rem; text-align: center; }
.create-link-url-box {
  padding: 0.6rem 0.75rem; border-radius: 6px;
  border: 1px solid var(--border); background: #f9f7f2;
  font-family: ui-monospace, monospace; font-size: 0.75rem; line-height: 1.45;
  word-break: break-all; overflow-wrap: anywhere;
  max-width: 100%; min-width: 0; overflow-x: auto;
}
.create-link-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 100%; }
.create-link-actions .btn-outline { flex: 1 1 calc(50% - 0.25rem); min-width: 7rem; }
.link-break { word-break: break-all; overflow-wrap: anywhere; max-width: 100%; }
.tokens-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  max-width: none;
  width: 100%;
}
.token-create-section,
.token-list-section {
  min-width: 0;
  width: 100%;
}
.token-create-wrap { min-width: 0; max-width: 100%; margin: 0; }
.token-make-request-bar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.25rem;
}
.create-link-dialog {
  max-width: min(440px, 100%);
  width: 100%;
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  color: var(--text);
  overflow: hidden;
}
.create-link-dialog .modal-head {
  flex-shrink: 0;
  align-items: center;
}
.create-link-dialog-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  padding-bottom: 0.25rem;
}
.create-link-dialog .create-link-panel {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.create-link-company-label .req,
.create-link-risk-label .req,
.create-link-email-label .req {
  color: #f87171;
  font-weight: 700;
}
.token-create-wrap .create-link-panel { margin: 0; }
.token-list-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}
.token-list-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--charcoal);
}
.token-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.token-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.token-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1.25rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  min-width: 0;
}
.token-card-main { min-width: 0; }
.token-card-company {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}
.token-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.35rem;
  margin: 0;
}
.token-card-meta > div { min-width: 0; }
.token-card-meta dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.token-card-meta dd {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--text);
}
.token-card-status {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--bg-surface);
  color: var(--muted);
  vertical-align: middle;
}
.token-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  min-width: 0;
}
.token-card-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.token-card-share .btn-outline,
.token-card-share .btn-primary {
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  white-space: nowrap;
}
.token-card-manage {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}
.token-text-btn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.token-text-btn:hover { color: var(--text); }
.token-text-btn.token-disable:hover { color: #d97706; }
.token-text-btn.token-delete:hover { color: #f87171; }
.token-delete { color: #991b1b; border-color: rgba(153, 27, 27, 0.35); }
.token-disable { color: #92400e; border-color: rgba(146, 64, 14, 0.35); }

.qr-share-dialog {
  max-width: min(400px, 100%);
  width: 100%;
  max-height: min(88vh, 640px);
  display: flex;
  flex-direction: column;
}
.qr-share-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-right: 0.15rem;
}
.qr-share-sub { margin: 0; }
.qr-share-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
}
.qr-share-label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}
.qr-share-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.qr-share-img {
  display: block;
  width: 160px;
  height: 160px;
  max-width: 100%;
  border: 1px solid var(--border);
  padding: 0.4rem;
  background: #fff;
  box-sizing: border-box;
  border-radius: 6px;
}
.qr-share-qr-err { margin: 0; font-size: 0.8rem; text-align: center; }
.qr-share-url { margin: 0; }
.qr-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.qr-share-actions .btn-outline { text-align: center; }

@media (max-width: 720px) {
  .token-card {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .token-card-actions { align-items: stretch; }
  .token-card-share,
  .token-card-manage { justify-content: flex-start; }
  .token-card-share .btn-outline,
  .token-card-share .btn-primary { flex: 1 1 auto; text-align: center; }
}

/* ?? Settings ?? */
.settings-page {
  display: grid;
  grid-template-columns: 15.75rem minmax(0, 1fr);
  grid-template-areas:
    "msg msg"
    "nav main";
  gap: 1.1rem 1.25rem;
  align-items: start;
  width: 100%;
  max-width: none;
}
.settings-page.settings-nav-hidden {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "msg"
    "main";
}
.settings-page.settings-nav-hidden .settings-nav { display: none; }
html[dir="rtl"] .settings-page.settings-nav-hidden {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "msg"
    "main";
}
.settings-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.15rem 0.45rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--border-default, #e2e8f0);
}
.settings-nav-head-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.settings-nav-close {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
}
.settings-nav-close svg { width: 1rem; height: 1rem; display: block; }
.settings-nav-toolbar {
  display: none;
  margin: 0 0 0.85rem;
}
.settings-page.settings-nav-hidden .settings-nav-toolbar { display: block; }
.settings-nav-open.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  white-space: nowrap;
  min-height: var(--gk-btn-min-height, 2rem);
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  max-width: 100%;
}
.settings-nav-open-ico,
.settings-nav-open-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-secondary, #475569);
}
.settings-nav-open-ico {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  background: var(--bg-hover, #e8eef3);
  border: 1px solid var(--border-default, #e2e8f0);
}
.settings-nav-open-ico svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}
.settings-nav-open-label {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text-primary, #0f172a);
}
.settings-nav-open-caret {
  margin-inline-start: 0.1rem;
  opacity: 0.55;
}
.settings-nav-open-caret svg {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
}
.settings-nav-open.btn-outline:hover .settings-nav-open-ico {
  background: var(--gk-btn-active-bg, rgba(15, 118, 110, 0.08));
  border-color: var(--gk-btn-active-border, rgba(15, 118, 110, 0.28));
  color: var(--gk-btn-hover-color, #0f766e);
}
.settings-nav-open.btn-outline:hover .settings-nav-open-label,
.settings-nav-open.btn-outline:hover .settings-nav-open-caret {
  color: var(--gk-btn-hover-color, #0f766e);
  opacity: 1;
}
html[dir="rtl"] .settings-nav-open.btn-outline {
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
}
html[dir="rtl"] .settings-nav-open-caret svg {
  transform: scaleX(-1);
}
.settings-page .su-table-wrap { overflow: visible; }
.settings-page .su-directory { overflow: visible !important; }
.settings-page .su-panel.settings-section {
  overflow: visible !important;
}
.settings-page .su-panel .settings-table {
  display: table;
  overflow: visible !important;
}
.settings-page .su-actions-cell {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  overflow: visible;
  position: relative;
  z-index: 3;
}
.settings-page .su-actions-menu {
  display: inline-flex;
  vertical-align: middle;
}
.settings-page .su-actions-menu .agency-co-menu-caret {
  opacity: 0.7;
}
.settings-page .gk-row-actions,
.settings-page .agency-co-menu {
  position: relative;
  z-index: 4;
  overflow: visible;
}
.settings-page .agency-co-menu .agency-co-menu-panel {
  z-index: 8000;
}
body > .gk-staff-menu-floating.agency-co-menu-panel {
  position: fixed !important;
  z-index: 8000 !important;
  display: grid;
  margin: 0;
}
.settings-page .settings-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1rem;
  position: sticky;
  top: 0.75rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 0.85rem 0.7rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.settings-page .settings-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.settings-nav-group { display: flex; flex-direction: column; gap: 0.3rem; }
.settings-nav-group + .settings-nav-group {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}
.settings-nav-group-label {
  margin: 0 0 0.2rem;
  padding: 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.settings-nav-group-tabs { display: flex; flex-direction: column; gap: 0.2rem; }
.settings-page .settings-tab {
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  white-space: nowrap;
}
.settings-nav-group:has(.settings-tab.active) .settings-nav-group-label {
  color: #0f766e;
}
html[dir="rtl"] .settings-page.settings-nav-hidden,
html[dir="rtl"] .settings-page {
  grid-template-columns: minmax(0, 1fr) 15.75rem;
  grid-template-areas:
    "msg msg"
    "main nav";
}
html[dir="rtl"] .settings-page.settings-nav-hidden {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "msg"
    "main";
}
@media (max-width: 960px) {
  .settings-page,
  html[dir="rtl"] .settings-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "msg"
      "nav"
      "main";
  }
  .settings-page.settings-nav-hidden,
  html[dir="rtl"] .settings-page.settings-nav-hidden {
    grid-template-areas:
      "msg"
      "main";
  }
  .settings-page .settings-nav {
    position: static;
    padding: 0.7rem;
  }
  .settings-nav-group-tabs { flex-direction: row; flex-wrap: wrap; }
  .settings-page .settings-tab { width: auto; }
}
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: none;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 0.55rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.settings-tab {
  flex: 0 1 auto;
  max-width: none;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.settings-tab-icon {
  display: inline-flex;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: inherit;
  opacity: 0.85;
}
.settings-tab-icon svg { width: 100%; height: 100%; display: block; }
.settings-tab-label { line-height: 1.1; }
.settings-tab:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
}
.settings-tab:hover .settings-tab-icon { opacity: 1; }
.settings-tab.active {
  color: #0f766e;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(15, 118, 110, 0.06));
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08), 0 4px 12px rgba(15, 118, 110, 0.1);
}
.settings-tab.active .settings-tab-icon {
  opacity: 1;
  color: #0f766e;
}
.settings-page .settings-section {
  margin-top: 0;
  padding: 1.25rem !important;
  border-radius: 12px !important;
}
.settings-heading { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; color: var(--gold-dim); }
.settings-desc { margin: 0 0 1rem; font-size: 0.88rem; }
.settings-form { display: grid; gap: 0.75rem; max-width: min(560px, 100%); margin-bottom: 1.25rem; }
.settings-form-wide { max-width: min(900px, 100%); }
.settings-form-grid { max-width: min(820px, 100%); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .settings-form-grid { grid-template-columns: 1fr; } }
.settings-form label { display: block; font-size: 0.88rem; }
.settings-form input, .settings-form select {
  width: 100%; margin-top: 0.3rem; padding: 0.55rem; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; box-sizing: border-box;
}
.settings-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.settings-form-span { grid-column: 1 / -1; }
.settings-table { margin-top: 0.5rem; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.settings-row-inactive { opacity: 0.65; }
.settings-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 999px;
}
.settings-badge-on { background: rgba(5, 150, 105, 0.12); color: #047857; }
.settings-badge-off { background: rgba(0, 0, 0, 0.06); color: var(--muted); }
.settings-check {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer;
}
.settings-check input { width: auto; margin: 0; }
.settings-form textarea {
  width: 100%; margin-top: 0.3rem; padding: 0.55rem; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; box-sizing: border-box; min-height: 4.5rem; resize: vertical;
}
.staff-edit-dialog { max-width: min(720px, 96vw); }
.staff-edit-dialog .modal-head,
.staff-edit-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.staff-edit-head-main { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.staff-edit-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.staff-edit-head-sub { margin: 0.2rem 0 0; font-size: 0.82rem; }
.staff-edit-dialog .staff-edit-close {
  font-size: 1.35rem; line-height: 1; width: 2rem; height: 2rem; flex: 0 0 auto;
}
.staff-edit-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.15rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}
.staff-edit-summary span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; font-weight: 600; }
.staff-edit-summary strong { font-size: 0.9rem; font-weight: 600; word-break: break-word; }
.staff-edit-pwd-hint { margin: 0 0 0.55rem; font-size: 0.82rem; }
.staff-edit-form { max-width: none; margin-bottom: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.staff-edit-dialog .ui-dialog-body { max-height: 70vh; overflow: auto; }
.su-text-on { color: #047857; }
html[data-theme="dark"] .staff-edit-summary {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
@media (max-width: 560px) {
  .staff-edit-summary { grid-template-columns: 1fr; }
}
.settings-subhead { margin: 1.25rem 0 0.35rem; font-size: 0.95rem; font-weight: 700; }
.settings-row-warn { background: rgba(234, 179, 8, 0.08); }
.hidden { display: none !important; }
.branding-logo-row {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 0.5rem;
}
.branding-logo-preview-wrap {
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.branding-logo-preview {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center;
  border: 4px solid #fff;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.1),
    0 8px 24px rgba(15, 23, 42, 0.12);
}
.branding-logo-actions { display: grid; gap: 0.5rem; flex: 1; min-width: 220px; }
.settings-file-label input[type="file"] { margin-top: 0.35rem; font-size: 0.85rem; width: 100%; }
.public-form-intro { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--text-secondary); }
.public-support a { color: var(--accent-primary); text-decoration: none; }
.public-support a:hover { text-decoration: underline; }
.enterprise-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.enterprise-feature-list { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.6; }
.doc-sign-block { margin: 1rem 0; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; }
.doc-sign-content { font-size: 0.9rem; margin-bottom: 0.5rem; max-height: 120px; overflow: auto; }
.enterprise-page .settings-panel[hidden] { display: none !important; }

/* ?? Appearance settings ?? */
.appearance-page { gap: 1rem; }
.appearance-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.appearance-mode-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-elevated, var(--white));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.appearance-mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.appearance-mode-option.selected,
.appearance-mode-option:has(input:checked) {
  border-color: var(--gold-dim, var(--accent-primary));
  box-shadow: 0 0 0 1px var(--gold-dim, var(--accent-primary));
}
.appearance-mode-preview {
  display: block;
  height: 72px;
  border-bottom: 1px solid var(--border);
}
.appearance-preview-light {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}
.appearance-preview-dark {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}
.appearance-preview-system {
  background: linear-gradient(90deg, #f8fafc 0%, #f8fafc 50%, #0f172a 50%, #0f172a 100%);
}
.appearance-preview-surface-classic {
  background:
    linear-gradient(180deg, #E8EEF3 0%, #E8EEF3 55%, #fff 55%),
    linear-gradient(90deg, #0F766E 0 8px, transparent 8px);
  background-blend-mode: normal;
  background-color: #E8EEF3;
}
.appearance-preview-surface-refined {
  background:
    linear-gradient(180deg, #D9E2EC 0%, #D9E2EC 48%, #fff 48%),
    linear-gradient(90deg, #0F766E 0 6px, #DFF7F5 6px 100%);
  background-color: #D9E2EC;
}
.appearance-preview-surface-refined::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 0.7rem;
  margin: 2.55rem 0.65rem 0 auto;
  border-radius: 4px;
  background: #0F766E;
}
.appearance-mode-label {
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.appearance-hint { margin: 0.65rem 0 0; font-size: 0.82rem; }
.appearance-palette-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}
.appearance-palette-chip {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: linear-gradient(135deg, var(--chip-bg) 55%, var(--chip-accent) 55%);
  opacity: 0.55;
}
.appearance-palette-chip.active {
  opacity: 1;
  border-color: var(--chip-accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

/* Tabbed settings/enterprise pages ? wrap tabs (9 on enterprise) instead of horizontal scroll */
.settings-page .settings-nav.settings-tabs {
  flex-wrap: nowrap;
  overflow-x: visible;
  row-gap: 1rem;
}
.settings-page .settings-tab {
  flex: 0 0 auto;
  max-width: none;
}
.enterprise-page {
  max-width: none;
  width: 100%;
}
.enterprise-page .settings-tab {
  padding: 0.5rem 0.8rem;
  font-size: 0.84rem;
}
.page-body .settings-page .settings-panel.card {
  overflow: visible;
}
.settings-page .settings-panel .settings-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-page .su-panel .settings-table.su-table {
  display: table;
  overflow: visible !important;
}

.approvals-page { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: none; }
.approvals-layout { gap: 1.1rem; }
.approvals-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.85rem 1.25rem;
}
.approvals-stats { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.approvals-stat {
  min-width: 5.5rem; padding: 0.65rem 0.9rem; border-radius: 12px;
  background: var(--bg-elevated, #1a1a1a); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.approvals-stat-n { font-size: 1.35rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.approvals-stat-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.approvals-stat.is-urgent {
  background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35);
}
.approvals-stat.is-urgent .approvals-stat-n { color: #dc2626; }
.approvals-filters {
  display: inline-flex; padding: 0.2rem; gap: 0.2rem; border-radius: 999px;
  background: var(--bg-surface, #222); border: 1px solid var(--border);
}
.approvals-filter {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 999px;
}
.approvals-filter.is-active {
  background: var(--white, #fff); color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .approvals-filter.is-active,
:root:not([data-theme="dark"]) .approvals-filter.is-active {
  background: #0f766e; color: #fff;
}
.approvals-split {
  display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr);
  gap: 1rem; align-items: start;
}
.approvals-list-panel,
.approvals-detail-panel {
  min-width: 0;
}
.approvals-list-head { margin-bottom: 0.75rem; }
.approvals-list-title { margin: 0; font-size: 1rem; font-weight: 700; }
.approvals-list-sub { margin: 0.2rem 0 0; }
.approvals-list {
  display: flex; flex-direction: column; gap: 0.75rem;
  max-height: min(70vh, 820px); overflow: auto; padding-right: 0.15rem;
}
.approvals-card {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.95rem 1rem; border-radius: 14px; cursor: pointer;
  background: var(--bg-elevated, #1a1a1a); border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.approvals-card:hover {
  border-color: var(--border-strong, rgba(255,255,255,0.22));
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.approvals-card.is-active {
  border-color: #0f766e;
  box-shadow: 0 0 0 1px #0f766e, 0 6px 18px rgba(15, 118, 110, 0.12);
}
.approvals-card.is-urgent {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.1), transparent 48%), var(--bg-elevated, #1a1a1a);
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: inset 3px 0 0 #dc2626;
}
.approvals-card.is-urgent.is-active {
  border-color: #dc2626;
  box-shadow: inset 3px 0 0 #dc2626, 0 0 0 1px rgba(220,38,38,0.35);
}
.approvals-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.approvals-card-title { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.approvals-card-meta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem;
  font-size: 0.84rem; color: var(--muted);
}
.approvals-card-dot { opacity: 0.6; }
.approvals-card-facts {
  margin: 0.15rem 0 0; display: grid; grid-template-columns: 1fr; gap: 0.3rem;
}
.approvals-card-facts > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.35rem; font-size: 0.82rem;
}
.approvals-card-facts dt { margin: 0; color: var(--muted); font-weight: 500; }
.approvals-card-facts dd { margin: 0; font-weight: 600; }
.approvals-card-comment {
  margin: 0.15rem 0 0; padding: 0.45rem 0.55rem; border-radius: 8px;
  background: rgba(220, 38, 38, 0.08); border-left: 3px solid #dc2626;
  font-size: 0.82rem; line-height: 1.35; color: var(--text);
}
.approvals-card-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
.approvals-card-actions .btn-outline,
.approvals-card-actions .btn-primary { padding: 0.35rem 0.7rem; font-size: 0.82rem; min-height: 2rem; }
.approvals-empty, .approvals-detail-empty {
  padding: 2rem 1.25rem; text-align: center; border: 1px dashed var(--border); border-radius: 14px;
}
.approvals-empty-title { margin: 0 0 0.35rem; font-weight: 700; font-size: 1.05rem; }
.approvals-detail-panel {
  position: sticky; top: 0.75rem;
  max-height: min(78vh, 900px); overflow: auto;
  padding: 1.1rem 1.15rem;
}
.approvals-detail-panel[data-empty="1"] {
  display: flex; align-items: center; justify-content: center;
}
.approvals-detail-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.55rem;
}
.approvals-host-callout {
  margin: 0 0 1rem; padding: 0.75rem 0.85rem; border-radius: 10px;
  background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.22);
}
.approvals-host-callout strong {
  display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: #b91c1c; margin-bottom: 0.25rem;
}
.approvals-host-callout p { margin: 0; white-space: pre-wrap; line-height: 1.4; font-size: 0.9rem; }
.approvals-desc { margin: 0 0 0.75rem; }
.approvals-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.approvals-row-active { background: rgba(197, 162, 74, 0.08); }
.approvals-detail { margin-top: 0.5rem; }
.approvals-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.approvals-detail-title { margin: 0 0 0.25rem; font-size: 1.2rem; letter-spacing: -0.01em; }
.approvals-detail-sub { margin: 0; font-size: 0.88rem; }
.approvals-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-bottom: 1rem;
}
.approvals-detail-section {
  margin-bottom: 1rem; padding: 0.85rem 0.9rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
html[data-theme="light"] .approvals-detail-section,
:root:not([data-theme="dark"]) .approvals-detail-section {
  background: #F8FAFC;
}
.approvals-detail-section-title {
  margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gold-dim, #9a7b38);
}
html[data-theme="light"] .approvals-detail-section-title,
:root:not([data-theme="dark"]) .approvals-detail-section-title {
  color: #0f766e;
}
.approvals-detail-fields { display: flex; flex-direction: column; gap: 0.45rem; }
.approvals-detail-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem; font-size: 0.9rem; }
.approvals-detail-label { color: var(--muted, #666); }
.approvals-detail-value { font-weight: 500; word-break: break-word; }
@media (max-width: 1100px) {
  .approvals-split { grid-template-columns: 1fr; }
  .approvals-detail-panel { position: static; max-height: none; }
  .approvals-list { max-height: none; }
}
.approvals-status-pill {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem;
  font-weight: 600; text-transform: capitalize;
}
.approvals-status-pending { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.approvals-status-past-arrival { background: #FFF4DD; color: #B66A10; }
.approvals-past-callout {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid #f0d7a0;
  background: #FFF4DD;
  color: #17233A;
}
.approvals-past-callout strong { display: block; color: #B66A10; margin-bottom: 0.25rem; }
.approvals-past-callout p { margin: 0; font-size: 0.875rem; color: #475569; }
.approvals-card.is-past-arrival { border-color: #f0d7a0; }
.dept-row.is-past-arrival { border-color: #f0d7a0; }
.approvals-status-approved { background: rgba(34, 139, 34, 0.12); color: #1a6b1a; }
.approvals-status-declined { background: rgba(180, 40, 40, 0.12); color: #8b2020; }
.approvals-status-checked-in { background: rgba(13, 148, 136, 0.12); color: #0f766e; }
.approvals-status-other { background: rgba(197, 162, 74, 0.15); }

.urgency-pill {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem;
  font-weight: 700; border: 1px solid transparent; letter-spacing: 0.01em;
}
.urgency-pill-urgent {
  background: rgba(220, 38, 38, 0.14) !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
  text-transform: uppercase;
}
.approvals-row-urgent {
  background: rgba(220, 38, 38, 0.07);
  box-shadow: inset 3px 0 0 #dc2626;
}
.approvals-row-urgent td:first-child { font-weight: 600; }
.approvals-row-comment { margin-top: 0.2rem; font-size: 0.8rem; max-width: 18rem; }
.approvals-host-comments {
  display: block; white-space: pre-wrap; padding: 0.45rem 0.6rem;
  background: rgba(220, 38, 38, 0.06); border-left: 3px solid #dc2626; border-radius: 0 6px 6px 0;
}
.approvals-detail-urgent .approvals-detail-title { color: #b91c1c; }
.urgent-approvals-banner {
  display: inline-flex; align-items: center; gap: 0.55rem;
  width: fit-content; max-width: min(100%, 22rem);
  margin: 0 0 1rem; padding: 0.45rem 0.55rem 0.45rem 0.55rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.14), rgba(185, 28, 28, 0.08));
  border: 1px solid rgba(220, 38, 38, 0.32);
  border-radius: 999px; color: #991b1b; font-size: 0.86rem;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
}
.urgent-approvals-pulse {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #dc2626; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  animation: urgent-pulse 1.6s ease-out infinite;
}
.urgent-approvals-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.55rem; height: 1.55rem; padding: 0 0.35rem;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 0.78rem; font-weight: 800; line-height: 1;
}
.urgent-approvals-copy {
  display: inline-flex; align-items: baseline; gap: 0.3rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.urgent-approvals-copy strong {
  color: #b91c1c; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  font-size: 0.78rem;
}
.urgent-approvals-copy span { color: #7f1d1d; font-size: 0.82rem; }
.urgent-approvals-action {
  margin-left: 0.15rem; flex-shrink: 0;
  border: 0; cursor: pointer; text-decoration: none;
  background: #dc2626; color: #fff !important;
  font: inherit; font-size: 0.78rem; font-weight: 700;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  line-height: 1; transition: background 0.15s ease;
}
.urgent-approvals-action:hover { background: #b91c1c; color: #fff !important; }
@keyframes urgent-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.urgent-count-label { color: #dc2626; font-weight: 700; }
.urgency-swatch {
  display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 4px;
  vertical-align: -0.1rem; border: 1px solid rgba(0,0,0,0.12);
}
.create-link-work-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 0.75rem; margin: 0.35rem 0 0.75rem;
}
.create-link-work-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.create-link-comments-label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; }
@media (max-width: 640px) {
  .create-link-work-grid { grid-template-columns: 1fr; }
}
.host-request-banner {
  margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 10px;
  background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.22);
}
.host-request-banner.is-urgent {
  background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.35);
}
.host-request-banner h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.host-request-banner p { margin: 0.2rem 0; font-size: 0.9rem; }

.pending-badge {
  position: absolute; z-index: 4;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  border-radius: 999px; color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--white, #fff);
}
.pending-badge.is-count {
  background: #64748b;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.pending-badge.is-urgent {
  background: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}
.pending-badge-tile {
  top: 0.5rem; right: 0.5rem;
  min-width: 1.65rem; height: 1.65rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  border: 2px solid #fff;
}
.pending-badge-tile.is-count {
  background: #475569;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  animation: none;
}
.pending-badge-tile.is-urgent {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 55%, #b91c1c 100%);
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.35),
    0 4px 14px rgba(220, 38, 38, 0.55);
  animation: pending-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes pending-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35), 0 4px 14px rgba(220, 38, 38, 0.55); }
  50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.55), 0 6px 18px rgba(220, 38, 38, 0.65); }
}
.module-tile.has-pending,
.home-action-card.has-pending {
  border-color: rgba(100, 116, 139, 0.35);
  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.12), 0 10px 28px rgba(15, 23, 42, 0.08);
}
.module-tile.has-pending:has(.pending-badge.is-urgent),
.home-action-card.has-pending:has(.pending-badge.is-urgent) {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 10px 28px rgba(15, 23, 42, 0.12);
}
.home-action-card { position: relative; overflow: visible; }
.home-action-card .pending-badge:not(.pending-badge-tile) { top: 0.45rem; right: 0.45rem; }
.home-action-card .pending-badge-tile { top: 0.45rem; right: 0.45rem; }
.nav-link { position: relative; overflow: visible; }
.nav-link .pending-badge {
  top: 0.2rem; right: 0.15rem; min-width: 1.1rem; height: 1.1rem;
  font-size: 0.62rem; border-width: 1.5px;
}

.dept-approvals-page { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; max-width: none; }
.dept-approvals-desc { margin: 0.2rem 0 0; max-width: 42rem; line-height: 1.4; }
.dept-page-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 0.15rem 0 0.25rem;
}
.dept-page-kicker {
  margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #0f766e;
}
.dept-page-title {
  margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; color: #0f172a;
}
.dept-page-purpose { margin: 0.35rem 0 0; max-width: 36rem; line-height: 1.4; }
.dept-page-count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 5.5rem; padding: 0.65rem 0.9rem; border-radius: 12px;
  background: #f0fdfa; border: 1px solid #99f6e4; text-align: center;
}
.dept-page-count-n { font-size: 1.55rem; font-weight: 800; line-height: 1; color: #0f766e; }
.dept-page-count-l { margin-top: 0.2rem; font-size: 0.72rem; font-weight: 700; color: #0f766e; text-transform: uppercase; letter-spacing: 0.04em; }

.dept-pane-tabs {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0.2rem; border-radius: 10px; background: #f1f5f9;
}
.dept-pane-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.85rem; border-radius: 8px;
  font: inherit; font-size: 0.9rem; font-weight: 650; color: #475569;
}
.dept-pane-tab:hover { background: rgba(255,255,255,0.75); color: #0f172a; }
.dept-pane-tab.is-active {
  background: #fff; color: #0f766e;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.dept-pane-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: #e2e8f0; color: #334155;
}
.dept-pane-tab.is-active .dept-pane-count { background: #ccfbf1; color: #0f766e; }

.dept-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem;
}
.dept-filter-search { flex: 1 1 14rem; min-width: 0; margin: 0; }
.dept-filter-date { flex: 0 0 auto; margin: 0; }
.dept-filter-input {
  width: 100%; min-height: 2.35rem; box-sizing: border-box;
  padding: 0.45rem 0.7rem; border-radius: 8px;
  border: 1px solid #cbd5e1; background: #fff;
  font: inherit; font-size: 0.9rem; color: #0f172a;
}
.dept-filter-date .dept-filter-input { width: auto; min-width: 9.5rem; }
.dept-filter-input:focus {
  outline: none; border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.dept-filter-presets {
  display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.15rem; border-radius: 8px; background: #f1f5f9;
}
.dept-preset {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 650; color: #475569;
  padding: 0.4rem 0.65rem; border-radius: 6px; min-height: 2rem;
}
.dept-preset:hover { background: #fff; color: #0f172a; }
.dept-preset.is-active {
  background: #fff; color: #0f766e;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.dept-filter-clear { flex: 0 0 auto; }
.dept-pane-summary { margin: 0; font-size: 0.85rem; }

.dept-row-list {
  display: flex; flex-direction: column; gap: 0.55rem;
  max-height: min(68vh, 780px); overflow: auto; padding-right: 0.1rem;
}
.dept-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  padding: 0.85rem 1rem; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #fff;
}
.dept-row.is-urgent { border-color: rgba(220, 38, 38, 0.35); box-shadow: inset 3px 0 0 #dc2626; }
.dept-row.is-active { border-color: #0f766e; box-shadow: 0 0 0 1px #0f766e; }
.dept-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.dept-row-primary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.65rem;
}
.dept-row-company { font-size: 0.98rem; font-weight: 750; color: #0f172a; }
.dept-row-person { font-size: 0.88rem; color: #475569; }
.dept-row-secondary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem;
  font-size: 0.82rem; color: #64748b;
}
.dept-row-arrival { font-weight: 650; color: #334155; }
.dept-row-reason, .dept-row-meta { min-width: 0; }
.dept-row-action {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.4rem; flex: 0 0 auto;
}
.dept-visit-status { margin-bottom: 0.65rem; }
.dept-visit-split { margin-top: 0.15rem; }
.dept-empty { padding: 1.25rem 0.75rem; }
.dept-confirm-facts {
  margin: 0.75rem 0 0; display: grid; gap: 0.55rem;
  padding: 0.75rem 0.85rem; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #f8fafc;
}
.dept-confirm-facts > div { display: grid; gap: 0.15rem; }
.dept-confirm-facts dt {
  margin: 0; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #64748b;
}
.dept-confirm-facts dd {
  margin: 0; font-size: 0.95rem; font-weight: 700; color: #0f172a; word-break: break-word;
}

@media (max-width: 768px) {
  .dept-page-head { flex-direction: column; }
  .dept-page-count { width: 100%; flex-direction: row; gap: 0.55rem; justify-content: flex-start; }
  .dept-page-count-n { font-size: 1.25rem; }
  .dept-pane-tabs { flex-direction: column; }
  .dept-pane-tab { width: 100%; justify-content: space-between; }
  .dept-filter-search, .dept-filter-date, .dept-filter-presets, .dept-filter-clear { width: 100%; }
  .dept-filter-date .dept-filter-input { width: 100%; }
  .dept-preset { flex: 1 1 auto; text-align: center; }
  .dept-row {
    flex-direction: column; align-items: stretch;
  }
  .dept-row-action {
    width: 100%; justify-content: stretch; padding-top: 0.55rem;
    border-top: 1px solid #e2e8f0;
  }
  .dept-row-action .btn-primary,
  .dept-row-action .btn-outline,
  .dept-row-action a.btn-outline {
    flex: 1 1 auto; justify-content: center; text-align: center;
  }
  .dept-row-list { max-height: none; }
}

.home-section-dept { margin-bottom: 1.25rem; }
.approvals-visitor-list { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }
.approvals-visitors-table, .approvals-history-table { margin-top: 0.25rem; font-size: 0.88rem; }
.approvals-history-empty { margin: 0.25rem 0 0; }
.approvals-action-badge {
  display: inline-block; padding: 0.12rem 0.45rem; border-radius: 4px; font-size: 0.78rem; font-weight: 600;
}
.approvals-action-approved { background: rgba(34, 139, 34, 0.12); color: #1a6b1a; }
.approvals-action-declined { background: rgba(180, 40, 40, 0.12); color: #8b2020; }
.approvals-action-pending { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.approvals-cycle-row-current { background: rgba(217, 119, 6, 0.08); }
.approvals-cycle-table { margin-top: 0.25rem; }
.approvals-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.approvals-attachments-toolbar { margin-bottom: 0.5rem; }
.public-attachment-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.visitor-age-warn { margin: -0.15rem 0 0.65rem; padding: 0.45rem 0.65rem; border-radius: 6px; background: rgba(180, 40, 40, 0.08); font-size: 0.88rem; font-weight: 600; }
.public-attachment-row input[type="file"] { flex: 1 1 12rem; min-width: 0; }
.attachment-dialog { max-width: min(1100px, 98vw); }
.attachment-dialog-body { display: flex; flex-direction: column; gap: 1rem; max-height: min(88vh, 960px); overflow: auto; }
.attachment-dialog-item { margin: 0; }
.attachment-dialog-label { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--muted, #666); }
.attachment-dialog-img {
  display: block; width: auto; max-width: 100%; max-height: min(82vh, 860px); margin: 0 auto;
  object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #f4f4f4;
}
.attachment-dialog-err { margin: 0.5rem 0 0; }

.workflow-step-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem;
  background: var(--surface-muted, #f8fafc);
}
.workflow-steps-grid-wrap { overflow-x: auto; margin-bottom: 0.75rem; }
.workflow-steps-grid { width: 100%; min-width: 640px; }
.workflow-steps-grid th { white-space: nowrap; font-size: 0.8rem; vertical-align: middle; color: var(--text-secondary, var(--muted)); }
.workflow-col-num { width: 3rem; text-align: center; }
.workflow-col-name { width: 28%; min-width: 160px; }
.workflow-col-approvers { width: auto; min-width: 220px; }
.workflow-col-adjust { width: 8.5rem; white-space: nowrap; }
.workflow-col-actions { width: 7rem; text-align: center; }
.workflow-adjust-check { font-size: 0.82rem; font-weight: 500; margin: 0; }
.workflow-grid-actions-head {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem; flex-wrap: wrap;
}
.workflow-grid-actions-head .workflow-save-steps {
  padding: 0.25rem 0.55rem; font-size: 0.75rem; min-height: 2rem;
}
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; min-height: 2rem; padding: 0 0.45rem;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
  color: #334155; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  box-shadow: none;
}
.btn-icon:hover { background: #f8fafc; border-color: #94a3b8; color: #0f766e; }
.workflow-add-step { font-weight: 700; font-size: 1.15rem; }
.workflow-row-actions { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }
.workflow-step-row-editing { background: rgba(197, 162, 74, 0.08); }
.workflow-step-num { text-align: center; font-weight: 700; color: var(--gold-dim, #9a7b38); }
.workflow-step-name,
.workflow-step-dept,
.workflow-step-approvers {
  width: 100%; min-width: 180px; max-width: 100%; padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-default, var(--border));
  border-radius: var(--radius-input, 6px); font: inherit; box-sizing: border-box;
  background: var(--bg-input, var(--bg-elevated, #fff));
  color: var(--text-primary, var(--charcoal, inherit));
}
.workflow-step-name { min-width: 0; }
.workflow-step-dept option,
.workflow-step-approvers option {
  background: var(--bg-card, var(--bg-elevated, #fff));
  color: var(--text-primary, var(--charcoal, inherit));
}
.workflow-step-dept-label {
  display: block; font-weight: 600; font-size: 0.88rem;
  color: var(--text-primary, var(--charcoal, inherit));
}
.workflow-step-dept-hint { display: block; font-size: 0.75rem; margin-top: 0.25rem; }
.workflow-step-actions { vertical-align: middle; text-align: center; }
.workflow-step-row td { vertical-align: middle; padding-top: 0.65rem; padding-bottom: 0.65rem; }
.approvals-step-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem;
  border-radius: 999px; background: rgba(217, 119, 6, 0.12); color: #b45309;
}
.create-link-approvals { display: block; margin-bottom: 0.75rem; font-size: 0.88rem; }
.create-link-select { width: 100%; max-width: 320px; margin-top: 0.35rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; }

/* ?? Module launcher / Ops home hub ?? */
.modules-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.25rem 1.25rem 2.5rem;
  background:
    radial-gradient(ellipse 90% 55% at 8% -10%, rgba(15, 118, 110, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(30, 58, 138, 0.08), transparent 50%),
    var(--bg-deep);
}
.modules-hub.modules-page {
  align-items: stretch;
  padding: clamp(0.65rem, 1.5vw, 1rem) clamp(0.75rem, 2vw, 1.25rem) 1rem;
  height: auto;
  max-height: none;
  min-height: 100vh; min-height: 100dvh;
  overflow: auto;
  box-sizing: border-box;
}
.modules-shell { width: 100%; max-width: 1280px; margin: 0 auto; }
.modules-hub .modules-shell {
  padding-top: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  gap: 0.7rem;
}

.modules-hub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0;
  flex-shrink: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.modules-hub-brand .modules-logo {
  width: 72px;
  height: 72px;
}
.modules-hub .modules-title { font-size: 1.15rem; }
.modules-hub .modules-sub { font-size: 0.78rem; }
.modules-hub-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem 1.1rem;
  min-width: 0;
  flex: 1;
}
.modules-hub-brand .modules-logo-wrap {
  flex-basis: auto;
  margin: 0;
  display: flex;
  justify-content: flex-start;
}
.modules-hub-brand .modules-header-text {
  flex: 1 1 auto;
  text-align: left;
}
.modules-hub-actions,
.gk-toolbar-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.2rem;
  border: 1px solid var(--border-default, #cbd5e1);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card, #fff) 92%, transparent);
  box-shadow: none;
}
.modules-hub-actions > .lang-dd,
.modules-hub-actions > .user-menu,
.gk-toolbar-cluster > .lang-dd,
.gk-toolbar-cluster > .user-menu {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.modules-hub-actions .lang-dd-btn,
.modules-hub-actions .theme-toggle,
.modules-hub-actions .user-avatar-btn,
.modules-hub-actions .btn-outline,
.modules-hub-actions .modules-signout,
.gk-toolbar-cluster .lang-dd-btn,
.gk-toolbar-cluster .theme-toggle,
.gk-toolbar-cluster .user-avatar-btn {
  box-sizing: border-box;
  height: 2rem;
  min-height: 2rem;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  background: var(--gk-btn-bg, #fff);
  color: var(--gk-btn-color, #334155);
  box-shadow: none;
  vertical-align: middle;
}
.modules-hub-actions .lang-dd-btn,
.gk-toolbar-cluster .lang-dd-btn {
  padding: 0 0.55rem;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 650;
}
.modules-hub-actions .theme-toggle,
.modules-hub-actions .user-avatar-btn,
.gk-toolbar-cluster .theme-toggle,
.gk-toolbar-cluster .user-avatar-btn {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
}
.modules-hub-actions .user-avatar-btn,
.gk-toolbar-cluster .user-avatar-btn {
  border-radius: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.modules-hub-actions .theme-toggle-icon,
.gk-toolbar-cluster .theme-toggle-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.modules-hub-actions .lang-dd-btn:hover,
.modules-hub-actions .theme-toggle:hover,
.modules-hub-actions .user-avatar-btn:hover,
.gk-toolbar-cluster .lang-dd-btn:hover,
.gk-toolbar-cluster .theme-toggle:hover,
.gk-toolbar-cluster .user-avatar-btn:hover {
  background: var(--gk-btn-hover-bg, #f8fafc);
  border-color: var(--gk-btn-hover-border, #94a3b8);
  color: var(--gk-btn-hover-color, #0f766e);
}
.modules-hub-actions .modules-signout,
.modules-hub .modules-signout {
  position: static;
  top: auto;
  right: auto;
  padding: 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 650;
}

html[data-theme="dark"] .modules-hub-actions,
html[data-theme="dark"] .gk-toolbar-cluster {
  border-color: var(--border-default, rgba(148, 163, 184, 0.35));
  background: color-mix(in srgb, var(--bg-card, #1e293b) 88%, transparent);
}

html.gk-mobile .modules-hub-actions,
html.gk-mobile .gk-toolbar-cluster {
  gap: 0.25rem;
  padding: 0.15rem;
  border-radius: 12px;
}
html.gk-mobile .modules-hub-actions .lang-dd-btn,
html.gk-mobile .gk-toolbar-cluster .lang-dd-btn {
  min-height: var(--touch, 2.75rem);
  height: var(--touch, 2.75rem);
  padding: 0 0.75rem;
}
html.gk-mobile .modules-hub-actions .theme-toggle,
html.gk-mobile .modules-hub-actions .user-avatar-btn,
html.gk-mobile .gk-toolbar-cluster .theme-toggle,
html.gk-mobile .gk-toolbar-cluster .user-avatar-btn {
  width: var(--touch, 2.75rem);
  height: var(--touch, 2.75rem);
  min-width: var(--touch, 2.75rem);
  min-height: var(--touch, 2.75rem);
  border-radius: 999px;
}
.user-menu-item-danger:hover {
  background: #fef2f2;
  color: #991b1b;
}
html[data-theme="dark"] .user-menu-item-danger {
  color: #fca5a5;
}
html[data-theme="dark"] .user-menu-item-danger:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}

.modules-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1rem;
  margin-bottom: 1.75rem; text-align: center; justify-content: center;
}
.modules-logo-wrap { flex-basis: 100%; display: flex; justify-content: center; margin-bottom: 0.15rem; }
.modules-logo {
  width: 96px;
  height: 96px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: 4px solid #fff;
  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.1),
    0 8px 22px rgba(15, 23, 42, 0.14);
}
.modules-hub-brand .modules-logo {
  width: 52px;
  height: 52px;
  padding: 0;
  border-width: 3px;
}
.modules-header-text { flex: 1 1 100%; }
.modules-hub-brand .modules-header-text { flex: 1 1 auto; }
.modules-company {
  margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.modules-title {
  margin: 0; font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15; color: var(--text);
}
.modules-hub .modules-title {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
}
.modules-sub { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.86rem; }
.modules-hub .modules-sub { margin-top: 0.2rem; font-size: 0.84rem; }
.modules-signout { position: absolute; top: 1rem; right: 1rem; }
.modules-page { position: relative; }

.modules-kpi-row {
  display: none;
}

.modules-ops-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  flex-shrink: 0;
}
.modules-ops-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 0;
  overflow: visible;
  flex-shrink: 0;
  padding-bottom: 0;
  scrollbar-width: thin;
}
.modules-ops-chip {
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.modules-ops-chip:hover {
  border-color: color-mix(in srgb, #0f766e 45%, var(--border));
  transform: translateY(-1px);
  background: color-mix(in srgb, #0f766e 6%, var(--bg-elevated));
}
.modules-ops-chip strong {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.modules-ops-chip .modules-ops-icon {
  font-size: 1.05rem;
  font-weight: 700;
}
.modules-ops-chip span {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modules-ops-chip.is-hot.tone-wait strong,
.modules-ops-chip.is-hot.tone-info strong { color: #0f766e; }
.modules-ops-chip.is-hot.tone-alert {
  border-color: rgba(185, 28, 28, 0.3);
  background: rgba(185, 28, 28, 0.08);
}
.modules-ops-chip.is-hot.tone-alert strong { color: #b91c1c; }
.modules-ops-chip.is-hot.tone-wait {
  border-color: rgba(15, 118, 110, 0.3);
  background: rgba(15, 118, 110, 0.08);
}

.modules-section { margin-bottom: 0.35rem; }
.modules-hub .modules-section {
  margin-bottom: 0;
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.modules-section-head { margin-bottom: 0.7rem; }
.modules-hub .modules-section-head {
  margin-bottom: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.modules-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.modules-hub .modules-section-title { font-size: 0.92rem; }
.modules-section-sub {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.modules-hub .modules-section-sub { font-size: 0.78rem; margin-top: 0; }

.modules-snap-grid,
.modules-quick-grid { display: none; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
.modules-hub .modules-grid {
  flex: none;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 0.65rem;
  align-content: start;
}
.modules-hub .modules-grid-unified {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .modules-hub .modules-grid-unified {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .modules-hub .modules-grid-unified {
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  }
}
.modules-hub .modules-grid-workspaces {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modules-hub .modules-grid-system {
  grid-template-columns: minmax(0, 1fr);
  max-width: 50%;
}
.modules-hub .module-tile {
  aspect-ratio: auto;
  height: auto;
  min-height: 8.25rem;
  max-height: none;
  padding: 0.85rem 0.9rem 0.75rem;
  border-radius: 16px;
}
.modules-hub .module-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}
.modules-hub .module-tile-index {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}
.modules-hub .module-tile-icon {
  width: 2.35rem; height: 2.35rem; border-radius: 10px;
}
.modules-hub .module-tile-icon svg { width: 1.15rem; height: 1.15rem; }
.modules-hub .module-tile-body {
  padding: 0.5rem 0 0.2rem;
  gap: 0.2rem;
  justify-content: flex-end;
}
.modules-hub .module-tile-title {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  max-width: none;
}
.modules-hub .module-tile-desc {
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  -webkit-line-clamp: 2;
  max-width: none;
}
.modules-hub .module-tile-foot {
  padding-top: 0.35rem;
  opacity: 0.85;
}
.modules-hub .module-tile-open { font-size: 0.65rem; }
.modules-hub .module-tile-arrow { width: 1.45rem; height: 1.45rem; font-size: 0.78rem; }
@media (min-width: 1024px) {
  .modules-hub .module-tile-foot { display: none; }
  .modules-hub .module-tile { min-height: 7.5rem; padding-bottom: 0.85rem; }
  .modules-hub .module-tile-desc { -webkit-line-clamp: 1; }
}
.modules-hub .license-expiry-banner {
  margin: 0;
  padding: 0.55rem 0.75rem;
  flex-shrink: 0;
}
.modules-hub .license-expiry-banner-text strong { font-size: 0.86rem; }

/* Module accent bars */
.modules-hub .module-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  z-index: 3;
  background: #0f766e;
  opacity: 0.9;
}
.modules-hub .module-tile--access::before { background: #0f766e; }
.modules-hub .module-tile--agency-staff::before { background: #1d4ed8; }
.modules-hub .module-tile--finance::before { background: #b45309; }
.modules-hub .module-tile--lost-and-found::before { background: #0369a1; }
.modules-hub .module-tile--administration::before { background: #475569; }

@media (min-width: 1100px) {
  .modules-hub .modules-grid-workspaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .modules-hub .module-tile { min-height: 12.5rem; }
}
@media (max-width: 900px) {
  .modules-hub .modules-grid,
  .modules-hub .modules-grid-workspaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules-hub .modules-grid-system { max-width: none; }
}
@media (max-width: 960px) {
  .modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules-ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules-hub.modules-page {
    height: auto; max-height: none; overflow: auto;
    min-height: 100vh; min-height: 100dvh;
  }
  .modules-hub .modules-shell { height: auto; overflow: visible; }
  .modules-hub .modules-section { flex: none; }
  .modules-hub .modules-grid { flex: none; }
  .modules-hub .module-tile { aspect-ratio: auto; height: auto; min-height: 10.5rem; }
}
@media (max-width: 640px) {
  .modules-hub-top { flex-direction: column; align-items: stretch; }
  .modules-hub-actions { justify-content: flex-end; }
  .modules-hub .modules-grid,
  .modules-hub .modules-grid-workspaces { grid-template-columns: 1fr; gap: 0.7rem; }
  .modules-ops-strip { grid-template-columns: 1fr 1fr; }
  .modules-hub .modules-grid-system { max-width: none; }
}
.module-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
  aspect-ratio: 1 / 1; min-height: 0;
  padding: 1.15rem 1.1rem 1rem;
  border-radius: 20px; text-decoration: none; color: #fff;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.module-tile-dark { background: var(--bg-elevated); }
.module-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, #0f766e 35%, var(--border));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}
.module-tile:active { transform: translateY(-1px) scale(0.995); }
.module-tile-icon {
  position: relative; z-index: 2;
  width: 3.5rem; height: 3.5rem; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(6px);
}
.module-tile-icon svg { width: 1.85rem; height: 1.85rem; }
.module-tile-body {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: 0.45rem; padding: 0.85rem 0 0.65rem; min-height: 0;
}
.module-tile-title {
  font-size: clamp(0.82rem, 2.6vw, 1rem); font-weight: 800; line-height: 1.25;
  letter-spacing: -0.02em; color: #fff;
}
.module-tile-desc {
  font-size: clamp(0.68rem, 2vw, 0.78rem); color: rgba(255,255,255,0.88);
  line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.module-tile-foot {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding-top: 0.55rem; border-top: 1px solid rgba(255,255,255,0.14);
}
.module-tile-open {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
}
.module-tile-arrow {
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700;
  background: rgba(255,255,255,0.14); color: #fff;
}

@media (max-width: 420px) {
  .modules-grid { gap: 0.75rem; }
  .module-tile { padding: 0.95rem 0.85rem 0.85rem; border-radius: 16px; }
  .module-tile-icon { width: 2.85rem; height: 2.85rem; border-radius: 13px; }
  .module-tile-icon svg { width: 1.45rem; height: 1.45rem; }
  .module-tile-desc { -webkit-line-clamp: 2; }
}

html[data-theme="light"] .modules-page {
  background:
    radial-gradient(ellipse 90% 55% at 8% -10%, rgba(15, 118, 110, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(15, 118, 110, 0.06), transparent 50%),
    #E8EEF3;
}
html[data-theme="light"] .modules-ops-panel {
  background: rgba(255,255,255,0.78);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .modules-ops-chip {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .module-tile {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .modules-hub-top {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}


/* ?? Staff ops messages (Apple-style bright luxury) ?? */
.staff-msg-modal {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.staff-msg-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212, 175, 106, 0.22), transparent 55%),
    rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.staff-msg-sheet,
.staff-msg-sheet-luxury {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  height: min(92dvh, 900px);
  max-height: min(92dvh, 900px);
  display: flex; flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fc 48%, #eef6f8 100%);
  color: #1c1c1e;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    0 1px 0 rgba(212, 175, 106, 0.45),
    0 28px 80px rgba(15, 23, 42, 0.28);
}
.staff-msg-modal-unread .staff-msg-sheet {
  width: min(760px, 100%);
  height: min(94dvh, 940px);
  max-height: min(94dvh, 940px);
}
.staff-msg-frame {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  margin: 8px;
  border-radius: 22px;
  border: 1px solid rgba(212, 175, 106, 0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  overflow: hidden;
}
.staff-msg-head {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem 0.75rem;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.88));
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.staff-msg-head-unread {
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
}
.staff-msg-head-center { text-align: center; min-width: 0; }
.staff-msg-head-unread .staff-msg-head-center { text-align: left; }
.staff-msg-nav-btn {
  border: 0; background: transparent;
  color: #0a84ff; font: inherit; font-size: 0.95rem; font-weight: 500;
  padding: 0.25rem 0; cursor: pointer; text-align: left;
}
.staff-msg-nav-spacer { display: block; }
.staff-msg-kicker {
  margin: 0;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #8e8e93;
}
.staff-msg-title {
  margin: 0.1rem 0 0;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.02em; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-msg-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #fff;
  background: linear-gradient(145deg, #0f766e, #14b8a6 55%, #d4af6a);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(212, 175, 106, 0.55);
  flex-shrink: 0;
}
.staff-msg-avatar-sm {
  width: 1.85rem; height: 1.85rem; font-size: 0.62rem;
  align-self: flex-end; margin-bottom: 1.1rem;
}
.staff-msg-progress {
  width: 42px; height: 42px; border-radius: 999px;
  background: conic-gradient(#0f766e 0 var(--p, 20%), rgba(15, 118, 110, 0.12) 0);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 106, 0.35);
}
.staff-msg-progress span {
  display: block; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #0f766e, #d4af6a);
  min-width: 8px;
  width: 70%;
}
.staff-msg-canvas {
  flex: 1; min-height: 0; overflow: auto;
  padding: 1rem 0.85rem 1.1rem;
  background:
    radial-gradient(circle at 12% 8%, rgba(212, 175, 106, 0.12), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(20, 184, 166, 0.1), transparent 26%),
    linear-gradient(180deg, #f8fafc 0%, #f2f5f9 100%);
}
.staff-msg-day {
  display: flex; justify-content: center; margin: 0.15rem 0 0.85rem;
}
.staff-msg-day span {
  font-size: 0.72rem; font-weight: 600; color: #6b7280;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.staff-msg-hint-card {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,251,245,0.92));
  border: 1px solid rgba(212, 175, 106, 0.4);
  box-shadow: 0 10px 28px rgba(212, 175, 106, 0.12);
  color: #4b5563;
  font-size: 0.88rem; line-height: 1.45;
}
.staff-msg-hint-icon {
  width: 1.7rem; height: 1.7rem; border-radius: 999px;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(145deg, #d4af6a, #f0d9a6);
  color: #7a5a18; font-size: 0.85rem;
}
.staff-msg-hint-card p { margin: 0; }
.staff-msg-row {
  display: flex; gap: 0.45rem; align-items: flex-end;
  margin-bottom: 0.65rem;
}
.staff-msg-row-theirs { justify-content: flex-start; }
.staff-msg-bubble-col {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: min(78%, 280px); min-width: 0;
}
.staff-msg-bubble {
  padding: 0.65rem 0.8rem;
  border-radius: 20px;
  font-size: 0.95rem; line-height: 1.4;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.staff-msg-bubble-theirs {
  background: #e9e9eb;
  color: #111827;
  border-bottom-left-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.04);
}
.staff-msg-bubble.has-photo { padding: 0.35rem; overflow: hidden; }
.staff-msg-bubble.has-photo .staff-msg-text {
  margin: 0.35rem 0.45rem 0.45rem;
}
.staff-msg-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.staff-msg-time {
  margin-top: 0.28rem;
  font-size: 0.68rem; color: #8e8e93; padding-left: 0.35rem;
}
.staff-msg-photo {
  display: block; width: 100%; max-height: 240px;
  object-fit: cover; border-radius: 16px;
}
.staff-msg-photo-link { display: block; }
.staff-msg-reply-card {
  margin-top: 0.85rem;
  padding: 0.75rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(15, 118, 110, 0.18);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.06);
}
.staff-msg-reply-label {
  margin: 0 0 0.45rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #0f766e;
}
.staff-msg-composer,
.staff-msg-foot-luxury {
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.96));
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.staff-msg-composer { padding: 0.65rem 0.7rem 0.85rem; }
.staff-msg-composer-bar {
  display: flex; align-items: flex-end; gap: 0.45rem;
}
.staff-msg-attach {
  width: 2.15rem; height: 2.15rem; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  color: #0f766e;
  background: linear-gradient(145deg, #ffffff, #ecfdf8);
  border: 1px solid rgba(15, 118, 110, 0.25);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.08);
}
.staff-msg-attach span { display: grid; place-items: center; }
.staff-msg-input-shell {
  flex: 1; min-width: 0;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 16px rgba(15, 23, 42, 0.04);
  padding: 0.45rem 0.85rem;
}
.staff-msg-input-shell textarea {
  width: 100%; border: 0; outline: none; resize: none;
  background: transparent; color: #111827;
  font: inherit; font-size: 0.95rem; line-height: 1.35;
  max-height: 180px; min-height: 1.35em;
}
.staff-msg-input-shell textarea::placeholder { color: #a1a1aa; }
.staff-msg-send:disabled { opacity: 0.55; cursor: wait; }
.staff-msg-sent-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 1600;
  transform: translateX(-50%);
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: #0f766e; color: #fff; font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.35);
  pointer-events: none;
}
button.home-action-card {
  font: inherit; text-align: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
button.modules-ops-chip {
  font: inherit; text-align: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.staff-msg-preview-luxury {
  display: none !important;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.7rem;
}
.staff-msg-preview-luxury.is-visible {
  display: flex !important;
}
.staff-msg-preview-frame {
  padding: 5px; border-radius: 16px;
  background: linear-gradient(145deg, #d4af6a, #f5e6c2 45%, #14b8a6);
  box-shadow: 0 8px 18px rgba(212, 175, 106, 0.25);
  flex: 0 0 auto;
  line-height: 0;
  min-width: 112px;
  min-height: 112px;
}
.staff-msg-preview-frame img {
  display: block;
  width: 112px !important;
  height: 112px !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #fff;
  background: #e5e5ea;
}
.staff-msg-preview-remove {
  border: 0; background: transparent; color: #0a84ff;
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.staff-msg-foot {
  display: flex; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.75rem 0.85rem 0.9rem;
}
.staff-msg-btn-primary,
.staff-msg-btn-secondary {
  border: 0; cursor: pointer; font: inherit; font-weight: 650;
  border-radius: 999px; padding: 0.65rem 1.05rem;
  min-height: 42px;
}
.staff-msg-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #14b8a6 55%, #0ea5a0);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.28);
}
.staff-msg-btn-secondary {
  color: #0f766e;
  background: #fff;
  border: 1px solid rgba(15, 118, 110, 0.28);
  box-shadow: 0 6px 14px rgba(15, 118, 110, 0.08);
}
.staff-msg-err {
  margin: 0.55rem 0 0;
  color: #b91c1c;
  font-size: 0.84rem;
  font-weight: 600;
}

@media (max-width: 480px) {
  .staff-msg-sheet,
  .staff-msg-sheet-luxury,
  .staff-msg-modal-unread .staff-msg-sheet {
    width: 100%;
    max-height: 100%;
    border-radius: 22px;
  }
  .staff-msg-bubble-col { max-width: 82%; }
}

.agency-home-intro { margin: 0 0 1rem; max-width: 42rem; }
.agency-home-placeholder { padding: 1.25rem 1.35rem; }
.agency-home-placeholder-title { margin: 0 0 0.35rem; font-weight: 700; font-size: 1.05rem; }

/* ?? Homepage ?? */
.home-page {
  display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: none;
  padding: 0.25rem 0 1rem;
}

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .home-stats { grid-template-columns: 1fr; } }
.home-stat {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.25rem; border-radius: 14px;
  color: #fff; border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.home-stat:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }
.home-stat-in, .home-stat-wait, .home-stat-tools, .home-stat-reports, .home-stat-dark {
  background: linear-gradient(145deg, #2a2a2a 0%, #141414 100%);
}
.home-stat-notify { border-color: rgba(239, 68, 68, 0.45); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15); }
.home-stat-reports { text-decoration: none; color: #fff; }
.home-stat-link { cursor: pointer; }
.home-stat-link .home-stat-n { font-size: 1.35rem; }
.home-stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: rgba(15, 118, 110, 0.12); color: var(--accent-primary, #0f766e);
  font-size: 1.35rem; flex-shrink: 0;
}
.home-stat-svg { width: 1.35rem; height: 1.35rem; display: block; }
.home-stat-icon .home-action-svg { width: 1.35rem; height: 1.35rem; }
html[data-theme="dark"] .home-stat-icon {
  background: rgba(255, 255, 255, 0.1); color: #5eead4;
}
.home-stat-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.home-stat-n, .home-stat-value { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.home-stat-l, .home-stat-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; color: var(--muted); }

.home-section-actions {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.home-section-title {
  margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.5rem; color: var(--text);
}
.home-section-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

.home-actions, .home-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.75rem; }
.home-action-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.5rem;
  padding: 1rem 0.7rem 0.95rem; min-height: 128px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
  text-decoration: none; color: #fff; text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative; overflow: hidden;
}
.home-action-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: rgba(255,255,255,0.35); z-index: 2;
}
.home-action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  border-color: rgba(255,255,255,0.22);
}
.home-action-dark { --action-bg: rgba(255,255,255,0.1); --action-color: #fff; }

.home-action-icon-wrap {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease;
}
.home-action-card:hover .home-action-icon-wrap { transform: scale(1.06); }

.home-action-title { position: relative; z-index: 2; font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: #fff; }
.agency-tile .agency-tile-desc { position: relative; z-index: 2; color: rgba(255,255,255,0.68); }
.home-action-icon { font-size: 2.5rem; line-height: 1; }
.home-action-icon-svg { color: #fff; }
.home-action-svg { width: 2.5rem; height: 2.5rem; display: block; }

@media (max-width: 640px) {
  .home-section-actions { padding: 1rem; }
}

.app-shell.sidebar-collapsed .main { max-width: none; }

/* ?? Responsive: phones, tablets, all app pages ?? */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.login-logo, .topbar-brand-logo, .sidebar-logo, .modules-logo, .brand-logo, .branding-logo-preview, .public-form-logo {
  max-width: none;
}
.attachment-dialog-img,
.gk-team-qr, .create-link-panel img, .gk-team-chat-share-qr {
  max-width: 100%;
  height: auto;
}
.gk-topbar-logo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #fff;
  padding: 0;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.12),
    0 4px 14px rgba(15, 23, 42, 0.12);
}

.page-body .card,
.approvals-page > .card,
.dept-approvals-page > .card,
.approvals-detail,
.settings-section {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.main .card:has(.table),
.settings-section:has(.table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-body .table,
.approvals-table,
.dept-approvals-table,
.settings-table,
.approvals-history-table,
.approvals-visitors-table {
  min-width: 520px;
}

.settings-tabs {
  flex-wrap: wrap;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}
.settings-tab { flex: 0 1 auto; min-width: 0; white-space: nowrap; }

.workflow-steps-grid-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 960px) {
  .main { padding: 0.75rem 0.85rem 1.5rem; max-width: none; }
  .content-title { font-size: 1.15rem; }
  .content-subtitle { font-size: 0.82rem; }
  .sidebar { width: min(280px, 88vw); }
}

@media (max-width: 768px) {
  .content-topbar {
    padding: 0.65rem 0.75rem;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .sidebar-toggle { order: 0; flex-shrink: 0; }
  .content-topbar-titles {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
    padding-left: 0.15rem;
  }
  .content-topbar-right {
    order: 2;
    max-width: none;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
  .topbar-brand { justify-content: flex-start; text-align: left; }
  .topbar-brand-logo { width: 56px; height: 56px; padding: 0; }
  .topbar-brand-title { font-size: 0.88rem; }
  .topbar-brand-onsite { font-size: 0.72rem; }

  .btn-primary, .btn-outline, a.btn-outline, .btn-icon {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  .btn-icon { width: 44px; height: 44px; }

  .public-header { padding: 0.85rem 1rem; }
  .public-form-logo { width: 72px; height: 72px; }
  .public-main { padding: 0.85rem 1rem 1.5rem; }
  .public-form input, .public-form select, .public-form textarea,
  .login-card input {
    font-size: 16px;
  }

  .approvals-detail-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .approvals-detail-header .btn-outline { align-self: flex-start; }
  .approvals-detail-grid { grid-template-columns: 1fr; }
  .approvals-detail-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .approvals-detail-label { font-size: 0.78rem; }
  .approvals-detail-actions .btn-primary,
  .approvals-detail-actions .btn-outline { flex: 1 1 auto; justify-content: center; }

  .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .home-action-card { min-height: 118px; padding: 1rem 0.65rem; }
  .home-action-icon-wrap { width: 3.5rem; height: 3.5rem; }
  .home-action-svg { width: 2rem; height: 2rem; }
  .home-action-title { font-size: 0.82rem; }
  .home-stat { padding: 0.85rem; }
  .home-stat-n { font-size: 1.35rem; }

  .modal-backdrop { padding: 0.5rem; align-items: flex-end; }
  .modal-panel, .ui-dialog {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 12px 12px 0 0;
    padding: 1rem;
  }
  .attachment-dialog { max-width: 100%; }

  .create-link-url-box { font-size: 0.78rem; }
  .visitors-block { padding: 0.65rem 0.75rem; }
  .visitors-block legend { font-size: 0.92rem; }

  .team-chat-bubble-wrap { max-width: 84%; }
}

@media (max-width: 480px) {
  .home-actions { grid-template-columns: 1fr; }
  .home-stats { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-manage-actions, .token-link-actions { flex-direction: column; align-items: flex-start; }
  .approvals-actions { flex-direction: column; align-items: stretch; }
  .approvals-actions .btn-primary,
  .approvals-actions .btn-outline { width: 100%; text-align: center; }
  .gk-team-chat-head-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 360px) {
  .home-stats { grid-template-columns: 1fr; }
  .content-title { font-size: 1.05rem; }
}

/* ?? Reports module ?? */
.reports-page {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: none;
}
.reports-sidebar { padding: 0.85rem; position: sticky; top: 0.75rem; max-height: calc(100vh - 6rem); overflow: auto; }
.reports-sidebar-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.75rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(0,0,0,0.08); }
.reports-filter-block { margin-bottom: 0.75rem; }
.reports-filter-label {
  display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.35rem;
}
.reports-search {
  width: 100%; box-sizing: border-box;
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 0.88rem; background: var(--bg-surface, #fff);
}
.reports-module-chips,
.reports-audience-chips,
.reports-preset-chips {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.reports-data-filters {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.reports-data-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem 0.75rem;
  align-items: end;
}
.reports-data-filter-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.reports-data-filter-grid input,
.reports-data-filter-grid select {
  font-weight: 500;
  color: var(--text);
  font-size: 0.88rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.reports-data-filter-span { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .reports-data-filter-span { grid-column: span 2; }
}
.reports-data-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.reports-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.reports-chip {
  border: 1px solid var(--border);
  background: var(--bg-surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}
.reports-chip:hover { border-color: #94a3b8; }
.reports-chip.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.reports-nav-group { margin-bottom: 0.85rem; }
.reports-nav-heading {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 0.35rem 0.2rem;
}
.reports-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.42rem 0.55rem; border-radius: 8px; text-decoration: none; color: inherit; font-size: 0.86rem;
}
.reports-nav-link:hover { background: rgba(0,0,0,0.04); }
.reports-nav-link.active { background: rgba(197, 162, 74, 0.15); font-weight: 600; }
.reports-nav-title { line-height: 1.25; }
.reports-nav-empty { margin: 0.5rem 0.2rem; font-size: 0.85rem; }
.reports-preview-pill,
.reports-audience-pill {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; font-weight: 700; padding: 0.12rem 0.4rem; border-radius: 999px;
  white-space: nowrap;
}
.reports-preview-pill { background: rgba(139, 41, 66, 0.1); color: #8b2942; }
.reports-audience-pill { background: rgba(59, 110, 165, 0.12); color: #2a5080; }
.reports-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.reports-toolbar { padding: 1rem 1.1rem; }
.reports-title-row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  margin-bottom: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
.reports-breadcrumb { margin: 0 0 0.2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.reports-heading { margin: 0; font-size: 1.25rem; font-weight: 750; line-height: 1.25; }
.reports-desc { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.4; max-width: 46rem; }
.reports-title-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; align-items: center; }
.reports-title-meta .reports-actions { margin-left: 0.25rem; }
.reports-filters-shell { margin-top: 0.15rem; }
.reports-filters-toggle-row {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.reports-filters-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; padding: 0.35rem 0.7rem;
}
.reports-filters-toggle-icon {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-bottom: 0.15rem;
}
.reports-filters-shell.is-collapsed .reports-filters-toggle-icon { transform: rotate(-45deg); margin-bottom: 0; }
.reports-filters-collapsed-hint { font-size: 0.8rem; }
.reports-filters-body { display: block; }
.reports-filters-shell.is-collapsed .reports-filters-body,
.reports-filters-body[hidden] { display: none !important; }
.reports-sidebar-filters { margin-bottom: 0.65rem; }
.reports-sidebar-filters-body { display: block; }
.reports-sidebar-filters.is-collapsed .reports-sidebar-filters-body,
.reports-sidebar-filters-body[hidden] { display: none !important; }
.reports-toolbar-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; justify-content: space-between; }
.reports-range-wrap { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.reports-range { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.reports-range label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; }
.reports-range input[type="date"] { padding: 0.35rem 0.5rem; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; }
.reports-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.reports-live-note { margin: 0; font-size: 0.82rem; }
.reports-scope-note { margin: 0 0 0.65rem; padding: 0.45rem 0.65rem; border-radius: 6px; background: rgba(59, 110, 165, 0.08); font-size: 0.88rem; }
.reports-module-note { margin: 0 0 0.75rem; padding: 0.55rem 0.75rem; border-radius: 8px; background: rgba(139, 41, 66, 0.06); font-size: 0.88rem; color: var(--muted); }
.reports-content { padding: 1rem; min-height: 200px; }
.reports-content .table-scroll {
  max-height: min(70vh, 760px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface, #fff);
  -webkit-overflow-scrolling: touch;
}
.reports-content .table-scroll .reports-table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.reports-content .table-scroll .reports-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-surface, #f8fafc);
  box-shadow: inset 0 -1px 0 var(--border);
}
html[data-theme="dark"] .reports-content .table-scroll .reports-table thead th {
  background: #1a1d24;
}
.reports-summary { margin: 0 0 0.75rem; font-size: 0.95rem; }
.reports-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.65rem; margin-bottom: 1rem;
}
.reports-kpi-card {
  padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface, #fff);
}
.reports-kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.reports-kpi-label { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.reports-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.reports-chart-block h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.reports-bar-chart { display: flex; flex-direction: column; gap: 0.35rem; }
.reports-bar-row { display: grid; grid-template-columns: minmax(80px, 120px) 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.82rem; }
.reports-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reports-bar-track { height: 8px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden; }
.reports-bar-fill { display: block; height: 100%; background: var(--gold); border-radius: 4px; min-width: 2px; }
.reports-bar-val { font-weight: 600; min-width: 2rem; text-align: right; }
.reports-heatmap-wrap { overflow: auto; margin-top: 0.5rem; }
.reports-heatmap { border-collapse: collapse; font-size: 0.65rem; }
.reports-heatmap th, .reports-heatmap td { border: 1px solid rgba(0,0,0,0.06); padding: 2px 3px; text-align: center; min-width: 18px; }
.reports-heatmap th { background: rgba(0,0,0,0.03); font-weight: 600; }
.reports-heat-cell { background: rgba(197, 162, 74, calc(var(--heat, 0) * 0.85)); }
.reports-table { font-size: 0.85rem; }
@media (max-width: 980px) {
  .reports-page { grid-template-columns: 1fr; }
  .reports-sidebar { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .reports-toolbar-row { flex-direction: column; align-items: stretch; }
  .reports-range, .reports-actions { width: 100%; }
  .reports-title-row { flex-direction: column; }
  .reports-bar-row { grid-template-columns: 1fr; gap: 0.15rem; }
}
.agency-page { display: flex; flex-direction: column; gap: 1rem; }
.agency-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}
.agency-inline-form label {
  display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
}
.agency-inline-form button[type="submit"] { justify-self: start; }

.agency-requests-page { gap: 1.35rem; }
.agency-req-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #0f766e 20%, var(--border, #e2e8f0));
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, #0f766e 14%, transparent), transparent 55%),
    linear-gradient(165deg, #fff 0%, #f8fafc 100%);
}
html[data-theme="dark"] .agency-req-hero {
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, rgba(15,118,110,0.22), transparent 55%),
    linear-gradient(165deg, rgba(15,23,42,0.55), rgba(15,23,42,0.25));
}
.agency-req-hero-copy .agency-compose-title { margin-bottom: 0.4rem; }
.agency-req-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.agency-req-stat {
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 0.15rem;
}
html[data-theme="dark"] .agency-req-stat {
  background: rgba(15,23,42,0.45);
  border-color: rgba(148,163,184,0.2);
}
.agency-req-stat span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted, #64748b);
}
.agency-req-stat strong {
  font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.agency-req-stat-accent {
  border-color: color-mix(in srgb, #0f766e 35%, transparent);
  background: color-mix(in srgb, #0f766e 10%, #fff);
}
.agency-req-stat-accent strong { color: #0f766e; }

.agency-compose { padding: 1.25rem 1.35rem 1.4rem; text-align: start; }
.agency-compose-pro {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.agency-compose-head { margin-bottom: 1.15rem; text-align: start; }
.agency-compose-head-pro {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.85rem 1.25rem; align-items: flex-end;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.agency-compose-eyebrow {
  margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #0f766e;
}
.agency-compose-title { margin: 0 0 0.35rem; font-size: 1.35rem; letter-spacing: -0.02em; }
.agency-compose-desc { margin: 0; max-width: 42rem; line-height: 1.45; }
.agency-req-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.agency-req-steps li {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #0f766e;
  padding: 0.28rem 0.55rem; border-radius: 999px;
  background: color-mix(in srgb, #0f766e 10%, transparent);
  border: 1px solid color-mix(in srgb, #0f766e 18%, transparent);
}

.agency-req-form { display: flex; flex-direction: column; gap: 1rem; text-align: start; }
.agency-req-form-pro { gap: 1.1rem; margin-top: 1.1rem; }
.agency-req-section {
  margin: 0; padding: 1.05rem 1.1rem 1.15rem; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
}
html[data-theme="light"] .agency-req-section,
:root:not([data-theme="dark"]) .agency-req-section {
  background: #F8FAFC; border-color: #E2E8F0;
}
.agency-req-section legend {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0 0.35rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #0f766e;
}
.agency-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: #0f766e; color: #fff; font-size: 0.72rem; font-weight: 700;
}
.agency-req-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.agency-req-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}
.agency-req-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agency-req-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agency-field {
  display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted, var(--muted));
  text-align: start;
}
.agency-field > input,
.agency-field > select,
.agency-field > textarea {
  width: 100%; font-weight: 500; text-align: start;
  min-height: 2.45rem; border-radius: 10px;
}
.agency-field > textarea { min-height: 5.5rem; }
.agency-field-span2 { grid-column: span 2; }
.agency-field-label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted, var(--muted)); margin-bottom: 0.4rem;
}
.agency-zones-wrap .access-zones-field,
.agency-zones-wrap label {
  display: flex; flex-direction: column; gap: 0.35rem; width: 100%; text-align: start;
}
.agency-rate-type-row { margin-bottom: 0.85rem; }
.agency-seg {
  display: inline-flex; padding: 0.2rem; gap: 0.2rem;
  border-radius: 999px; background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--border, #e2e8f0);
}
html[data-theme="dark"] .agency-seg { background: rgba(255,255,255,0.06); }
.agency-seg-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #64748b);
}
.agency-seg-btn.is-active {
  background: #0f766e; color: #fff;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}
.agency-cost-calc-pro {
  margin-top: 0.95rem;
}
.agency-req-actions {
  display: flex; justify-content: flex-start; gap: 0.65rem; padding-top: 0.25rem;
}
.agency-req-actions-pro {
  flex-direction: column; align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, #0f766e 35%, transparent);
  background: color-mix(in srgb, #0f766e 6%, transparent);
}
.agency-req-submit {
  min-width: 14rem; min-height: 2.7rem; font-size: 0.98rem;
}
.agency-req-actions-hint { margin: 0; font-size: 0.85rem; max-width: 36rem; }
html[dir="rtl"] .agency-req-actions { justify-content: flex-start; }
.agency-share-slot { margin-top: 1rem; }

.agency-requests-list-pro {
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-surface, #fff);
}
.agency-requests-list-pro.is-collapsed {
  padding-bottom: 1.05rem;
}
.agency-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0;
}
.agency-list-head-toggle { margin-bottom: 0; }
.agency-requests-list-pro:not(.is-collapsed) .agency-list-head {
  margin-bottom: 0.95rem;
}
.agency-list-toggle {
  display: flex; align-items: center; gap: 0.7rem;
  flex: 1; min-width: 0;
  margin: 0; padding: 0.2rem 0.25rem;
  border: 0; background: transparent; cursor: pointer;
  text-align: start; color: inherit; font: inherit;
  border-radius: 10px;
}
.agency-list-toggle:hover { background: color-mix(in srgb, #0f766e 8%, transparent); }
.agency-list-toggle:focus-visible {
  outline: 2px solid #0f766e; outline-offset: 2px;
}
.agency-list-toggle-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #0f766e 12%, transparent);
  color: #0f766e;
  transition: transform 0.18s ease;
}
.agency-list-toggle-chevron::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: 0.15rem;
}
.agency-requests-list-pro:not(.is-collapsed) .agency-list-toggle-chevron {
  transform: rotate(90deg);
}
.agency-list-toggle-copy {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
}
.agency-list-title { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; font-weight: 700; }
.agency-list-sub { margin: 0; font-size: 0.85rem; }
.agency-list-toggle-hint {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.agency-req-list-body[hidden] { display: none !important; }
.agency-req-filters {
  display: grid;
  grid-template-columns: minmax(12rem, 1.6fr) repeat(3, minmax(8.5rem, 1fr)) repeat(2, minmax(8rem, 0.9fr)) minmax(9rem, 1fr);
  gap: 0.65rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: color-mix(in srgb, #0f766e 5%, #f8fafc);
}
html[data-theme="dark"] .agency-req-filters {
  background: color-mix(in srgb, #0f766e 12%, rgba(15,23,42,0.4));
}
.agency-req-filters .agency-field { margin: 0; }
.agency-req-filter-q { grid-column: 1 / -1; }
.agency-req-filter-q input {
  min-height: 2.55rem;
  font-size: 0.95rem;
  border-radius: 10px;
}
.agency-req-filter-clear { flex-shrink: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.agency-req-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.85rem;
}
.agency-req-card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, #fff, #f8fafc);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="dark"] .agency-req-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.5), rgba(15,23,42,0.25));
}
.agency-req-card:hover {
  border-color: color-mix(in srgb, #0f766e 40%, var(--border, #e2e8f0));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.agency-req-card-top {
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start;
}
.agency-req-card-title {
  margin: 0.35rem 0 0.15rem; font-size: 1.05rem; letter-spacing: -0.015em; line-height: 1.25;
}
.agency-req-card-co { margin: 0; font-size: 0.88rem; color: var(--text-muted, #64748b); }
.agency-req-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, #0f766e 6%, transparent);
}
.agency-req-card-meta span {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #64748b);
}
.agency-req-card-meta strong {
  font-size: 0.9rem; font-weight: 600; line-height: 1.3;
}
.agency-req-card-risk {
  margin: 0; font-size: 0.82rem; color: var(--text-muted, #64748b);
}
.agency-req-card-actions { margin-top: auto; }
.agency-req-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1.25rem;
  border-radius: 14px;
  border: 1px dashed var(--border, #cbd5e1);
  background: #f8fafc;
}
.agency-req-empty strong { display: block; margin-bottom: 0.35rem; font-size: 1.05rem; }
.agency-req-empty p { margin: 0 auto; max-width: 28rem; }

.agency-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.agency-requests-table { width: 100%; }
.agency-ref { font-size: 0.78rem; }
.agency-event-name { display: block; }
.agency-event-sub { margin-top: 0.15rem; font-size: 0.8rem; }
.agency-money { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

@media (max-width: 1100px) {
  .agency-req-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agency-req-filter-q { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .agency-req-hero,
  .agency-req-split { grid-template-columns: 1fr; }
  .agency-req-grid,
  .agency-req-grid-2,
  .agency-req-grid-3 { grid-template-columns: 1fr; }
  .agency-field-span2 { grid-column: auto; }
  .agency-req-actions { justify-content: stretch; }
  .agency-req-actions .btn-primary,
  .agency-req-submit { width: 100%; }
  .agency-req-filters { grid-template-columns: 1fr; }
}
.agency-cost-calc {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 22%, transparent);
  background: color-mix(in srgb, var(--accent, #0f766e) 8%, transparent);
}
.agency-cost-mode { display: grid; gap: 0.4rem; }
.agency-cost-mode[hidden],
.agency-field#agency-hours-field[hidden] { display: none !important; }
.agency-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.92rem;
}
.agency-cost-row span { color: var(--text-muted, var(--muted)); font-weight: 500; }
.agency-cost-row strong { font-variant-numeric: tabular-nums; color: var(--text, inherit); text-align: end; }
.agency-cost-total strong { color: var(--accent, #0f766e); font-size: 1.1rem; }
.agency-doc-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.agency-doc-name {
  display: block; width: 100%; font-size: 0.78rem; margin-top: 0.15rem;
}
.agency-ag-form .agency-sla-field {
  grid-column: 1 / -1;
}
.agency-ag-form .agency-sla-field textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.5;
  font-weight: 500;
}
.agency-sla-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}
.agency-sla-list-compact { margin-top: 0.65rem; }
.agency-sla-card {
  border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 22%, var(--border, #e2e8f0));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #0f766e) 6%, transparent);
  overflow: hidden;
}
html[data-theme="light"] .agency-sla-card,
:root:not([data-theme="dark"]) .agency-sla-card {
  background: #f0fdfa;
  border-color: #99f6e4;
}
.agency-sla-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.9rem 1rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #0f766e) 16%, transparent);
}
.agency-sla-card-title {
  margin: 0 0 0.25rem;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.agency-sla-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.82rem;
}
.agency-sla-body { padding: 0.85rem 1rem 1rem; }
.agency-sla-label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #0f766e);
}
.agency-sla-text {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 14%, transparent);
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.95rem;
  color: var(--text, inherit);
  max-height: 18rem;
  overflow: auto;
}
html[data-theme="dark"] .agency-sla-text {
  background: rgba(15, 23, 42, 0.35);
}
.agency-sla-empty { margin: 0; font-size: 0.9rem; }
.agency-sla-preview {
  margin-top: 0.35rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 22%, var(--border, #e2e8f0));
  background: color-mix(in srgb, var(--accent, #0f766e) 7%, transparent);
}
.agency-sla-preview[hidden] { display: none !important; }
.agency-sla-preview-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
}
.agency-sla-preview-empty { display: grid; gap: 0.25rem; }
.agency-sla-loading { margin: 0; }

.agency-att-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.agency-att-absent td { opacity: 0.85; }
.agency-att-absent .settings-badge-off { color: #f87171; }
.agency-form-card h3 { margin: 0 0 0.75rem; }
.agency-share-box { margin-top: 1rem; padding: 0.95rem 1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; }
.agency-form-agency-name { margin: 0.35rem 0 0.75rem; font-size: 1.05rem; }
.agency-share-box .create-link-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.agency-share-box .create-link-url-box { margin-top: 0.5rem; word-break: break-all; font-family: monospace; font-size: 0.82rem; width: 100%; padding: 0.5rem; }
.agency-link-input { width: 100%; max-width: 520px; margin: 0.5rem 0; font-family: monospace; font-size: 0.85rem; }
.agency-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.agency-status {
  display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
  background: rgba(15, 118, 110, 0.1); color: #0f766e; border: 1px solid rgba(15, 118, 110, 0.18);
}
.agency-status-awaiting_company { background: rgba(100, 116, 139, 0.12); color: #475569; border-color: rgba(100,116,139,0.2); }
.agency-status-pending_approval { background: rgba(217, 119, 6, 0.14); color: #b45309; border-color: rgba(217,119,6,0.25); }
.agency-status-approved, .agency-status-active { background: rgba(22, 163, 74, 0.12); color: #15803d; border-color: rgba(22,163,74,0.22); }
.agency-status-declined, .agency-status-cancelled, .agency-status-terminated { background: rgba(220, 38, 38, 0.1); color: #b91c1c; border-color: rgba(220,38,38,0.22); }
.agency-status-completed { background: rgba(15, 118, 110, 0.1); color: #0f766e; }
.agency-status-inactive { background: rgba(100, 116, 139, 0.12); color: #475569; border-color: rgba(100,116,139,0.2); }
.agency-status-on_hold { background: rgba(217, 119, 6, 0.14); color: #b45309; border-color: rgba(217,119,6,0.25); }
.agency-tile-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; }

/* Lost & Found home ? stats row matches Access quick-action density */
.lf-home-stats {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
@media (min-width: 1100px) {
  .lf-home-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ?? Lost & Found inventory page ?? */
.lf-inventory-page { gap: 1rem; }
.lf-inv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-primary, #0f766e) 18%, var(--border));
  background:
    radial-gradient(ellipse 75% 90% at 0% 0%, color-mix(in srgb, var(--accent-primary, #0f766e) 10%, transparent), transparent 58%),
    var(--bg-card, #fff);
  box-shadow: var(--shadow-soft, 0 1px 3px rgba(15, 23, 42, 0.06));
}
html[data-theme="dark"] .lf-inv-hero {
  background:
    radial-gradient(ellipse 75% 90% at 0% 0%, rgba(15, 118, 110, 0.2), transparent 58%),
    var(--bg-card);
}
.lf-inv-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary, #0f766e);
}
.lf-inv-hero-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary, var(--text));
}
.lf-inv-hero-sub { margin: 0 0 0.85rem; font-size: 0.88rem; max-width: 36rem; }
.lf-inv-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
}
.lf-inv-kpi {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-default, var(--border));
  display: grid;
  gap: 0.1rem;
}
.lf-inv-kpi.is-hot {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.06);
}
.lf-inv-kpi-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary, var(--text));
  font-variant-numeric: tabular-nums;
}
.lf-inv-kpi.is-hot .lf-inv-kpi-value { color: #dc2626; }
.lf-inv-kpi-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, var(--muted));
}
.lf-inv-kpi.tone-teal .lf-inv-kpi-value { color: var(--accent-primary, #0f766e); }
.lf-inv-kpi-link,
.lf-inv-kpi-btn {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lf-inv-kpi-link:hover,
.lf-inv-kpi-btn:hover {
  border-color: var(--accent-primary, #0f766e);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.12);
}
.lf-inv-kpi-btn:focus-visible,
.lf-inv-kpi-link:focus-visible {
  outline: 2px solid var(--accent-primary, #0f766e);
  outline-offset: 2px;
}

.lf-flow-guide {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
}
.lf-flow-guide-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}
.lf-flow-steps {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--text-muted, var(--muted));
}
.lf-flow-steps strong { color: var(--text-primary, var(--text)); }

.lf-gate-pending-card { margin-bottom: 1rem; }
.lf-gate-pending-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.lf-gate-pending-head h3,
.lf-gate-search-title {
  margin: 0;
  font-size: 0.95rem;
}
.lf-gate-search-title { margin-bottom: 0.65rem; }
.lf-gate-queue-hint {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  color: var(--text-muted, var(--muted));
}
.lf-suggest-hint { margin: 0.25rem 0 0.35rem; font-size: 0.78rem; }
.lf-suggest-reasons {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--text-muted, var(--muted));
}
.lf-release-sheet .signature-pad-canvas {
  width: 100%;
  max-width: 100%;
  height: 160px;
  border: 1px dashed var(--border-default, #cbd5e1);
  border-radius: 10px;
  background: #fff;
  touch-action: none;
}

.lf-inv-compose { padding: 1.1rem 1.2rem; }
.lf-inv-compose-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.lf-inv-compose-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
.lf-inv-compose-sub { margin: 0; font-size: 0.86rem; }
.lf-inv-form-section h4 {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, var(--muted));
}
.lf-inv-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.lf-inv-list-card { padding: 1rem 1.1rem; }
.lf-inv-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.lf-inv-search input {
  width: 100%;
  max-width: 28rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-default, var(--border));
  background: var(--bg-input, #fff);
  font: inherit;
}
.lf-inv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.lf-inv-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-default, var(--border));
  background: var(--bg-card, #fff);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary, var(--text));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lf-inv-filter:hover { border-color: var(--border-hover, #cbd5e1); }
.lf-inv-filter.is-active {
  background: var(--accent-primary, #0f766e);
  border-color: var(--accent-primary, #0f766e);
  color: #fff;
}
.lf-inv-filter.tone-danger.is-active { background: #dc2626; border-color: #dc2626; }
.lf-inv-filter.tone-amber.is-active { background: #d97706; border-color: #d97706; }
.lf-inv-filter.tone-violet.is-active { background: #7c3aed; border-color: #7c3aed; }
.lf-inv-filter.tone-orange.is-active { background: #ea580c; border-color: #ea580c; }
.lf-inv-filter.tone-green.is-active { background: #16a34a; border-color: #16a34a; }
.lf-inv-filter.tone-muted.is-active { background: #64748b; border-color: #64748b; }

.lf-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.75rem;
}
.lf-inv-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--border-default, var(--border));
  background: var(--bg-card, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.lf-inv-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary, #0f766e) 35%, var(--border));
  box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(15, 23, 42, 0.08));
  transform: translateY(-2px);
}
.lf-inv-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border-default, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.lf-inv-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.lf-inv-thumb-empty { font-size: 1.6rem; opacity: 0.55; }
.lf-photo-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  pointer-events: none;
}
.lf-photo-picker { display: flex; flex-direction: column; gap: 0.55rem; }
.lf-photo-picker-label { font-weight: 600; font-size: 0.88rem; }
.lf-photo-picker-hint { margin: 0; font-size: 0.82rem; }
.lf-photo-picker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.lf-photo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lf-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-default, var(--border));
  background: var(--bg-card, #fff);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, var(--text));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.lf-photo-btn:hover {
  border-color: var(--border-hover, #cbd5e1);
  background: var(--bg-hover, #f8fafc);
}
.lf-photo-btn-add {
  background: var(--accent-primary, #0f766e);
  border-color: var(--accent-primary, #0f766e);
  color: #fff;
}
.lf-photo-btn-add:hover {
  background: var(--accent-primary-hover, #115e59);
  border-color: var(--accent-primary-hover, #115e59);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.22);
}
.lf-photo-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 700;
}
.lf-photo-btn-clear {
  border-color: color-mix(in srgb, #dc2626 28%, var(--border-default, var(--border)));
  color: #b91c1c;
  background: color-mix(in srgb, #dc2626 6%, var(--bg-card, #fff));
}
.lf-photo-btn-clear:hover {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 10%, var(--bg-card, #fff));
  color: #991b1b;
}
.lf-photo-count {
  font-size: 0.82rem;
  color: var(--text-muted, var(--muted));
}
.lf-photo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-height: 0;
}
.lf-photo-preview {
  width: 104px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lf-photo-preview-frame {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-default, var(--border));
  background: var(--bg-secondary, #f1f5f9);
}
.lf-photo-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lf-photo-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.lf-photo-remove-label {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.75rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid color-mix(in srgb, #dc2626 24%, var(--border-default, var(--border)));
  border-radius: 999px;
  background: color-mix(in srgb, #dc2626 5%, var(--bg-card, #fff));
  color: #b91c1c;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.lf-photo-remove-label:hover {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 10%, var(--bg-card, #fff));
}
.lf-lost-card-media { margin: -0.25rem 0 0.15rem; }
.lf-lost-photo-btn {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 12px;
}
.lf-lost-photo-btn .lf-inv-thumb { width: 100%; height: 140px; }
.lf-lost-card-body { display: flex; flex-direction: column; gap: 0.45rem; }
.lf-inv-card-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.lf-inv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.lf-inv-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-primary, #0f766e);
  font-variant-numeric: tabular-nums;
}
.lf-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
  border: 1px solid transparent;
}
.lf-status-custody { background: rgba(15, 118, 110, 0.12); color: #0f766e; border-color: rgba(15, 118, 110, 0.2); }
.lf-status-claim { background: rgba(217, 119, 6, 0.12); color: #b45309; border-color: rgba(217, 119, 6, 0.22); }
.lf-status-finder { background: rgba(124, 58, 237, 0.12); color: #6d28d9; border-color: rgba(124, 58, 237, 0.22); }
.lf-status-dispose { background: rgba(234, 88, 12, 0.12); color: #c2410c; border-color: rgba(234, 88, 12, 0.22); }
.lf-status-done { background: rgba(22, 163, 74, 0.12); color: #15803d; border-color: rgba(22, 163, 74, 0.22); }
.lf-status-closed, .lf-status-default { background: rgba(100, 116, 139, 0.12); color: #475569; border-color: rgba(100, 116, 139, 0.2); }
.lf-inv-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary, var(--text));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lf-inv-meta { margin: 0; font-size: 0.78rem; line-height: 1.35; }
.lf-inv-card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.74rem;
}
.lf-inv-finder { color: var(--text-secondary, var(--text)); }
.lf-inv-dates { color: var(--text-muted, var(--muted)); }
.lf-inv-hold {
  font-weight: 700;
  color: var(--accent-primary, #0f766e);
}
.lf-inv-hold-today { color: #d97706; }
.lf-inv-hold-expired { color: #dc2626; }

.lf-inv-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--border-default, var(--border));
  border-radius: 14px;
  background: var(--bg-secondary, #f8fafc);
}
.lf-inv-empty-title { margin: 0 0 0.35rem; font-weight: 700; font-size: 1rem; }
.lf-inv-empty .btn { margin-top: 0.85rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .lf-inv-hero { grid-template-columns: 1fr; }
  .lf-inv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lf-inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-inv-grid { grid-template-columns: 1fr; }
  .lf-inv-card { grid-template-columns: 64px minmax(0, 1fr); }
  .lf-inv-thumb { width: 64px; height: 64px; }
}

/* ?? Lost & Found release receipt modal ?? */
.lf-release-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.lf-release-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.lf-release-sheet {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: 90vh; overflow: auto;
  margin: 0;
}
.lf-release-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.lf-release-head h3 { margin: 0; }
.lf-release-gate-opt {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: var(--bg-elevated, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
}
.lf-release-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lf-release-done { margin-top: 0.5rem; }
.lf-release-done-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.lf-gate-code-inline {
  font-family: ui-monospace, monospace;
  font-size: 1.1em; letter-spacing: 0.08em;
  color: var(--accent, #0d9488);
}

/* ?? Gate clearance page ?? */
.lf-gate-page .lf-gate-search-card { margin-top: 1rem; }
.lf-gate-page .lf-inv-search input {
  width: 100%; font-size: 1rem; padding: 0.75rem 1rem;
}
.lf-gate-results { margin-top: 1rem; }
.lf-gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.85rem;
}
.lf-gate-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 1rem;
  background: var(--card, #fff);
}
.lf-gate-card.is-cleared { opacity: 0.85; border-color: #86efac; }
.lf-gate-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.lf-gate-code {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent, #0d9488);
}
.lf-gate-meta { font-size: 0.82rem; margin: 0.35rem 0 0.75rem; }
.lf-gate-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ?? L&F reports page ?? */
.lf-reports-toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin: 1rem 0;
}
.lf-reports-toolbar label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.lf-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}
.lf-report-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.lf-report-card .muted { font-size: 0.85rem; margin: 0 0 0.75rem; }
.lf-report-card-actions { display: flex; gap: 0.5rem; }
.lf-report-output { margin-top: 1rem; overflow-x: auto; }
.lf-report-table { font-size: 0.82rem; }

/* ?? L&F report preview modal ?? */
.lf-report-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.lf-report-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.lf-report-sheet {
  position: relative; z-index: 1;
  width: min(960px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.lf-report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.lf-report-head h3 { margin: 0.15rem 0 0; font-size: 1.1rem; }
.lf-report-sub { margin: 0.25rem 0 0; font-size: 0.85rem; }
.lf-report-range { margin: 0.35rem 0 0; font-size: 0.8rem; }
.lf-report-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.75rem 1.15rem;
  min-height: 120px;
  max-height: calc(90vh - 9rem);
}
.lf-report-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
}
.lf-report-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--bg-elevated, #f8fafc);
}

/* ?? L&F claims, lost reports, unclaimed cards ?? */
.lf-claims-page,
.lf-lost-page,
.lf-unclaimed-page,
.lf-detail-page,
.lf-settings-page { gap: 1rem; }

.lf-claims-grid,
.lf-lost-grid,
.lf-unclaimed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.85rem;
}
.lf-claims-grid-compact { grid-template-columns: 1fr; }

.lf-claim-card,
.lf-lost-card,
.lf-unclaimed-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem;
  background: var(--card, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lf-claim-card:hover,
.lf-lost-card:hover,
.lf-unclaimed-card:hover {
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.lf-claim-card[hidden],
.lf-lost-card[hidden],
.lf-unclaimed-card[hidden] { display: none; }

.lf-claim-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.lf-claim-item-title {
  margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.35;
}
.lf-claim-claimant { display: flex; flex-direction: column; gap: 0.15rem; }
.lf-claim-type-pill {
  display: inline-block; width: fit-content;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
}
.lf-claim-name { font-size: 0.9rem; }
.lf-claim-contact { margin: 0; font-size: 0.8rem; }
.lf-claim-check {
  margin: 0; font-size: 0.82rem; font-style: italic; color: var(--text-secondary, #475569);
  padding: 0.45rem 0.55rem; background: var(--bg-elevated, #f8fafc); border-radius: 8px;
}
.lf-claim-receipt { margin: 0; font-size: 0.8rem; }
.lf-claim-receipt code {
  font-family: ui-monospace, monospace; font-size: 0.85em;
  background: rgba(15, 118, 110, 0.08); padding: 0.1rem 0.35rem; border-radius: 4px;
}
.lf-claim-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  flex-wrap: wrap; margin-top: 0.25rem; padding-top: 0.55rem;
  border-top: 1px solid var(--border, #e2e8f0);
}
.lf-claim-when { font-size: 0.78rem; }
.lf-claim-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }

.lf-lost-owner { margin: 0; font-size: 0.88rem; }
.lf-lost-meta { margin: 0; font-size: 0.8rem; }
.lf-lost-desc {
  margin: 0; font-size: 0.82rem; color: var(--text-secondary, #475569);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lf-lost-card-foot { margin-top: 0.35rem; }
.lf-lost-match { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; }
.lf-lost-match select { width: 100%; }

.lf-unclaimed-finder { margin: 0; font-size: 0.85rem; }
.lf-on-duty {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  color: #7c3aed; background: rgba(124, 58, 237, 0.1); padding: 0.1rem 0.35rem; border-radius: 4px;
}
.lf-unclaimed-msg { margin: 0; padding: 0 0.25rem; }

/* ?? L&F item detail ?? */
.lf-detail-hero .lf-inv-hero-copy { max-width: none; }
.lf-back-link { color: var(--accent-primary, #0f766e); text-decoration: none; font-weight: 600; }
.lf-back-link:hover { text-decoration: underline; }
.lf-detail-title-row {
  display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
}
.lf-detail-headline { margin: 0.25rem 0 0; font-size: 1.05rem; font-weight: 600; }
.lf-item-next {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  color: #0f766e;
}
.lf-panel-head-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.lf-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.lf-detail-media-panel { grid-column: 1 / -1; }
.lf-detail-panel { padding: 1rem 1.15rem; }
.lf-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.lf-panel-title { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 700; }
.lf-panel-head .lf-panel-title { margin-bottom: 0; }

.lf-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}
.lf-detail-field { display: flex; flex-direction: column; gap: 0.15rem; }
.lf-detail-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
}
.lf-detail-value { font-size: 0.88rem; color: var(--text, #0f172a); }
.lf-detail-desc {
  margin: 0.85rem 0 0; padding: 0.65rem 0.75rem;
  background: var(--bg-elevated, #f8fafc); border-radius: 8px; font-size: 0.88rem;
}

.lf-detail-photos { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.lf-detail-photo {
  display: block; width: 140px; height: 140px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
}
.lf-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.lf-detail-photo-main { max-width: 220px; border-radius: 10px; }
.lf-detail-photos-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 120px; gap: 0.35rem; font-size: 2rem;
}

.lf-claim-compose {
  margin-bottom: 1rem; padding: 1rem;
  background: var(--bg-elevated, #f8fafc); border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
}

.lf-audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lf-audit-item {
  display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr auto; gap: 0.5rem 0.75rem;
  align-items: baseline; padding: 0.55rem 0.65rem;
  background: var(--bg-elevated, #f8fafc); border-radius: 8px; font-size: 0.85rem;
}
.lf-audit-kind { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.lf-audit-type {
  font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-primary, #0f766e);
}
.lf-audit-by {
  font-size: 0.75rem; font-weight: 600; color: var(--text-primary, #0f172a);
  text-transform: none; letter-spacing: 0;
}
.lf-audit-msg { color: var(--text-secondary, #475569); }
.lf-lock-note {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #64748b;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.4;
}
.lf-correct-banner {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f766e;
}
.lf-lost-card .lf-lock-note { margin-top: 0.55rem; }
.lf-lost-correct { margin-top: 0.5rem; }

.lf-detail-actions .lf-panel-title { margin-bottom: 0.35rem; }

/* ?? L&F settings ?? */
.lf-settings-panel { margin-bottom: 0; }
.lf-settings-check { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 500; }
.lf-settings-add { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border, #e2e8f0); }
.lf-settings-table-wrap { overflow-x: auto; }
.lf-settings-table { font-size: 0.85rem; }
.lf-settings-table input[type="text"],
.lf-settings-table input[type="number"],
.lf-settings-table select { width: 100%; min-width: 5rem; font-size: 0.85rem; }
.lf-settings-table .lf-c-hold { max-width: 4.5rem; }
.lf-settings-check-cell { text-align: center; }
.lf-settings-actions { white-space: nowrap; display: flex; gap: 0.35rem; }

.lf-inv-filter.tone-slate.is-active { background: #475569; border-color: #475569; }
.lf-inv-kpi.tone-slate .lf-inv-kpi-value { color: #475569; }

/* ?? L&F claims inbox (approvals-style split) ?? */
.lf-claims-toolbar {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: center;
}
.lf-claims-search input { width: 100%; }
.lf-claims-banner { margin: 0; }
.lf-claim-inbox-card[hidden] { display: none; }
.lf-claim-detail-panel .approvals-close-detail { margin-bottom: 0.75rem; }
.lf-claim-detail-title { margin: 0.35rem 0 0.15rem; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.lf-claim-detail-sub { margin: 0 0 1rem; font-size: 0.85rem; }
.lf-claim-detail-section {
  margin: 0 0 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.lf-claim-detail-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.lf-claim-detail-heading {
  margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #64748b);
}
.lf-claim-detail-item {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 0.75rem;
}
.lf-claim-detail-item.has-photo { grid-template-columns: 96px 1fr; align-items: start; }
.lf-claim-detail-photo {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
}
.lf-claim-receipt-panel code {
  font-family: ui-monospace, monospace;
  background: rgba(15, 118, 110, 0.08); padding: 0.15rem 0.4rem; border-radius: 4px;
}
.lf-claim-workflow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
}
.lf-claim-step {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; color: var(--text-muted, #64748b); font-weight: 600;
}
.lf-claim-step-dot {
  width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--border, #cbd5e1); flex-shrink: 0;
}
.lf-claim-step.is-done { color: var(--accent-primary, #0f766e); }
.lf-claim-step.is-done .lf-claim-step-dot { background: var(--accent-primary, #0f766e); }
.lf-claim-step.is-active { color: #b45309; }
.lf-claim-step.is-active .lf-claim-step-dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }
.lf-claim-workflow-rejected { margin: 0; font-size: 0.85rem; }
.lf-claim-detail-actions { margin-top: 0.5rem; border-top: 0; padding-top: 0; }

@media (max-width: 960px) {
  .lf-claims-toolbar { grid-template-columns: 1fr; }
  .lf-claims-split.approvals-split { grid-template-columns: 1fr; }
  .lf-claim-detail-panel.approvals-detail-panel { position: static; max-height: none; }
}

@media (max-width: 900px) {
  .lf-detail-grid { grid-template-columns: 1fr; }
  .lf-detail-fields { grid-template-columns: 1fr; }
  .lf-claims-grid,
  .lf-lost-grid,
  .lf-unclaimed-grid { grid-template-columns: 1fr; }
}

.agency-stats { display: flex; gap: 0.65rem; margin: 0.5rem 0 0.85rem; flex-wrap: wrap; }
.agency-stats .home-stat {
  flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 108px;
  padding: 0.65rem 0.75rem;
  flex: 1 1 108px;
}
.agency-stats .home-stat-value { font-size: 1.45rem; font-weight: 800; color: #fff; }
.agency-home-intro { margin: 0 0 0.65rem; max-width: 42rem; font-size: 0.88rem; }
.agency-stats .home-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.agency-finance-summary { display: flex; flex-direction: column; gap: 0.25rem; }
.agency-finance-total { font-size: 1.75rem; color: var(--accent); }

@media (max-width: 860px) {
  .agency-req-grid,
  .agency-req-grid-3 { grid-template-columns: 1fr; }
  .agency-field-span2 { grid-column: auto; }
  .agency-req-actions { justify-content: stretch; }
  .agency-req-actions .btn-primary { width: 100%; }
}

/* ?? Tile background images ?? */
.tile-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--tile-bg-image);
  background-size: cover;
  background-position: var(--tile-bg-position, center);
  transform: scale(1.02);
  transition: transform 0.35s ease;
  filter: brightness(1.06) saturate(1.04);
}
.tile-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.28) 42%, rgba(15, 23, 42, 0.06) 100%);
}
.module-tile .tile-bg::after {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.12) 0%, rgba(15, 23, 42, 0.34) 48%, rgba(15, 23, 42, 0.58) 100%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.2) 0%, transparent 42%);
}
.module-tile:hover .tile-bg,
.home-action-card:hover .tile-bg { transform: scale(1.06); }

/* ?? Dark theme polish ?? */
.app-content { background: var(--bg-deep); }
.main { color: var(--text); }
.content-subtitle { color: var(--muted); }
.pending-badge {
  background: var(--notify); border-color: var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.approvals-detail-section-title,
.settings-heading,
.workflow-step-num { color: var(--accent-dim); }
.approvals-status-pending,
.approvals-status-approved,
.approvals-status-declined,
.approvals-status-checked-in,
.approvals-status-other,
.approvals-action-approved,
.approvals-action-declined,
.approvals-action-pending,
.approvals-step-badge {
  background: rgba(255,255,255,0.08); color: var(--text-muted); border: 1px solid var(--border);
}
.approvals-cycle-row-current,
.dept-approvals-row-active,
.workflow-step-row-editing { background: rgba(255,255,255,0.05); }
.workflow-step-card { background: var(--bg-surface); }
.attachment-dialog-img { background: var(--bg-surface); }
.create-link-panel img { background: var(--bg-surface); }
.reports-bar-fill { background: #fff; }
.visitor-age-warn { background: var(--notify-bg); color: var(--notify); }
.btn-danger, .btn-danger-fill { border-color: var(--notify); color: var(--notify); }
.btn-danger-fill { background: var(--notify); color: #fff; }
/* Team chat theme is self-contained (Apple Messages); keep dark-mode overrides out. */

/* GatePass */
.gatepass-page { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: none; }
.gatepass-toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.gatepass-form { display: flex; flex-direction: column; gap: 1rem; }
.gatepass-section { padding: 1.15rem 1.25rem 1.25rem; }
.gatepass-section-head {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.gatepass-section-head h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.gatepass-section-head .muted {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.gatepass-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1.15rem;
  align-items: start;
}
.gp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.gp-field-span2 { grid-column: 1 / -1; }
.gp-field-qty { max-width: 8rem; }
.gp-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.gp-label em {
  font-style: normal;
  color: var(--notify, #b91c1c);
  margin-left: 0.15rem;
}
.gp-hint {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
}
.gatepass-form .gp-field input,
.gatepass-form .gp-field select,
.gatepass-form .gp-field textarea,
.gatepass-item .gp-field input,
.gatepass-item .gp-field select,
.gatepass-item .gp-field textarea {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
  background: var(--bg-input, var(--bg-surface, #fff));
  color: var(--text);
  box-sizing: border-box;
  min-height: 2.5rem;
}
.gatepass-form .gp-field textarea {
  min-height: 4.25rem;
  resize: vertical;
}
.gatepass-form .gp-field input[type="file"] {
  padding: 0.45rem 0.55rem;
  min-height: 0;
}
.gatepass-items { display: flex; flex-direction: column; gap: 0.85rem; margin: 0 0 0.85rem; }
.gatepass-item {
  padding: 0.95rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface, rgba(0,0,0,0.02));
}
.gatepass-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.gatepass-item-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.gatepass-item-head .btn-outline {
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
}
.gp-field-check .gp-check-row {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0;
}
.gp-field-check .gp-check-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--accent, #0f766e);
}
.gatepass-declarations {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.gatepass-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface, transparent);
}
.gatepass-check input { margin-top: 0.15rem; flex-shrink: 0; }
.gatepass-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.gatepass-actions-bar {
  margin: 0;
  padding: 1rem 1.25rem;
  justify-content: flex-start;
}
.gp-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); vertical-align: middle; margin-right: 0.35rem;
}
.gp-thumbs { white-space: nowrap; }
.gp-status {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border);
  background: rgba(0,0,0,0.04); color: var(--text);
}
.gp-status-pending_approval { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.gp-status-approved { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.gp-status-released { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
.gp-status-returned { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.gp-status-disposed, .gp-status-closed { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.gp-status-declined { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.gp-returns-page {
  max-width: none;
  width: 100%;
  flex: 1;
  min-height: 0;
  gap: 0.55rem;
  overflow: hidden;
}
.app-content:has(.gp-returns-page) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.main:has(.gp-returns-page) {
  flex: 1;
  min-height: 0;
  max-width: none;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-body:has(.gp-returns-page) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.page-body:has(.gp-returns-page) > .gp-returns-page {
  margin: 0;
}
.gp-returns-page > .err {
  flex-shrink: 0;
  margin: 0;
}
.gp-returns-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  flex-shrink: 0;
}
.gp-returns-sum {
  display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gp-returns-sum:hover { border-color: #94a3b8; }
.gp-returns-sum.is-active { box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2); border-color: #93c5fd; }
.gp-returns-sum strong { font-size: 1.2rem; font-weight: 800; line-height: 1; }
.gp-returns-sum span { font-size: 0.68rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.gp-returns-sum-info { cursor: default; background: #f8fafc; }
.gp-returns-sum.gp-kpi-overdue { border-color: #fca5a5; background: #fef2f2; }
.gp-returns-sum.gp-kpi-overdue.is-active { box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.18); }
.gp-kpi-overdue { border-color: #fca5a5; background: #fef2f2; }
.gp-kpi-grace { border-color: #fdba74; background: #fff7ed; }
.gp-kpi-today { border-color: #fcd34d; background: #fffbeb; }
.gp-kpi-soon { border-color: #93c5fd; background: #eff6ff; }

.gp-returns-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gp-returns-list-card {
  padding: 0.65rem 0.75rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gp-returns-filters {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.gp-ret-filter {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface, #fff);
  font: inherit; font-size: 0.74rem; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.gp-ret-filter em {
  font-style: normal;
  min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0,0,0,0.06); font-size: 0.68rem;
}
.gp-ret-filter.is-active {
  background: #0f172a; color: #fff; border-color: #0f172a;
}
.gp-ret-filter.is-active em { background: rgba(255,255,255,0.18); color: #fff; }
.gp-ret-filter-alert.is-active,
.gp-ret-filter-overdue.is-active { background: #b91c1c; border-color: #b91c1c; }
.gp-ret-filter-grace.is-active { background: #c2410c; border-color: #c2410c; }
.gp-ret-filter-today.is-active { background: #a16207; border-color: #a16207; }
.gp-ret-filter-soon.is-active { background: #1d4ed8; border-color: #1d4ed8; }

.gp-returns-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.gp-returns-table {
  min-width: 0 !important;
  width: 100%;
}
.gp-returns-table th,
.gp-returns-table td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  vertical-align: top;
}
.gp-ret-ref { font-weight: 700; }
.gp-ret-sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }
.gp-ret-actions {
  display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end;
}
.gp-ret-empty { text-align: center; padding: 1.25rem 0.75rem !important; }

.gp-ret-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.gp-ret-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.gp-ret-modal-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  background: var(--bg-surface, #fff);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
}
.gp-ret-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gp-ret-modal-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.9rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.85rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface, #fff);
}
.gp-ret-modal-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.gp-ret-modal-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}
.gp-ret-modal-close {
  flex-shrink: 0;
  min-height: 40px;
}
.gp-ret-modal-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.gp-ret-detail-status { margin-top: 0.25rem; }
.gp-ret-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 0.85rem;
  margin: 0 0 0.45rem;
}
.gp-ret-detail-meta span {
  display: block; font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); font-weight: 600;
}
.gp-ret-detail-meta strong { font-size: 0.84rem; font-weight: 650; }
.gp-ret-notes {
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 0.84rem;
}
.gp-ret-section-title {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.gp-ret-detail-scroll { overflow-x: auto; }
.gp-ret-detail-scroll .table { min-width: 0 !important; }
.gp-ret-outcome p { margin: 0.25rem 0; }

/* ?? Audit trail report ?? */
.audit-trail-list { display: grid; gap: 0.55rem; margin-top: 0.75rem; }
.audit-event {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
  overflow: hidden;
}
.audit-event > summary {
  display: grid;
  grid-template-columns: 10rem minmax(10rem,1.4fr) minmax(8rem,1fr) 8rem minmax(7rem,1fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.84rem;
}
.audit-event > summary::-webkit-details-marker { display: none; }
.audit-event[open] > summary { border-bottom: 1px solid var(--border); background: rgba(15,23,42,0.03); }
.audit-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-action { font-weight: 650; word-break: break-word; }
.audit-who, .audit-ip, .audit-loc { color: var(--text-secondary, #475569); word-break: break-word; }
.audit-event-body { padding: 0.85rem 1rem 1rem; }
.audit-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem 1rem;
  margin: 0 0 0.75rem;
}
.audit-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0; }
.audit-meta dd { margin: 0.15rem 0 0; font-size: 0.86rem; word-break: break-word; }
.audit-ua { font-size: 0.75rem !important; color: var(--muted); }
.audit-event-body h4 { margin: 0.5rem 0 0.35rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.audit-diff-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.audit-diff-table th, .audit-diff-table td { border: 1px solid var(--border); padding: 0.4rem 0.5rem; vertical-align: top; text-align: left; }
.audit-diff-table th { background: rgba(15,23,42,0.04); font-size: 0.72rem; text-transform: uppercase; }
.audit-old { background: #fef2f2; color: #991b1b; }
.audit-new { background: #ecfdf5; color: #065f46; }
.audit-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.5rem;
}
.audit-filter-hint { margin: 0 0 0.75rem; font-size: 0.88rem; }
.audit-story {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.45;
}
.audit-diff-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
.audit-diff-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.75rem; background: #fff;
}
.audit-diff-card h5 {
  margin: 0 0 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.audit-diff-card p { margin: 0; font-size: 0.88rem; word-break: break-word; }
.audit-tech {
  margin-top: 0.85rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.55rem;
}
.audit-tech > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  list-style: none;
}
.audit-tech > summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .audit-event > summary { grid-template-columns: 1fr; gap: 0.2rem; }
  .audit-diff-cards { grid-template-columns: 1fr; }
}



.gp-cat {
  display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; border: 1px solid var(--border);
}
.gp-cat-overdue { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.gp-cat-in_grace { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.gp-cat-due_today { background: #fffbeb; color: #a16207; border-color: #fcd34d; }
.gp-cat-due_soon { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
.gp-cat-upcoming { background: #f8fafc; color: #475569; }
.gp-cat-no_date { background: #f8fafc; color: #64748b; }
.gp-ret-form { margin-top: 0.35rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.gp-ret-form .gp-ret-section-title { margin-top: 0; }
.gp-ret-form .gatepass-grid { gap: 0.55rem 0.75rem; }

@media (max-width: 980px) {
  .app-content:has(.gp-returns-page),
  .main:has(.gp-returns-page),
  .page-body:has(.gp-returns-page),
  .gp-returns-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .gp-returns-layout {
    overflow: visible;
    flex: none;
  }
  .gp-returns-list-card {
    overflow: visible;
    max-height: none;
  }
  .gp-returns-table-wrap {
    max-height: min(70vh, 640px);
    overflow: auto;
  }
  .gp-returns-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp-ret-detail-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .gatepass-grid { grid-template-columns: 1fr; }
  .gp-field-span2, .gp-field-qty { grid-column: auto; max-width: none; }
  .gp-ret-detail-meta { grid-template-columns: 1fr; }
  .gp-returns-summary { grid-template-columns: 1fr 1fr; }
  .content-topbar:has(+ .main .gp-returns-page) .content-subtitle {
    display: none;
  }
}

/* Product license activation */
.license-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(30, 90, 80, 0.18), transparent),
    linear-gradient(165deg, #0f1c1a 0%, #1a2e2a 45%, #10201c 100%);
}
.license-card {
  width: min(720px, 100%);
  padding: 1.75rem 1.75rem 2rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  color: #12211e;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
.license-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.license-top h1 { margin: 0.2rem 0 0.4rem; font-size: 1.65rem; }
.license-top .eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: #3d6b62; font-weight: 700; }
.license-top-actions { display: flex; gap: 0.5rem; align-items: center; }
.license-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.license-status-grid > div {
  background: #f2f7f5;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.license-status-grid .muted { font-size: 0.75rem; }
.license-state-active { color: #1b7a4a; }
.license-state-missing,
.license-state-invalid,
.license-state-expired { color: #a33b2c; }
.license-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.license-lists h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.license-lists ul { margin: 0; padding-left: 1.1rem; }
.license-form textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  border-radius: 10px;
  border: 1px solid #c5d5d0;
  padding: 0.75rem;
  resize: vertical;
}
.license-actions { display: flex; gap: 0.6rem; margin-top: 0.75rem; flex-wrap: wrap; }
.license-form .ok { color: #1b7a4a; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; word-break: break-all; }
@media (max-width: 720px) {
  .license-status-grid,
  .license-lists { grid-template-columns: 1fr; }
  .license-top { flex-direction: column; }
}

/* License expiry warning (= 30 days) */
.license-expiry-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid #e2b56f;
  background: linear-gradient(135deg, #fff8e8 0%, #ffefd2 100%);
  color: #5c3d10;
}
.license-expiry-banner.license-expiry-critical {
  border-color: #d9897a;
  background: linear-gradient(135deg, #fff1ee 0%, #ffe0da 100%);
  color: #6b2a1f;
}
.license-expiry-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 12rem;
  flex: 1;
}
.license-expiry-banner-text strong { font-size: 0.98rem; }
.license-expiry-banner-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}
.license-expiry-banner .btn-sm,
.license-expiry-banner .btn-outline.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}
.license-days-warn,
.license-state-expiring { color: #a35a12; }
.module-tile-badge-warn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: #c47a12;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.modules-hub .license-expiry-banner { margin: 0 0 0.4rem; }
.app-content .license-expiry-banner { margin: 0.75rem 1.25rem 0; }
@media (max-width: 720px) {
  .app-content .license-expiry-banner { margin: 0.75rem 0.75rem 0; }
}

.settings-badge-warn { background: rgba(180, 120, 20, 0.14); color: #8a5a0a; }

/* Reusable badges */
.badges-page { display: flex; flex-direction: column; gap: 1rem; }
.badges-create-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  align-items: end;
}
.badges-create-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.badges-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  align-items: center;
}
.badges-toolbar input, .badges-toolbar select { min-width: 10rem; }
.badges-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.badge-scan-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(165deg, #0f1c1a 0%, #1a2e2a 50%, #10201c 100%);
}
.badge-scan-card {
  width: min(480px, 100%);
  padding: 1.5rem;
  border-radius: 16px;
  background: #fff;
  color: #12211e;
}
.badge-scan-code {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a5f54;
}
.badge-scan-holder h1 { margin: 0.6rem 0 0.2rem; font-size: 1.45rem; }
.badge-scan-company { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.8rem; }
.badge-scan-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0 0 1rem;
}
.badge-scan-meta dt { font-size: 0.72rem; color: #678; margin: 0; }
.badge-scan-meta dd { margin: 0.1rem 0 0; font-weight: 600; }
.badge-scan-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.badge-scan-qr { text-align: center; }
.badge-scan-qr img { width: 120px; height: 120px; }
.badge-scan-empty h1 { margin: 0.5rem 0; color: #1a5f54; }
@media (max-width: 520px) {
  .badge-scan-meta { grid-template-columns: 1fr; }
}

/* Badge board (quick-action destination) */
.badge-board-page { display: flex; flex-direction: column; gap: 1.25rem; }
.badge-board-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center;
}
.badge-board-toolbar .luxe-input { flex: 1; min-width: 12rem; max-width: 22rem; }
.badge-board-counts { font-size: 0.85rem; }
.badge-board-section { margin: 0; }
.badge-board-heading {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700;
}
.badge-board-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block;
}
.badge-board-dot.in-use { background: #c2410c; }
.badge-board-dot.vacant { background: #15803d; }
.badge-board-dot.other { background: #64748b; }
.badge-board-empty { margin: 0; padding: 0.75rem 0; }
.badge-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
}
.badge-board-tile {
  display: flex; flex-direction: column; gap: 0.65rem;
  border: 1px solid rgba(26, 95, 84, 0.18);
  border-radius: 14px;
  background: #fff;
  padding: 0.85rem;
  box-shadow: 0 1px 2px rgba(18, 33, 30, 0.04);
}
.badge-board-tile.issued { border-color: rgba(194, 65, 12, 0.28); background: #fffaf7; }
.badge-board-tile.vacant { border-color: rgba(21, 128, 61, 0.22); background: #f7fbf8; }
.badge-board-qr-wrap { display: flex; justify-content: center; }
.badge-board-qr {
  width: 112px; height: 112px; border-radius: 8px;
  background: #fff; border: 1px solid rgba(0,0,0,0.06);
}
.badge-board-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.badge-board-code {
  margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; color: #1a5f54;
}
.badge-board-status {
  margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #678;
}
.badge-board-holder { margin: 0.2rem 0 0; font-weight: 700; font-size: 0.95rem; }
.badge-board-meta { margin: 0; font-size: 0.8rem; color: #567; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-board-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.badges-manage-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.badges-manage-head h2 { margin: 0; font-size: 1rem; }
@media (max-width: 560px) {
  .badge-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .badge-board-qr { width: 96px; height: 96px; }
}

/* Language toggle ? must be wider than .btn-icon so labels stay clickable */
.login-theme-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
html[dir="rtl"] .login-theme-bar { justify-content: flex-start; }
.lang-dd {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  direction: ltr;
}
.lang-dd.is-busy { opacity: 0.65; pointer-events: none; }
.lang-dd > summary { list-style: none; }
.lang-dd > summary::-webkit-details-marker,
.lang-dd > summary::marker { display: none; content: none; }
.lang-dd-btn.agency-co-menu-btn,
.lang-dd-btn.btn-outline,
.lang-dd-btn.gk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--gk-btn-min-height, 2rem);
  padding: 0.28rem 0.65rem;
  border-radius: var(--gk-btn-radius, 8px);
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  background: var(--gk-btn-bg, #fff);
  color: var(--gk-btn-color, #334155);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--gk-btn-weight, 650);
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}
.lang-dd-btn:hover {
  background: var(--gk-btn-hover-bg, #f8fafc);
  border-color: var(--gk-btn-hover-border, #94a3b8);
  color: var(--gk-btn-hover-color, #0f766e);
}
.lang-dd[open] > .lang-dd-btn,
.lang-dd-btn:focus-visible {
  outline: none;
  border-color: var(--gk-btn-active-border, rgba(15, 118, 110, 0.35));
  box-shadow: var(--gk-btn-focus-ring, 0 0 0 3px rgba(15, 118, 110, 0.12));
  color: var(--gk-btn-hover-color, #0f766e);
}
.lang-dd-globe {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.9;
  pointer-events: none;
}
.lang-dd-code {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-width: 1.4rem;
  text-align: center;
  pointer-events: none;
}
.lang-dd-panel.agency-co-menu-panel {
  min-width: 9.5rem;
  padding: 0.35rem;
  z-index: 80;
  right: 0;
  left: auto;
}
html[dir="rtl"] .lang-dd-panel.agency-co-menu-panel {
  right: auto;
  left: 0;
}
.lang-dd-item.agency-co-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: start;
}
.lang-dd-item-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  color: #334155;
}
.lang-dd-item.is-active .lang-dd-item-code,
.lang-dd-item:hover .lang-dd-item-code {
  border-color: var(--gk-btn-active-border, rgba(15, 118, 110, 0.35));
  background: var(--gk-btn-active-bg, rgba(15, 118, 110, 0.08));
  color: var(--gk-btn-hover-color, #0f766e);
}
.lang-dd-item-name { flex: 1; font-weight: 600; }
.lang-dd-item.is-active {
  background: var(--gk-btn-active-bg, rgba(15, 118, 110, 0.08));
  color: var(--gk-btn-hover-color, #0f766e);
}
html[data-theme="dark"] .lang-dd-btn.agency-co-menu-btn {
  background: var(--gk-btn-bg, transparent);
  border-color: var(--gk-btn-border, rgba(255, 255, 255, 0.16));
  color: var(--gk-btn-color, #e2e8f0);
}
html[data-theme="dark"] .lang-dd-item-code {
  background: transparent;
  border-color: var(--gk-btn-border, rgba(255, 255, 255, 0.16));
  color: inherit;
}
.public-header-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.public-header-lang { margin-inline-start: auto; }

/* legacy segmented switch (cached markup) */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  direction: ltr;
  padding: 2px;
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  border-radius: var(--gk-btn-radius, 8px);
  background: var(--bg-surface, #fff);
}
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: calc(var(--gk-btn-min-height, 2rem) - 2px);
  padding: 0.2rem 0.65rem;
  border: 0;
  border-radius: calc(var(--gk-btn-radius, 8px) - 2px);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gk-btn-min-height, 2rem);
  padding: var(--gk-btn-pad, 0.32rem 0.75rem);
  border-radius: var(--gk-btn-radius, 8px);
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  background: var(--gk-btn-bg, #fff);
  color: var(--gk-btn-color, #334155);
  font-weight: var(--gk-btn-weight, 650);
  font-size: var(--gk-btn-size, 0.8rem);
  cursor: pointer;
}
.lang-toggle:hover {
  background: var(--gk-btn-hover-bg, #f8fafc);
  border-color: var(--gk-btn-hover-border, #94a3b8);
  color: var(--gk-btn-hover-color, #0f766e);
}

/* Arabic RTL */
html[dir="rtl"] .sidebar {
  left: auto; right: 0;
  border-right: none; border-left: 1px solid var(--border, rgba(0,0,0,0.08));
}
html[dir="rtl"] .sidebar-collapse { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nav-link { text-align: right; }
html[dir="rtl"] .nav-link.active { box-shadow: inset -3px 0 0 #fff; }
@media (min-width: 961px) {
  html[dir="rtl"] .app-shell.sidebar-collapsed .sidebar {
    margin-left: 0;
    margin-right: -260px;
  }
}
@media (max-width: 960px) {
  html[dir="rtl"] .sidebar {
    left: auto; right: 0;
    transform: translateX(100%);
    box-shadow: -4px 0 24px rgba(0,0,0,0.25);
  }
  html[dir="rtl"] .app-shell.sidebar-open .sidebar { transform: translateX(0); }
}
html[dir="rtl"] .app-shell:not(.sidebar-collapsed) .app-content,
html[dir="rtl"] .app-content { margin-left: 0; }
html[dir="rtl"] .content-topbar,
html[dir="rtl"] .public-header-row,
html[dir="rtl"] .gk-topbar,
html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .settings-tabs,
html[dir="rtl"] .gk-desk-toolbar,
html[dir="rtl"] .gk-gatepass-banner,
html[dir="rtl"] .modules-hub,
html[dir="rtl"] .finance-desk,
html[dir="rtl"] .agency-page,
html[dir="rtl"] .lf-inv-page,
html[dir="rtl"] .approvals-page { direction: rtl; }
html[dir="rtl"] .nav-link,
html[dir="rtl"] .home-stat,
html[dir="rtl"] .home-action-card,
html[dir="rtl"] .table th,
html[dir="rtl"] .table td,
html[dir="rtl"] .gk-table th,
html[dir="rtl"] .gk-table td { text-align: right; }
html[dir="rtl"] .sidebar-collapse .nav-icon,
html[dir="rtl"] .sidebar-toggle .nav-icon { transform: scaleX(-1); }
html[dir="rtl"] .badge-board-meta,
html[dir="rtl"] .public-form label,
html[dir="rtl"] .agency-field,
html[dir="rtl"] .agency-compose { text-align: right; }
html[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", Arial, sans-serif; }
html[dir="rtl"] .finance-money-value,
html[dir="rtl"] .gk-kpi-value { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
/* Keep topbar action order stable in RTL so the lang control stays clickable */
html[dir="rtl"] .gk-topbar-actions,
html[dir="rtl"] .content-topbar-right { flex-direction: row; }

/* English LTR ? force reading-start (left) for staff / public request forms */
html[dir="ltr"] .public-header-row,
html[dir="ltr"] .public-main,
html[dir="ltr"] .public-form,
html[dir="ltr"] .agency-compose,
html[dir="ltr"] .agency-req-form,
html[dir="ltr"] .agency-page {
  direction: ltr;
  text-align: left;
}
html[dir="ltr"] .public-header-row,
html[dir="ltr"] .public-main {
  margin-left: 0;
  margin-right: auto;
}
html[dir="ltr"] .agency-req-actions,
html[dir="ltr"] .public-form .btn-primary,
html[dir="ltr"] .public-form button[type="submit"] {
  align-self: flex-start;
}

/* Hard override for agency public shell ? English content must never render RTL */
.agency-public-shell[dir="ltr"],
.agency-public-shell[dir="ltr"] .public-header,
.agency-public-shell[dir="ltr"] .public-header-row,
.agency-public-shell[dir="ltr"] .public-main,
.agency-public-shell[dir="ltr"] .public-form,
.agency-public-shell[dir="ltr"] .public-form label,
.agency-public-shell[dir="ltr"] .risk-banner,
.agency-public-shell[dir="ltr"] .company-pack-card,
.agency-public-shell[dir="ltr"] .public-step-label {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate;
}
.agency-public-shell[dir="ltr"] .public-header-row {
  flex-direction: row !important;
}
.agency-public-shell[dir="ltr"] .public-form-logo {
  order: 0;
}


/* ?? Access groups ?? */
.ag-panel { padding: 0 !important; overflow: hidden; border: none; background: transparent; box-shadow: none; }
.ag-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) 1fr;
  gap: 1rem;
  align-items: stretch;
  min-height: 640px;
}
@media (max-width: 960px) { .ag-layout { grid-template-columns: 1fr; min-height: 0; } }
.ag-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(15, 118, 110, 0.08), transparent 42%), #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.ag-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ag-sidebar-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.ag-sidebar-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; margin-top: 0.2rem; padding: 0 0.4rem;
  border-radius: 999px; background: #0f766e; color: #fff; font-size: 0.72rem; font-weight: 700;
}
.ag-sidebar-count:empty { display: none; }
.ag-new-btn { border-radius: 999px !important; padding-inline: 0.9rem !important; }
.ag-search-wrap { position: relative; }
.ag-search {
  width: 100%; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 12px;
  padding: 0.65rem 0.85rem; background: rgba(248, 250, 252, 0.9); font-size: 0.9rem;
}
.ag-search:focus { outline: none; border-color: #0f766e; background: #fff; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12); }
.ag-group-list { display: flex; flex-direction: column; gap: 0.45rem; overflow: auto; max-height: min(62vh, 640px); padding-right: 0.15rem; }
.ag-group-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, 0.72);
  padding: 0.7rem 0.75rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ag-group-item:hover { border-color: rgba(15, 118, 110, 0.25); background: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06); }
.ag-group-item.is-active {
  border-color: rgba(15, 118, 110, 0.45);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(15, 118, 110, 0.04));
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}
.ag-group-avatar {
  flex: 0 0 auto; width: 2.35rem; height: 2.35rem; border-radius: 12px; display: grid; place-items: center;
  font-weight: 700; color: #0f766e; background: linear-gradient(145deg, #ccfbf1, #99f6e4);
}
.ag-group-avatar.is-system { color: #92400e; background: linear-gradient(145deg, #fde68a, #fcd34d); }
.ag-group-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ag-group-name { font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.ag-group-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.72rem; color: #64748b; }
.ag-badge { display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }
.ag-badge-sys { background: #fff7ed; color: #9a3412; }
.ag-badge-custom { background: #ecfdf5; color: #047857; }
.ag-badge-count { background: #0f766e; color: #fff; }
.ag-editor {
  border-radius: 16px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); padding: 1rem 1.1rem 1.25rem; min-height: 320px;
}
.ag-editor-hero {
  display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: space-between; align-items: flex-end;
  margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ag-editor-hero-main { flex: 1 1 280px; display: flex; flex-direction: column; gap: 0.65rem; }
.ag-form-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 720px) { .ag-form-top { grid-template-columns: 1fr; } }
.ag-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.ag-field input {
  border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 12px; padding: 0.65rem 0.8rem;
  font-size: 0.95rem; font-weight: 500; color: #0f172a; text-transform: none; letter-spacing: normal;
}
.ag-field input:focus { outline: none; border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12); }
.ag-editor-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.ag-switch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: #334155; cursor: pointer; }
.ag-toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.ag-btn-danger { color: #b91c1c !important; border-color: rgba(185, 28, 28, 0.35) !important; }
.ag-matrix-wrap { overflow: auto; max-height: 52vh; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; background: #fff; }
.ag-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
.ag-matrix th, .ag-matrix td { padding: 0.55rem 0.7rem; vertical-align: middle; border-bottom: 1px solid rgba(15, 23, 42, 0.05); }
.ag-matrix thead th {
  position: sticky; top: 0; z-index: 2; background: #f8fafc; font-size: 0.72rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; text-align: center;
}
.ag-matrix thead th:first-child { text-align: left; }
.ag-module-head th {
  position: sticky; top: 2.15rem; z-index: 1; background: linear-gradient(90deg, #0f766e, #0d9488);
  color: #fff; text-align: left; font-size: 0.8rem; padding: 0.55rem 0.85rem; letter-spacing: 0.02em;
}
.ag-fn-name { min-width: 200px; font-weight: 600; color: #0f172a; }
.ag-cell { text-align: center; width: 5.5rem; }
.ag-toggle { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; cursor: pointer; user-select: none; }
.ag-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ag-toggle-ui {
  width: 2.4rem; height: 1.3rem; border-radius: 999px; background: #e2e8f0; position: relative; transition: background 0.15s ease;
}
.ag-toggle-ui::after {
  content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); transition: transform 0.15s ease;
}
.ag-toggle.is-on .ag-toggle-ui { background: #0f766e; }
.ag-toggle.is-on .ag-toggle-ui::after { transform: translateX(1.1rem); }
.ag-toggle-label { font-size: 0.65rem; font-weight: 700; color: #94a3b8; letter-spacing: 0.04em; text-transform: uppercase; }
.ag-toggle.is-on .ag-toggle-label { color: #0f766e; }
.ag-pill { display: inline-flex; min-width: 1.6rem; justify-content: center; color: #cbd5e1; }
.ag-members { margin-top: 1.1rem; }
.ag-members-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.65rem; }
.ag-members-head h4 { margin: 0; font-size: 0.95rem; }
.ag-member-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ag-member-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.65rem 0.35rem 0.35rem;
  border-radius: 999px; background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.08); font-size: 0.82rem;
}
.ag-member-avatar {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center;
  background: #ccfbf1; color: #0f766e; font-size: 0.7rem; font-weight: 700;
}
.ag-member-name { font-weight: 600; color: #0f172a; }
.ag-member-role { color: #94a3b8; font-size: 0.72rem; }
.ag-empty { display: grid; place-items: center; gap: 0.35rem; padding: 1.5rem 1rem; color: #94a3b8; text-align: center; }
.ag-empty p { margin: 0; font-weight: 600; }
.ag-empty-lg { min-height: 280px; }
.ag-empty-sm { padding: 0.85rem; }
.ag-empty-icon {
  width: 3rem; height: 3rem; border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, #99f6e4, transparent 55%), linear-gradient(145deg, #0f766e, #14b8a6);
  opacity: 0.9; box-shadow: 0 10px 24px rgba(15, 118, 110, 0.25);
}
.ag-user-picker { margin-top: 0.15rem; }
.ag-user-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.55rem; }
.ag-user-pick {
  display: flex; gap: 0.65rem; align-items: center; border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px; padding: 0.65rem 0.75rem; background: #fff; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ag-user-pick:hover { border-color: rgba(15, 118, 110, 0.35); }
.ag-user-pick:has(input:checked), .ag-user-pick.is-checked {
  border-color: rgba(15, 118, 110, 0.45);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(15, 118, 110, 0.03));
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}
.ag-user-pick input { margin-top: 0.15rem; }
.ag-user-pick-avatar {
  width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center;
  font-weight: 700; color: #0f766e; background: #ccfbf1; flex: 0 0 auto;
}
.ag-user-pick-avatar.is-system { color: #92400e; background: #fde68a; }
.ag-user-pick-body { min-width: 0; }
.ag-user-pick strong { display: block; font-size: 0.88rem; }
.ag-user-pick small { display: block; color: #94a3b8; font-size: 0.72rem; }
.staff-edit-dialog { max-width: min(720px, 96vw); }
.staff-edit-dialog .ui-dialog-body { max-height: 70vh; overflow: auto; }

/* ?? Settings ? Users ?? */
.su-panel {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}
.su-layout { display: flex; flex-direction: column; gap: 1rem; }
.su-hero {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem 1.5rem; padding: 1.15rem 1.25rem;
  border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 55%, #f8fafc 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.su-hero-copy { min-width: 0; flex: 1 1 16rem; }
.su-title { margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -0.02em; color: #0f172a; }
.su-desc { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #64748b; max-width: 42rem; }
.su-stats { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.su-stat {
  min-width: 4.75rem; padding: 0.65rem 0.85rem; border-radius: 12px;
  background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.su-stat-on { border-color: rgba(15, 118, 110, 0.28); background: rgba(15, 118, 110, 0.06); }
.su-stat-n { font-size: 1.35rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #0f172a; }
.su-stat-on .su-stat-n { color: #0f766e; }
.su-stat-l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; font-weight: 700; }

.su-add-card,
.su-directory {
  border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
  overflow: hidden;
}
.su-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.85rem 1.1rem 0.15rem;
}
.su-card-title { margin: 0; font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.su-card-sub { margin: 0.15rem 0 0; font-size: 0.8rem; }
.su-form {
  max-width: none !important; margin: 0; padding: 0.35rem 1.1rem 1rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.su-fieldset {
  margin: 0; padding: 0.65rem 0.8rem 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.su-fieldset legend {
  padding: 0 0.3rem; font-size: 0.68rem; font-weight: 750;
  letter-spacing: 0.06em; text-transform: uppercase; color: #0f766e;
}
.su-fieldset-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.75rem;
}
.su-fieldset-grid label,
.su-form label { display: block; font-size: 0.82rem; font-weight: 600; color: #334155; }
.su-fieldset-grid input,
.su-fieldset-grid select,
.su-form input,
.su-form select {
  width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 9px;
  font: inherit; background: #fff; box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.su-fieldset-grid input:focus,
.su-fieldset-grid select:focus,
.su-form input:focus,
.su-form select:focus {
  outline: none; border-color: rgba(15, 118, 110, 0.55);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.su-form label.su-approve-check,
.staff-edit-form label.su-approve-check,
label.settings-check.su-approve-check {
  display: inline-flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.55rem;
  padding: 0.4rem 0.65rem;
  border-radius: 9px;
  background: rgba(15, 118, 110, 0.05);
  border: 1px solid rgba(15, 118, 110, 0.12);
  font-size: 0.8rem !important;
  font-weight: 600;
  line-height: 1.25;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}
.su-form label.su-approve-check input[type="checkbox"],
.staff-edit-form label.su-approve-check input[type="checkbox"],
label.settings-check.su-approve-check input[type="checkbox"] {
  display: inline-block;
  width: 0.95rem !important;
  height: 0.95rem !important;
  min-width: 0.95rem;
  max-width: 0.95rem;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 0.95rem;
  align-self: center;
  accent-color: #0f766e;
  border-radius: 3px;
  box-shadow: none !important;
  vertical-align: middle;
}
.su-approve-check .su-approve-label {
  display: inline;
  white-space: nowrap;
  font-weight: 600;
}
.su-picker-wrap { margin-top: 0.55rem; }
.su-picker-wrap .settings-label { font-size: 0.72rem; font-weight: 700; color: #64748b; margin: 0 0 0.35rem; }

/* Compact access-group chips inside Add/Edit user */
.ag-user-picker.is-compact .ag-user-picker-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.35rem;
}
.ag-user-picker.is-compact .ag-user-pick {
  padding: 0.4rem 0.55rem; border-radius: 10px; gap: 0.4rem;
  align-items: flex-start;
}
.ag-user-picker.is-compact .ag-user-pick input {
  margin: 0.15rem 0 0; width: auto; flex: 0 0 auto;
}
.ag-user-picker.is-compact .ag-user-pick strong {
  font-size: 0.78rem; line-height: 1.2; font-weight: 700;
}
.ag-user-picker.is-compact .ag-user-pick-tag,
.ag-user-picker.is-compact .ag-user-pick small {
  display: inline-block; margin-top: 0.1rem; font-size: 0.65rem;
  color: #94a3b8; line-height: 1.2;
}

.su-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.85rem;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.su-search-wrap { flex: 1 1 14rem; min-width: 0; }
.su-search {
  width: 100%; padding: 0.6rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1); background: #fff; font: inherit;
  box-sizing: border-box;
}
.su-search:focus {
  outline: none; border-color: rgba(15, 118, 110, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.su-filters {
  display: inline-flex; padding: 0.2rem; gap: 0.15rem; border-radius: 999px;
  background: #f1f5f9; border: 1px solid rgba(15, 23, 42, 0.06);
}
.su-filter {
  border: 0; background: transparent; color: #64748b; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 650; padding: 0.4rem 0.8rem; border-radius: 999px;
}
.su-filter.is-active {
  background: #0f766e; color: #fff;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}
.su-count { font-size: 0.8rem; font-weight: 650; color: #94a3b8; margin-left: auto; }
.su-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.su-table { margin: 0; min-width: 720px; width: 100%; border-collapse: collapse; }
.su-table thead th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 750; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff; white-space: nowrap;
}
.su-table td {
  padding: 0.85rem 1rem; border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: middle; font-size: 0.9rem;
}
.su-row:hover td { background: rgba(15, 118, 110, 0.03); }
.su-person { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.su-avatar {
  width: 2.35rem; height: 2.35rem; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 800;
  color: #0f766e; background: linear-gradient(145deg, #ccfbf1, #99f6e4);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}
.su-avatar-lg {
  width: 3rem; height: 3rem; border-radius: 14px; font-size: 0.95rem;
}
.su-person-text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.su-person-name { font-size: 0.92rem; font-weight: 700; color: #0f172a; }
.su-person-user { font-size: 0.78rem; color: #94a3b8; }
.su-role {
  display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; color: #334155;
  background: #f1f5f9; border: 1px solid rgba(15, 23, 42, 0.06);
}
.su-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.su-chip {
  display: inline-flex; align-items: center; max-width: 9.5rem;
  padding: 0.18rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650;
  color: #0f766e; background: rgba(15, 118, 110, 0.08); border: 1px solid rgba(15, 118, 110, 0.14);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-chip-muted { color: #94a3b8; background: #f8fafc; border-color: rgba(15, 23, 42, 0.06); }
.su-chip-more { color: #64748b; background: #f1f5f9; border-color: transparent; }
.su-empty-row td { padding: 1.5rem 1rem; text-align: center; }

@media (max-width: 720px) {
  .su-fieldset-grid { grid-template-columns: 1fr; }
  .su-count { margin-left: 0; width: 100%; }
}

html[data-theme="dark"] .su-hero,
html[data-theme="dark"] .su-add-card,
html[data-theme="dark"] .su-directory,
html[data-theme="dark"] .su-stat {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .su-title,
html[data-theme="dark"] .su-card-title,
html[data-theme="dark"] .su-person-name,
html[data-theme="dark"] .su-stat-n { color: #f8fafc; }
html[data-theme="dark"] .su-fieldset {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .su-fieldset-grid input,
html[data-theme="dark"] .su-fieldset-grid select,
html[data-theme="dark"] .su-search {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.12);
  color: inherit;
}
html[data-theme="dark"] .su-filters { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .su-toolbar { background: rgba(255,255,255,0.02); }
html[data-theme="dark"] .su-role { background: rgba(255,255,255,0.06); color: #e2e8f0; }

/* ?? User permissions report ?? */.upr-picker { margin-bottom: 0.5rem; }
.upr-mode-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.35rem 0 0.65rem; }
.upr-mode { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; cursor: pointer; }
.upr-user-list { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 0.65rem; background: #f8fafc; }
.upr-user-list-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 0.55rem; }
.upr-user-list-actions input[type="search"] { flex: 1; min-width: 140px; }
.upr-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0.35rem; max-height: 240px; overflow: auto; }
.upr-user-item { display: flex; gap: 0.45rem; align-items: flex-start; padding: 0.4rem 0.5rem; border-radius: 8px; background: #fff; border: 1px solid transparent; cursor: pointer; font-size: 0.84rem; }
.upr-user-item:hover { border-color: #cbd5e1; }
.upr-user-item strong { display: block; }
.upr-user-item small { display: block; color: #64748b; font-size: 0.75rem; }
.upr-granted-toggle { margin-top: 0.65rem; display: inline-flex; }
.upr-list { display: flex; flex-direction: column; gap: 1rem; }
.upr-card { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; background: #fff; }
.upr-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.upr-head h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.upr-groups { margin: 0.35rem 0 0; font-size: 0.85rem; }
.upr-stat { text-align: right; min-width: 7rem; }
.upr-stat-n { display: block; font-size: 1.4rem; font-weight: 700; color: #0f766e; }
.upr-stat-l { font-size: 0.72rem; color: #64748b; }
.upr-matrix-wrap { overflow: auto; max-height: 420px; }
.upr-matrix { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.upr-matrix th, .upr-matrix td { border-bottom: 1px solid rgba(15,23,42,0.06); padding: 0.4rem 0.55rem; }
.upr-matrix thead th { position: sticky; top: 0; background: #f1f5f9; z-index: 1; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.upr-matrix th:not(:first-child), .upr-matrix td:not(:first-child) { text-align: center; width: 2.6rem; }
.upr-mod th { background: #0f766e; color: #fff; text-align: left; font-size: 0.78rem; position: sticky; top: 1.7rem; z-index: 1; }
.upr-fn strong { display: block; }
.upr-fn code { font-size: 0.68rem; color: #94a3b8; }
.upr-desc { display: block; font-size: 0.74rem; color: #64748b; margin-top: 0.1rem; }
.upr-yes { color: #047857; font-weight: 700; }
.upr-no { color: #cbd5e1; }
.upr-na { color: #e2e8f0; }
@media (max-width: 720px) {
  .upr-head { flex-direction: column; }
  .upr-stat { text-align: left; }
}

.ag-badge-on { background: #ecfdf5; color: #047857; }
.ag-badge-off { background: #f1f5f9; color: #64748b; }
.ag-group-item.is-inactive { opacity: 0.62; }
.ag-group-item.is-inactive .ag-group-name { text-decoration: line-through; text-decoration-color: rgba(100,116,139,0.45); }
.btn-primary.btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-primary.btn-danger:hover { background: #991b1b; border-color: #991b1b; }

/* ?? Lobby tablet kiosk ?? */
.lobby-kiosk {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(15, 118, 110, 0.16), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(14, 165, 233, 0.1), transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color: #0f172a;
}
.lobby-kiosk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
}
.lobby-kiosk-brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.lobby-kiosk-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: #fff; }
.lobby-kiosk-org { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #0f766e; }
.lobby-kiosk-brand h1 { margin: 0.1rem 0 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.lobby-kiosk-exit {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.lobby-kiosk-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.lobby-kiosk-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.lobby-kiosk-hero, .lobby-kiosk-panel {
  width: min(720px, 100%);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  padding: 1.75rem 1.5rem;
}
.lobby-kiosk-kicker { margin: 0 0 0.35rem; color: #0f766e; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; }
.lobby-kiosk-hero h2, .lobby-kiosk-panel h2 { margin: 0 0 0.5rem; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.03em; }
.lobby-kiosk-lead { margin: 0 0 1.5rem; color: #475569; font-size: 1.05rem; line-height: 1.5; }
.lobby-kiosk-cta {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #0e7490);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.28);
}
.lobby-kiosk-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(720px, 100%);
}
.lobby-kiosk-steps li {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.45rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.lobby-kiosk-steps li.active { color: #0f766e; background: #ccfbf1; border-color: rgba(15, 118, 110, 0.25); }
.lobby-kiosk-steps li.done { color: #0f172a; background: #e2e8f0; }
.lobby-kiosk-search { display: flex; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.lobby-kiosk-search .luxe-input { flex: 1; margin: 0; font-size: 1.05rem; padding: 0.85rem 0.9rem; }
.lobby-kiosk-arrivals { display: grid; gap: 0.65rem; max-height: min(48vh, 420px); overflow: auto; margin-bottom: 1rem; }
.lobby-kiosk-arrival {
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: #f8fafc;
  cursor: pointer;
  font: inherit;
}
.lobby-kiosk-arrival:hover { border-color: rgba(15, 118, 110, 0.35); background: #f0fdfa; }
.lobby-kiosk-arrival-name { display: block; font-weight: 700; font-size: 1.05rem; }
.lobby-kiosk-arrival-meta, .lobby-kiosk-arrival-type { display: block; color: #64748b; font-size: 0.88rem; margin-top: 0.15rem; }
.lobby-kiosk-empty { color: #64748b; }
.lobby-kiosk-card {
  border-radius: 16px;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent);
  border: 1px solid rgba(15, 118, 110, 0.12);
  margin: 0.75rem 0 1.25rem;
}
.lobby-kiosk-card-title { margin: 0 0 0.35rem; font-size: 1.25rem; font-weight: 700; }
.lobby-kiosk-special-tag {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e3a8a;
  background: #dbeafe;
}
.lobby-kiosk-arrival-badge {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1e3a8a;
  background: #dbeafe;
}
.lobby-kiosk-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem 1rem;
  margin: 0.75rem 0 0;
}
.lobby-kiosk-detail > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; align-items: baseline; }
.lobby-kiosk-detail dt { margin: 0; color: #64748b; font-size: 0.82rem; font-weight: 600; }
.lobby-kiosk-detail dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.lobby-kiosk-special { border-color: rgba(30, 58, 138, 0.18); background: linear-gradient(180deg, rgba(219, 234, 254, 0.55), transparent); }
.lobby-kiosk-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.lobby-kiosk-actions .btn-primary,
.lobby-kiosk-actions .btn-outline { min-height: 3rem; padding: 0.75rem 1.2rem; font-size: 1rem; }
.lobby-kiosk-camera-wrap {
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 4 / 3;
  margin: 0.75rem 0;
}
.lobby-kiosk-video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.lobby-kiosk-docs { display: grid; gap: 1rem; max-height: min(50vh, 480px); overflow: auto; margin: 0.75rem 0; }
.lobby-kiosk-doc {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  padding: 1rem;
  background: #f8fafc;
}
.lobby-kiosk-doc.is-signed { border-color: rgba(21, 128, 61, 0.25); background: #f0fdf4; }
.lobby-kiosk-doc header { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.lobby-kiosk-doc h3 { margin: 0; font-size: 1rem; }
.lobby-kiosk-doc-badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.25rem 0.55rem; border-radius: 999px; background: #fee2e2; color: #b91c1c;
}
.lobby-kiosk-doc.is-signed .lobby-kiosk-doc-badge { background: #dcfce7; color: #15803d; }
.lobby-kiosk-doc-body { font-size: 0.92rem; color: #334155; max-height: 180px; overflow: auto; margin-bottom: 0.75rem; }
.lobby-kiosk-sign-name, .lobby-kiosk-sign-pad { display: block; margin: 0.5rem 0; font-size: 0.88rem; }
.lobby-kiosk-checks { display: grid; gap: 0.75rem; margin: 1rem 0; }
.lobby-kiosk-checks label {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.1); background: #f8fafc;
  font-size: 1rem; line-height: 1.4;
}
.lobby-kiosk-checks input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; }
.lobby-kiosk-done { text-align: center; }
.lobby-kiosk-success-icon {
  width: 4rem; height: 4rem; margin: 0 auto 0.75rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0f766e, #059669);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.28);
}
.lobby-kiosk-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.lobby-kiosk-badge-card {
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 16px;
  padding: 1rem;
  background: #f0fdfa;
}
.lobby-kiosk-badge-name { margin: 0; font-weight: 700; }
.lobby-kiosk-badge-code { margin: 0.25rem 0 0.75rem; font-family: ui-monospace, monospace; color: #0f766e; font-size: 1.1rem; }
.lobby-kiosk-badge-qr { display: block; margin: 0 auto 0.5rem; border-radius: 12px; background: #fff; }
@media (max-width: 640px) {
  .lobby-kiosk-top { padding: 0.75rem; }
  .lobby-kiosk-body { padding: 0.85rem; align-items: stretch; }
  .lobby-kiosk-search { flex-direction: column; }
  .lobby-kiosk-actions { flex-direction: column; }
  .lobby-kiosk-actions .btn-primary, .lobby-kiosk-actions .btn-outline { width: 100%; }
}

/* ?? Read badge (mobile QR) ?? */
.badge-read-page { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; margin: 0 auto; }
.badge-read-scanner h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.badge-read-video-wrap {
  position: relative; margin: 0.75rem 0; border-radius: 14px; overflow: hidden;
  background: #0f172a; aspect-ratio: 3 / 4; max-height: 52vh;
}
.badge-read-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge-read-viewfinder {
  pointer-events: none; position: absolute; inset: 18% 14%;
  border: 2px solid rgba(255,255,255,0.85); border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.35);
}
.badge-read-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.badge-read-manual { display: grid; gap: 0.5rem; }
.badge-read-manual input { width: 100%; }
.badge-read-card {
  border-radius: 16px; padding: 1rem 1.1rem; border: 2px solid var(--badge-accent, #0f766e);
  background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.badge-read-card.tone-exceeded {
  border-color: #b91c1c; background: #fef2f2;
  box-shadow: 0 12px 32px rgba(185, 28, 28, 0.22);
}
.badge-read-card.tone-void { border-color: #64748b; background: #f8fafc; opacity: 0.95; }
.badge-read-card.tone-valid { border-color: var(--badge-accent, #0f766e); }
.badge-read-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.badge-read-code { margin: 0; font-family: ui-monospace, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em; }
.badge-read-type { margin: 0.15rem 0 0; color: #64748b; font-size: 0.85rem; }
.badge-read-pill {
  flex-shrink: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.35rem 0.55rem; border-radius: 999px; background: #ecfdf5; color: #047857;
}
.tone-exceeded .badge-read-pill { background: #fee2e2; color: #991b1b; }
.tone-void .badge-read-pill { background: #e2e8f0; color: #475569; }
.badge-read-alert {
  margin: 0.75rem 0; padding: 0.65rem 0.75rem; border-radius: 10px;
  background: #b91c1c; color: #fff; font-weight: 800; letter-spacing: 0.04em;
  text-align: center; text-transform: uppercase; font-size: 0.85rem;
}
.badge-read-name { margin: 0.6rem 0 0.15rem; font-size: 1.45rem; }
.badge-read-company { margin: 0 0 0.75rem; font-weight: 600; color: #334155; }
.badge-read-meta { display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin: 0; }
.badge-read-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin: 0; }
.badge-read-meta dd { margin: 0.1rem 0 0; font-weight: 600; color: #0f172a; }
.badge-read-meta dd.is-red { color: #b91c1c; font-weight: 800; }
.badge-read-zones dd { color: #1e3a8a; }
.tone-exceeded .badge-read-zones dd { color: #7f1d1d; }
.badge-read-party { margin-top: 0.85rem; }
.badge-read-party h3 { margin: 0 0 0.35rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.badge-read-party ul { margin: 0; padding-left: 1.1rem; }
.badge-read-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.badge-read-empty h2 { margin: 0.5rem 0; color: #0f766e; }
@media (max-width: 960px) {
  .badge-read-page { max-width: none; }
  .modules-ops-chip[href*='badges/read'] { outline: 2px solid rgba(15, 118, 110, 0.35); }
}

/* ?? Agency staff request (public) ?? */
.asf-shell {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(15, 118, 110, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(15, 23, 42, 0.04), transparent 50%),
    #f8fafc;
  color: #0f172a;
}
.asf-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background: #f8fafc;
}
.asf-top {
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.asf-top-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 1.5rem;
}
.asf-brand {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.asf-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.asf-logo-fallback {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(145deg, #0f766e, #0d9488);
  flex-shrink: 0;
}
.asf-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}
.asf-brand h1,
.asf-empty-card h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0f172a;
}
.asf-lead {
  margin: 0;
  max-width: 34rem;
  color: #64748b;
  line-height: 1.5;
  font-size: 0.98rem;
}
.asf-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.asf-summary {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.asf-summary h2 {
  margin: 0 0 0.85rem;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.asf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.asf-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 7.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: #f0fdfa;
  border: 1px solid rgba(15, 118, 110, 0.14);
}
.asf-chip span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.asf-chip strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.asf-chip-wide { flex: 1 1 100%; }
.asf-banner {
  border-radius: 14px;
  padding: 1rem 1.15rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.asf-banner.is-ok {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.25);
}
.asf-banner.is-warn {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.28);
}
.asf-banner-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.asf-banner-title {
  margin: 0.15rem 0;
  font-weight: 700;
  font-size: 1.05rem;
}
.asf-banner-meta {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
}
.asf-banner-hint {
  margin: 0.45rem 0 0;
  color: #334155;
  font-size: 0.9rem;
}
.asf-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.asf-card-soft { background: #fbfdff; }
.asf-section-head { margin-bottom: 1rem; }
.asf-section-head h2 {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.asf-section-head p { margin: 0; color: #64748b; font-size: 0.92rem; }
.asf-section-head-inline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid #e2e8f0;
}
.asf-step {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}
.asf-form { display: flex; flex-direction: column; gap: 0; }
.asf-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.asf-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}
.asf-optional {
  font-weight: 500;
  color: #94a3b8;
  font-size: 0.75rem;
}
.asf-field input,
.asf-field select {
  font: inherit;
  font-weight: 500;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.asf-field input:focus,
.asf-field select:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}
.asf-field input::placeholder { color: #94a3b8; font-weight: 400; }
.asf-workers {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.asf-worker {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem;
  background: #f8fafc;
}
.asf-worker-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.asf-worker-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #0f766e;
  background: #ccfbf1;
  flex-shrink: 0;
}
.asf-worker-title { flex: 1; min-width: 0; }
.asf-worker-title h3 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.asf-worker-title p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
}
.asf-worker-remove {
  border: 1px solid #fecaca;
  background: #fff;
  color: #b91c1c;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.asf-worker-remove:hover { background: #fef2f2; }
.asf-worker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.asf-field-span2 { grid-column: 1 / -1; }
.asf-upload-label { display: block; margin-bottom: 0.4rem; }
.asf-upload-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  border: 1.5px dashed #94a3b8;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.asf-upload-zone:hover,
.asf-upload-zone:focus-within {
  border-color: #0f766e;
  background: #f0fdfa;
}
.asf-upload-zone.has-file {
  border-style: solid;
  border-color: #0f766e;
  min-height: 140px;
}
.asf-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.asf-upload-copy {
  text-align: center;
  padding: 1rem;
  pointer-events: none;
}
.asf-upload-copy strong {
  display: block;
  color: #0f766e;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.asf-upload-copy span {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}
.asf-upload-preview {
  max-height: 160px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}
.asf-err {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 0.9rem;
  font-weight: 600;
}
.asf-submit-bar {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.asf-submit-bar strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.15rem;
}
.asf-submit-bar p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 500;
}
.asf-btn-primary {
  border: 0;
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  background: #fff;
  color: #0f766e;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.asf-btn-primary:hover { background: #f0fdfa; }
.asf-btn-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}
.asf-btn-secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}
.asf-btn-secondary:hover {
  border-color: #0f766e;
  color: #0f766e;
  background: #f0fdfa;
}
.asf-empty-card {
  max-width: 420px;
  width: 100%;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.asf-success-card {
  border-color: rgba(15, 118, 110, 0.25);
  background: linear-gradient(180deg, #f0fdfa 0%, #fff 55%);
}
.asf-empty-card .asf-lead { margin: 0 auto; }

@media (max-width: 640px) {
  .asf-contact-grid,
  .asf-worker-grid { grid-template-columns: 1fr; }
  .asf-field-span2 { grid-column: auto; }
  .asf-section-head-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .asf-submit-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .asf-btn-primary { width: 100%; }
  .asf-brand { flex-direction: column; }
}

/* ?? Finance attendance ?? */
.finance-att-page { display: grid; gap: 1rem; }
.finance-att-tabs {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.35rem; border-radius: 14px; border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-elevated, #fff);
}
.finance-att-tab {
  padding: 0.45rem 0.85rem; border-radius: 999px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #64748b);
  border: 1px solid transparent; background: transparent;
}
.finance-att-tab:hover { background: #f1f5f9; color: var(--text, #0f172a); }
.finance-att-tab.is-active { background: #0f766e; color: #fff; border-color: #0f766e; }
.finance-att-intro {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem;
}
.finance-att-intro-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; }
.finance-att-intro-desc { margin: 0; max-width: 42rem; }
.finance-att-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end; justify-content: space-between;
  padding: 0.9rem 1rem;
}
.finance-att-filters {
  display: flex; flex-wrap: wrap; gap: 0.65rem 0.85rem; align-items: end; flex: 1;
}
.finance-att-toolbar label { display: grid; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); min-width: 7.5rem; }
.finance-att-search { min-width: 11rem; flex: 1 1 12rem; max-width: 18rem; }
.finance-att-toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.finance-att-totals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.55rem;
}
.fin-att-stat {
  padding: 0.7rem 0.8rem; border-radius: 12px; border: 1px solid var(--border, #e2e8f0);
  background: #f8fafc; display: grid; gap: 0.15rem;
}
.fin-att-stat span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }
.fin-att-stat strong { font-size: 1.1rem; }
.fin-att-stat.accent { border-color: color-mix(in srgb, #0f766e 40%, transparent); background: color-mix(in srgb, #0f766e 8%, #fff); }
.fin-att-stat.accent strong { color: #0f766e; }
.fin-att-stat.present { border-color: #a7f3d0; background: #ecfdf5; }
.fin-att-stat.present strong { color: #065f46; }
.fin-att-stat.absent { border-color: #cbd5e1; }
.fin-att-stat.noshow { border-color: #fecaca; background: #fef2f2; }
.fin-att-stat.noshow strong { color: #991b1b; }
.finance-att-cards-section { display: grid; gap: 0.65rem; }
.finance-att-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
.finance-att-section-head h4 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.finance-att-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0.75rem;
}
.fin-att-card {
  position: relative; padding: 0.95rem 1rem 0.9rem 2.75rem; border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0); background: #fff;
  display: grid; gap: 0.5rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fin-att-card-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2.25rem;
  display: grid; place-items: center; font-weight: 800; font-size: 0.95rem;
  background: #f1f5f9; color: #475569;
}
.fin-att-card-present { border-left: 3px solid #10b981; }
.fin-att-card-present .fin-att-card-accent { background: #d1fae5; color: #065f46; }
.fin-att-card-absent { border-left: 3px solid #94a3b8; }
.fin-att-card-absent .fin-att-card-accent { background: #e2e8f0; color: #475569; }
.fin-att-card-no_show { border-left: 3px solid #ef4444; }
.fin-att-card-no_show .fin-att-card-accent { background: #fee2e2; color: #991b1b; }
.fin-att-card-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: start; }
.fin-att-card-name { display: block; font-size: 0.98rem; line-height: 1.25; }
.fin-att-card-sub { margin: 0.15rem 0 0; font-size: 0.8rem; color: #64748b; }
.fin-att-card-date { font-size: 0.78rem; font-weight: 700; color: #0f766e; text-transform: uppercase; letter-spacing: 0.04em; }
.fin-att-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.fin-att-card-meta span { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: #64748b; }
.fin-att-card-meta strong { font-size: 0.88rem; }
.fin-att-card-span { grid-column: 1 / -1; }
.fin-att-muted { color: #94a3b8; font-weight: 600; }
.fin-att-card-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; justify-content: space-between;
  padding-top: 0.35rem; border-top: 1px dashed #e2e8f0;
}
.fin-att-card-amount { font-size: 1.05rem; font-weight: 800; }
.fin-att-card-note {
  font-size: 0.75rem; color: #64748b; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finance-att-empty {
  grid-column: 1 / -1; padding: 1.5rem; border-radius: 14px; border: 1px dashed #cbd5e1;
  background: #f8fafc; text-align: center;
}
.finance-att-empty p { margin: 0.25rem 0; }
.finance-att-log-section { padding: 0; overflow: hidden; }
.finance-att-log-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.85rem 1rem; border: 0; background: transparent; font: inherit; font-weight: 700;
  cursor: pointer; color: var(--text, #0f172a);
}
.finance-att-log-toggle:hover { background: #f8fafc; }
.finance-att-log-chevron { transition: transform 0.15s ease; color: #64748b; }
.finance-att-log-toggle.is-open .finance-att-log-chevron { transform: rotate(180deg); }
.finance-att-log-panel { border-top: 1px solid var(--border, #e2e8f0); }
.finance-att-table-wrap { overflow: auto; padding: 0 0.5rem 0.5rem; }
.finance-att-table { font-size: 0.84rem; }
.fin-att-chip {
  display: inline-flex; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.fin-att-present { background: #d1fae5; color: #065f46; }
.fin-att-absent { background: #e2e8f0; color: #475569; }
.fin-att-no_show { background: #fee2e2; color: #991b1b; }
.fin-att-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; color: #64748b; }

/* ?? Monthly attendance grid ?? */
.fin-att-grid-page { display: grid; gap: 0.65rem; }

.fin-att-grid-toolbar {
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.fin-att-grid-toolbar-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
  overflow: visible;
}
.fin-att-grid-toolbar-primary {
  display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; min-width: 0;
  overflow: visible;
}
.fin-att-grid-toolbar-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end;
}
.fin-att-grid-toolbar-meta {
  font-size: 0.78rem; color: #64748b; padding-top: 0.1rem;
}
.fin-att-grid-nav { display: flex; align-items: center; gap: 0.35rem; }
.fin-att-period-btn {
  border: 0; background: transparent; padding: 0.15rem 0.35rem; cursor: pointer; text-align: left;
  border-radius: 0.5rem; transition: background 0.12s;
}
.fin-att-period-btn:hover { background: #f1f5f9; }
.fin-att-month-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.fin-att-toolbar-company { position: relative; z-index: 5; overflow: visible; }
.fin-att-toolbar-company select {
  min-width: 12rem; max-width: min(28rem, 70vw); padding: 0.45rem 0.65rem;
  border: 1px solid #e2e8f0; border-radius: 0.55rem; background: #fff;
  font-size: 0.85rem; font-weight: 600; color: #0f172a;
}
.fin-att-toolbar-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.42rem 0.7rem; border: 1px solid #e2e8f0; border-radius: 0.55rem;
  background: #fff; color: #334155; font-size: 0.82rem; font-weight: 650; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.fin-att-toolbar-btn:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
.fin-att-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fin-att-toolbar-btn-icon {
  width: 2rem; justify-content: center; padding-inline: 0; font-weight: 800; color: #0f766e;
}
.fin-att-toolbar-badge {
  min-width: 1.35rem; padding: 0.1rem 0.4rem; border-radius: 999px;
  background: #e0e7ff; color: #3730a3; font-size: 0.68rem; font-weight: 800; line-height: 1.2;
}
.fin-att-nav-btn {
  width: 2rem; height: 2rem; border-radius: 0.55rem; border: 1px solid #e2e8f0;
  background: #fff; color: #334155; font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.fin-att-nav-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.fin-att-grid-period-label { display: block; font-size: 1.05rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; line-height: 1.15; }
.fin-att-grid-period-sub { font-size: 0.72rem; color: #64748b; font-weight: 500; }
.fin-att-kpi-row {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.fin-att-kpi-row-compact {
  padding-top: 0.15rem; border-top: 1px solid #f1f5f9;
}
.fin-att-kpi {
  display: flex; align-items: baseline; gap: 0.35rem; padding: 0.28rem 0.55rem;
  border-radius: 0.5rem; background: #f8fafc; border: 1px solid #e2e8f0;
}
.fin-att-kpi.present { background: #ecfdf5; border-color: #a7f3d0; }
.fin-att-kpi.overtime { background: #eff6ff; border-color: #bfdbfe; }
.fin-att-kpi.absent { background: #f8fafc; border-color: #e2e8f0; }
.fin-att-kpi.noshow { background: #fef2f2; border-color: #fecaca; }
.fin-att-kpi.workers { background: #f5f3ff; border-color: #ddd6fe; }
.fin-att-kpi-val { font-size: 0.95rem; font-weight: 800; color: #0f172a; line-height: 1; }
.fin-att-kpi-lbl { font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.fin-att-grid-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.85rem;
  font-size: 0.78rem; color: #475569;
}
.fin-att-grid-legend-compact { padding: 0.25rem 0; }
.fin-att-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.fin-att-legend-swatch { width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; border: 1px solid #e2e8f0; }
.fin-att-legend-swatch.wk { background: #f1f5f9; }
.fin-att-legend-swatch.hol { background: #fffbeb; border-color: #fde68a; }

/* Grid toolbar popups */
.fin-att-grid-popup-backdrop { z-index: 1100; }
.fin-att-grid-popup { max-width: 480px; padding: 0; overflow: hidden; }
.fin-att-grid-popup-narrow { max-width: 420px; }
.fin-att-grid-popup-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.1rem 0.75rem; border-bottom: 1px solid #e2e8f0;
}
.fin-att-grid-popup-head h2 { margin: 0; font-size: 1.05rem; }
.fin-att-grid-popup-kicker {
  margin: 0 0 0.1rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #0f766e;
}
.fin-att-grid-popup-body { padding: 0.9rem 1.1rem; }
.fin-att-grid-popup-lead { margin: 0 0 0.75rem; font-size: 0.86rem; color: #64748b; }
.fin-att-grid-popup-meta { margin: 0.65rem 0 0; font-size: 0.8rem; }
.fin-att-grid-popup-tip { margin: 0.85rem 0 0; font-size: 0.82rem; color: #475569; }
.fin-att-grid-popup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.fin-att-grid-popup-actions {
  padding: 0.75rem 1.1rem 1rem; border-top: 1px solid #e2e8f0; justify-content: flex-end; gap: 0.45rem;
}
.fin-att-export-options { display: grid; gap: 0.45rem; }
.fin-att-export-opt {
  display: grid; gap: 0.15rem; text-align: left; padding: 0.7rem 0.8rem;
  border: 1px solid #e2e8f0; border-radius: 0.6rem; background: #fff; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.fin-att-export-opt:hover { border-color: #0f766e; background: #f0fdfa; }
.fin-att-export-opt-title { font-size: 0.9rem; font-weight: 750; color: #0f172a; }
.fin-att-export-opt-desc { font-size: 0.76rem; color: #64748b; }

/* Legacy hero aliases (unused) */
.fin-att-grid-hero {
  padding: 1rem 1.15rem;
  display: grid;
  gap: 0.85rem;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
}
.fin-att-grid-hero-top {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.fin-att-grid-hero-bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between;
}
.fin-att-grid-controls, .fin-att-day-range-panel, .fin-att-grid-actions {
  display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: flex-end;
}
.fin-att-ctrl { display: grid; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.fin-att-ctrl input, .fin-att-ctrl select {
  min-width: 8.5rem; padding: 0.45rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 0.55rem;
  background: #fff; font-size: 0.85rem; font-weight: 600; color: #0f172a;
}
.fin-att-ctrl-compact input { min-width: 9.5rem; }
.fin-att-day-range-label { font-size: 0.78rem; font-weight: 800; color: #475569; align-self: center; }
.fin-att-days-pill {
  align-self: center; padding: 0.3rem 0.65rem; border-radius: 999px;
  background: #e0e7ff; color: #3730a3; font-size: 0.72rem; font-weight: 800;
}
.fin-att-grid-hint { margin: 0; font-size: 0.78rem; color: #64748b; }

.fin-att-grid-wrap { padding: 0; overflow: hidden; border: 1px solid #e2e8f0; }
.fin-att-grid-loading, .fin-att-grid-empty {
  padding: 3rem 1.5rem; text-align: center; color: #64748b;
}
.fin-att-grid-empty strong { display: block; margin: 0.5rem 0 0.25rem; color: #0f172a; font-size: 1rem; }
.fin-att-empty-icon { font-size: 2rem; opacity: 0.5; }
.fin-att-spinner {
  display: inline-block; width: 1rem; height: 1rem; border: 2px solid #e2e8f0;
  border-top-color: #2563eb; border-radius: 50%; animation: fin-att-spin 0.7s linear infinite;
  vertical-align: -0.15rem; margin-right: 0.35rem;
}
@keyframes fin-att-spin { to { transform: rotate(360deg); } }

.fin-att-grid-scroll { overflow: auto; max-height: min(70vh, 44rem); }
.fin-att-grid {
  border-collapse: separate; border-spacing: 0; font-size: 0.76rem; min-width: 100%;
}
.fin-att-grid thead th {
  position: sticky; top: 0; z-index: 3;
  background: #f8fafc; border-bottom: 2px solid #e2e8f0; font-weight: 700; color: #475569;
}
.fin-att-grid th, .fin-att-grid td {
  border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
  padding: 0.3rem 0.2rem; text-align: center; vertical-align: middle;
}
.fin-att-grid-sticky {
  position: sticky; background: #fff; z-index: 2; text-align: start;
}
.fin-att-grid thead .fin-att-grid-sticky { z-index: 4; background: #f8fafc; }
.fin-att-grid-person-col {
  left: 0; min-width: 12rem; max-width: 12rem; padding: 0.5rem 0.75rem !important;
  box-shadow: 2px 0 6px rgba(15,23,42,0.04);
}
.fin-att-grid-company-col {
  left: 12rem; min-width: 7rem; max-width: 8.5rem; padding: 0.5rem !important;
  box-shadow: 2px 0 6px rgba(15,23,42,0.04); color: #64748b; font-size: 0.72rem;
}
.fin-att-grid-day { min-width: 3.1rem; padding: 0.35rem 0.2rem !important; position: relative; }
.fin-att-hol-badge {
  position: absolute; top: 2px; right: 2px; font-size: 0.55rem; font-weight: 900;
  background: #fbbf24; color: #78350f; border-radius: 3px; padding: 0 3px; line-height: 1.3;
}
.fin-att-grid-dow {
  display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #94a3b8;
}
.fin-att-grid-num { display: block; font-size: 0.85rem; font-weight: 800; color: #1e293b; }
.fin-att-grid-day.wk, .fin-att-grid-cell.wk { background: #f8fafc; }
.fin-att-grid-day.hol, .fin-att-grid-cell.hol { background: #fffbeb; }
.fin-att-grid-day.today, .fin-att-grid-cell.today {
  box-shadow: inset 0 -3px 0 #3b82f6;
}
.fin-att-grid-row:hover td, .fin-att-grid-row:hover th.fin-att-grid-sticky {
  background: #f8fafc;
}

.fin-att-person { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.fin-att-person-avatar {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 0.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff); color: #1e40af;
  font-size: 0.68rem; font-weight: 800;
}
.fin-att-person-meta { display: grid; gap: 0.1rem; min-width: 0; }
.fin-att-person-meta strong {
  font-size: 0.8rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-att-person-meta .muted { font-size: 0.65rem; }
.fin-att-person-badges { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
.fin-att-row-badge {
  font-size: 0.58rem; font-weight: 800; padding: 0.1rem 0.35rem; border-radius: 999px;
}
.fin-att-row-badge.present { background: #d1fae5; color: #065f46; }
.fin-att-row-badge.absent { background: #e2e8f0; color: #475569; }
.fin-att-row-badge.noshow { background: #fee2e2; color: #b91c1c; }

.fin-att-cell {
  display: grid; gap: 0.12rem; justify-items: center; padding: 0.2rem 0.1rem;
  min-height: 2.8rem;
}
.fin-att-grid-cell { cursor: pointer; transition: background 0.12s; }
.fin-att-grid-cell.is-empty .fin-att-cell { opacity: 0.55; }
.fin-att-grid-cell.is-empty:hover .fin-att-cell { opacity: 1; }
.fin-att-grid-cell.is-empty:hover {
  background: #f0f9ff !important;
  outline: 1px dashed #93c5fd; outline-offset: -1px;
}
.fin-att-grid-cell:hover:not(.is-future) {
  outline: 1px solid #cbd5e1; outline-offset: -1px;
}
.fin-att-grid-cell.is-future {
  cursor: default;
  opacity: 0.55;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(148, 163, 184, 0.08) 4px,
    rgba(148, 163, 184, 0.08) 8px
  );
}
.fin-att-grid-cell.is-future:hover {
  outline: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(148, 163, 184, 0.08) 4px,
    rgba(148, 163, 184, 0.08) 8px
  );
}
.fin-att-grid-cell.is-future.is-empty:hover .fin-att-cell { opacity: 0.55; }
.fin-att-grid-day.is-future { opacity: 0.55; color: #94a3b8; }
.fin-att-grid-day.is-future .fin-att-grid-num { color: #94a3b8; }
.fin-att-cell-sym { min-width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.fin-att-cell-time {
  font-size: 0.6rem; font-weight: 700; color: #475569; white-space: nowrap; line-height: 1.2;
}
.fin-att-cell-hours {
  font-size: 0.55rem; font-weight: 800; color: #94a3b8; text-transform: uppercase;
}
.fin-att-sym {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.45rem; height: 1.45rem; padding: 0 0.2rem;
  border-radius: 0.4rem; font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.fin-att-sym-present { background: #d1fae5; color: #065f46; }
.fin-att-sym-partial { background: #fef3c7; color: #92400e; }
.fin-att-sym-overtime { background: #dbeafe; color: #1d4ed8; }
.fin-att-sym-absent { background: #e2e8f0; color: #475569; }
.fin-att-sym-no_show { background: #fee2e2; color: #b91c1c; }
.fin-att-sym-empty { background: #f1f5f9; color: #94a3b8; border: 1px dashed #cbd5e1; }

.fin-att-edit {
  display: grid; gap: 0.3rem; justify-items: center; padding: 0.25rem;
  background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}
.fin-att-edit-row { display: flex; align-items: center; gap: 0.35rem; }
.fin-att-edit-label { font-size: 0.62rem; font-weight: 800; color: #475569; }
.fin-att-edit-status {
  font-size: 0.72rem; padding: 0.3rem 0.4rem;
  border: 1px solid #cbd5e1; border-radius: 0.45rem; background: #fff;
}
.fin-att-edit-times { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.fin-att-edit-dash { color: #64748b; font-weight: 900; font-size: 0.7rem; }
.fin-att-edit input[type="time"] {
  font-size: 0.72rem; padding: 0.25rem 0.35rem;
  border: 1px solid #cbd5e1; border-radius: 0.45rem; background: #fff;
}
.fin-att-edit-actions { display: flex; gap: 0.35rem; }
.fin-att-edit-btn {
  font-size: 0.7rem; padding: 0.3rem 0.55rem; border-radius: 0.45rem;
  border: 1px solid #cbd5e1; background: #fff; cursor: pointer; font-weight: 800;
}
.fin-att-edit-btn:hover { background: #f8fafc; }
.fin-att-edit-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.fin-att-edit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fin-att-editing-cell { background: #eef2ff !important; z-index: 5; }

/* Cell attendance popup */
.fin-att-cell-dialog-backdrop { z-index: 1200; }
.fin-att-cell-dialog { max-width: 520px; padding: 0; overflow: hidden; }
.fin-att-cell-dialog-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.fin-att-cell-dialog-meta > div { display: grid; gap: 0.15rem; }
.fin-att-cell-dialog-meta .muted { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.fin-att-cell-dialog-meta strong { font-size: 0.9rem; color: #0f172a; }
.fin-att-cell-dialog-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.fin-att-cell-dialog-badge {
  display: inline-flex; padding: 0.2rem 0.5rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 750;
}
.fin-att-cell-dialog-badge.wk { background: #f1f5f9; color: #475569; }
.fin-att-cell-dialog-badge.hol { background: #fffbeb; color: #92400e; }
.fin-att-cell-dialog-badge.today { background: #ecfdf5; color: #065f46; }
.fin-att-cell-dialog-badge.future { background: #e2e8f0; color: #64748b; }
.fin-att-cell-dialog-notice {
  margin: 0 0 0.85rem; padding: 0.65rem 0.75rem; border-radius: 0.55rem;
  background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: 0.84rem;
}
.fin-att-cell-dialog-preview { margin-top: 0.85rem; }
.fin-att-dows { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fin-att-dow { font-weight: 500; display: inline-flex; gap: 0.3rem; align-items: center; }
.fin-att-dow-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.65rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  background: #fff; font-size: 0.8rem; font-weight: 650; color: #334155; cursor: pointer;
  user-select: none;
}
.fin-att-dow-chip:has(input:checked) {
  border-color: #0f766e; background: #f0fdfa; color: #0f766e;
}
.fin-att-dow-chip input { margin: 0; }

/* ?? Attendance settings page ?? */
.fin-att-settings-page { display: grid; gap: 1rem; max-width: 920px; }
.fin-att-settings-intro { margin: 0 0 0.15rem; }
.fin-att-settings-intro-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 750; color: #0f172a; }
.fin-att-settings-intro-desc { margin: 0; max-width: 40rem; line-height: 1.45; font-size: 0.88rem; }
.fin-att-settings-card { padding: 0; overflow: hidden; border: 1px solid #e2e8f0; }
.fin-att-settings-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.15rem 0.85rem; border-bottom: 1px solid #f1f5f9; background: #fafbfc;
}
.fin-att-settings-card-head h3 { margin: 0; font-size: 1.05rem; font-weight: 750; color: #0f172a; }
.fin-att-settings-kicker {
  margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.04em; color: #0f766e;
}
.fin-att-settings-card-foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.85rem 1.15rem 1.05rem; border-top: 1px solid #f1f5f9; background: #fff;
}
.fin-att-settings-form { display: grid; gap: 0; }
.fin-att-settings-group { padding: 1rem 1.15rem; border-bottom: 1px solid #f1f5f9; }
.fin-att-settings-group:last-child { border-bottom: 0; }
.fin-att-settings-group-head { margin-bottom: 0.75rem; }
.fin-att-settings-group-head h4 { margin: 0 0 0.2rem; font-size: 0.92rem; font-weight: 750; color: #0f172a; }
.fin-att-settings-group-head p { margin: 0; font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.fin-att-settings-group-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem;
}
.fin-att-settings-field {
  display: grid; gap: 0.3rem; margin: 0; min-width: 0;
}
.fin-att-settings-field-full { grid-column: 1 / -1; }
.fin-att-settings-label {
  font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em;
}
.fin-att-settings-optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.fin-att-settings-field input[type="number"],
.fin-att-settings-field input[type="date"],
.fin-att-settings-field input[type="text"],
.fin-att-settings-field select {
  width: 100%; box-sizing: border-box;
  padding: 0.5rem 0.65rem; border: 1px solid #e2e8f0; border-radius: 0.55rem;
  background: #fff; font-size: 0.88rem; font-weight: 600; color: #0f172a;
}
.fin-att-settings-field input:focus,
.fin-att-settings-field select:focus {
  outline: none; border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.fin-att-settings-toggles {
  grid-column: 1 / -1; display: grid; gap: 0.45rem;
}
.fin-att-settings-toggle {
  display: flex; align-items: flex-start; gap: 0.55rem; margin: 0;
  padding: 0.55rem 0.7rem; border: 1px solid #e2e8f0; border-radius: 0.55rem;
  background: #fff; cursor: pointer; font-size: 0.86rem; font-weight: 550; color: #334155;
}
.fin-att-settings-toggle:has(input:checked) {
  border-color: #99f6e4; background: #f0fdfa;
}
.fin-att-settings-toggle input { margin-top: 0.15rem; flex-shrink: 0; }
.fin-att-settings-company-pick {
  padding: 1rem 1.15rem 0.25rem; max-width: 22rem;
}
.fin-att-settings-co-form { border-top: 1px solid #f1f5f9; margin-top: 0.75rem; }
.fin-att-holiday-form {
  display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 9.5rem) minmax(0, 1fr) auto;
  gap: 0.75rem; align-items: end; padding: 1rem 1.15rem; border-bottom: 1px solid #f1f5f9;
}
.fin-att-holiday-form-action { display: flex; align-items: end; padding-bottom: 0.05rem; }
.fin-att-holidays {
  list-style: none; margin: 0; padding: 0.5rem 0.65rem 0.75rem; display: grid; gap: 0.35rem;
}
.fin-att-holidays-empty {
  padding: 1.25rem 1.15rem; font-size: 0.88rem; text-align: center;
}
.fin-att-holiday-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.65rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 0.55rem; background: #fff;
}
.fin-att-holiday-main { display: grid; gap: 0.15rem; min-width: 0; }
.fin-att-holiday-date { font-size: 0.82rem; font-weight: 750; color: #0f766e; }
.fin-att-holiday-name { font-size: 0.88rem; color: #0f172a; font-weight: 600; }
@media (max-width: 720px) {
  .fin-att-settings-group-body { grid-template-columns: 1fr; }
  .fin-att-holiday-form { grid-template-columns: 1fr 1fr; }
  .fin-att-holiday-name-field,
  .fin-att-holiday-form-action { grid-column: 1 / -1; }
  .fin-att-holiday-form-action { justify-content: stretch; }
  .fin-att-holiday-form-action .btn-primary { width: 100%; }
}

/* ?? Record attendance wizard ?? */
.fin-att-wizard-backdrop { z-index: 1200; }
.fin-att-wizard { max-width: 560px; padding: 0; overflow: hidden; }
.fin-att-wizard-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border, #e2e8f0);
}
.fin-att-wizard-head h2 { margin: 0; font-size: 1.1rem; }
.fin-att-wizard-kicker { margin: 0 0 0.15rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #0f766e; }
.fin-att-wizard-close { flex-shrink: 0; }
.fin-att-wizard-steps {
  display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border, #e2e8f0); background: #f8fafc;
}
.fin-att-wizard-step {
  display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0;
  font-size: 0.72rem; font-weight: 600; color: #94a3b8;
}
.fin-att-wizard-step-num {
  width: 1.35rem; height: 1.35rem; border-radius: 999px; display: grid; place-items: center;
  background: #e2e8f0; color: #64748b; font-size: 0.68rem; flex-shrink: 0;
}
.fin-att-wizard-step.is-active { color: #0f766e; }
.fin-att-wizard-step.is-active .fin-att-wizard-step-num { background: #0f766e; color: #fff; }
.fin-att-wizard-step.is-done { color: #334155; }
.fin-att-wizard-step.is-done .fin-att-wizard-step-num { background: #ccfbf1; color: #0f766e; }
.fin-att-wizard-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-att-wizard-body { padding: 1rem 1.25rem 0.5rem; }
.fin-att-wizard-lead { margin: 0 0 0.85rem; font-size: 0.88rem; color: var(--text-muted, #64748b); }
.fin-att-wizard-hint { margin: 0.5rem 0 0; font-size: 0.78rem; }
.fin-att-wizard-field { display: grid; gap: 0.3rem; margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.fin-att-wizard-field > span, .fin-att-wizard-field > legend { font-size: 0.78rem; }
.fin-att-wizard-field input[type="date"],
.fin-att-wizard-field input[type="time"],
.fin-att-wizard-select {
  width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px; font-size: 0.88rem; font-weight: 400; color: var(--text, #0f172a);
}
.fin-att-wizard-select { min-height: 10rem; }
.fin-att-wizard-grid { display: grid; gap: 0.85rem; }
.fin-att-wizard-status { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.fin-att-wizard-radio {
  display: flex; align-items: center; gap: 0.45rem; font-weight: 500; color: var(--text, #0f172a);
  padding: 0.4rem 0.55rem; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; cursor: pointer;
}
.fin-att-wizard-radio:has(input:checked) { border-color: #0f766e; background: #f0fdfa; }
.fin-att-wizard-times {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.85rem;
}
.fin-att-wizard-times.is-hidden { display: none; }
.fin-att-wizard-summary {
  display: grid; gap: 0.45rem; margin: 0; padding: 0.75rem; background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
}
.fin-att-wizard-summary > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; align-items: baseline; }
.fin-att-wizard-summary dt { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #64748b; }
.fin-att-wizard-summary dd { margin: 0; font-size: 0.88rem; }
.fin-att-wizard-amount dd { font-size: 1.05rem; font-weight: 700; color: #0f766e; }
.fin-att-wizard-summary-text { margin: 0.65rem 0 0; font-size: 0.82rem; }
.fin-att-wizard-extras { display: grid; gap: 0.45rem; margin-top: 0.85rem; }
.fin-att-wizard-check {
  display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.84rem; padding: 0.55rem 0.65rem;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #fffbeb; cursor: pointer;
}
.fin-att-wizard-check input { margin-top: 0.15rem; }
.fin-att-wizard-err { margin: 0 0 0.65rem; }
.fin-att-wizard-loading { margin: 1rem 0; text-align: center; }
.fin-att-wizard-actions {
  padding: 0.85rem 1.25rem 1.1rem; border-top: 1px solid var(--border, #e2e8f0);
  justify-content: flex-end; gap: 0.5rem;
}

/* ?? Finance catalog home ?? */
.finance-catalog-page { display: grid; gap: 0; }
.finance-catalog-section { margin: 0; }
.finance-catalog-stats-row { margin-bottom: 0.85rem !important; }
.finance-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.65rem;
}
.finance-catalog-tile { min-height: 128px; }
@media (min-width: 1100px) {
  .finance-catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .finance-att-filters label { min-width: calc(50% - 0.5rem); }
  .finance-att-search { max-width: none; flex-basis: 100%; }
}

/* ?? Finance payments & settlements ?? */
.finance-payments-page { display: grid; gap: 1rem; }
.fin-pay-tabs {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  border-bottom: 1px solid var(--border, #e2e8f0); padding-bottom: 0.5rem;
}
.fin-pay-tab {
  border: 1px solid transparent; background: transparent; color: var(--text-muted, #64748b);
  padding: 0.4rem 0.75rem; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.fin-pay-tab:hover { background: #f1f5f9; color: var(--text, #0f172a); }
.fin-pay-tab.active { background: #0f766e; color: #fff; }
.fin-pay-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: end;
}
.fin-pay-toolbar label {
  display: grid; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
}
.fin-pay-toolbar select, .fin-pay-toolbar input {
  min-width: 9rem; padding: 0.4rem 0.55rem; border-radius: 8px; border: 1px solid var(--border, #cbd5e1);
}
.fin-pay-table td, .fin-pay-table th { white-space: nowrap; }
.fin-pay-overdue { background: #fff7ed; }
.fin-pay-badge {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: capitalize;
  background: #e2e8f0; color: #334155;
}
.fin-pay-badge-open { background: #dbeafe; color: #1e40af; }
.fin-pay-badge-partial { background: #fef3c7; color: #92400e; }
.fin-pay-badge-paid { background: #d1fae5; color: #065f46; }
.fin-pay-badge-draft, .fin-pay-badge-pending_approval { background: #ede9fe; color: #5b21b6; }
.fin-pay-badge-void { background: #fee2e2; color: #991b1b; }
.fin-pay-badge-overdue { background: #ffedd5; color: #9a3412; }
.fin-pay-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fin-pay-danger { color: #b91c1c !important; border-color: #fecaca !important; }
.fin-pay-modal {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  display: grid; place-items: center; z-index: 80; padding: 1rem;
}
.fin-pay-modal[hidden] { display: none !important; }
.fin-pay-modal-card {
  background: #fff; border-radius: 12px; padding: 1.25rem; width: min(420px, 100%);
  box-shadow: 0 20px 50px rgba(15,23,42,0.25);
}
.fin-pay-check { display: flex !important; align-items: center; gap: 0.5rem; font-weight: 600; }
.btn-sm { min-height: 1.75rem; padding: 0.22rem 0.6rem; font-size: 0.78rem; }
.fin-pay-create { margin-top: 0.5rem; }
@media (max-width: 720px) {
  .fin-pay-table { display: block; overflow-x: auto; }
}

/* ?? Finance period desk ?? */
.finance-desk-page { display: grid; gap: 1rem; }
.finance-desk-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-end;
}
.finance-desk-kicker {
  margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #0f766e;
}
.finance-desk-title { margin: 0 0 0.35rem; font-size: 1.35rem; }
.finance-desk-desc { margin: 0; max-width: 36rem; }
.finance-desk-period { display: grid; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.finance-desk-period input { padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border, #cbd5e1); }
.finance-money-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem;
}
.finance-money-stat {
  background: #0f172a; color: #f8fafc; border-radius: 10px; padding: 0.85rem 1rem;
  display: grid; gap: 0.2rem;
}
.finance-money-stat.is-warn { background: #9a3412; }
.finance-money-value { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.finance-money-label { font-size: 0.72rem; opacity: 0.85; font-weight: 600; }
.finance-desk-period-note { margin: 0.65rem 0 0; }
.finance-desk-cta-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.finance-desk-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem;
}
@media (max-width: 900px) {
  .finance-desk-grid { grid-template-columns: 1fr; }
}
.finance-desk-panel h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.finance-desk-panel > .muted { margin: 0 0 0.75rem; font-size: 0.85rem; }
.finance-desk-table { font-size: 0.84rem; }
.finance-desk-more { margin: 0.65rem 0 0; }
.finance-desk-links { display: grid; gap: 0.5rem; }
.finance-desk-link-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; }
.finance-desk-link-row a { font-weight: 600; font-size: 0.9rem; }

.fin-pay-more { position: relative; }
.fin-pay-more > summary { list-style: none; }
.fin-pay-more > summary::-webkit-details-marker { display: none; }
.fin-pay-more-menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 11rem; background: #fff; border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; padding: 0.35rem; display: grid; gap: 0.15rem;
}
.fin-pay-more-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 0.45rem 0.6rem; border-radius: 6px; font-weight: 600; font-size: 0.84rem;
  color: var(--text, #0f172a); cursor: pointer; text-decoration: none;
}
.fin-pay-more-item:hover, .fin-pay-more-item.active { background: #f1f5f9; color: #0f766e; }

.fin-pay-preview { margin-top: 0.85rem; }
.fin-pay-preview-summary { margin-bottom: 0.65rem; font-size: 0.92rem; }
.fin-pay-preview-table-wrap { overflow: auto; max-height: 280px; }

.finance-settings-page { display: grid; gap: 1.25rem; }
.finance-settings-toc {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; font-weight: 600;
}
.finance-settings-section { display: grid; gap: 0.75rem; }
.finance-vendors-section-label {
  grid-column: 1 / -1; margin: 0.5rem 0 0; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #0f766e;
}
.agency-co-hint { margin: 0 0 0.85rem; }
.agency-co-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: wrap; margin-bottom: 0.75rem;
}
.agency-co-filter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.agency-co-filter-label { font-weight: 700; margin-right: 0.15rem; }
.agency-co-filter-btn {
  border: 1px solid #d1d5db; background: #fff; color: #334155; border-radius: 999px;
  padding: 0.28rem 0.75rem; font-weight: 650; cursor: pointer;
}
.agency-co-filter-btn.is-on { background: #0f766e; color: #fff; border-color: #0f766e; }
.agency-co-row { cursor: pointer; }
.agency-page .card { overflow: visible; }
.agency-co-row.is-editing { background: #f0fdfa; box-shadow: inset 3px 0 0 #0f766e; }
.agency-co-actions { display: flex; justify-content: flex-end; align-items: center; }
.agency-co-menu { position: relative; display: inline-block; }
.agency-co-menu > summary { list-style: none; }
.agency-co-menu > summary::-webkit-details-marker,
.agency-co-menu > summary::marker { display: none; content: none; }
.agency-co-menu-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--gk-btn-min-height, 2rem);
  padding: var(--gk-btn-pad, 0.32rem 0.75rem);
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  border-radius: var(--gk-btn-radius, 8px);
  cursor: pointer; user-select: none;
  font: inherit;
  font-weight: var(--gk-btn-weight, 650);
  font-size: var(--gk-btn-size, 0.8rem);
  letter-spacing: 0;
  color: var(--gk-btn-color, #334155);
  background: var(--gk-btn-bg, #fff);
  box-shadow: none;
}
.agency-co-menu-btn:hover {
  background: var(--gk-btn-hover-bg, #f8fafc);
  border-color: var(--gk-btn-hover-border, #94a3b8);
  color: var(--gk-btn-hover-color, #0f766e);
  box-shadow: none;
}
.agency-co-menu[open] > .agency-co-menu-btn,
.agency-co-menu-btn:focus-visible {
  outline: 0;
  background: var(--gk-btn-active-bg, rgba(15, 118, 110, 0.08));
  border-color: var(--gk-btn-active-border, rgba(15, 118, 110, 0.35));
  color: var(--gk-btn-hover-color, #0f766e);
  box-shadow: var(--gk-btn-focus-ring, 0 0 0 3px rgba(15, 118, 110, 0.12));
}
.agency-co-menu-dots { display: inline-flex; gap: 3px; align-items: center; }
.agency-co-menu-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block;
}
.agency-co-menu-caret {
  width: 0.42rem; height: 0.42rem; margin-left: 0.1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform 0.16s ease;
  opacity: 0.7;
}
.agency-co-menu[open] .agency-co-menu-caret { transform: rotate(225deg) translateY(-1px); }
html[data-theme="dark"] .agency-co-menu-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
}
html[data-theme="dark"] .agency-co-menu-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #5eead4;
}
html[data-theme="dark"] .agency-co-menu[open] > .agency-co-menu-btn,
html[data-theme="dark"] .agency-co-menu-btn:focus-visible {
  background: rgba(15, 118, 110, 0.18);
  border-color: rgba(45, 212, 191, 0.35);
  color: #5eead4;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}
.agency-co-menu-panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0;
  min-width: 13.5rem; padding: 0.45rem;
  background: #fff; border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 14px; display: grid; gap: 0.08rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 118, 110, 0.06);
  animation: agency-co-menu-in 0.14s ease-out;
}
.agency-co-menu-panel::before {
  content: ""; position: absolute; top: -6px; right: 1.4rem;
  width: 10px; height: 10px; background: #fff; border-left: 1px solid rgba(15, 118, 110, 0.18);
  border-top: 1px solid rgba(15, 118, 110, 0.18); transform: rotate(45deg);
}
.agency-co-menu.is-up .agency-co-menu-panel {
  top: auto; bottom: calc(100% + 8px);
  animation: agency-co-menu-in-up 0.14s ease-out;
}
.agency-co-menu.is-up .agency-co-menu-panel::before {
  top: auto; bottom: -6px; transform: rotate(225deg);
}
@keyframes agency-co-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes agency-co-menu-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.agency-co-menu-kicker {
  margin: 0.35rem 0.45rem 0.15rem; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #0f766e;
}
.agency-co-menu-kicker:first-child { margin-top: 0.15rem; }
.agency-co-menu-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 0.52rem 0.65rem; border-radius: 9px;
  font-weight: 650; font-size: 0.88rem; color: #0f172a;
}
.agency-co-menu-item:hover { background: #f0fdfa; color: #0f766e; }
.agency-co-menu-ico {
  display: inline-flex; width: 1.55rem; height: 1.55rem; flex: 0 0 1.55rem;
  align-items: center; justify-content: center; border-radius: 7px;
  background: rgba(15, 118, 110, 0.1); color: #0f766e;
}
.agency-co-menu-ico svg { width: 0.95rem; height: 0.95rem; }
.agency-co-menu-item:hover .agency-co-menu-ico { background: rgba(15, 118, 110, 0.18); }
.agency-co-menu-item.is-danger { color: #b91c1c; }
.agency-co-menu-item.is-danger .agency-co-menu-ico { background: rgba(185, 28, 28, 0.1); color: #b91c1c; }
.agency-co-menu-item.is-danger:hover { background: #fef2f2; color: #991b1b; }
.agency-co-menu-item:disabled,
.agency-co-menu-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.agency-co-menu.gk-site-menu { position: relative; }
.agency-co-menu.gk-site-menu .agency-co-menu-btn { position: relative; }
.agency-co-menu.gk-site-menu .agency-co-menu-panel {
  position: fixed;
  z-index: 80;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
.agency-co-menu.gk-site-menu.is-up .agency-co-menu-panel {
  top: auto;
  bottom: auto;
}
.agency-co-menu.gk-site-menu .gk-channel-badge {
  top: -7px;
  right: -5px;
}
.finance-report-settle-hint {
  margin: 0 0 0.85rem; padding: 0.65rem 0.85rem; border-radius: 8px;
  background: #f0fdfa; border-left: 3px solid #0f766e; font-size: 0.9rem;
}

.login-idle-note {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: #fff7ed;
  border-left: 3px solid #c2410c;
  color: #9a3412;
  font-size: 0.9rem;
}
html[dir="rtl"] .login-idle-note { border-left: none; border-right: 3px solid #c2410c; }

.idle-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.55);
}
.idle-session-panel {
  width: min(26rem, 100%);
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  border-radius: 12px;
  padding: 1.35rem 1.4rem 1.2rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  text-align: center;
}
.idle-session-panel h2 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
}
.idle-session-panel p { margin: 0 0 0.65rem; color: var(--text-muted, #475569); }
.idle-session-timer {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text, #0f172a);
  margin: 0.15rem 0 1rem !important;
}
.idle-session-stay { min-width: 10rem; }

/* ?? Default buttons: Vendors & rates Actions (`--gk-btn-*`) ?? */
.gk-btn,
.agency-co-menu-btn,
.login-submit,
.login-biometric,
.login-microsoft,
.team-chat-modal-btn,
.team-chat-modal-btn-call,
.team-chat-modal-btn-ghost,
.agency-co-filter-btn,
.su-filter,
.lobby-kiosk-cta,
.lobby-kiosk-exit,
[class*="btn-"]:not(.agency-co-menu-item):not(.btn-icon-dark) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: var(--gk-btn-min-height, 2rem);
  padding: var(--gk-btn-pad, 0.32rem 0.75rem);
  border: 1px solid var(--gk-btn-border, #cbd5e1);
  border-radius: var(--gk-btn-radius, 8px);
  background: var(--gk-btn-bg, #fff);
  color: var(--gk-btn-color, #334155);
  font: inherit;
  font-size: var(--gk-btn-size, 0.8rem);
  font-weight: var(--gk-btn-weight, 650);
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}
.gk-btn:hover,
.agency-co-menu-btn:hover,
.login-submit:hover,
.login-biometric:hover,
.login-microsoft:hover,
.team-chat-modal-btn:hover,
.agency-co-filter-btn:hover,
.su-filter:hover,
.lobby-kiosk-cta:hover,
.lobby-kiosk-exit:hover,
[class*="btn-"]:not(.agency-co-menu-item):not(.btn-icon-dark):hover {
  background: var(--gk-btn-hover-bg, #f8fafc);
  border-color: var(--gk-btn-hover-border, #94a3b8);
  color: var(--gk-btn-hover-color, #0f766e);
  box-shadow: none;
}
.gk-btn:focus-visible,
.agency-co-menu-btn:focus-visible,
.agency-co-menu[open] > .agency-co-menu-btn,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.agency-co-filter-btn.is-on,
.su-filter.is-active {
  outline: 0;
  background: var(--gk-btn-active-bg, rgba(15, 118, 110, 0.08));
  border-color: var(--gk-btn-active-border, rgba(15, 118, 110, 0.35));
  color: var(--gk-btn-hover-color, #0f766e);
  box-shadow: var(--gk-btn-focus-ring, 0 0 0 3px rgba(15, 118, 110, 0.12));
}
.btn-danger,
.btn-danger-fill,
.btn-primary.btn-danger,
[class*="btn-danger"] {
  background: var(--gk-btn-bg, #fff);
  color: var(--gk-btn-danger-color, #b91c1c);
  border: 1px solid var(--gk-btn-danger-border, #fca5a5);
}
.btn-danger:hover,
.btn-danger-fill:hover,
.btn-primary.btn-danger:hover,
[class*="btn-danger"]:hover {
  background: var(--gk-btn-danger-hover-bg, #fef2f2);
  border-color: var(--gk-btn-danger-hover-border, #f87171);
  color: var(--gk-btn-danger-hover-color, #991b1b);
}
.gk-btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
.btn-primary[disabled],
[class*="btn-"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--gk-btn-bg, #fff);
  color: var(--gk-btn-disabled-color, #94a3b8);
  border-color: var(--gk-btn-disabled-border, #e2e8f0);
  box-shadow: none;
}
.btn-icon,
[class*="btn-icon"] {
  width: var(--gk-btn-min-height, 2rem);
  height: var(--gk-btn-min-height, 2rem);
  min-width: var(--gk-btn-min-height, 2rem);
  min-height: var(--gk-btn-min-height, 2rem);
  padding: 0;
}

/* ?? Settings ? Sites & chain ?? */
.chain-hub { gap: 0.85rem; }
.chain-subnav-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chain-subnav { flex-wrap: wrap; }
.chain-view[hidden] { display: none !important; }
.chain-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.chain-card-title { margin: 0; font-size: 0.98rem; font-weight: 750; color: #0f172a; }
.chain-card-count { margin: 0.15rem 0 0; }
.chain-card .su-toolbar { justify-content: space-between; }
.chain-group-form {
  max-width: none !important;
  margin: 0;
  padding: 1rem 1.1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.chain-toggle-list { display: grid; gap: 0.5rem; }
.chain-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.chain-toggle-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.chain-toggle-copy strong { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
.chain-toggle select { width: auto; min-width: 8.5rem; margin: 0; flex: 0 0 auto; }
.chain-details {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 0.35rem 0.9rem 0.9rem;
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.chain-details > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f766e;
  padding: 0.55rem 0;
  list-style: none;
}
.chain-details > summary::-webkit-details-marker { display: none; }
.chain-details > summary::after {
  content: "Show";
  float: right;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 650;
  color: #64748b;
}
.chain-details[open] > summary::after { content: "Hide"; }
.chain-details .su-fieldset-grid { margin-top: 0.35rem; }
.chain-save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 0 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
}
.chain-privacy-days { margin-top: 0.65rem; }
button.su-stat {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  text-align: start;
  justify-content: flex-start;
}
button.su-stat:hover { border-color: rgba(15, 118, 110, 0.35); }
.chain-form-dialog { max-width: min(640px, 96vw); }
.chain-dialog-backdrop { z-index: 9000; }
.chain-dialog-actions { margin: 0.35rem 0 0; padding-top: 0.75rem; }
.chain-hub-data { display: none !important; }
@media (max-width: 900px) {
  .chain-split { grid-template-columns: 1fr; }
  .chain-toggle { flex-wrap: wrap; }
}
html[data-theme="dark"] .chain-toggle,
html[data-theme="dark"] .chain-details {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .chain-toggle-copy strong,
html[data-theme="dark"] .chain-card-title { color: #e2e8f0; }
html[data-theme="dark"] .chain-save-bar {
  background: linear-gradient(180deg, transparent, var(--surface, #0f172a) 28%);
}

/* ?? Viewport fit (phones / small windows, even without .gk-mobile) ?? */
html, body, #app {
  max-width: 100%;
  overflow-x: clip;
}
#app, .app-shell, .app-content, .main, .page-body {
  min-width: 0;
  box-sizing: border-box;
}
img, video, canvas, svg {
  max-width: 100%;
}
input, select, textarea {
  max-width: 100%;
}
@media (max-width: 768px) {
  .main, .page-body, .settings-page, .settings-main, .settings-panel,
  .su-layout, .chain-hub, .chain-view, .modules-shell, .public-main,
  .login-wrap, .login-layout, .login-card, .gk-luxe, .gk-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .settings-form-grid,
  .su-fieldset-grid,
  .chain-split,
  .staff-edit-summary,
  .login-layout,
  .approvals-split,
  .reports-page,
  .ag-layout,
  .agency-req-hero,
  .agency-req-split,
  .agency-req-filters,
  .agency-req-grid,
  .agency-req-grid-2,
  .agency-req-grid-3,
  .agency-inline-form,
  .agency-req-card-grid,
  .reports-dashboard-grid,
  .reports-data-filter-grid,
  .create-link-work-grid,
  .gk-layout,
  .lf-page,
  .fin-att-page {
    grid-template-columns: 1fr !important;
  }
  .su-hero, .su-toolbar, .modules-hub-top, .modules-hub-brand,
  .public-header-row, .content-topbar, .fin-pay-toolbar,
  .reports-toolbar-row, .token-manage-actions {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .su-hero, .su-toolbar, .modules-hub-top, .modules-hub-brand {
    flex-direction: column;
    align-items: stretch;
  }
  .su-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .su-table-wrap, .table-scroll, .agency-table-wrap,
  .lf-settings-table-wrap, .gp-ret-detail-scroll,
  .workflow-steps-grid-wrap, .gk-table-wrap, .fin-pay-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .modal-panel, .ui-dialog, .staff-edit-dialog, .chain-form-dialog,
  .fin-pay-modal-card, .attachment-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: 90dvh;
  }
  .modules-hub .modules-grid,
  .modules-hub .modules-grid-unified,
  .modules-page .modules-grid {
    grid-template-columns: 1fr !important;
  }
  .chain-toggle {
    flex-direction: column;
    align-items: stretch;
  }
  .chain-toggle select,
  .chain-save-bar .btn-primary,
  .su-toolbar .btn-outline,
  .su-toolbar .btn-primary,
  .fin-pay-toolbar select,
  .fin-pay-toolbar input,
  .agency-req-actions .btn-primary {
    width: 100%;
    min-width: 0;
  }
}

/* ?? Get the app (download page) ?? */
.download-app-page { max-width: 960px; }
.download-hero {
  display: flex; gap: 1.25rem; align-items: flex-start;
  margin-bottom: 1.5rem; padding: 1.25rem 1.35rem;
  background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 12px;
}
.download-hero-mark {
  width: 3.5rem; height: 3.5rem; border-radius: 14px; flex-shrink: 0;
  object-fit: cover; background: #000;
}
.download-hero-title { margin: 0 0 0.35rem; font-size: 1.35rem; }
.download-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 1.5rem;
}
.download-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 12px; padding: 1.15rem 1.25rem;
}
.download-card h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.download-card p { margin: 0 0 0.75rem; color: var(--text-secondary, #475569); font-size: 0.92rem; }
.download-steps { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--text-secondary, #475569); font-size: 0.92rem; }
.download-steps li { margin-bottom: 0.4rem; }
.download-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.download-qr {
  display: block; width: 160px; height: 160px; border-radius: 8px;
  border: 1px solid var(--border-default, #e2e8f0); background: #fff;
}
.download-features {
  background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e2e8f0);
  border-radius: 12px; padding: 1.15rem 1.25rem;
}
.download-features h2 { margin: 0 0 0.65rem; font-size: 1.05rem; }
.download-features ul { margin: 0; padding-left: 1.2rem; color: var(--text-secondary, #475569); }
.download-features li { margin-bottom: 0.35rem; }
.download-apk-missing { font-size: 0.9rem; }



/* ?? Modules hub: enterprise SaaS dashboard ?? */
.modules-hub--desk.modules-page,
.modules-hub--saas.modules-page,
.modules-hub--desk,
.modules-hub--saas {
  background: #e8eef5 !important;
}
.modules-hub--saas.modules-page {
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2.5rem) 2rem;
}
.modules-hub--saas .mh-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.modules-hub--saas .mh-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border-bottom: 0;
  min-height: 2.5rem;
}
.modules-hub--saas .mh-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}
.modules-hub--saas .mh-logo-wrap { flex-shrink: 0; }
.modules-hub--saas .mh-logo,
.modules-hub--saas .modules-logo.mh-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: none;
  object-fit: cover;
  background: #fff;
}
.modules-hub--saas .mh-brand {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero header with campus backdrop */
.modules-hub--saas .mh-hero {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  overflow: visible;
  z-index: 6;
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 12px 28px rgba(15, 23, 42, 0.08);
  opacity: 0;
  animation: mh-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.modules-hub--saas .mh-hero-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    url("/images/hub/hub-header-campus.jpg?v=20260926d") center 42% / cover no-repeat;
  transform: scale(1.02);
  z-index: 0;
  animation: mh-hero-ken 18s ease-in-out infinite alternate;
  clip-path: inset(0 round 18px);
}
.modules-hub--saas .mh-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  clip-path: inset(0 round 18px);
  background:
    linear-gradient(105deg,
      rgba(232, 238, 243, 0.94) 0%,
      rgba(232, 238, 243, 0.88) 38%,
      rgba(232, 238, 243, 0.55) 68%,
      rgba(15, 118, 110, 0.18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(232, 238, 243, 0.55));
  pointer-events: none;
}
.modules-hub--saas .mh-hero > *:not(.mh-hero-bg):not(.mh-hero-veil) {
  position: relative;
  z-index: 2;
}
@keyframes mh-hero-ken {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.2%, -0.6%, 0); }
}
.modules-hub--saas .mh-hero .mh-masthead {
  padding: 0;
  min-height: 2.25rem;
}
.modules-hub--saas .mh-hero .mh-welcome {
  padding: 0.15rem 0 0.1rem;
}
.modules-hub--saas .mh-hero .mh-brand {
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.modules-hub--saas .mh-hero .mh-greeting {
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.modules-hub--saas .mh-hero .mh-welcome-sub,
.modules-hub--saas .mh-hero .mh-welcome-place {
  color: #475569;
}
.modules-hub--saas .mh-hero .mh-welcome-date {
  color: #0f172a;
}
.modules-hub--saas .mh-hero .mh-notify-btn {
  background: var(--teal-primary, #0f766e);
  border-color: color-mix(in srgb, var(--teal-primary, #0f766e) 70%, #0f172a);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--teal-primary, #0f766e) 35%, transparent);
}
.modules-hub--saas .mh-hero .mh-account .user-avatar-btn {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}
.modules-hub--saas .mh-utils {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.modules-hub--saas .mh-notify-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--teal-primary, #0f766e);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--teal-primary, #0f766e) 35%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.modules-hub--saas .mh-notify-btn:hover {
  border-color: transparent;
  background: var(--teal-hover, #115e59);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--teal-primary, #0f766e) 42%, transparent);
}
.modules-hub--saas .mh-notify-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  color: #fff;
  stroke: #fff;
  stroke-width: 2.15;
}
.modules-hub--saas .mh-notify-badge {
  position: absolute;
  top: -0.3rem;
  inset-inline-end: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.modules-hub--saas .mh-account {
  position: relative;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
}
.modules-hub--saas .mh-account .user-menu {
  position: relative;
  z-index: 30;
}
.modules-hub--saas .mh-account .user-menu-panel {
  z-index: 120;
  min-width: 15rem;
}
.modules-hub--saas .mh-account .user-avatar-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #fff;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 700;
}
.modules-hub--saas .mh-account-caret {
  display: inline-flex;
  color: #94a3b8;
}
.modules-hub--saas .mh-account-caret svg {
  width: 0.95rem;
  height: 0.95rem;
  transform: rotate(90deg);
}

.modules-hub--saas .mh-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 0.15rem 0 0.25rem;
}
.modules-hub--saas .mh-greeting {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #0f172a;
}
.modules-hub--saas .mh-welcome-sub {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: #64748b;
  max-width: 36rem;
}
.modules-hub--saas .mh-welcome-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-top: 0.55rem;
  text-align: start;
}
.modules-hub--saas .mh-welcome-date {
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
}
.modules-hub--saas .mh-welcome-place {
  font-size: 0.8rem;
  color: #64748b;
}
.modules-hub--saas .mh-welcome-place::before {
  content: "?";
  margin-inline-end: 0.75rem;
  color: #94a3b8;
}
html[dir="rtl"] .modules-hub--saas .mh-welcome-place::before {
  margin-inline-end: 0;
  margin-inline-start: 0.75rem;
}

.modules-hub--saas .mh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .modules-hub--saas .mh-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.modules-hub--saas .mh-kpi {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.modules-hub--saas .mh-kpi:hover {
  border-color: rgba(100, 116, 139, 0.35);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.modules-hub--saas .mh-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  flex-shrink: 0;
}
.modules-hub--saas .mh-kpi--teal .mh-kpi-icon { background: var(--teal-primary, #0f766e); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--teal-primary, #0f766e) 32%, transparent); }
.modules-hub--saas .mh-kpi--blue .mh-kpi-icon { background: #0e7490; color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, #0e7490 32%, transparent); }
.modules-hub--saas .mh-kpi--amber .mh-kpi-icon { background: var(--accent-warning, #d97706); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, #d97706 32%, transparent); }
.modules-hub--saas .mh-kpi--purple .mh-kpi-icon { background: #6d28d9; color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, #6d28d9 32%, transparent); }
.modules-hub--saas .mh-kpi-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #fff;
  stroke: #fff;
}
.modules-hub--saas .mh-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.modules-hub--saas .mh-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}
.modules-hub--saas .mh-kpi-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.modules-hub--saas .mh-kpi-hint {
  font-size: 0.72rem;
  color: #94a3b8;
}

.modules-hub--saas .mh-mid-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .modules-hub--saas .mh-mid-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
    align-items: start;
  }
}
.modules-hub--saas .mh-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.modules-hub--saas .mh-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.modules-hub--saas .mh-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0f172a;
}
.modules-hub--saas .mh-section-sub {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

.modules-hub--saas .mh-action-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.modules-hub--saas .mh-action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.7rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.modules-hub--saas .mh-action-row:hover {
  background: #f8fafc;
}
.modules-hub--saas .mh-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 10px;
  flex-shrink: 0;
  background: #e8eef8;
  color: #3b6ea5;
}
.modules-hub--saas .mh-action-icon.tone-alert {
  background: #f8e8e8;
  color: #b91c1c;
}
.modules-hub--saas .mh-action-icon.tone-wait {
  background: #f8efe4;
  color: #b45309;
}
.modules-hub--saas .mh-action-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
.modules-hub--saas .mh-action-count {
  flex-shrink: 0;
  min-width: 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.modules-hub--saas .mh-action-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.modules-hub--saas .mh-action-title {
  font-size: 0.9rem;
  font-weight: 650;
  color: #0f172a;
}
.modules-hub--saas .mh-action-desc {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modules-hub--saas .mh-action-go {
  flex-shrink: 0;
  color: #94a3b8;
  display: inline-flex;
}
.modules-hub--saas .mh-action-go svg {
  width: 1rem;
  height: 1rem;
}
html[dir="rtl"] .modules-hub--saas .mh-action-go svg,
html[dir="rtl"] .modules-hub--saas .mh-workspace-go svg {
  transform: scaleX(-1);
}

.modules-hub--saas .mh-empty-state {
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.modules-hub--saas .mh-empty-state strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.modules-hub--saas .mh-empty-state p {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
}
.modules-hub--saas .mh-empty-state--sm {
  padding: 0.75rem 0.25rem;
}

.modules-hub--saas .mh-qa-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.modules-hub--saas .mh-qa-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.55rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.modules-hub--saas .mh-qa-row:hover {
  background: #f8fafc;
}
.modules-hub--saas .mh-qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  flex-shrink: 0;
}
.modules-hub--saas .mh-qa-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}
.modules-hub--saas .mh-qa-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.modules-hub--saas .mh-section-workspaces {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}
.modules-hub--saas .mh-workspace-grid,
.modules-hub--saas .mh-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.7rem;
  min-height: 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  .modules-hub--saas .mh-tile-grid {
    grid-template-columns: repeat(var(--mh-tiles, 5), minmax(0, 1fr));
  }
}

@keyframes mh-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mh-soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
  50% { box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12); }
}
@keyframes mh-badge-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.modules-hub--saas .mh-workspace,
.modules-hub--saas .mh-tile {
  --mh-i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  height: 100%;
  min-height: 7.75rem;
  padding: 0.9rem 0.95rem 0.95rem 1.05rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 10px rgba(15, 23, 42, 0.06),
    0 14px 28px rgba(15, 23, 42, 0.08);
  opacity: 0;
  animation: mh-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(180ms + var(--mh-i) * 55ms);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.modules-hub--saas .mh-tile::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 3px;
  background: var(--mh-accent, var(--teal-primary, #0f766e));
  opacity: 1;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.modules-hub--saas .mh-workspace:hover,
.modules-hub--saas .mh-tile:hover {
  border-color: color-mix(in srgb, var(--mh-accent, var(--teal-primary, #0f766e)) 42%, #cbd5e1);
  background: #fff;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 10px 20px rgba(15, 23, 42, 0.1),
    0 22px 40px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}
.modules-hub--saas .mh-tile:hover::after {
  opacity: 1;
}
.modules-hub--saas .mh-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.45rem;
  margin-bottom: 0.1rem;
}
.modules-hub--saas .mh-workspace-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--mh-accent, var(--teal-primary, #0f766e));
  color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--mh-accent, var(--teal-primary, #0f766e)) 35%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.modules-hub--saas .mh-workspace:hover .mh-workspace-icon {
  transform: scale(1.05);
  background: var(--mh-accent, var(--teal-primary, #0f766e));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--mh-accent, var(--teal-primary, #0f766e)) 42%, transparent);
}
.modules-hub--saas .mh-workspace-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #fff;
  stroke: #fff;
}
.modules-hub--saas .mh-workspace--access {
  --mh-accent: var(--teal-primary, #0f766e);
}
.modules-hub--saas .mh-workspace--agency-staff {
  --mh-accent: #0e7490;
}
.modules-hub--saas .mh-workspace--finance {
  --mh-accent: #115e59;
  background: #fff;
}
.modules-hub--saas .mh-workspace--lost-and-found {
  --mh-accent: #b45309;
}
.modules-hub--saas .mh-workspace--administration {
  --mh-accent: #475569;
}
.modules-hub--saas .mh-workspace-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--gk-text, #0f172a);
}
.modules-hub--saas .mh-workspace-desc {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--gk-text-muted, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modules-hub--saas .mh-workspace-meta {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--mh-accent, var(--teal-primary, #0f766e)) 70%, #475569);
  margin-top: auto;
  padding-top: 0.35rem;
  min-height: 1.15em;
  line-height: 1.15;
}
.modules-hub--saas .mh-workspace .pending-badge,
.modules-hub--saas .mh-workspace .pending-badge-tile {
  position: static !important;
  top: auto !important;
  right: auto !important;
  inset: auto !important;
  flex-shrink: 0;
  margin: 0;
  animation: mh-badge-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(280ms + var(--mh-i) * 55ms);
}
.modules-hub--saas .mh-workspace-go { display: none; }

/* Shared card elevation + entrance */
.modules-hub--saas .mh-kpi,
.modules-hub--saas .mh-panel,
.modules-hub--saas .mh-notify-btn,
.modules-hub--saas .mh-account .user-avatar-btn {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 8px 18px rgba(15, 23, 42, 0.06);
}
.modules-hub--saas .mh-kpi {
  --mh-i: 0;
  opacity: 0;
  animation: mh-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(60ms + var(--mh-i) * 45ms);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.modules-hub--saas .mh-kpi:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.07),
    0 14px 28px rgba(15, 23, 42, 0.09);
  border-color: color-mix(in srgb, var(--teal-primary, #0f766e) 28%, var(--gk-border, #e2e8f0));
}
.modules-hub--saas .mh-kpi-icon {
  transition: transform 0.2s ease;
}
.modules-hub--saas .mh-kpi:hover .mh-kpi-icon {
  transform: scale(1.08);
}
.modules-hub--saas .mh-panel {
  opacity: 0;
  animation: mh-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 140ms;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.modules-hub--saas .mh-panel-qa {
  animation-delay: 180ms;
}
.modules-hub--saas .mh-panel:hover {
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.07),
    0 14px 28px rgba(15, 23, 42, 0.08);
}
.modules-hub--saas .mh-action-row,
.modules-hub--saas .mh-qa-row {
  --mh-i: 0;
  opacity: 0;
  animation: mh-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(200ms + var(--mh-i) * 40ms);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  border-radius: 10px;
}
.modules-hub--saas .mh-action-row:hover,
.modules-hub--saas .mh-qa-row:hover {
  background: color-mix(in srgb, var(--teal-tint-light, #e6f4f1) 70%, #fff);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.modules-hub--saas .mh-action-icon,
.modules-hub--saas .mh-qa-icon {
  transition: transform 0.18s ease;
}
.modules-hub--saas .mh-action-row:hover .mh-action-icon,
.modules-hub--saas .mh-qa-row:hover .mh-qa-icon {
  transform: scale(1.08);
}
.modules-hub--saas .mh-action-go {
  transition: transform 0.18s ease, color 0.18s ease;
}
.modules-hub--saas .mh-action-row:hover .mh-action-go {
  color: var(--teal-primary, #0f766e);
  transform: translateX(3px);
}
.modules-hub--saas .mh-footer-link {
  transition: color 0.15s ease, transform 0.15s ease;
}
.modules-hub--saas .mh-footer-link:hover {
  transform: translateY(-1px);
}
.modules-hub--saas .mh-notify-btn {
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.modules-hub--saas .mh-notify-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--teal-primary, #0f766e) 42%, transparent);
  border-color: transparent;
  color: #fff;
  background: var(--teal-hover, #115e59);
}
.modules-hub--saas .mh-notify-badge {
  animation: mh-soft-pulse 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .modules-hub--saas .mh-workspace,
  .modules-hub--saas .mh-tile,
  .modules-hub--saas .mh-kpi,
  .modules-hub--saas .mh-panel,
  .modules-hub--saas .mh-action-row,
  .modules-hub--saas .mh-qa-row,
  .modules-hub--saas .mh-hero,
  .modules-hub--saas .mh-workspace .pending-badge,
  .modules-hub--saas .mh-workspace .pending-badge-tile {
    opacity: 1;
    animation: none;
    transition: none;
  }
  .modules-hub--saas .mh-hero-bg { animation: none; }
  .modules-hub--saas .mh-notify-badge { animation: none; }
  .modules-hub--saas .mh-workspace:hover,
  .modules-hub--saas .mh-tile:hover,
  .modules-hub--saas .mh-kpi:hover {
    transform: none;
  }
}

/* Fit one screen on desktop / laptop */
@media (min-width: 900px) and (min-height: 720px) {
  html:has(.modules-hub--fit),
  body:has(.modules-hub--fit) {
    height: 100%;
    overflow: hidden;
  }
  #app:has(.modules-hub--fit) {
    height: 100dvh;
    overflow: hidden;
  }
  .modules-hub--fit.modules-page {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.7rem clamp(1rem, 2.5vw, 1.75rem) 0.65rem;
  }
  .modules-hub--fit .mh-shell {
    height: 100%;
    max-height: 100%;
    gap: 0.65rem;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  }
  .modules-hub--fit .mh-welcome {
    padding: 0;
    gap: 0.75rem;
  }
  .modules-hub--fit .mh-greeting {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  }
  .modules-hub--fit .mh-welcome-sub {
    margin-top: 0.2rem;
    font-size: 0.84rem;
  }
  .modules-hub--fit .mh-kpi {
    padding: 0.7rem 0.8rem;
    gap: 0.55rem;
  }
  .modules-hub--fit .mh-kpi-value {
    font-size: 1.15rem;
  }
  .modules-hub--fit .mh-kpi-hint {
    display: none;
  }
  .modules-hub--fit .mh-mid-grid {
    min-height: 0;
    height: 100%;
    gap: 0.65rem;
    align-items: stretch;
  }
  .modules-hub--fit .mh-panel {
    min-height: 0;
    height: 100%;
    padding: 0.85rem 0.95rem;
    gap: 0.55rem;
    overflow: hidden;
  }
  .modules-hub--fit .mh-section-sub {
    display: none;
  }
  .modules-hub--fit .mh-action-list,
  .modules-hub--fit .mh-qa-list {
    min-height: 0;
    overflow: auto;
    flex: 1;
  }
  .modules-hub--fit .mh-action-row {
    padding: 0.45rem 0.4rem;
    gap: 0.55rem;
  }
  .modules-hub--fit .mh-action-desc {
    -webkit-line-clamp: 1;
  }
  .modules-hub--fit .mh-qa-row {
    padding: 0.4rem 0.35rem;
  }
  .modules-hub--fit .mh-empty-state {
    padding: 0.65rem 0.25rem;
  }
  .modules-hub--fit .mh-section-workspaces {
    min-height: 0;
    height: auto;
    gap: 0.4rem;
  }
  .modules-hub--fit .mh-tile-grid {
    height: auto;
    min-height: 0;
    align-items: stretch;
    align-content: start;
  }
  .modules-hub--fit .mh-tile {
    height: 100%;
    min-height: 8.5rem;
    padding: 0.8rem 0.85rem 0.85rem;
  }
  .modules-hub--fit .mh-workspace-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  .modules-hub--fit .mh-workspace-icon svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  .modules-hub--fit .mh-footer-bar {
    padding: 0.5rem 0.75rem;
    gap: 0.4rem 0.65rem;
  }
}
@media (min-width: 900px) and (min-height: 720px) and (max-height: 820px) {
  .modules-hub--fit .mh-welcome-sub { display: none; }
  .modules-hub--fit .mh-shell {
    gap: 0.5rem;
  }
  .modules-hub--fit .mh-kpi-icon { width: 1.85rem; height: 1.85rem; }
}
@media (max-width: 899px), (max-height: 719px) {
  html:has(.modules-hub--fit),
  body:has(.modules-hub--fit),
  #app:has(.modules-hub--fit) {
    height: auto;
    overflow: auto;
  }
  .modules-hub--fit.modules-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

.modules-hub--saas .mh-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-top: 0.15rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 16px rgba(15, 23, 42, 0.05);
}
.modules-hub--saas .mh-footer-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  flex-shrink: 0;
}
.modules-hub--saas .mh-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.35rem;
}
.modules-hub--saas .mh-footer-link {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  padding: 0.35rem 0.7rem;
  margin: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  color: #0f172a;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.modules-hub--saas .mh-footer-link:hover {
  color: var(--teal-primary, #0f766e);
  border-color: color-mix(in srgb, var(--teal-primary, #0f766e) 35%, #94a3b8);
  background: color-mix(in srgb, var(--teal-primary, #0f766e) 8%, #fff);
  text-decoration: none;
  transform: translateY(-1px);
}

html[data-theme="dark"] .modules-hub--saas.modules-page,
html[data-theme="dark"] .modules-hub--saas {
  background: #0f172a !important;
}
html[data-theme="dark"] .modules-hub--saas .mh-brand,
html[data-theme="dark"] .modules-hub--saas .mh-greeting,
html[data-theme="dark"] .modules-hub--saas .mh-section-title,
html[data-theme="dark"] .modules-hub--saas .mh-kpi-value,
html[data-theme="dark"] .modules-hub--saas .mh-action-title,
html[data-theme="dark"] .modules-hub--saas .mh-action-count,
html[data-theme="dark"] .modules-hub--saas .mh-qa-label,
html[data-theme="dark"] .modules-hub--saas .mh-workspace-title,
html[data-theme="dark"] .modules-hub--saas .mh-welcome-date,
html[data-theme="dark"] .modules-hub--saas .mh-empty-state strong {
  color: #f1f5f9;
}
html[data-theme="dark"] .modules-hub--saas .mh-kpi,
html[data-theme="dark"] .modules-hub--saas .mh-panel,
html[data-theme="dark"] .modules-hub--saas .mh-workspace,
html[data-theme="dark"] .modules-hub--saas .mh-account .user-avatar-btn,
html[data-theme="dark"] .modules-hub--saas .mh-footer-bar {
  background: #1e293b;
  border-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="dark"] .modules-hub--saas .mh-notify-btn {
  background: var(--teal-primary, #0f766e);
  border-color: transparent;
  color: #fff;
}
html[data-theme="dark"] .modules-hub--saas .mh-footer-label {
  color: #e2e8f0;
}
html[data-theme="dark"] .modules-hub--saas .mh-footer-link {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.3);
  color: #f1f5f9;
}
html[data-theme="dark"] .modules-hub--saas .mh-footer-link:hover {
  color: #5eead4;
  border-color: color-mix(in srgb, #5eead4 35%, #64748b);
  background: color-mix(in srgb, #0f766e 22%, #0f172a);
}
html[data-theme="dark"] .modules-hub--saas .mh-hero-veil {
  background:
    linear-gradient(105deg,
      rgba(15, 23, 42, 0.92) 0%,
      rgba(15, 23, 42, 0.82) 42%,
      rgba(15, 23, 42, 0.55) 70%,
      rgba(15, 118, 110, 0.28) 100%);
}
html[data-theme="dark"] .modules-hub--saas .mh-hero .mh-brand,
html[data-theme="dark"] .modules-hub--saas .mh-hero .mh-greeting,
html[data-theme="dark"] .modules-hub--saas .mh-hero .mh-welcome-date {
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .modules-hub--saas .mh-hero .mh-welcome-sub,
html[data-theme="dark"] .modules-hub--saas .mh-hero .mh-welcome-place {
  color: #cbd5e1;
}
html[data-theme="dark"] .modules-hub--saas .mh-tile {
  background: #1e293b;
}
html[data-theme="dark"] .modules-hub--saas .mh-action-row:hover,
html[data-theme="dark"] .modules-hub--saas .mh-qa-row:hover {
  background: rgba(148, 163, 184, 0.08);
}
html[data-theme="dark"] .modules-hub--saas .mh-welcome-sub,
html[data-theme="dark"] .modules-hub--saas .mh-section-sub,
html[data-theme="dark"] .modules-hub--saas .mh-kpi-label,
html[data-theme="dark"] .modules-hub--saas .mh-action-desc,
html[data-theme="dark"] .modules-hub--saas .mh-workspace-desc {
  color: #94a3b8;
}

@media (max-width: 640px) {
  .modules-hub--saas .mh-welcome {
    flex-direction: column;
    gap: 0.85rem;
  }
  .modules-hub--saas .mh-welcome-meta {
    align-items: flex-start;
    text-align: start;
  }
  .modules-hub--saas .mh-masthead {
    flex-direction: row;
    align-items: center;
  }
}
.modules-hub--saas .license-expiry-banner { margin: 0; }

/* Account dropdown ? language / theme / actions */
.user-menu-panel {
  min-width: 14rem;
  padding: 0.4rem;
}
.user-menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.user-menu-section:last-child,
.user-menu-section-actions {
  border-bottom: 0;
  padding-bottom: 0.15rem;
}
.user-menu-section-label {
  margin: 0;
  padding: 0.35rem 0.65rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.user-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.user-menu-item.is-active {
  background: color-mix(in srgb, #0f766e 10%, transparent);
  color: #0f766e;
  font-weight: 650;
}
.user-menu-check {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: #0f766e;
}
.modules-hub--desk .mh-utils,
.gk-toolbar-cluster {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
}
.modules-hub--desk .mh-utils .user-avatar-btn,
.gk-toolbar-cluster .user-avatar-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border-default, #cbd5e1);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #0f172a);
  font-size: 0.72rem;
  font-weight: 700;
}
.modules-hub--desk .mh-utils .user-avatar-btn:hover,
.gk-toolbar-cluster .user-avatar-btn:hover {
  border-color: #0f766e;
  color: #0f766e;
}

/* Finance attendance: company name opens the full request */
.fin-att-company-link {
  color: #0f766e;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(15, 118, 110, 0.35);
  text-underline-offset: 2px;
  cursor: pointer;
}
.fin-att-company-link:hover,
.fin-att-company-link:focus-visible { text-decoration-color: currentColor; }
html[data-theme="dark"] .fin-att-company-link { color: #5eead4; }

/* Short days (hours below contracted day) */
.fin-att-grid-cell.cell-partial { background: #fffbeb; }
.fin-att-kpi.short { background: #fffbeb; border-color: #fde68a; }
.fin-att-stat.short strong { color: #92400e; }
.fin-att-short-note { margin: 0.5rem 0; font-size: 0.85rem; color: #475569; }
.fin-att-short-note.is-short {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
}
.fin-att-short-reason { margin-top: 0.5rem; }
.fin-att-short-reason select { width: 100%; }
.fin-att-card-short { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: space-between; }
.fin-att-card-reason { max-width: 100%; font-size: 0.8rem; }
.fin-att-settings-hint { font-size: 0.82rem; margin: 0.25rem 0 0.5rem; }
html[data-theme="dark"] .fin-att-grid-cell.cell-partial { background: rgba(251, 191, 36, 0.08); }
html[data-theme="dark"] .fin-att-kpi.short { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); }
html[data-theme="dark"] .fin-att-short-note.is-short { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); }
html[data-theme="dark"] .fin-att-stat.short strong { color: #fcd34d; }

/* Badge report: reporter chat + gatekeeper urgent popup */
.badge-scan-report {
  margin-block: 1rem 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-inline-start: 4px solid #b91c1c;
  border-radius: 10px;
  background: #fef2f2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}
.badge-scan-report .muted { margin: 0; font-size: 0.85rem; }

.br-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.br-modal--urgent { z-index: 1550; }
.br-modal [hidden] { display: none !important; }
.br-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.br-modal--urgent .br-backdrop { background: rgba(69, 10, 10, 0.55); }
.br-sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: min(90dvh, 820px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #0f172a;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 24px 60px rgba(15, 23, 42, 0.32);
}
.br-modal--urgent .br-sheet {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.55), 0 24px 60px rgba(127, 29, 29, 0.45);
  animation: br-shake 0.45s ease-in-out 1;
}
@keyframes br-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
.br-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.br-head--urgent {
  background: #b91c1c;
  color: #fff;
  border-block-end-color: #991b1b;
}
.br-head--urgent .btn-icon { background: #fff; }
.br-head-copy { flex: 1; min-width: 0; }
.br-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b91c1c;
}
.br-head--urgent .br-kicker { color: #fecaca; }
.br-title {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.br-pulse {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: #fff;
  flex-shrink: 0;
  animation: br-pulse 1.1s ease-out infinite;
}
@keyframes br-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); }
  100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
.br-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fef2f2;
  border-block-end: 1px solid #fecaca;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7f1d1d;
}
.br-nav.has-unread [data-br-next] { border-color: #b91c1c; color: #b91c1c; }
.br-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.br-compose-form label,
.br-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}
.br-compose-form textarea,
.br-compose-form input { font: inherit; }
.br-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
}
.br-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.45rem 0.9rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.br-context dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.br-context dd { margin: 0.1rem 0 0; font-weight: 600; word-break: break-word; }
.br-context--gate { border-inline-start: 3px solid #b91c1c; }
.br-tag {
  display: inline-block;
  margin-inline-start: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #334155;
  vertical-align: middle;
}
.br-identity { margin: 0; font-size: 0.88rem; color: #334155; font-weight: 600; }
.br-label { font-size: 0.85rem; font-weight: 600; color: #334155; }
.br-reasons { display: flex; flex-direction: column; gap: 0.4rem; }
.br-reason-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.br-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.br-actions--gate {
  padding: 0.75rem 1rem;
  border-block-start: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.br-confirm-note {
  margin: 0;
  padding: 0 1rem 0.8rem;
  font-size: 0.82rem;
  color: #991b1b;
  text-align: end;
}
.br-status {
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
}
.br-status.is-seen { background: #dcfce7; color: #166534; }
.br-status.is-closed { background: #e2e8f0; color: #334155; }
.br-thread {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 4rem;
}
.br-msg {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.br-msg.is-theirs {
  align-self: flex-start;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-end-start-radius: 4px;
}
.br-msg.is-mine {
  align-self: flex-end;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-end-end-radius: 4px;
}
.br-modal--urgent .br-msg.is-theirs { background: #fef2f2; border-color: #fecaca; }
.br-msg-who { font-size: 0.72rem; font-weight: 700; color: #475569; }
.br-msg-body { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.95rem; line-height: 1.4; }
.br-msg-time { font-size: 0.68rem; color: #94a3b8; align-self: flex-end; }
.br-reply {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-block-start: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.br-reply textarea {
  flex: 1;
  min-width: 0;
  font: inherit;
  resize: none;
  min-height: 2.6rem;
  max-height: 8rem;
}
.br-reply .br-err { flex-basis: 100%; margin: 0; }
.br-float {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1rem;
  z-index: 1450;
}
.br-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 8px 24px rgba(127, 29, 29, 0.28);
}
.br-float-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
}
.br-float-dot.is-live {
  background: #dc2626;
  opacity: 1;
  animation: br-pulse-red 1.1s ease-out infinite;
}
@keyframes br-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  100% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}
@media (max-width: 640px) {
  .br-modal { padding: 0; align-items: stretch; }
  .br-sheet { width: 100%; max-height: none; height: 100dvh; border-radius: 0; }
  .br-head { padding-block-start: max(0.85rem, env(safe-area-inset-top)); }
  .br-reply, .br-actions--gate { padding-block-end: max(0.7rem, env(safe-area-inset-bottom)); }
  .br-float { inset-inline-end: 0.75rem; inset-block-end: max(5rem, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .br-modal--urgent .br-sheet, .br-pulse, .br-float-dot.is-live { animation: none; }
}
html[data-theme="dark"] .br-sheet { background: #1a1d24; color: #e5e7eb; }
html[data-theme="dark"] .br-head,
html[data-theme="dark"] .br-reply,
html[data-theme="dark"] .br-actions--gate { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .br-context { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .br-context dd,
html[data-theme="dark"] .br-identity,
html[data-theme="dark"] .br-label,
html[data-theme="dark"] .br-compose-form label { color: #e5e7eb; }
html[data-theme="dark"] .br-msg.is-theirs { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .br-msg.is-mine { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.3); }
html[data-theme="dark"] .br-modal--urgent .br-msg.is-theirs { background: rgba(220, 38, 38, 0.14); border-color: rgba(220, 38, 38, 0.35); }
html[data-theme="dark"] .br-msg-who { color: #cbd5e1; }
html[data-theme="dark"] .badge-scan-report { background: rgba(220, 38, 38, 0.1); }