/* Shared presentation layer. Page scripts, forms and status classes remain authoritative. */
:root {
  color-scheme: dark;
  --bg: #0b1120;
  --surface: #121c2e;
  --surface2: #19263b;
  --border: #2b3a51;
  --accent: #67c9ed;
  --accent2: #b5a1ff;
  --good: #56d9ac;
  --warn: #f4c268;
  --crit: #ff8295;
  --offline: #a0aec2;
  --text: #edf2fa;
  --muted: #a0aec2;
}
html { scrollbar-gutter: stable; }
body.app-ui {
  background: radial-gradient(ellipse at 10% 0%, #172b43 0, transparent 48%), var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.app-ui::before { display: none; }
.app-ui .wrap { max-width: 1560px; padding: 30px 36px 48px; }
.app-ui header { gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.app-ui .logo { min-width: 0; }
.app-ui .logo-icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
  background: #203e54; border: 1px solid #36576f; box-shadow: inset 0 1px #ffffff12;
}
.app-ui .logo h1 { font-size: 23px; letter-spacing: -.5px; font-weight: 700; }
.app-ui .header-right { gap: 8px; }
.app-ui .session-info, .app-ui .user-badge { background: #111d2e; border-radius: 10px; min-height: 42px; }
.app-ui .session-info { padding: 8px 12px; }
.app-ui .role-tag { border-radius: 5px; }
.app-ui .admin-nav, .app-ui .nav {
  gap: 6px; flex-wrap: wrap; padding: 6px; background: #0d1727;
  border: 1px solid var(--border); border-radius: 13px; margin-bottom: 26px;
}
.app-ui header .nav { margin-bottom: 0; }
.app-ui .nav-btn, .app-ui .nav a {
  border: 1px solid transparent; background: transparent; color: #b0bdd0;
  border-radius: 8px; padding: 9px 15px; font-size: 14px; font-weight: 500;
  min-height: 42px; display: inline-flex; align-items: center; text-decoration: none;
}
.app-ui .nav-btn:hover, .app-ui .nav a:hover { background: var(--surface2); color: var(--text); border-color: var(--border); }
.app-ui .nav-btn.active, .app-ui .nav a.active, .app-ui .nav-btn[aria-current="page"] {
  background: #20374c; color: #91dcf6; border-color: #37566e; box-shadow: 0 2px 6px #0002;
}
.page-intro { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 8px 0 24px; }
.page-eyebrow { font: 600 11px/1.5 'Hind Siliguri', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.page-intro h2 { font-size: clamp(23px, 2.5vw, 30px); font-weight: 600; letter-spacing: -.7px; line-height: 1.3; }
.page-intro p { color: var(--muted); font-size: 14px; margin-top: 7px; }
.app-ui .stats { gap: 14px; margin-bottom: 24px; }
.app-ui .stat {
  border-radius: 14px; padding: 23px 20px 20px; background: linear-gradient(145deg, #19273a, #121c2e);
  box-shadow: 0 4px 14px #00000012; min-width: 0;
}
.app-ui .stat::after { top: 20px; left: auto; right: 18px; width: 7px; height: 7px; border-radius: 50%; }
.app-ui .stat-val { font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.app-ui .stat-label { color: #adbbcf; font-size: 12px; letter-spacing: .6px; margin-top: 10px; }
.app-ui .stat.active { border-color: #67c9ed; background: #1b3145; box-shadow: 0 0 0 1px #67c9ed20; }
.app-ui .toolbar { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; gap: 10px; }
.app-ui .search-box { min-width: 220px; }
.app-ui .search-box input { background: var(--bg); border-radius: 8px; min-height: 44px; }
.app-ui .btn { padding: 10px 14px; min-height: 44px; border-radius: 8px; font-size: 13px; }
.app-ui .btn-accent, .app-ui .btn-save, .app-ui .add-btn, .app-ui .cp-btn-primary {
  background: #86d7f2; border-color: #86d7f2; color: #0b2333; font-weight: 700;
}
.app-ui .btn-accent:hover { background: #a2e3f8; color: #0b2333; }
.app-ui .btn-settings { background: #193347; color: #91dcf6; border-color: #35556c; min-height: 42px; }
.app-ui .btn-test { color: var(--accent2); }
.app-ui .table-wrap { border-radius: 14px; }
.app-ui .table-head { background: #1a293d; color: #b9c6d8; font-size: 11px; padding-top: 15px; padding-bottom: 15px; letter-spacing: .7px; }
.app-ui .row { padding-top: 17px; padding-bottom: 17px; border-color: #26364b; }
.app-ui .row.offline { opacity: 1; background: #101a2a; }
.app-ui .row:hover { background: #1d3046; }
.app-ui .row > div { min-width: 0; }
.app-ui .badge { font-size: 11px; padding: 4px 9px; white-space: nowrap; }
.app-ui .badge::before { box-shadow: none; }
.app-ui .port-tag { border-radius: 6px; background: #1d3045; }
.app-ui .pppoe-name { overflow-wrap: anywhere; }
.app-ui .main-card, .app-ui .port-card, .app-ui .info-card, .app-ui .chart-card, .app-ui .worst-card, .app-ui .onu-hero {
  box-shadow: 0 6px 24px #00000016; border-radius: 16px;
}
.app-ui .card-title { font-size: 18px; font-weight: 600; flex-wrap: wrap; }
.app-ui .card-header { gap: 14px; }
.app-ui .info-card-title, .app-ui .chart-title { color: #c1ccdc; letter-spacing: .7px; }
.app-ui .info-row { gap: 16px; }
.app-ui .info-val { overflow-wrap: anywhere; min-width: 0; }
.app-ui .info-key { flex-shrink: 0; }
.app-ui .onu-hero { background: linear-gradient(120deg, #1c3046, var(--surface)); }
.app-ui .onu-hero-left { min-width: 0; }
.app-ui .onu-hero-left > div { min-width: 0; }
.app-ui .onu-name { overflow-wrap: anywhere; }
.app-ui .port-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.app-ui .main-grid > *, .app-ui .info-grid > * { min-width: 0; }
.app-ui .result-table th, .app-ui .user-table th { padding-top: 15px; padding-bottom: 15px; color: #bac7da; background: #1a293d; }
.app-ui .result-table td, .app-ui .user-table td { padding-top: 16px; padding-bottom: 16px; }
.app-ui .page-btn, .app-ui .per-page-btn { min-height: 38px; display: inline-flex; justify-content: center; align-items: center; border-radius: 8px; }
.app-ui .pagination-wrap { padding: 8px 0; }
.app-ui .modal-overlay, .app-ui .cp-modal-overlay { background: #050b16c9; backdrop-filter: blur(6px); overflow-y: auto; }
.app-ui .modal, .app-ui .cp-modal {
  background: var(--surface); border-color: #3b506b; box-shadow: 0 24px 80px #0008;
  max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 18px;
}
.app-ui .form-group label, .app-ui .cp-form-group label, .app-ui .toggle-sub { color: var(--muted); }
.app-ui .form-input, .app-ui .cp-form-input { background: var(--bg); color: var(--text); border-color: var(--border); min-height: 44px; }
.app-ui .toggle-row { background: var(--bg); border-color: var(--border); gap: 12px; }
.app-ui .modal-close, .app-ui .cp-modal-close { color: var(--muted); padding: 6px; }
.app-ui .cp-btn-cancel { color: var(--muted); background: var(--surface2); border-color: var(--border); }
.app-ui .profile-dropdown { background: #18263b; border-color: #3b506b; border-radius: 12px; margin-right: 0; max-width: calc(100vw - 32px); }
.app-ui .profile-drop-item { padding: 13px 16px; }
.app-ui .profile-drop-item:hover { background: #243b54; }
.app-ui .toast { max-width: calc(100vw - 32px); background: #18263b; box-shadow: 0 8px 32px #0007; }
:is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #86d7f2; outline-offset: 3px; }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid #86d7f2; outline-offset: 4px; }
button, input, select, textarea { font-family: inherit; }

/* Keep all ten desktop columns aligned and reachable on smaller laptops. */
@media (min-width: 901px) {
  .app-ui.dashboard-page .table-wrap { overflow-x: auto; }
  .app-ui.dashboard-page .table-head, .app-ui.dashboard-page .row {
    min-width: 1250px;
    grid-template-columns: 115px 65px 75px minmax(150px, 1.2fr) 135px 100px 110px minmax(160px, 1fr) 80px 130px;
    column-gap: 8px;
  }
}
@media (max-width: 1100px) {
  .app-ui .wrap { padding: 24px; }
  .app-ui .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-ui header > div { max-width: 100%; }
}
@media (max-width: 900px) {
  .app-ui.dashboard-page .table-wrap { background: transparent; border: 0; overflow: visible; }
  .app-ui.dashboard-page .row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; padding: 18px; }
  .app-ui.dashboard-page .row > div:nth-child(1) { padding-right: 115px; }
  .app-ui.dashboard-page .row > div:nth-child(4) { margin-bottom: 5px; }
  .app-ui.dashboard-page .row > div:nth-child(7) { top: 18px; right: 18px; }
  .app-ui.dashboard-page .row .sp-col, .app-ui.dashboard-page .row .ud-col { display: block; }
  .app-ui.dashboard-page .row .sp-col::before { font: 12px 'Hind Siliguri', sans-serif; color: var(--muted); }
  .app-ui.dashboard-page .row > div:nth-child(2)::before { content: 'INDEX: '; }
  .app-ui.dashboard-page .row > div:nth-child(3)::before { content: 'VLAN: '; }
  .app-ui.dashboard-page .row > div:nth-child(9)::before { content: 'Updated: '; }
}
@media (max-width: 600px) {
  .app-ui .wrap { padding: 18px 14px 32px; }
  .app-ui header { padding-bottom: 18px; gap: 16px; margin-bottom: 18px; }
  .app-ui .logo h1 { font-size: 20px; }
  .app-ui .logo-icon { width: 42px; height: 42px; }
  .app-ui .header-right, .app-ui .user-info { flex-wrap: wrap; gap: 8px; }
  .app-ui .admin-nav, .app-ui .nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; margin-bottom: 20px; }
  .app-ui .nav a, .app-ui .nav-btn { white-space: nowrap; flex-shrink: 0; padding: 8px 12px; font-size: 13px; }
  .app-ui .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-ui .stat { padding: 18px 16px; }
  .app-ui .stat-val { font-size: 28px; }
  .app-ui .stat-label { font-size: 11px; letter-spacing: .3px; }
  .app-ui .toolbar { padding: 12px; }
  .app-ui .search-box { min-width: 0; }
  .app-ui .toolbar input, .app-ui .toolbar select, .app-ui .form-input, .app-ui .cp-form-input { font-size: 16px; }
  .app-ui .onu-hero, .app-ui .info-card, .app-ui .chart-card, .app-ui .worst-card { padding: 18px; }
  .app-ui .onu-hero-left { gap: 12px; }
  .app-ui .onu-name { font-size: 21px; }
  .app-ui .card-header { padding: 18px; }
  .app-ui.autofind-page .main-card { padding: 18px; }
  .app-ui.autofind-page .card-header { padding: 0; }
  .app-ui .modal, .app-ui .cp-modal { padding: 24px 18px; }
}

/* Login retains its light form surface and existing validation states. */
body.login-ui { background: #0b1526; }
.login-ui .page { min-height: 100dvh; grid-template-columns: 1.1fr 1fr; }
.login-ui .panel-left { background: radial-gradient(ellipse at 20% 30%, #234760, transparent 65%), #0d192b; }
.login-ui .brand-title { font-size: clamp(32px, 4vw, 56px); letter-spacing: -1.5px; }
.login-ui .brand-desc { font-size: 16px; line-height: 1.9; }
.login-ui .panel-right { --muted: #52647a; color-scheme: light; background: #f5f7fb; padding: 56px clamp(32px, 6vw, 100px); }
.login-ui .panel-right::before { background: #67c9ed; }
.login-ui .f-title { font-size: 32px; }
.login-ui .f-logo-icon { background: #204e6d; box-shadow: none; }
.login-ui .f-btn { background: #205e83; box-shadow: 0 5px 14px #205e8326; min-height: 50px; }
.login-ui .f-btn:hover:not(:disabled) { background: #194e70; box-shadow: 0 6px 18px #205e8333; }
.login-ui input[type="text"], .login-ui input[type="password"] { background: #fff; border-color: #cbd5e1; }
.login-ui input::placeholder { color: #718096; }
.login-ui .access-box { background: #edf2f7; }
.login-ui .panel-right .f-sub, .login-ui .panel-right .f-logo-sub, .login-ui .panel-right .f-footer { color: #52647a; }
.login-ui .stats-strip .stat-l { color: #a0aec2; }
@media (max-width: 768px) {
  .login-ui .page { grid-template-columns: 1fr; }
  .login-ui .panel-left { padding: 26px 24px; }
  .login-ui .brand-title { font-size: 26px; }
  .login-ui .panel-right { padding: 32px 24px; }
  .login-ui .f-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}