/* Restore the familiar navy + teal workspace and refine the page-wide scrollbar. */
:root {
  --panel-navy: #10243c;
  --panel-navy-deep: #0a192b;
  --panel-teal: #12a99a;
  --panel-teal-bright: #2bc9b7;
  --page-scroll-track: #edf1f5;
  --page-scroll-thumb: #e4485a;
  scrollbar-color: var(--page-scroll-thumb) var(--page-scroll-track);
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

body,
.login-screen {
  scrollbar-color: var(--page-scroll-thumb) var(--page-scroll-track);
  scrollbar-width: thin;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.login-screen::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.login-screen::-webkit-scrollbar-track { background: var(--page-scroll-track); }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.login-screen::-webkit-scrollbar-thumb {
  border: 2px solid var(--page-scroll-track);
  border-radius: 999px;
  background: var(--page-scroll-thumb);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.login-screen::-webkit-scrollbar-thumb:hover { background: #ff6675; }

.login-main #login-form > label,
.login-main #setup-form > label {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 9px rgba(0, 5, 16, .48);
}

#app-shell .sidebar {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(35, 119, 147, .2), transparent 35%),
    linear-gradient(158deg, #142b47 0%, var(--panel-navy) 45%, var(--panel-navy-deep) 100%);
  border-left: 1px solid rgba(183, 218, 237, .12);
  box-shadow: -14px 0 38px rgba(12, 27, 46, .18);
}
#app-shell .brand-mark {
  display: grid;
  place-items: center;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#app-shell .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(20, 166, 248, .24));
}
#app-shell .nav-item { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
#app-shell .nav-item:hover { background: rgba(255,255,255,.075); }
#app-shell .nav-item.active {
  color: #f7ffff;
  background: linear-gradient(100deg, rgba(25, 188, 171, .24), rgba(255,255,255,.065));
  box-shadow: inset -3px 0 0 var(--panel-teal-bright), 0 5px 16px rgba(0,0,0,.1);
}
#app-shell .nav-item.active .nav-icon { color: #56e1d0; }

html:not(.theme-dark) #app-shell .main-area {
  background-color: #f3f6fa;
  background-image:
    radial-gradient(ellipse at 9% 4%, rgba(27, 174, 158, .075), transparent 32%),
    radial-gradient(ellipse at 91% 26%, rgba(71, 121, 209, .055), transparent 34%);
}
html:not(.theme-dark) #app-shell .topbar {
  background: rgba(255,255,255,.9);
  border-bottom-color: #e5ebf1;
  box-shadow: 0 5px 20px rgba(24,46,68,.045);
}
html:not(.theme-dark) #app-shell .page-view .panel,
html:not(.theme-dark) #app-shell .page-view .settings-panel {
  border-color: #e2e9f0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(23,47,73,.055), 0 1px 2px rgba(23,47,73,.025);
}
html:not(.theme-dark) #app-shell .page-view .panel:hover,
html:not(.theme-dark) #app-shell .page-view .settings-panel:hover {
  border-color: rgba(18,169,154,.28);
  box-shadow: 0 15px 34px rgba(23,47,73,.09);
}
html:not(.theme-dark) #app-shell .page-view .panel-heading h2 { color: #203951; }
html:not(.theme-dark) #app-shell .page-view .panel-heading p { color: #718198; }

