/* RBAC fail-closed visibility */
html.rbac-pending [data-permission],
html.rbac-pending [data-permission-any],
html.rbac-pending [data-permission-all] { display: none !important; }


/* MELISA Modern UI layer — additive, application-neutral redesign */
:root {
  --m-primary: #2563eb;
  --m-primary-hover: #1d4ed8;
  --m-primary-soft: #eff6ff;
  --m-bg: #f6f8fb;
  --m-surface: #ffffff;
  --m-surface-subtle: #f8fafc;
  --m-border: #e2e8f0;
  --m-text: #0f172a;
  --m-muted: #64748b;
  --m-success: #16a34a;
  --m-warning: #d97706;
  --m-danger: #dc2626;
  --m-info: #0284c7;
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --m-shadow-sm: 0 4px 14px rgba(15,23,42,.06);
  --m-shadow-md: 0 14px 38px rgba(15,23,42,.12);
  --m-focus: 0 0 0 3px rgba(37,99,235,.16);
}
html.dark {
  --m-bg: #0b1220;
  --m-surface: #111827;
  --m-surface-subtle: #172033;
  --m-border: #273449;
  --m-text: #f8fafc;
  --m-muted: #94a3b8;
  --m-primary-soft: rgba(37,99,235,.14);
}
html { scroll-behavior: smooth; }
body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body, button, input, select, textarea { -webkit-font-smoothing: antialiased; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--m-focus) !important;
}
::selection { background: rgba(37,99,235,.16); }

/* Application shell */
#app_header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: var(--m-surface);
}
#app_header .app-header {
  background: var(--m-surface) !important;
  border-bottom: 1px solid var(--m-border);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
#app_header .app-header > div:first-child {
  min-height: 68px;
  padding-inline: clamp(14px, 2.5vw, 32px);
}
#app_header .black_logo { max-width: 126px; height: auto; }
#page_layout {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(14px, 2.5vw, 32px);
}
#content_layout {
  padding-block: clamp(20px, 3vw, 32px);
}
#content_layout > * { min-width: 0; }

/* Navigation */
.melisa-horizontal-menu {
  background: var(--m-surface);
  border-top-color: var(--m-border) !important;
  padding-inline: clamp(12px, 2.5vw, 32px) !important;
}
.melisa-horizontal-menu > ul {
  gap: 4px !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: max-content;
  padding: 6px 0 !important;
}
.melisa-menu-link {
  min-height: 40px;
  padding: 9px 11px !important;
  border-radius: 9px !important;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}
.melisa-menu-link:hover,
.melisa-menu-link:focus-visible {
  background: var(--m-surface-subtle);
  color: var(--m-primary);
}
.melisa-menu-link.is-active {
  background: var(--m-primary-soft);
  color: var(--m-primary);
}
.dark .melisa-menu-link { color: #cbd5e1; }
.dark .melisa-menu-link:hover,
.dark .melisa-menu-link:focus-visible,
.dark .melisa-menu-link.is-active { background: rgba(37,99,235,.14); color: #bfdbfe; }
.melisa-submenu {
  border: 1px solid var(--m-border) !important;
  border-radius: 12px !important;
  background: var(--m-surface) !important;
  box-shadow: var(--m-shadow-md) !important;
  padding: 6px !important;
}
.melisa-submenu li a {
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
}

/* Cards and content surfaces */
#content_layout .card {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-md) !important;
  background: var(--m-surface) !important;
  box-shadow: var(--m-shadow-xs) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#content_layout .card:hover {
  border-color: #d6deea !important;
  box-shadow: var(--m-shadow-sm) !important;
}
.dark #content_layout .card:hover { border-color: #334155 !important; }
#content_layout .card-body { padding: clamp(16px, 2vw, 22px); }

/* Typography hierarchy */
#content_layout h1, #content_layout h2, #content_layout h3,
#content_layout h4, #content_layout h5, #content_layout h6 {
  color: var(--m-text);
  letter-spacing: -.015em;
}
#content_layout h1 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 700; }
#content_layout h2 { font-size: clamp(20px, 2vw, 26px); line-height: 1.25; font-weight: 700; }
#content_layout h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; font-weight: 650; }
#content_layout h4 { font-size: 18px; line-height: 1.35; font-weight: 650; }
#content_layout h5, #content_layout h6 { font-size: 15px; line-height: 1.4; font-weight: 650; }

/* Forms */
#content_layout .form-label, .auth-box-3 .form-label {
  color: #334155;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}
.dark #content_layout .form-label, .dark .auth-box-3 .form-label { color: #cbd5e1; }
#content_layout .form-control, .auth-box-3 .form-control {
  min-height: 42px;
  border: 1px solid var(--m-border) !important;
  border-radius: 9px !important;
  background: var(--m-surface) !important;
  color: var(--m-text) !important;
  box-shadow: var(--m-shadow-xs);
}
#content_layout .form-control:hover, .auth-box-3 .form-control:hover { border-color: #cbd5e1 !important; }
#content_layout .form-control:focus, .auth-box-3 .form-control:focus {
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: var(--m-focus) !important;
}
#content_layout .form-control[aria-invalid="true"] {
  border-color: rgba(220,38,38,.55) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}
#content_layout .form-control::placeholder, .auth-box-3 .form-control::placeholder { color: #94a3b8; }

/* Buttons */
#content_layout .btn, .auth-box-3 .btn {
  min-height: 40px;
  border-radius: 9px !important;
  padding: 9px 14px !important;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
#content_layout .btn:hover:not(:disabled), .auth-box-3 .btn:hover:not(:disabled) { transform: translateY(-1px); }
#content_layout .btn:active:not(:disabled), .auth-box-3 .btn:active:not(:disabled) { transform: translateY(0); }
#content_layout .btn:disabled, .auth-box-3 .btn:disabled { opacity: .55; cursor: not-allowed; }
#content_layout .btn.bg-primary-500 { background: var(--m-primary) !important; }
#content_layout .btn.bg-primary-500:hover:not(:disabled) { background: var(--m-primary-hover) !important; }

/* Tables */
#content_layout .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
#content_layout table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
}
#content_layout table thead th {
  padding: 11px 14px !important;
  background: var(--m-surface-subtle) !important;
  color: #64748b;
  border-bottom: 1px solid var(--m-border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
}
#content_layout table tbody td {
  padding: 12px 14px !important;
  color: var(--m-text);
  border-bottom: 1px solid var(--m-border);
  font-size: 13px;
}
#content_layout table tbody tr:last-child td { border-bottom: 0; }
#content_layout table tbody tr { transition: background .15s ease; }
#content_layout table tbody tr:hover { background: var(--m-surface-subtle) !important; }
.dark #content_layout table thead th { color: #94a3b8; }
.dark #content_layout table tbody td { border-color: var(--m-border); }

