/* Shared visual refinement for HQ operational portals. Presentation only. */
:root {
  --ui-ink: #193329;
  --ui-muted: #64766e;
  --ui-line: #dbe6e0;
  --ui-surface: #fff;
  --ui-canvas: #eff4f1;
  --ui-green: #176b47;
  --ui-green-dark: #103d2a;
  --ui-shadow: 0 2px 8px rgba(22, 54, 40, .07);
  --ui-shadow-raised: 0 8px 20px rgba(22, 54, 40, .11);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body:not(:has(#loginView)) { background: var(--ui-canvas); color: var(--ui-ink); }

.topbar {
  background: #123a2a !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 2px 8px rgba(16,48,34,.14) !important;
}
.topbar-title, .topbar .page-name, .topbar h1, .topbar h2 { color: #f4faf6 !important; }
.pc-nav-search-input, .topbar input[type="search"] { border-radius: 7px !important; }
#sidebar {
  background: linear-gradient(180deg, #0b3925 0%, #082c1d 100%);
  box-shadow: 3px 0 18px rgba(13, 43, 29, .16);
}
#sidebar .nav-direct, #sidebar .nav-item, #sidebar a {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
#sidebar .nav-direct:hover, #sidebar .nav-item:hover, #sidebar a:hover {
  background-color: rgba(255,255,255,.08);
}
#sidebar .nav-direct.active, #sidebar .nav-item.active, #sidebar a.active {
  box-shadow: inset 3px 0 #72c79a;
}

#content { background: var(--ui-canvas); color: #293c33; }
#content .main-area, #content #page-body { min-width: 0; }
#content .pg-header { align-items: center; }
#content .pg-title, #content .page-title, #content .section-title,
#content .card-title, #content h1, #content h2, #content h3 {
  color: var(--ui-ink);
  letter-spacing: 0;
  text-wrap: balance;
}
#content .pg-sub, #content .section-subtitle { color: var(--ui-muted); line-height: 1.5; }

#content .card, #content .card-dark, #content .dash-card, #content .chart-card,
#content .filter-card, #content .ref-card, #content .pg-form-card,
#content .due-section-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--ui-shadow) !important;
}
#content .card-header, #content .dash-card-title {
  border-bottom-color: var(--ui-line) !important;
}
#content .card-body { min-width: 0; }
#content .card-title { line-height: 1.35; }

#content .table-responsive, #content .tbl-wrap, #content .table-container,
#content .dataTables_wrapper { max-width: 100%; }
#content table:not(.dataTable) { border-color: var(--ui-line); }
#content .table thead th, #content table.dataTable thead th {
  color: #405b4e !important;
  background: #f0f5f2 !important;
  border-color: var(--ui-line) !important;
}
#content .table tbody tr:hover > td, #content table.dataTable tbody tr:hover > td {
  background-color: #f5faf7;
}
#content .table td, #content .table th { vertical-align: middle; }

#content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#content select, #content textarea {
  border-color: #cbd9d1;
  border-radius: 7px;
}
#content input:focus, #content select:focus, #content textarea:focus,
#content :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(35, 132, 92, .2) !important;
  outline-offset: 2px;
}
#content input:focus, #content select:focus, #content textarea:focus {
  border-color: #23845c !important;
  box-shadow: 0 0 0 3px rgba(35,132,92,.1) !important;
}
#content button, #content .btn, #content .pg-btn, #content .pg-btn-outline,
#content .act-btn { border-radius: 7px; transition: filter .15s ease, box-shadow .15s ease; }
#content button:hover, #content .btn:hover, #content .pg-btn:hover,
#content .pg-btn-outline:hover, #content .act-btn:hover { filter: brightness(.97); }

.modal, .modal-content, .swal2-popup {
  border-radius: 10px !important;
  box-shadow: 0 16px 48px rgba(14, 35, 25, .22) !important;
}
.badge, .status-badge, .pill { font-weight: 700; }

/* Consistent information density and hierarchy across the role portals. */
#content .kpi-grid { align-items: stretch; }
#content .kpi-grid > .kpi-card,
#content .kpi-grid > .kpi-card-grad,
#content .kpi-grid > .kpi-grad-card {
  min-width: 0;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(20, 48, 35, .13) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#content .kpi-grid > .kpi-card:hover,
#content .kpi-grid > .kpi-card-grad:hover,
#content .kpi-grid > .kpi-grad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(20, 48, 35, .17) !important;
}
#content .card-header, #content .pg-section-head {
  color: #1b3b2d;
}
#content .table tbody tr { transition: background-color .12s ease; }
#content .table tbody tr:hover > td { background: #f1f8f4; }
#content :is(input, select, textarea) { min-height: 40px; }
#content textarea { line-height: 1.5; }
#content .pg-header + .card, #content .pg-header + .filter-card { margin-top: 4px; }