#app-shell .tehran-clock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  height: 46px;
  padding: 5px 11px;
  border: 1px solid rgba(25, 158, 146, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(231,248,245,.9));
  box-shadow: 0 5px 16px rgba(18, 74, 91, .075), inset 0 1px rgba(255,255,255,.85);
  color: #17354c;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#app-shell .tehran-clock-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(18,169,154,.11);
  color: #0d9d91;
}
#app-shell .tehran-clock-mark svg { width: 17px; height: 17px; }
#app-shell .tehran-clock-copy { display: grid; line-height: 1.3; }
#app-shell .tehran-clock-time { color: #102b45; font-size: 15px; font-weight: 850; letter-spacing: .25px; }
#app-shell .tehran-clock-date { margin-top: 2px; color: #71869b; font-size: 9px; font-weight: 650; }
#app-shell .tehran-clock-zone {
  margin-inline-start: 2px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(16, 169, 154, .1);
  color: #118c82;
  font-size: 9px;
  font-weight: 800;
}
html.theme-dark #app-shell .tehran-clock {
  border-color: rgba(91, 197, 183, .2);
  background: linear-gradient(135deg, rgba(28,49,70,.94), rgba(18,42,58,.92));
  box-shadow: 0 5px 18px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.035);
  color: #e4f4f6;
}
html.theme-dark #app-shell .tehran-clock-time { color: #effbff; }
html.theme-dark #app-shell .tehran-clock-date { color: #a6bdc9; }
html.theme-dark #app-shell .tehran-clock-mark { background: rgba(33,190,173,.14); color: #62dfd0; }
html.theme-dark #app-shell .tehran-clock-zone { background: rgba(33,190,173,.15); color: #8ce8dc; }

@media (max-width: 680px) {
  #app-shell .tehran-clock { min-width: 0; height: 38px; gap: 6px; padding: 4px 7px; border-radius: 12px; }
  #app-shell .tehran-clock-mark { width: 25px; height: 25px; border-radius: 8px; }
  #app-shell .tehran-clock-mark svg { width: 15px; height: 15px; }
  #app-shell .tehran-clock-time { font-size: 12px; }
  #app-shell .tehran-clock-date,
  #app-shell .tehran-clock-zone { display: none; }
}

html.theme-dark {
  --page-scroll-track: #152338;
}
html.theme-dark #app-shell .sidebar {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(35, 119, 147, .16), transparent 35%),
    linear-gradient(158deg, #102039 0%, #0b1729 100%);
}
html.theme-dark::-webkit-scrollbar-track,
html.theme-dark body::-webkit-scrollbar-track { background: var(--page-scroll-track); }
html.theme-dark::-webkit-scrollbar-thumb,
html.theme-dark body::-webkit-scrollbar-thumb { border-color: var(--page-scroll-track); }

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  #app-shell .nav-item { transition: none; }
}

/* A consistent, refined surface system for cards and panels across the workspace. */
html:not(.theme-dark) #app-shell .page-view :is(.panel, .settings-panel) {
  border: 1px solid rgba(202, 216, 227, .9);
  border-radius: 20px;
  background: linear-gradient(148deg, rgba(255,255,255,.99), rgba(249,252,254,.97));
  box-shadow: 0 12px 30px rgba(23,48,72,.065), 0 2px 7px rgba(23,48,72,.025);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