/* Data page helpers */
.melisa-page-header, .investor-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.melisa-page-title, .investor-page-title {
  margin: 0;
  color: var(--m-text);
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.025em;
}
.melisa-page-description, .investor-page-description {
  max-width: 760px;
  margin-top: 7px;
  color: var(--m-muted);
  font-size: 13px;
  line-height: 1.55;
}
.melisa-eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--m-primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.melisa-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 0;
}
.melisa-card-title { margin: 0; font-size: 15px; font-weight: 700; }
.melisa-card-subtitle { margin-top: 3px; color: var(--m-muted); font-size: 12px; line-height: 1.45; }

/* KPI */
.dashboard-kpi-card, .investor-kpi-card { min-height: 116px !important; }
.dashboard-kpi-value { font-size: clamp(18px, 2vw, 24px) !important; font-weight: 750; letter-spacing: -.02em; }

/* Toast */
.melisa-toast-host { top: 84px; right: 20px; }
.melisa-toast {
  border-color: var(--m-border);
  border-radius: 12px;
  background: var(--m-surface);
  color: var(--m-text);
  box-shadow: var(--m-shadow-md);
}

/* Modal */
.melisa-modal { padding: clamp(14px, 3vw, 28px) !important; }
.melisa-modal > .card, .melisa-modal-panel {
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius-lg) !important;
  background: var(--m-surface) !important;
  box-shadow: var(--m-shadow-md) !important;
}
.melisa-modal > .card > .card-body { padding: clamp(18px, 3vw, 28px) !important; }