/* Standalone email centre uses the same foundation as the role portals. */
#mailCenterApp.mc { color: var(--ui-ink); }
#mailCenterApp .mc-panel, #mailCenterApp .mc-kpi {
  border-radius: 8px;
  border-color: var(--ui-line);
  box-shadow: var(--ui-shadow);
}
#mailCenterApp .mc-panel-head, #mailCenterApp .mc-dialog-head { border-color: var(--ui-line); }
#mailCenterApp .mc-btn { border-radius: 7px; min-height: 42px; }
#mailCenterApp .mc-btn:focus-visible,
#mailCenterApp input:focus-visible, #mailCenterApp select:focus-visible,
#mailCenterApp textarea:focus-visible { outline: 3px solid rgba(35,132,92,.2); outline-offset: 2px; }
#mailCenterApp .mc-dialog { border-radius: 10px; }

/* Master Admin console; #appView scoping leaves its login view untouched. */
#appView .sidebar { background: #0b3925; border-color: rgba(255,255,255,.1); }
#appView .sidebar .nav-item { border-radius: 7px; }
#appView .sidebar .nav-item.active { box-shadow: inset 3px 0 #72c79a; }
#appView .main { min-width: 0; }
#appView .panel, #appView .stat-card, #appView .emp-dir,
#appView .passbook, #appView .emp-empty {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#appView .tbl-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
#appView :is(button, input, select, textarea, a):focus-visible {
  outline: 3px solid rgba(114,199,154,.36);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .topbar { min-width: 0; }
  .topbar > *, .topbar-controls > * { min-width: 0; }
  #content .pg-header { flex-wrap: wrap; }
  #content .pg-header > :last-child { max-width: 100%; }
}

@media (max-width: 600px) {
  .topbar {
    min-height: var(--topbar-h, 54px);
    height: auto;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    gap: 6px;
  }
  .topbar-title, .topbar .page-name { max-width: min(42vw, 180px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc-nav-search-input { min-width: 0 !important; width: min(40vw, 190px) !important; }
  #content .main-area, #content #page-body { padding-left: 10px; padding-right: 10px; }
  #content .pg-header { gap: 6px; margin-bottom: 12px; }
  #content .pg-title { font-size: 20px !important; line-height: 1.25; }
  #content .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #content .kpi-grid > * { min-width: 0; }
  #content .kpi-grid .kpi-val, #content .kpi-grid .kpi-value,
  #content .kpi-grid .kpi-grad-value { overflow-wrap: anywhere; }
  #content .card-body { padding: 12px; }
  #content .card, #content .card-dark, #content .dash-card,
  #content .chart-card, #content .filter-card, #content .ref-card { border-radius: 8px !important; }
  #content .table-responsive, #content .tbl-wrap, #content .table-container,
  #content .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #content .table-responsive table, #content .tbl-wrap table,
  #content .table-container table, #content .dataTables_wrapper table { min-width: 620px; }
  #content .modal, #content .modal-content { max-width: 100vw; max-height: 92dvh; overflow-y: auto; }
  #content .modal-actions, #content .form-actions { flex-wrap: wrap; }
  #content .modal-actions > *, #content .form-actions > * { flex: 1 1 140px; }
  #content button, #content .btn, #content .pg-btn, #content .pg-btn-outline,
  #content .act-btn { min-height: 42px; }
  #content td button, #content td .act-btn { min-height: 38px; }
  #mailCenterApp.mc { font-size: 14px; }
  #mailCenterApp .mc-kpis { gap: 8px; }
  #mailCenterApp .mc-kpi { min-width: 0; padding: 12px; }
  #mailCenterApp .mc-kpi-value { font-size: 20px; overflow-wrap: anywhere; }
  #mailCenterApp .mc-filters { gap: 8px; padding: 12px; }
  #mailCenterApp .mc-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #mailCenterApp .mc-dialog { max-height: 92dvh; }
  #mailCenterApp .mc-dialog-actions { flex-wrap: wrap; }
  #mailCenterApp .mc-dialog-actions .mc-btn { flex: 1 1 150px; }
  #appView .main { min-width: 0; padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); }
  #appView .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #appView .tbl-wrap { overflow-x: auto; }
  #appView .tbl-wrap table { min-width: 620px; }
  #appView .emp-dir { max-height: min(55dvh, 520px); }
}

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