html:not(.theme-dark) #app-shell .page-view :is(.panel, .settings-panel):hover {
  border-color: rgba(26,163,150,.3);
  box-shadow: 0 16px 38px rgba(23,48,72,.085), 0 3px 9px rgba(23,48,72,.035);
}
#app-shell .page-view :is(
  .stat-card, .overview-metric, .overview-channel-chip, .contact-metric,
  .device-summary-card, .device-registry-card, .device-health-metric,
  .hardware-stat-card, .api-overview-card, .api-reference-card, .api-step,
  .channel-card, .modem-card, .policy-channel-card, .key-row, .device-guide-card,
  .registration-diagnostic-check, .registration-diagnosis-next-step,
  .modem-imei-item, .device-correlation-panel, .sent-summary-card
) {
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(30,58,79,.045), inset 0 1px rgba(255,255,255,.72);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#app-shell .page-view :is(
  .stat-card, .overview-metric, .overview-channel-chip, .contact-metric,
  .device-summary-card, .device-registry-card, .device-health-metric,
  .hardware-stat-card, .api-overview-card, .api-reference-card, .api-step,
  .channel-card, .modem-card, .policy-channel-card, .key-row, .device-guide-card,
  .registration-diagnostic-check, .registration-diagnosis-next-step,
  .modem-imei-item, .device-correlation-panel, .sent-summary-card
) {
  background-image: linear-gradient(145deg, rgba(255,255,255,.62), rgba(245,250,252,.2));
}
@media (hover: hover) and (pointer: fine) {
  #app-shell .page-view :is(
    .stat-card, .overview-metric, .overview-channel-chip, .contact-metric,
    .device-summary-card, .device-registry-card, .device-health-metric,
    .hardware-stat-card, .api-overview-card, .api-reference-card, .api-step,
    .channel-card, .modem-card, .policy-channel-card, .key-row, .device-guide-card,
    .registration-diagnostic-check, .registration-diagnosis-next-step,
    .modem-imei-item, .device-correlation-panel, .sent-summary-card
  ):hover {
    border-color: rgba(36,163,150,.32);
    box-shadow: 0 10px 24px rgba(30,58,79,.085), inset 0 1px rgba(255,255,255,.82);
    transform: translateY(-2px);
  }
}
html.theme-dark #app-shell .page-view :is(.panel, .settings-panel) {
  border-color: rgba(116,148,177,.24);
  border-radius: 20px;
  background: linear-gradient(148deg, rgba(23,40,61,.98), rgba(17,32,50,.98));
  box-shadow: 0 14px 32px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.025);
}
html.theme-dark #app-shell .page-view :is(.panel, .settings-panel):hover {
  border-color: rgba(76,199,182,.3);
  box-shadow: 0 18px 38px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.03);
}
html.theme-dark #app-shell .page-view :is(
  .stat-card, .overview-metric, .overview-channel-chip, .contact-metric,
  .device-summary-card, .device-registry-card, .device-health-metric,
  .hardware-stat-card, .api-overview-card, .api-reference-card, .api-step,
  .channel-card, .modem-card, .policy-channel-card, .key-row, .device-guide-card,
  .registration-diagnostic-check, .registration-diagnosis-next-step,
  .modem-imei-item, .device-correlation-panel, .sent-summary-card
) {
  box-shadow: 0 7px 19px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.035);
  background-image: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
@media (hover: hover) and (pointer: fine) {
  html.theme-dark #app-shell .page-view :is(
    .stat-card, .overview-metric, .overview-channel-chip, .contact-metric,
    .device-summary-card, .device-registry-card, .device-health-metric,
    .hardware-stat-card, .api-overview-card, .api-reference-card, .api-step,
    .channel-card, .modem-card, .policy-channel-card, .key-row, .device-guide-card,
    .registration-diagnostic-check, .registration-diagnosis-next-step,
    .modem-imei-item, .device-correlation-panel, .sent-summary-card
  ):hover {
    border-color: rgba(83,195,179,.34);
    box-shadow: 0 12px 26px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .page-view :is(
    .panel, .settings-panel, .stat-card, .overview-metric, .overview-channel-chip,
    .contact-metric, .device-summary-card, .device-registry-card, .device-health-metric,
    .hardware-stat-card, .api-overview-card, .api-reference-card, .api-step,
    .channel-card, .modem-card, .policy-channel-card, .key-row, .device-guide-card,
    .registration-diagnostic-check, .registration-diagnosis-next-step,
    .modem-imei-item, .device-correlation-panel, .sent-summary-card
  ) { transition: none; }
}

/* Refine data rows so campaign, appointment, lottery and contact lists feel
   like one system while preserving each row's status color. */