/* Mobile navigation */
.melisa-mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--m-border);
  border-radius: 10px;
  background: var(--m-surface);
  color: var(--m-text);
  font-size: 20px;
}
.melisa-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15,23,42,.52);
  backdrop-filter: blur(2px);
}
.melisa-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1050;
  width: min(340px, 88vw);
  padding: 14px;
  background: var(--m-surface);
  border-right: 1px solid var(--m-border);
  box-shadow: 20px 0 50px rgba(15,23,42,.16);
  transform: translateX(-102%);
  transition: transform 220ms ease;
  overflow-y: auto;
}
.melisa-mobile-nav.is-open { transform: translateX(0); }
.melisa-mobile-nav-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-border);
}
.melisa-mobile-nav-content { padding-top: 12px; }
.melisa-mobile-nav-content > ul { display: flex !important; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.melisa-mobile-nav-content > ul > li { width: 100%; list-style: none; }
.melisa-mobile-nav-content .melisa-menu-link {
  width: 100%;
  justify-content: flex-start;
  padding: 11px 12px !important;
}
.melisa-mobile-nav-content .melisa-submenu {
  position: static;
  display: block;
  min-width: 0;
  margin: 3px 0 4px 24px;
  padding: 3px !important;
  border: 0 !important;
  border-left: 1px solid var(--m-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.melisa-mobile-nav-content .melisa-submenu li a { padding: 9px 12px; }
.melisa-icon-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--m-muted);
  font-size: 20px;
}
.melisa-icon-button:hover { background: var(--m-surface-subtle); color: var(--m-text); }
body.melisa-nav-open { overflow: hidden; }

/* Login */
.loginwrapper { min-height: 100dvh; }
.auth-box-3 {
  width: min(100% - 32px, 440px);
  padding: 32px;
  border: 1px solid rgba(226,232,240,.8);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
}
.auth-box-3 h4 { font-size: 28px; line-height: 1.2; font-weight: 750; color: #0f172a; }
.auth-box-3 #loginButton { min-height: 46px; border-radius: 10px !important; }

/* Status / error */
#content_layout [id$="Error"]:not(:empty) {
  border-radius: 10px;
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
  font-size: 12px;
}
.dark #content_layout [id$="Error"]:not(:empty) { background: rgba(127,29,29,.15); }

/* Responsive */
@media (max-width: 1100px) {
  #app_header .app-header > div:first-child { gap: 10px; }
  .melisa-horizontal-menu { display: none !important; }
  .melisa-mobile-menu-toggle { display: inline-flex; }
  #page_layout { padding-inline: 18px; }
}
@media (max-width: 767px) {
  #content_layout { padding-block: 16px 82px; }
  #page_layout { padding-inline: 12px; }
  #app_header .app-header > div:first-child { min-height: 62px; padding-inline: 12px; }
  #app_header .black_logo { max-width: 112px; }
  .melisa-page-header, .investor-page-header { align-items: stretch; flex-direction: column; margin-bottom: 18px; }
  .melisa-page-header .btn, .investor-page-header .btn { width: 100%; }
  .melisa-card-toolbar { padding: 15px 15px 0; }
  #content_layout .card-body { padding: 15px; }
  #content_layout form.flex, #content_layout form.grid { width: 100%; }
  #content_layout form.flex { flex-wrap: wrap; }
  #content_layout form.flex > *, #content_layout form.grid > * { min-width: 0; }
  #content_layout .grid.grid-cols-12 { row-gap: 12px; }
  .dashboard-kpi-card, .investor-kpi-card { min-height: 102px !important; }
  .melisa-toast-host { top: 72px; right: 12px; width: calc(100vw - 24px); }
  .auth-box-3 { padding: 24px 18px; border-radius: 16px; }
  .auth-box-3 h4 { font-size: 24px; }
}
@media (max-width: 480px) {
  #app_header .app-header > div:first-child { gap: 8px; }
  #app_header .app-header > div:first-child > .flex-1 { display: none !important; }
  #app_header .app-header > div:first-child > .flex.items-center.gap-4 { gap: 6px; }
  #content_layout table { min-width: 560px; }
  #content_layout table th, #content_layout table td { padding: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 2026 interaction layer */
.melisa-page-header { align-items: flex-end; }
.melisa-primary-btn, .melisa-btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.melisa-data-table tbody tr { cursor: default; }
.melisa-data-table tbody tr.cursor-pointer { cursor:pointer; }
.melisa-table-action { display:inline-flex; align-items:center; min-height:32px; padding:6px 9px; border-radius:8px; color:var(--m-primary); font-size:12px; font-weight:650; }
.melisa-table-action:hover { background:var(--m-primary-soft); }
.melisa-table-action.is-danger { color:var(--m-danger); }
.melisa-table-action.is-danger:hover { background:rgba(220,38,38,.08); }
.melisa-status { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; background:var(--m-surface-subtle); color:var(--m-muted); }
.melisa-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.melisa-status.is-success { color:var(--m-success); background:rgba(22,163,74,.09); }
.melisa-status.is-warning { color:var(--m-warning); background:rgba(217,119,6,.10); }
.melisa-status.is-info { color:var(--m-info); background:rgba(2,132,199,.09); }
.melisa-empty-state { min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--m-muted); text-align:center; padding:24px; }
.melisa-empty-state strong { color:var(--m-text); font-size:13px; }
.melisa-skeleton { position:relative; overflow:hidden; background:var(--m-surface-subtle); border-radius:8px; }
.melisa-skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(148,163,184,.12),transparent); animation:melisa-shimmer 1.25s infinite; }
.melisa-skeleton-row { height:42px; margin:8px 12px; }
@keyframes melisa-shimmer { 100% { transform:translateX(100%); } }
.melisa-summary-card { border:1px solid var(--m-border); background:var(--m-surface-subtle); border-radius:10px; padding:12px; }
.melisa-summary-card span { display:block; color:var(--m-muted); font-size:11px; margin-bottom:4px; }
.melisa-summary-card strong { color:var(--m-text); font-size:13px; }
.journal-line-row { display:grid; grid-template-columns:1.35fr 1.2fr .85fr .85fr 36px; gap:8px; align-items:center; margin-bottom:8px; }
.melisa-icon-button.is-danger { color:var(--m-danger); }
@media (max-width: 900px) { .journal-line-row { grid-template-columns:1fr 1fr; } .journal-line-row .journal-remove-line { grid-column:2; justify-self:end; } }
@media (max-width: 640px) { #page_layout { padding-inline:12px; } #content_layout { padding-block:16px 82px; } .melisa-page-header { align-items:flex-start; flex-direction:column; } .melisa-page-header > form { width:100%; } .melisa-page-header > form > * { flex:1 1 0; min-width:120px; } .journal-line-row { grid-template-columns:1fr; } .journal-line-row .journal-remove-line { grid-column:auto; justify-self:end; } }

/* Import / export modernization */
.melisa-modal-xl{max-width:1180px;width:min(96vw,1180px)}
.melisa-import-steps{display:flex;gap:8px;padding:14px 24px;border-bottom:1px solid #e2e8f0;overflow:auto}
.melisa-import-steps span{white-space:nowrap;padding:7px 11px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:12px;font-weight:700}
.melisa-import-steps span.active{background:#e0f2fe;color:#0369a1}
.melisa-dropzone{min-height:260px;border:2px dashed #cbd5e1;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;cursor:pointer;background:#f8fafc;transition:.2s}
.melisa-dropzone:hover{border-color:#38bdf8;background:#f0f9ff}
.melisa-dropzone iconify-icon{font-size:42px;color:#0284c7}
.melisa-dropzone span{font-size:13px;color:#64748b}
.melisa-import-meta{margin-top:12px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.melisa-mapping-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.melisa-map-row{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:center;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.melisa-map-row b{color:#ef4444}
.melisa-import-stat{padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;display:flex;flex-direction:column;gap:3px}
.melisa-import-stat b{font-size:20px}.melisa-import-stat span{font-size:12px;color:#64748b}
.melisa-import-error-list{border:1px solid #fecaca;background:#fff7f7;border-radius:12px;padding:12px;font-size:13px;color:#991b1b;display:grid;gap:6px}
.melisa-success-box{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:12px;padding:12px}
.melisa-import-result{padding:22px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0}
.melisa-import-result h3{font-size:20px;font-weight:700}
.melisa-status-pill{display:inline-flex;padding:4px 9px;border-radius:999px;background:#f1f5f9;font-size:11px;font-weight:700}
@media(max-width:720px){.melisa-mapping-grid{grid-template-columns:1fr}.melisa-map-row{grid-template-columns:1fr}.melisa-import-steps{padding:12px}.melisa-modal-xl{width:100vw;max-height:100vh}}


/* Investor portal: navigation and data-entry guardrails */
body.investor-mode .investor-management-nav { display: none !important; }
body.investor-mode .investor-only { display: list-item !important; }
.investor-readonly-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .65rem; border-radius:999px; background:#f1f5f9; color:#475569; font-size:.75rem; font-weight:600; }
.dark .investor-readonly-badge { background:#1e293b; color:#cbd5e1; }


/* ============================================================
   BETCMARK MOBILE NAV HARDENING
   Ensures the mobile menu is actually visible and usable on
   phones even when legacy template CSS changes display rules.
============================================================ */
@media (max-width: 1100px) {
  #mobileNavToggle.melisa-mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 40px;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1100;
  }
  #mobileNavigation.melisa-mobile-nav {
    display: block !important;
    visibility: visible;
  }
  #mobileNavOverlay.melisa-mobile-nav-overlay[hidden] {
    display: none !important;
  }
}
@media (max-width: 767px) {
  #mobileNavToggle.melisa-mobile-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }
  #mobileNavigation.melisa-mobile-nav {
    width: min(330px, 88vw);
    padding: 14px;
  }
  .melisa-mobile-nav-content .melisa-menu-link {
    min-height: 44px;
  }
}

/* ============================================================
   BETCMARK MOBILE NAV FINAL POLISH
   Keep the mobile header clean: hamburger stays separated from
   branding and the desktop horizontal navigation never sits
   underneath the mobile drawer.
============================================================ */
@media (max-width: 1100px) {
  #app_header .app-header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #mobileNavToggle.melisa-mobile-menu-toggle {
    order: 0;
    margin: 0 2px 0 0 !important;
    flex: 0 0 42px !important;
    position: relative !important;
    z-index: 1200 !important;
  }

  #app_header .app-header > div:first-child > .flex.items-center.flex-shrink-0.gap-2 {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #app_header .app-header > div:first-child > .flex.items-center.flex-shrink-0.gap-2 img {
    max-width: 130px !important;
    height: 30px !important;
  }

  #app_header .app-header > div:first-child > .flex.items-center.gap-4.flex-shrink-0 {
    gap: 6px !important;
    margin-left: auto !important;
  }

  /* Desktop nav must not remain visually attached to the mobile header. */
  .melisa-horizontal-menu {
    display: none !important;
  }

  #mobileNavOverlay.melisa-mobile-nav-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 13000 !important;
  }

  #mobileNavigation.melisa-mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 13010 !important;
    width: min(340px, 88vw) !important;
    max-width: 340px !important;
    margin: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    transform: translate3d(-105%, 0, 0) !important;
    will-change: transform;
  }

  #mobileNavigation.melisa-mobile-nav.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  body.melisa-nav-open {
    overflow: hidden !important;
    touch-action: none;
  }
}

@media (max-width: 480px) {
  #app_header .app-header > div:first-child {
    min-height: 60px !important;
    height: 60px !important;
    gap: 8px !important;
  }

  #mobileNavToggle.melisa-mobile-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  #app_header .app-header > div:first-child > .flex.items-center.flex-shrink-0.gap-2 img {
    max-width: 112px !important;
  }

  #mobileNavigation.melisa-mobile-nav {
    width: min(320px, 88vw) !important;
  }
}

/* ============================================================
   MELISA NAVIGATION 2026 — compact SaaS workspace
============================================================ */
:root { --melisa-sidebar-w: 248px; --melisa-sidebar-collapsed-w: 76px; }
.melisa-app-shell { min-height: 100vh; background: var(--m-bg, #f8fafc); }
.melisa-shell-header { position: sticky; top: 0; z-index: 1200; margin-left: var(--melisa-sidebar-w); }
.melisa-topbar { height: 68px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 22px; background:var(--m-surface,#fff); border-bottom:1px solid var(--m-border,#e2e8f0); box-shadow:0 1px 10px rgba(15,23,42,.04); }
.melisa-topbar-left,.melisa-topbar-actions{display:flex;align-items:center;gap:10px;min-width:0}.melisa-topbar-left{flex:0 0 auto}.melisa-topbar-actions{justify-content:flex-end;flex:0 0 auto}.melisa-brand{display:flex;align-items:center}.melisa-brand img{width:118px;max-height:32px;object-fit:contain}.melisa-icon-button{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--m-border,#e2e8f0);border-radius:10px;background:var(--m-surface,#fff);color:var(--m-muted,#64748b);transition:.18s}.melisa-icon-button:hover{background:var(--m-surface-subtle,#f8fafc);color:var(--m-text,#0f172a)}
.melisa-command-search{height:40px;display:flex;align-items:center;gap:9px;width:min(440px,42vw);padding:0 11px;border:1px solid var(--m-border,#e2e8f0);border-radius:10px;background:var(--m-surface-subtle,#f8fafc);color:var(--m-muted,#64748b)}.melisa-command-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--m-text,#0f172a);font-size:13px}.melisa-command-search kbd{font-size:10px;padding:3px 6px;border:1px solid var(--m-border,#e2e8f0);border-radius:6px;background:var(--m-surface,#fff);white-space:nowrap}.melisa-top-action{position:relative;align-items:center;gap:5px;height:38px;padding:0 9px;border:0;background:transparent;color:var(--m-muted,#64748b);font-size:12px}.melisa-top-action:hover{color:var(--m-text,#0f172a)}.melisa-notification-dot{position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#ef4444}.melisa-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;color:var(--m-muted,#64748b);font-size:10px}.melisa-clock strong{font-size:12px;color:var(--m-text,#0f172a)}.melisa-profile-trigger{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--m-text,#0f172a);padding:3px}.melisa-avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#334155;color:#fff;font-size:12px;font-weight:700}.melisa-profile-dropdown{position:absolute;right:0;top:46px;width:230px;background:var(--m-surface,#fff);border:1px solid var(--m-border,#e2e8f0);border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.12);padding:6px;z-index:2000}.melisa-profile-dropdown a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:var(--m-text,#334155);font-size:13px}.melisa-profile-dropdown a:hover{background:var(--m-surface-subtle,#f8fafc)}.melisa-profile-dropdown a.is-danger{color:#dc2626}.melisa-profile-meta{padding:9px 10px 11px;border-bottom:1px solid var(--m-border,#e2e8f0);margin-bottom:5px}.melisa-profile-meta strong,.melisa-profile-meta span,.melisa-profile-meta small{display:block}.melisa-profile-meta strong{font-size:13px}.melisa-profile-meta span,.melisa-profile-meta small{font-size:11px;color:var(--m-muted,#64748b);margin-top:2px}
.melisa-sidebar{position:fixed;inset:0 auto 0 0;width:var(--melisa-sidebar-w);z-index:1250;display:flex;flex-direction:column;background:var(--m-surface,#fff);border-right:1px solid var(--m-border,#e2e8f0);transition:width .2s ease,transform .2s ease;overflow:hidden}.melisa-sidebar-brand{height:68px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid var(--m-border,#e2e8f0);gap:10px}.melisa-brand-full img{width:116px;display:block}.melisa-sidebar-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--m-muted,#94a3b8);margin-left:auto}.melisa-sidebar-search{margin:12px;padding:9px 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--m-border,#e2e8f0);border-radius:9px;background:var(--m-surface-subtle,#f8fafc)}.melisa-sidebar-search input{width:100%;border:0;outline:0;background:transparent;font-size:12px}.melisa-sidebar-nav{padding:12px 10px;overflow-y:auto;flex:1}.melisa-nav-group{margin-bottom:3px}.melisa-nav-link{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#64748b;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;text-align:left;transition:.16s}.melisa-nav-link:hover{background:#f8fafc;color:#0f172a}.melisa-nav-link.is-active,.melisa-nav-parent.is-active{background:var(--m-primary-soft,#eff6ff);color:var(--m-primary,#2563eb)}.melisa-nav-link-main{display:flex;align-items:center;gap:10px;min-width:0}.melisa-nav-link iconify-icon{font-size:18px;flex:0 0 auto}.melisa-nav-chevron{font-size:14px!important;transition:transform .18s}.melisa-nav-group.is-expanded .melisa-nav-chevron{transform:rotate(180deg)}.melisa-nav-submenu{display:none;padding:3px 0 4px 30px}.melisa-nav-group.is-expanded .melisa-nav-submenu{display:grid;gap:2px}.melisa-nav-sublink{min-height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:8px;color:#64748b;font-size:12px;text-decoration:none}.melisa-nav-sublink iconify-icon{font-size:14px}.melisa-nav-sublink:hover{background:#f8fafc;color:#0f172a}.melisa-nav-sublink.is-active{background:var(--m-primary-soft,#eff6ff);color:var(--m-primary,#2563eb);font-weight:700}.melisa-sidebar-footer{margin:10px;padding:11px;border:1px solid var(--m-border,#e2e8f0);border-radius:10px;display:flex;align-items:center;gap:8px}.melisa-sidebar-footer strong,.melisa-sidebar-footer small{display:block}.melisa-sidebar-footer strong{font-size:11px}.melisa-sidebar-footer small{font-size:9px;color:#94a3b8}.melisa-status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.melisa-main-content{margin-left:var(--melisa-sidebar-w);min-height:calc(100vh - 68px);transition:margin-left .2s ease}.melisa-breadcrumb-wrap{padding:18px 24px 4px}.melisa-breadcrumb{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:11px}.melisa-breadcrumb a{color:#64748b}.melisa-breadcrumb strong{color:#334155}.melisa-breadcrumb iconify-icon{font-size:12px}.melisa-route-title{font-size:20px;font-weight:750;color:#0f172a;margin:7px 0 0}.melisa-breadcrumb-wrap + .page-content{padding-top:2px}
body.melisa-sidebar-collapsed{--melisa-sidebar-w:var(--melisa-sidebar-collapsed-w)}body.melisa-sidebar-collapsed .melisa-sidebar-label,body.melisa-sidebar-collapsed .melisa-brand-full,body.melisa-sidebar-collapsed .melisa-sidebar-footer div,body.melisa-sidebar-collapsed .melisa-nav-link span,body.melisa-sidebar-collapsed .melisa-nav-chevron{display:none}.melisa-sidebar-collapsed .melisa-sidebar-brand{justify-content:center;padding:0}.melisa-sidebar-collapsed .melisa-nav-link{justify-content:center;padding:0}.melisa-sidebar-collapsed .melisa-nav-submenu{position:absolute;left:70px;margin-top:-42px;width:190px;padding:5px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.12)}.melisa-sidebar-collapsed .melisa-nav-group:hover .melisa-nav-submenu{display:grid}.melisa-sidebar-collapsed .melisa-nav-sublink{padding:0 10px}.melisa-sidebar-collapsed .melisa-nav-link iconify-icon{font-size:19px}
.melisa-sidebar-overlay{display:none}
@media(max-width:1023px){:root{--melisa-sidebar-w:0px}.melisa-shell-header{margin-left:0}.melisa-main-content{margin-left:0}.melisa-sidebar{width:min(286px,88vw);transform:translateX(-102%);box-shadow:18px 0 45px rgba(15,23,42,.16)}.melisa-sidebar.is-mobile-open{transform:translateX(0)}.melisa-sidebar-overlay:not([hidden]){display:block;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:1240}.melisa-sidebar-brand{height:64px}.melisa-sidebar-label{display:none}.melisa-command-search{width:min(420px,48vw)}body.melisa-sidebar-collapsed{--melisa-sidebar-w:0px}.melisa-sidebar-collapsed .melisa-sidebar{width:min(286px,88vw)}.melisa-sidebar-collapsed .melisa-sidebar-label,.melisa-sidebar-collapsed .melisa-brand-full,.melisa-sidebar-collapsed .melisa-sidebar-footer div,.melisa-sidebar-collapsed .melisa-nav-link span,.melisa-sidebar-collapsed .melisa-nav-chevron{display:initial}.melisa-sidebar-collapsed .melisa-nav-link{justify-content:space-between;padding:0 11px}.melisa-sidebar-collapsed .melisa-nav-submenu{position:static;width:auto;margin:0;padding:3px 0 4px 30px;border:0;box-shadow:none}.melisa-sidebar-collapsed .melisa-nav-group.is-expanded .melisa-nav-submenu{display:grid}.melisa-sidebar-collapsed .melisa-nav-link iconify-icon{font-size:18px}.melisa-breadcrumb-wrap{padding:15px 16px 4px}.melisa-route-title{font-size:18px}}
@media(max-width:640px){.melisa-topbar{height:60px;padding:0 12px;gap:8px}.melisa-brand img{width:102px}.melisa-command-search{display:none}.melisa-topbar-actions{gap:3px}.melisa-clock{display:none}.melisa-profile-trigger>iconify-icon{display:none}.melisa-breadcrumb-wrap{padding-inline:12px}.melisa-breadcrumb{font-size:10px}.melisa-route-title{font-size:17px}.melisa-main-content .page-content{padding-top:0}.melisa-profile-dropdown{right:-4px}.melisa-top-action{padding:0 6px}}

/* ============================================================
   TOP NAVIGATION FIX — desktop topbar, mobile left drawer
============================================================ */
.melisa-shell-header{margin-left:0!important}
.melisa-topbar{position:relative}
.melisa-desktop-nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:visible}
.melisa-desktop-nav .melisa-nav-group{position:relative;margin:0}
.melisa-desktop-nav .melisa-nav-link{width:auto;min-height:40px;white-space:nowrap;padding:0 10px}
.melisa-desktop-nav .melisa-nav-link-main{gap:7px}
.melisa-desktop-nav .melisa-nav-submenu{position:absolute;top:calc(100% + 7px);left:0;min-width:210px;padding:6px;background:#fff;border:1px solid var(--m-border,#e2e8f0);border-radius:10px;box-shadow:0 16px 35px rgba(15,23,42,.12);z-index:2100;display:none!important}
.melisa-desktop-nav .melisa-nav-group.is-expanded .melisa-nav-submenu{display:grid!important;gap:2px}
.melisa-desktop-nav .melisa-nav-sublink{min-height:36px;padding:0 10px;white-space:nowrap}
.melisa-desktop-nav .melisa-nav-parent.is-active{background:var(--m-primary-soft,#eff6ff);color:var(--m-primary,#2563eb)}
.melisa-desktop-nav .melisa-nav-group[hidden]{display:none!important}
.melisa-sidebar{display:none}
.melisa-main-content{margin-left:0!important}
#melisaSidebarOverlay{display:none}
@media(max-width:1023px){
  .melisa-desktop-nav{display:none}
  .melisa-command-search{display:none}
  .melisa-sidebar{display:flex;width:min(286px,88vw);transform:translateX(-102%);}
  .melisa-sidebar.is-mobile-open{transform:translateX(0)}
  .melisa-sidebar-overlay:not([hidden]){display:block;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:1240}
  .melisa-main-content{margin-left:0!important}
}
@media(min-width:1024px){
  .melisa-sidebar-brand,.melisa-sidebar-search,.melisa-sidebar-nav,.melisa-sidebar-footer{display:none}
  .melisa-sidebar{display:none!important}
}

/* Excel import workspace */
.melisa-import-workspace{overflow:hidden}.melisa-import-typebar{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e2e8f0}.melisa-import-type{display:flex;align-items:center;gap:12px;padding:18px 22px;text-align:left;background:#fff;border:0;cursor:pointer}.melisa-import-type+.melisa-import-type{border-left:1px solid #e2e8f0}.melisa-import-type.is-active{background:#f8fafc;box-shadow:inset 0 -3px 0 #0ea5e9}.melisa-import-type-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f1f5f9;color:#475569;font-size:20px}.melisa-import-type strong,.melisa-import-type small{display:block}.melisa-import-type small{margin-top:3px;color:#64748b;font-size:12px}.melisa-import-progress{display:flex;align-items:center;gap:8px;padding:16px 22px;border-bottom:1px solid #e2e8f0;overflow:auto}.melisa-import-progress div{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#94a3b8;font-size:12px}.melisa-import-progress div span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#f1f5f9;font-weight:700}.melisa-import-progress div.is-active,.melisa-import-progress div.is-complete{color:#0369a1}.melisa-import-progress div.is-active span,.melisa-import-progress div.is-complete span{background:#e0f2fe;color:#0369a1}.melisa-import-progress i{height:1px;width:30px;background:#e2e8f0;flex:0 0 30px}.melisa-import-content{padding:28px}.melisa-import-intro{margin-bottom:22px}.melisa-import-intro h2{font-size:21px;font-weight:700;margin:3px 0}.melisa-import-intro p{max-width:800px;color:#64748b;font-size:14px}.melisa-import-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:#0ea5e9}.melisa-import-dropzone{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border:1.5px dashed #cbd5e1;border-radius:18px;background:#f8fafc;cursor:pointer;transition:.2s}.melisa-import-dropzone:hover,.melisa-import-dropzone.is-dragging{border-color:#38bdf8;background:#f0f9ff}.melisa-import-dropzone iconify-icon{font-size:42px;color:#0284c7}.melisa-import-dropzone strong{font-size:16px}.melisa-import-dropzone span{font-size:12px;color:#64748b}.melisa-import-file-card{margin-top:14px;padding:13px 15px;border:1px solid #dbeafe;border-radius:12px;background:#eff6ff}.melisa-import-file-card strong,.melisa-import-file-card span{display:block}.melisa-import-file-card span{font-size:12px;color:#64748b;margin-top:2px}.melisa-import-inline-error{margin-top:12px;padding:11px 13px;border:1px solid #fecaca;background:#fff7f7;color:#991b1b;border-radius:10px;font-size:13px}.melisa-import-sheet-row{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:16px;align-items:end;margin-bottom:16px}.melisa-import-hint{font-size:12px;color:#64748b;padding-bottom:11px}.melisa-mapping-card{border:1px solid #e2e8f0;border-radius:14px;overflow:hidden}.melisa-mapping-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}.melisa-map-row{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;gap:10px;align-items:center}.melisa-map-row>span{font-size:13px;color:#475569}.melisa-map-row b{color:#dc2626}.melisa-import-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.melisa-import-stat{padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}.melisa-import-stat b{display:block;font-size:21px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.melisa-import-stat span{display:block;color:#64748b;font-size:12px;margin-top:3px}.melisa-import-stat.is-valid{background:#f0fdf4;border-color:#bbf7d0}.melisa-import-stat.is-error{background:#fff7f7;border-color:#fecaca}.melisa-import-stat.is-warning{background:#fffbeb;border-color:#fde68a}.melisa-import-validation-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.melisa-import-section-title{font-size:13px;font-weight:700;margin-bottom:8px}.melisa-import-error-list,.melisa-import-warning-list{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;max-height:360px;overflow-y:auto}.melisa-import-warning-list{border-color:#fde68a}.melisa-import-error-row{width:100%;display:grid;grid-template-columns:65px 130px 1fr;gap:8px;padding:10px 12px;text-align:left;border:0;border-bottom:1px solid #f1f5f9;background:transparent;font-size:12px}.melisa-import-error-row:last-child{border-bottom:0}.melisa-import-error-row span{font-weight:700}.melisa-import-error-row strong{color:#475569}.melisa-import-error-row em{font-style:normal;color:#991b1b}.melisa-import-warning-list .melisa-import-error-row em{color:#92400e}.melisa-import-ok{padding:13px;border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:12px;font-size:13px;display:flex;align-items:center;gap:8px}.melisa-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.melisa-check-inline{font-size:12px;color:#475569;display:flex;align-items:center;gap:6px}.melisa-preview-table-wrap{border:1px solid #e2e8f0;border-radius:12px;overflow:auto;max-height:430px}.melisa-preview-table{font-size:12px;white-space:nowrap}.melisa-preview-table th{position:sticky;top:0;background:#f8fafc;z-index:1}.melisa-preview-table td{padding:9px 8px}.melisa-import-badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}.melisa-import-badge.valid{background:#dcfce7;color:#166534}.melisa-import-badge.warning{background:#fef3c7;color:#92400e}.melisa-confirm-card{padding:18px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}.melisa-mode-card{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:18px;align-items:center;margin-top:14px;padding:16px;border:1px solid #e2e8f0;border-radius:14px}.melisa-mode-card strong,.melisa-mode-card span{display:block}.melisa-mode-card span{font-size:12px;color:#64748b;margin-top:3px}.melisa-confirm-warning{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:13px;border-radius:12px;background:#eff6ff;color:#1e40af;font-size:13px}.melisa-import-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.melisa-import-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-top:1px solid #e2e8f0;background:#fafafa}@media(max-width:900px){.melisa-import-stats,.melisa-import-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.melisa-import-validation-layout{grid-template-columns:1fr}.melisa-mapping-grid{grid-template-columns:1fr}}@media(max-width:640px){.melisa-import-typebar{grid-template-columns:1fr}.melisa-import-type+.melisa-import-type{border-left:0;border-top:1px solid #e2e8f0}.melisa-import-progress{padding:12px}.melisa-import-content{padding:18px}.melisa-import-sheet-row,.melisa-mode-card{grid-template-columns:1fr}.melisa-map-row{grid-template-columns:1fr}.melisa-import-stats,.melisa-import-result-grid{grid-template-columns:1fr 1fr}.melisa-import-footer{padding:12px 18px}.melisa-import-error-row{grid-template-columns:55px 1fr}.melisa-import-error-row em{grid-column:1/-1}}

/* Navigation stability: keep primary menus visible on desktop without header overflow */
@media (min-width:1024px) {
  .melisa-topbar { gap: 10px; }
  .melisa-desktop-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
  }
  .melisa-desktop-nav .melisa-nav-link { padding-inline: 8px; font-size: 12px; }
  .melisa-command-search { width: min(280px, 24vw); flex: 0 1 280px; }
}
@media (min-width:1024px) and (max-width:1250px) {
  .melisa-command-search { display:none; }
  .melisa-topbar-actions .melisa-clock,
  .melisa-topbar-actions .melisa-top-action[aria-label="Language"] { display:none !important; }
  .melisa-desktop-nav { gap: 2px; }
  .melisa-desktop-nav .melisa-nav-link { padding-inline: 6px; font-size: 11.5px; }
}
@media (min-width:1024px) {
  .melisa-desktop-nav .melisa-nav-group[hidden] { display:none !important; }
  .melisa-desktop-nav .melisa-nav-submenu { max-height: min(70vh, 520px); overflow-y:auto; }
}

/* ============================================================
   MELISA 2026 UX POLISH — INFORMATION HIERARCHY + HEADER
   Goals: calm visual hierarchy, predictable controls, no overlap,
   semantic colors, readable density and accessible focus states.
============================================================ */
:root {
  --melisa-blue: #2563eb;
  --melisa-blue-soft: #eff6ff;
  --melisa-green: #15803d;
  --melisa-green-soft: #f0fdf4;
  --melisa-amber: #b45309;
  --melisa-amber-soft: #fffbeb;
  --melisa-red: #b91c1c;
  --melisa-red-soft: #fef2f2;
  --melisa-slate-50: #f8fafc;
  --melisa-slate-100: #f1f5f9;
  --melisa-slate-200: #e2e8f0;
  --melisa-slate-500: #64748b;
  --melisa-slate-700: #334155;
  --melisa-slate-900: #0f172a;
}

/* Header: reserve predictable zones and prevent menu collisions. */
.melisa-topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 240px) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-inline: clamp(14px, 1.8vw, 26px) !important;
}
.melisa-topbar-left { min-width: max-content; }
.melisa-desktop-nav {
  min-width: 0 !important;
  flex: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: flex-start;
  padding: 2px 1px;
}
.melisa-desktop-nav::-webkit-scrollbar { display: none; }
.melisa-desktop-nav .melisa-nav-group {
  flex: 0 0 auto;
}
.melisa-desktop-nav .melisa-nav-link {
  min-height: 38px !important;
  padding-inline: 9px !important;
  border: 1px solid transparent;
  color: var(--melisa-slate-700);
  font-size: 12.5px !important;
  font-weight: 650;
  letter-spacing: -.005em;
}
.melisa-desktop-nav .melisa-nav-link:hover {
  background: var(--melisa-slate-50);
  color: var(--melisa-slate-900);
}
.melisa-desktop-nav .melisa-nav-link.is-active,
.melisa-desktop-nav .melisa-nav-parent.is-active {
  background: var(--melisa-blue-soft);
  color: var(--melisa-blue);
  border-color: #dbeafe;
}
.melisa-desktop-nav .melisa-nav-link iconify-icon { font-size: 17px; }
.melisa-desktop-nav .melisa-nav-submenu {
  top: calc(100% + 8px) !important;
  min-width: 224px !important;
  padding: 7px !important;
  border-color: var(--melisa-slate-200) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.14) !important;
}
.melisa-desktop-nav .melisa-nav-sublink {
  min-height: 38px;
  border-radius: 8px;
  padding-inline: 10px;
  font-size: 12.5px;
}
.melisa-desktop-nav .melisa-nav-sublink:hover { background: var(--melisa-slate-50); }
.melisa-desktop-nav .melisa-nav-sublink.is-active {
  background: var(--melisa-blue-soft);
  color: var(--melisa-blue);
  font-weight: 700;
}

.melisa-command-search {
  width: auto !important;
  min-width: 180px;
  max-width: 240px;
  flex: none !important;
  height: 38px;
  border-radius: 9px;
  background: var(--melisa-slate-50);
}
.melisa-command-search input { font-size: 12px; }
.melisa-command-search kbd {
  min-width: 28px;
  text-align: center;
  font-family: inherit;
  color: var(--melisa-slate-500);
}
.melisa-topbar-actions {
  min-width: max-content;
  gap: 5px !important;
}
.melisa-top-action {
  width: 36px;
  justify-content: center;
  padding: 0 !important;
  border-radius: 9px;
}
.melisa-top-action:hover { background: var(--melisa-slate-50); }
.melisa-top-action[aria-label="Language"] span { display: none; }
.melisa-clock { min-width: 72px; margin-right: 2px; }
.melisa-profile-trigger {
  min-height: 38px;
  padding: 2px 4px 2px 3px;
  border-radius: 10px;
}
.melisa-profile-trigger:hover { background: var(--melisa-slate-50); }
.melisa-profile-trigger .melisa-avatar {
  width: 34px;
  height: 34px;
  background: #1e3a8a;
}
.melisa-profile-dropdown {
  top: calc(100% + 8px) !important;
  width: 250px !important;
  padding: 7px !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(15,23,42,.16) !important;
}
.melisa-profile-dropdown a {
  min-height: 40px;
  border-radius: 9px;
  padding: 0 10px;
}
.melisa-profile-dropdown a:hover { background: var(--melisa-slate-50); }
.melisa-profile-dropdown a.is-danger:hover { background: var(--melisa-red-soft); }

/* Buttons: one clear hierarchy. Primary = action, neutral = navigation,
   danger = destructive. Avoid rainbow-colored controls. */
#content_layout .btn,
#content_layout .melisa-btn,
#content_layout button[class*="btn-"],
#content_layout button[class*="bg-primary"],
#content_layout button[class*="bg-danger"],
#content_layout a[class*="btn"] {
  min-height: 40px;
  border-radius: 9px !important;
  font-weight: 650;
  letter-spacing: -.005em;
}
#content_layout .btn.bg-primary-500,
#content_layout .melisa-btn-primary,
#content_layout .btn-primary {
  background: var(--melisa-blue) !important;
  border-color: var(--melisa-blue) !important;
  color: #fff !important;
}
#content_layout .btn.bg-primary-500:hover:not(:disabled),
#content_layout .melisa-btn-primary:hover:not(:disabled),
#content_layout .btn-primary:hover:not(:disabled) {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}
#content_layout .btn.bg-danger-500,
#content_layout .btn-danger {
  background: var(--melisa-red) !important;
  border-color: var(--melisa-red) !important;
  color: #fff !important;
}
#content_layout .btn.bg-slate-100,
#content_layout .btn-outline-secondary,
#content_layout .melisa-btn-secondary {
  background: #fff !important;
  border: 1px solid var(--melisa-slate-200) !important;
  color: var(--melisa-slate-700) !important;
}
#content_layout .btn.bg-slate-100:hover:not(:disabled),
#content_layout .btn-outline-secondary:hover:not(:disabled),
#content_layout .melisa-btn-secondary:hover:not(:disabled) {
  background: var(--melisa-slate-50) !important;
  border-color: #cbd5e1 !important;
}

/* Table actions: compact, recognizable controls instead of loose text. */
#content_layout table tbody td button.text-primary-500,
#content_layout table tbody td button.text-primary-600,
#content_layout table tbody td button.text-blue-500,
#content_layout table tbody td button.text-blue-600,
#content_layout table tbody td a.text-primary-500,
#content_layout table tbody td a.text-primary-600 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 9px !important;
  margin: 0 4px 0 0 !important;
  border: 1px solid #dbeafe;
  border-radius: 7px !important;
  background: #fff;
  color: #1d4ed8 !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}
#content_layout table tbody td button.text-primary-500:hover,
#content_layout table tbody td button.text-primary-600:hover,
#content_layout table tbody td a.text-primary-500:hover,
#content_layout table tbody td a.text-primary-600:hover {
  background: var(--melisa-blue-soft);
}
#content_layout table tbody td button.text-red-500,
#content_layout table tbody td button.text-red-600,
#content_layout table tbody td button.text-danger-500,
#content_layout table tbody td button.text-danger-700,
#content_layout table tbody td a.text-red-500,
#content_layout table tbody td a.text-red-600 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 9px !important;
  margin: 0 !important;
  border: 1px solid #fecaca;
  border-radius: 7px !important;
  background: #fff;
  color: var(--melisa-red) !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}
#content_layout table tbody td button.text-red-500:hover,
#content_layout table tbody td button.text-red-600:hover,
#content_layout table tbody td a.text-red-500:hover,
#content_layout table tbody td a.text-red-600:hover {
  background: var(--melisa-red-soft);
}

