/* NEXON SMS premium operations theme — final visual override layer. */
:root {
  --navy: #071523;
  --blue: #2563eb;
  --bg: #edf2f7;
  --text: #102033;
  --muted: #66768a;
  --line: #d9e2ec;
  --green: #059669;
  --amber: #c87908;
  --red: #dc3545;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --shadow: 0 18px 45px rgba(15, 37, 64, 0.08);
  --premium-blue: #2563eb;
  --premium-cyan: #22d3ee;
  --premium-ink: #071523;
  --premium-platinum: #edf2f7;
}

html,
body,
main {
  background: var(--premium-platinum);
}

body {
  background-image:
    radial-gradient(circle at 84% 2%, rgba(37, 99, 235, 0.08), transparent 26rem),
    radial-gradient(circle at 15% 85%, rgba(34, 211, 238, 0.04), transparent 30rem);
  background-attachment: fixed;
  color: var(--text);
}

.sidebar {
  border-right-color: rgba(148, 163, 184, 0.13);
  background:
    radial-gradient(circle at 18% 1%, rgba(37, 99, 235, 0.32), transparent 19rem),
    radial-gradient(circle at 95% 78%, rgba(34, 211, 238, 0.08), transparent 20rem),
    linear-gradient(180deg, #0c2038 0%, #071523 54%, #040b13 100%);
  box-shadow: 14px 0 42px rgba(3, 12, 23, 0.12);
}

.brand {
  border-bottom-color: rgba(148, 163, 184, 0.13);
}

.brand-logo {
  border-color: rgba(147, 197, 253, 0.25) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(37, 99, 235, 0.1);
}

.brand small {
  color: #7f94ad;
}

.sidebar nav button {
  color: #92a4b9;
  letter-spacing: 0.02em;
}

.sidebar nav button:hover {
  background: rgba(148, 163, 184, 0.08);
}

.sidebar nav button.active {
  border-color: rgba(96, 165, 250, 0.3);
  background: linear-gradient(100deg, rgba(37, 99, 235, 0.42), rgba(14, 116, 144, 0.15));
  color: #fff;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 8px 22px rgba(3, 13, 28, 0.17);
}

.sidebar nav button.active .nav-icon {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow:
    0 7px 18px rgba(37, 99, 235, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.sidebar nav button::before {
  background: linear-gradient(#67e8f9, #60a5fa);
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.7);
}

.side-foot {
  border-top-color: rgba(148, 163, 184, 0.12);
  background: rgba(2, 8, 16, 0.3);
}

main > header {
  border-bottom-color: rgba(148, 163, 184, 0.22);
  background: rgba(249, 251, 253, 0.84);
  box-shadow: 0 8px 28px rgba(15, 37, 64, 0.045);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

main > header h1 {
  color: #0b1929;
  font-weight: 800;
  letter-spacing: -0.55px;
}

main > header p {
  color: #7a8899;
}

.view.active {
  animation: premium-view-in 0.32s ease both;
}

@keyframes premium-view-in {
  from {
    transform: translateY(5px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.primary {
  border-color: #2563eb;
  background: linear-gradient(135deg, #2f7cf4 0%, #2563eb 48%, #1d4ed8 100%);
  color: #fff;
  box-shadow:
    0 9px 22px rgba(37, 99, 235, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 13px 28px rgba(37, 99, 235, 0.3);
}

.secondary,
.system-button,
.icon-button {
  border-color: #d5dee9;
  background: rgba(255, 255, 255, 0.9);
  color: #43556b;
  box-shadow: 0 4px 13px rgba(15, 37, 64, 0.04);
}

.secondary:hover:not(:disabled),
.system-button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  border-color: #8db8f8;
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.1);
}

.management-scope {
  border-color: #cbd9e8;
  border-radius: 12px;
  padding: 11px 15px;
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.96), rgba(247, 250, 252, 0.96)), #fff;
  box-shadow: 0 5px 18px rgba(15, 37, 64, 0.035);
}

.management-scope i {
  background: #2563eb;
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, 0.1),
    0 0 14px rgba(37, 99, 235, 0.32);
}

.management-scope b {
  color: #23466f;
}

.accounts-hero,
.records-hero,
.funding-hero,
.guide-hero,
.provider-hero,
.automation-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(125, 180, 235, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% -20%, rgba(34, 211, 238, 0.28), transparent 18rem),
    radial-gradient(circle at 8% 140%, rgba(59, 130, 246, 0.26), transparent 21rem),
    linear-gradient(125deg, #071523 0%, #0e2c4c 56%, #123d65 100%);
  color: #fff;
  box-shadow:
    0 22px 48px rgba(7, 21, 35, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

.accounts-hero::before,
.records-hero::before,
.funding-hero::before,
.guide-hero::before,
.automation-hero::before {
  position: absolute;
  z-index: -1;
  top: -88px;
  right: 8%;
  width: 235px;
  height: 235px;
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: 50%;
  box-shadow:
    0 0 0 36px rgba(125, 211, 252, 0.035),
    0 0 0 78px rgba(96, 165, 250, 0.026);
  content: '';
}

.accounts-hero small,
.records-hero small,
.funding-hero small,
.guide-hero small,
.provider-hero small,
.automation-hero small {
  color: #7dd3fc;
  font-weight: 850;
  letter-spacing: 0.18em;
}

.accounts-hero h2,
.records-hero h2,
.funding-hero h2,
.guide-hero h2,
.provider-hero h2,
.automation-hero h2 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.45px;
}

.accounts-hero p,
.records-hero p,
.funding-hero p,
.guide-hero p,
.provider-hero p,
.automation-hero p {
  color: #c4d4e7;
}

.accounts-hero .secondary,
.records-hero .secondary,
.provider-hero .secondary,
.funding-hero .secondary,
.guide-hero .secondary,
.automation-hero .secondary {
  border-color: rgba(186, 230, 253, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fbff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.accounts-hero .secondary:hover,
.records-hero .secondary:hover,
.provider-hero .secondary:hover,
.funding-hero .secondary:hover,
.guide-hero .secondary:hover,
.automation-hero .secondary:hover {
  border-color: rgba(186, 230, 253, 0.65);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.metrics article,
.accounts-metrics article,
.records-metrics article,
.provider-metrics article,
.automation-metrics article,
.funding-metrics article,
.month-metrics p,
.capacity-metrics p,
.tech-card {
  border-color: #d9e2ec;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)), #fff;
  box-shadow:
    0 12px 32px rgba(15, 37, 64, 0.06),
    inset 0 1px #fff;
}

.metrics article,
.accounts-metrics article,
.records-metrics article,
.provider-metrics article,
.automation-metrics article,
.funding-metrics article {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.metrics article:hover,
.accounts-metrics article:hover,
.records-metrics article:hover,
.provider-metrics article:hover,
.automation-metrics article:hover,
.funding-metrics article:hover {
  transform: translateY(-2px);
  border-color: #bdd3ee;
  box-shadow: 0 17px 38px rgba(15, 37, 64, 0.09);
}

.metrics strong,
.accounts-metrics strong,
.records-metrics strong,
.provider-metrics strong,
.automation-metrics strong,
.funding-metrics strong {
  color: #0d2138;
  font-weight: 800;
  letter-spacing: -0.55px;
}

.accounts-metrics article::after {
  background: linear-gradient(#22d3ee, #2563eb);
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, 0.09),
    0 0 12px rgba(34, 211, 238, 0.35);
}

.panel,
.accounts-panel,
.records-panel,
.provider-panel,
.route-panel,
.automation-panel,
.automation-guard,
.funding-panel,
.guide-detail,
.allocation-card {
  border-color: #d8e2ec;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 16px 40px rgba(15, 37, 64, 0.065),
    inset 0 1px #fff;
}

.panel-head,
.accounts-panel-head,
.records-panel-head,
.provider-panel-head,
.automation-panel-head,
.funding-panel-head {
  border-bottom-color: #e1e8f0;
  background: linear-gradient(180deg, #fff, #fbfcfe);
}

.toolbar,
.accounts-toolbar,
.records-toolbar,
.provider-toolbar {
  border-bottom-color: #e1e8f0;
  background: rgba(248, 250, 252, 0.72);
}

input,
select,
textarea,
.composer textarea {
  border-color: #d6e0eb !important;
  background-color: #f8fafc !important;
  color: #17283c !important;
  box-shadow: inset 0 1px 2px rgba(15, 37, 64, 0.025);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #b9cce2 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #60a5fa !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11) !important;
}

table thead th,
.accounts-table thead th,
.records-table thead th,
.funding-table thead th {
  border-bottom-color: #dce5ef;
  background: #f3f6fa;
  color: #66768a;
  font-weight: 750;
  letter-spacing: 0.025em;
}

table tbody tr,
.accounts-table tbody tr,
.records-table tbody tr,
.funding-table tbody tr {
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease;
}

table tbody tr:hover,
.accounts-table tbody tr:hover,
.records-table tbody tr:hover,
.funding-table tbody tr:hover {
  background: #f4f8ff;
  box-shadow: inset 3px 0 #60a5fa;
}

table td,
table th {
  border-bottom-color: #e5ebf2;
}

.status,
.funding-kind,
.funding-status,
.badge,
.chip {
  border-radius: 999px;
  font-weight: 750;
}

.modal {
  overflow: hidden;
  border: 1px solid rgba(184, 199, 216, 0.7);
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 36px 90px rgba(2, 12, 27, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.55);
}

.modal-head {
  border-bottom-color: #dce5ef;
  background:
    radial-gradient(circle at 90% 0, rgba(96, 165, 250, 0.12), transparent 17rem),
    linear-gradient(145deg, #fff, #f7faff);
}

.modal-head h2,
.modal-head h3 {
  color: #0d2138;
  font-weight: 800;
  letter-spacing: -0.35px;
}

.modal-foot {
  border-top-color: #dce5ef;
  background: rgba(248, 250, 252, 0.95);
  box-shadow: 0 -10px 26px rgba(15, 37, 64, 0.035);
}

.toast {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(2, 12, 27, 0.24);
  backdrop-filter: blur(18px);
}

.chat-shell,
.task-modal .modal-body,
.seat-detail-layout {
  background: #f2f5f9;
}

.conversation-list button.active,
.seat-row.active,
.account-row.active {
  border-color: #a9c8f1;
  background: linear-gradient(120deg, #eef5ff, #f4f9ff);
  box-shadow: inset 3px 0 #2563eb;
}

.automation-template-card {
  border-color: #d8e2ec;
  background: linear-gradient(145deg, #fff, #f8fafc);
  box-shadow: 0 10px 26px rgba(15, 37, 64, 0.05);
}

.automation-template-card:hover {
  border-color: #adc8e9;
  box-shadow: 0 14px 32px rgba(15, 37, 64, 0.08);
}

body.theme-dark {
  --bg: #08111c;
  --surface: #0d1b2a;
  --surface-soft: #102236;
  --text: #e6edf5;
  --muted: #8fa2b7;
  --line: #21364b;
  --premium-platinum: #08111c;
}

body.theme-dark,
body.theme-dark main,
body.theme-dark html {
  background: #08111c;
}

body.theme-dark main > header {
  border-bottom-color: #1d3044;
  background: rgba(8, 17, 28, 0.86);
}

body.theme-dark main > header h1,
body.theme-dark .modal-head h2,
body.theme-dark .modal-head h3 {
  color: #edf5ff;
}

body.theme-dark .panel,
body.theme-dark .accounts-panel,
body.theme-dark .records-panel,
body.theme-dark .provider-panel,
body.theme-dark .route-panel,
body.theme-dark .automation-panel,
body.theme-dark .automation-guard,
body.theme-dark .funding-panel,
body.theme-dark .guide-detail,
body.theme-dark .allocation-card,
body.theme-dark .modal,
body.theme-dark .metrics article,
body.theme-dark .accounts-metrics article,
body.theme-dark .records-metrics article,
body.theme-dark .provider-metrics article,
body.theme-dark .automation-metrics article,
body.theme-dark .funding-metrics article {
  border-color: #20364b;
  background: #0d1b2a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

body.theme-dark .panel-head,
body.theme-dark .accounts-panel-head,
body.theme-dark .records-panel-head,
body.theme-dark .provider-panel-head,
body.theme-dark .automation-panel-head,
body.theme-dark .funding-panel-head,
body.theme-dark .modal-head,
body.theme-dark .modal-foot {
  border-color: #20364b;
  background: #102033;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
  border-color: #294159 !important;
  background-color: #0a1826 !important;
  color: #e6edf5 !important;
}

body.theme-dark table thead th {
  border-color: #23394f;
  background: #102236;
  color: #9fb1c4;
}

body.theme-dark table tbody tr:hover {
  background: #102841;
}

@media (max-width: 1100px) {
  .accounts-metrics,
  .records-metrics,
  .provider-metrics,
  .automation-metrics,
  .funding-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .accounts-hero,
  .records-hero,
  .funding-hero,
  .guide-hero,
  .provider-hero,
  .automation-hero {
    align-items: flex-start;
    padding: 20px;
  }

  .accounts-hero-actions,
  .provider-hero-actions,
  .automation-hero-actions,
  .funding-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .accounts-hero-actions button,
  .provider-hero-actions button,
  .automation-hero-actions button,
  .funding-actions button {
    flex: 1 1 auto;
  }
}

@media (max-width: 520px) {
  .accounts-metrics,
  .records-metrics,
  .provider-metrics,
  .automation-metrics,
  .funding-metrics {
    grid-template-columns: 1fr;
  }

  .accounts-hero,
  .records-hero,
  .funding-hero,
  .guide-hero,
  .provider-hero,
  .automation-hero {
    border-radius: 16px;
  }

  .panel,
  .accounts-panel,
  .records-panel,
  .provider-panel,
  .route-panel,
  .automation-panel,
  .funding-panel {
    border-radius: 14px;
  }
}