#app-shell .page-view :is(
  .campaign-row, .appointment-row, .lottery-history-row, .contact-group-row
) {
  border-radius: 15px;
  box-shadow: 0 5px 16px rgba(30,58,79,.045), inset 0 1px rgba(255,255,255,.72);
  transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
#app-shell .page-view .poll-result-row {
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid #e7edf0;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f9fbfc);
  box-shadow: 0 4px 13px rgba(30,58,79,.04), inset 0 1px rgba(255,255,255,.8);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  #app-shell .page-view :is(
    .campaign-row, .appointment-row, .lottery-history-row, .contact-group-row,
    .poll-result-row
  ):hover {
    box-shadow: 0 9px 22px rgba(30,58,79,.085), inset 0 1px rgba(255,255,255,.82);
    transform: translateY(-1px);
  }
}
#app-shell .page-view :is(
  .campaign-row, .appointment-row, .lottery-history-row, .contact-group-row,
  .poll-result-row
):focus-within {
  box-shadow: 0 0 0 3px rgba(23,166,153,.10), 0 7px 18px rgba(30,58,79,.07);
}
html.theme-dark #app-shell .page-view :is(
  .campaign-row, .appointment-row, .lottery-history-row, .contact-group-row
) {
  box-shadow: 0 7px 19px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.035);
}
html.theme-dark #app-shell .page-view .poll-result-row {
  border-color: #2a3b51;
  background: linear-gradient(145deg, #142338, #101d2d);
  box-shadow: 0 6px 17px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.035);
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .page-view :is(
    .campaign-row, .appointment-row, .lottery-history-row, .contact-group-row,
    .poll-result-row
  ) { transition: none; }
  #app-shell .page-view :is(
    .campaign-row, .appointment-row, .lottery-history-row, .contact-group-row,
    .poll-result-row
  ):hover { transform: none; }
}

/* Cover the specialized cards used by diagnostics, campaigns, inbox and API pages. */
#app-shell .page-view :is(
  .channel-health-metric, .operator-usage-card, .inbox-forward-card,
  .inbox-message-preview, .registration-diagnosis-summary,
  .registration-retry-result, .modem-registration-diagnosis,
  .api-card, .code-card, .feature-card, .visual-panel, .visual-metrics,
  .device-correlation-panel, .modem-info-item, .modem-route-item,
  .modem-signal-item, .inbox-forward-state
) {
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(30,58,79,.05), inset 0 1px rgba(255,255,255,.7);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  #app-shell .page-view :is(
    .channel-health-metric, .operator-usage-card, .inbox-forward-card,
    .inbox-message-preview, .registration-diagnosis-summary,
    .registration-retry-result, .modem-registration-diagnosis,
    .api-card, .code-card, .feature-card, .visual-panel, .visual-metrics,
    .device-correlation-panel, .modem-info-item, .modem-route-item,
    .modem-signal-item, .inbox-forward-state
  ):hover {
    box-shadow: 0 11px 25px rgba(30,58,79,.09), inset 0 1px rgba(255,255,255,.8);
    transform: translateY(-1px);
  }
}
#app-shell .page-view :is(.panel, .settings-panel):focus-within {
  border-color: rgba(23,166,153,.34);
  box-shadow: 0 12px 30px rgba(23,48,72,.075), 0 0 0 3px rgba(23,166,153,.055);
}
#app-shell .notification-panel .notification-item {
  border-radius: 14px;
  transition: box-shadow .18s ease, background-color .18s ease;
}
#app-shell .notification-panel .notification-item:hover {
  box-shadow: 0 6px 16px rgba(31,53,73,.07);
}
html.theme-dark #app-shell .page-view :is(
  .channel-health-metric, .operator-usage-card, .inbox-forward-card,
  .inbox-message-preview, .registration-diagnosis-summary,
  .registration-retry-result, .modem-registration-diagnosis,
  .api-card, .code-card, .feature-card, .visual-panel, .visual-metrics,
  .device-correlation-panel, .modem-info-item, .modem-route-item,
  .modem-signal-item, .inbox-forward-state
) {
  box-shadow: 0 8px 21px rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.035);
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .page-view :is(
    .channel-health-metric, .operator-usage-card, .inbox-forward-card,
    .inbox-message-preview, .registration-diagnosis-summary,
    .registration-retry-result, .modem-registration-diagnosis,
    .api-card, .code-card, .feature-card, .visual-panel, .visual-metrics,
    .device-correlation-panel, .modem-info-item, .modem-route-item,
    .modem-signal-item, .inbox-forward-state
  ) { transition: none; }
}

@media (min-width: 681px) and (max-width: 1100px) {
  #app-shell .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  #app-shell .brand { gap: 5px; }
}