/* Form/action toolbars: consistent rhythm and predictable alignment. */
.melisa-card-toolbar,
#content_layout .flex.items-center.justify-between {
  gap: 12px;
}
#content_layout .flex.flex-wrap.gap-2,
#content_layout .flex.flex-wrap.gap-3 {
  row-gap: 8px;
}
#content_layout .form-control,
#content_layout select,
#content_layout textarea {
  font-size: 13px;
}

/* Semantic status colors: reserve colors for meaning. */
.melisa-success-box { color: #166534; background: var(--melisa-green-soft); border-color: #bbf7d0; }
.melisa-warning-box { color: #92400e; background: var(--melisa-amber-soft); border-color: #fde68a; }
.melisa-error-box { color: #991b1b; background: var(--melisa-red-soft); border-color: #fecaca; }

/* Dense desktop header: progressively reduce secondary UI before menus. */
@media (min-width: 1440px) {
  .melisa-desktop-nav .melisa-nav-link { padding-inline: 8px !important; }
}
@media (min-width: 1024px) and (max-width: 1360px) {
  .melisa-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .melisa-command-search { display: none !important; }
  .melisa-clock { display: none !important; }
  .melisa-desktop-nav .melisa-nav-link { padding-inline: 7px !important; font-size: 11.5px !important; }
}
@media (max-width: 1023px) {
  .melisa-topbar { display: flex !important; }
  .melisa-topbar-left { flex: 0 0 auto; }
  .melisa-topbar-actions { margin-left: auto; }
}
@media (max-width: 640px) {
  .melisa-topbar { padding-inline: 10px !important; }
  .melisa-brand img { width: 100px; }
  .melisa-top-action { width: 34px; }
  .melisa-profile-dropdown { width: min(270px, calc(100vw - 20px)) !important; }
}

/* Prevent horizontal page growth caused by long navigation/content. */
html, body { max-width: 100%; overflow-x: hidden; }
#app_header, .melisa-topbar, #content_layout { min-width: 0; }

/* FINAL HEADER PRECISION PASS — compact, aligned, non-clipping dropdowns */
.melisa-shell-header { z-index: 3000 !important; overflow: visible !important; }
.melisa-topbar { overflow: visible !important; }
.melisa-topbar-left { position: relative; z-index: 2; }
.melisa-desktop-nav {
  overflow: visible !important;
  justify-content: center;
  gap: 2px !important;
  padding: 0 !important;
}
.melisa-desktop-nav .melisa-nav-group { position: relative; }
.melisa-desktop-nav .melisa-nav-link {
  min-height: 38px !important;
  height: 38px;
  padding: 0 8px !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 650;
  border-radius: 8px !important;
}
.melisa-desktop-nav .melisa-nav-link-main { gap: 6px !important; }
.melisa-desktop-nav .melisa-nav-link iconify-icon { font-size: 16px !important; }
.melisa-desktop-nav .melisa-nav-chevron { font-size: 12px !important; }
.melisa-desktop-nav .melisa-nav-submenu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 218px !important;
  max-width: 270px;
  padding: 5px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.16) !important;
  z-index: 5000 !important;
}
.melisa-desktop-nav .melisa-nav-group.is-expanded > .melisa-nav-submenu,
.melisa-desktop-nav .melisa-nav-group:focus-within > .melisa-nav-submenu { display: grid !important; }
.melisa-desktop-nav .melisa-nav-sublink {
  min-height: 36px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}
.melisa-command-search { min-width: 170px !important; max-width: 190px !important; height: 36px !important; }
.melisa-topbar-actions { gap: 3px !important; }
.melisa-clock { min-width: 66px !important; }
.melisa-profile-dropdown { z-index: 6000 !important; }

/* Prevent dropdowns from being covered by page content. */
.melisa-topbar > * { position: relative; }
.melisa-desktop-nav { z-index: 4000; }
.melisa-command-search, .melisa-topbar-actions { z-index: 4500; }

@media (min-width: 1600px) {
  .melisa-topbar { grid-template-columns: auto minmax(0, 1fr) 190px auto !important; gap: 10px !important; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .melisa-topbar { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 9px !important; }
  .melisa-command-search { display: none !important; }
  .melisa-desktop-nav { justify-content: flex-start; }
  .melisa-desktop-nav .melisa-nav-link { padding-inline: 7px !important; font-size: 11.5px !important; }
  .melisa-clock { display: none !important; }
}
@media (max-width: 1199px) {
  .melisa-desktop-nav { display: none !important; }
}
@media (max-width: 1023px) {
  .melisa-desktop-nav { display: none !important; }
}