/* Final, shared visual layer for every screen. Loaded after page-specific styles. */
:root {
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7fafb;
  --ui-border: #dfe7ec;
  --ui-shadow: 0 10px 28px rgba(24, 46, 68, .055);
  --ui-shadow-hover: 0 16px 34px rgba(24, 46, 68, .09);
  --ui-accent: #15998d;
  --ui-focus: rgba(21, 153, 141, .22);
}

html.theme-dark {
  --ui-surface: #142338;
  --ui-surface-soft: #101e30;
  --ui-border: #2a3b51;
  --ui-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  --ui-shadow-hover: 0 16px 34px rgba(0, 0, 0, .28);
  --ui-focus: rgba(75, 197, 181, .3);
}

html { scroll-behavior: smooth; }
body, button, input, textarea, select {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-optical-sizing: auto;
}
body { font-size: 15px; line-height: 1.82; }
button, input, textarea, select { font-size: 14px; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

.sidebar {
  box-shadow: -12px 0 34px rgba(12, 27, 46, .12);
}
.brand-mark { flex: 0 0 auto; }
.side-nav {
  scrollbar-width: thin;
  scrollbar-color: #e4485a rgba(255, 255, 255, .08);
}
.side-nav::-webkit-scrollbar { width: 4px; height: 3px; }
.side-nav::-webkit-scrollbar-track { background: rgba(255, 255, 255, .07); border-radius: 8px; }
.side-nav::-webkit-scrollbar-thumb { background: #e4485a; border-radius: 8px; }
.side-nav::-webkit-scrollbar-thumb:hover { background: #ff6675; }
.nav-item { min-height: 44px; border-radius: 11px; }
.nav-item.active { background: linear-gradient(100deg, rgba(28, 191, 174, .2), rgba(255, 255, 255, .07)); }
.nav-item:focus-visible { outline-color: rgba(107, 222, 208, .55); outline-offset: -2px; }
.nav-group-toggle[aria-expanded="true"] .nav-chevron { color: #69d5c8; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  min-width: 0;
  backdrop-filter: blur(14px);
}
.top-actions { min-width: 0; }
.breadcrumbs { min-width: 0; }
.breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-wrap { width: 100%; }
.page-view,
.page-view > *,
.panel,
.panel > * { min-width: 0; }
.page-heading { align-items: flex-start; }
#app-shell .page-view .page-heading h1 {
  margin-bottom: 7px;
  font-size: clamp(27px, 2.15vw, 33px);
  line-height: 1.45;
}
#app-shell .page-view .page-heading .muted {
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.9;
}
.eyebrow { letter-spacing: 0; }

.panel,
.stat-card,
.overview-metric,
.overview-channel-chip,
.contact-metric,
.device-registry-card,
.device-summary-card,
.settings-panel,
.key-row,
.api-reference-card,
.api-step {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow);
}
.panel { border-radius: 17px; }
.panel-heading { align-items: flex-start; }
.panel-heading > div { min-width: 0; }
.panel-heading h2 { line-height: 1.55; }
.panel-heading p { max-width: 78ch; font-size: 12.5px; line-height: 1.85; }
.stat-card,
.overview-metric,
.overview-channel-chip,
.contact-metric,
.device-summary-card,
.device-registry-card,
.api-overview-card,
.api-reference-card,
.key-row {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.stat-card:hover,
.contact-metric:hover,
.device-summary-card:hover,
.device-registry-card:hover,
.api-overview-card:hover,
.key-row:hover {
  border-color: #c8ddd9;
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}
html.theme-dark .stat-card:hover,
html.theme-dark .contact-metric:hover,
html.theme-dark .device-summary-card:hover,
html.theme-dark .device-registry-card:hover,
html.theme-dark .api-overview-card:hover,
html.theme-dark .key-row:hover { border-color: #45685f; }

.button {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.55;
}
.button.primary { background-image: linear-gradient(135deg, #19aa9c, #0d887e); }
.button:disabled { filter: saturate(.65); }
.icon-button { flex: 0 0 auto; border-radius: 11px; }
.count-pill,
.status-badge,
.device-online-badge { line-height: 1.65; }

#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#app-shell .page-view select:not([multiple]) {
  min-height: 42px;
  border-radius: 10px;
}
#app-shell .page-view textarea { border-radius: 11px; line-height: 1.9; }
#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#app-shell .page-view select:focus,
#app-shell .page-view textarea:focus {
  border-color: #73bcb2;
  box-shadow: 0 0 0 4px var(--ui-focus);
}
.notice { border-radius: 13px; line-height: 1.9; }
.empty-state,
.device-registry-empty,
.contact-groups-empty,
.serial-stats-empty,
.notification-section-empty {
  line-height: 1.9;
}
.table-scroll {
  max-width: 100%;
  border-color: var(--ui-border);
  border-radius: 13px;
}
thead th { line-height: 1.7; }
tbody td { line-height: 1.8; }
tbody tr:hover { background: rgba(21, 153, 141, .045); }
html.theme-dark tbody tr:hover { background: rgba(97, 205, 190, .07); }

/* The API summary was too compressed at common laptop widths; keep URLs legible. */
#app-shell #view-api .api-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app-shell #view-api .api-overview-card { min-height: 96px; }
#app-shell #view-api .api-overview-card code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  white-space: nowrap;
  scrollbar-width: thin;
}
#app-shell #view-api .api-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app-shell #view-api .api-step { min-height: 112px; }
#app-shell #view-api .api-step p,
#app-shell #view-api .api-reference-card > p,
#app-shell #view-api .api-status-grid span { font-size: 12px; line-height: 1.9; }
#app-shell #view-api .code-block {
  max-width: 100%;
  border-radius: 13px;
  font-size: 12px;
  line-height: 1.9;
  tab-size: 2;
}

/* Contacts are a working data table; keep names and consent readable at a glance. */
#app-shell #view-contacts .contact-form > label { font-size: 13px !important; }
#app-shell #view-contacts .contact-form input,
#app-shell #view-contacts .contact-form select,
#app-shell #view-contacts .contact-form textarea,
#app-shell #view-contacts .contact-group-form input,
#app-shell #view-contacts .contacts-toolbar input,
#app-shell #view-contacts .contacts-toolbar select { font-size: 13px !important; }
#app-shell #view-contacts .contacts-table th { padding: 11px 10px; font-size: 12px; }
#app-shell #view-contacts .contacts-table td { padding: 11px 10px; font-size: 12px !important; }
#app-shell #view-contacts .contact-name { max-width: 220px; font-size: 13px !important; }
#app-shell #view-contacts .contact-phone { font-size: 12px !important; }
#app-shell #view-contacts .contact-email { font-size: 11px !important; }
#app-shell #view-contacts .contact-consent,
#app-shell #view-contacts .contact-group-chip { font-size: 11px; }
#app-shell #view-contacts .contacts-toolbar input,
#app-shell #view-contacts .contacts-toolbar select,
#app-shell #view-contacts .contacts-toolbar .button { min-height: 40px; }

/* Message tables and filters keep their controls usable on narrow layouts. */
#app-shell #view-inbox .inbox-tools,
#app-shell #view-outbox .outbox-actions,
#app-shell #view-sent .sent-page-actions,
#app-shell #view-contacts .contacts-toolbar,
#app-shell #view-devices .device-registry-toolbar {
  gap: 10px;
}
#app-shell #view-inbox .inbox-table td,
#app-shell #view-outbox .outbox-table td,
#app-shell #view-sent .sent-table td { vertical-align: middle; }
#app-shell #view-compose .compose-layout { align-items: stretch; }
#app-shell #view-compose .compose-card,
#app-shell #view-compose .note-card { border-radius: 17px; }
#app-shell #view-bulk .bulk-compose-panel,
#app-shell #view-campaigns .campaign-builder,
#app-shell #view-campaigns .campaign-list-panel,
#app-shell #view-appointments .appointment-manager,
#app-shell #view-polls .campaign-builder,
#app-shell #view-lottery .lottery-builder { border-radius: 17px; }
#app-shell #view-settings .settings-panel { border-radius: 17px; }
#app-shell #view-settings .setting-row,
#app-shell #view-settings .setting-toggle,
#app-shell #view-settings .settings-link { min-height: 62px; }
#app-shell #view-settings .setting-row small,
#app-shell #view-settings .setting-toggle small,
#app-shell #view-settings .settings-link small { font-size: 12px; line-height: 1.8; }

.notification-panel { border-radius: 18px; }
.notification-item { min-height: 72px; border: 1px solid transparent; }
.notification-item:hover,
.notification-item:focus-visible { border-color: #e3e9ed; }
html.theme-dark .notification-item:hover,
html.theme-dark .notification-item:focus-visible { border-color: #3b5068; }
.notification-item-copy strong { font-size: 13px; }
.notification-item-copy small { font-size: 11.5px; }
.notification-item-state { font-size: 10px; }

@media (min-width: 1500px) {
  #app-shell #view-api .api-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  #app-shell #view-api .api-overview-grid,
  #app-shell #view-api .api-steps-grid,
  #app-shell #view-api .api-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-shell #view-api .api-reference-grid,
  #app-shell #view-api .api-samples-grid { grid-template-columns: 1fr; }
  #app-shell #view-contacts .contacts-top-grid { grid-template-columns: 1fr; }
  #app-shell #view-contacts .contacts-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  html { scroll-behavior: auto; }
  .topbar { height: 60px; padding-inline: 12px; }
  .top-actions { gap: 7px; }
  .breadcrumbs { max-width: 42vw; font-size: 11px; }
  .page-wrap { padding: 20px 12px 30px; }
  #app-shell .page-view .page-heading { gap: 10px; margin-bottom: 18px; }
  #app-shell .page-view .page-heading h1 { font-size: 25px; }
  #app-shell .page-view .page-heading .muted { font-size: 13px; }
  .panel { padding: 16px 13px; border-radius: 15px; }
  .panel-heading { gap: 9px; }
  .panel-heading h2 { font-size: 17px; }
  .panel-heading p { font-size: 12px; }
  .button { min-height: 42px; }
  #app-shell #view-api .api-overview-grid,
  #app-shell #view-api .api-steps-grid,
  #app-shell #view-api .api-status-grid { grid-template-columns: 1fr; }
  #app-shell #view-api .api-step { min-height: 0; }
  #app-shell #view-contacts .contacts-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app-shell #view-contacts .contacts-toolbar { align-items: stretch; }
  #app-shell #view-contacts .contacts-toolbar input,
  #app-shell #view-contacts .contacts-toolbar select,
  #app-shell #view-contacts .contacts-toolbar .button { width: 100%; max-width: none; }
  .notification-panel { inset-block-start: 64px; }
  .side-nav { scrollbar-width: thin; scrollbar-color: #e4485a rgba(255, 255, 255, .12); }
  .side-nav::-webkit-scrollbar { display: block; height: 3px; }
}

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

/* Second pass: readable data controls and consistent secondary workflows. */
.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 100;
  padding: 10px 14px;
  border: 1px solid #b9ddd7;
  border-radius: 11px;
  color: #0b665e;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 38, 58, .2);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }
#main-content:focus { outline: none; }
.page-view { scroll-margin-block-start: 84px; }

#app-shell .page-view .campaign-form label,
#app-shell .page-view .lottery-form label,
#app-shell .page-view .appointment-form label,
#app-shell .page-view .sent-filters label { font-size: 13px; line-height: 1.75; }
#app-shell .page-view .campaign-form input,
#app-shell .page-view .campaign-form select,
#app-shell .page-view .campaign-form textarea,
#app-shell .page-view .lottery-form input,
#app-shell .page-view .lottery-form select,
#app-shell .page-view .appointment-form input,
#app-shell .page-view .appointment-form select,
#app-shell .page-view .appointment-form textarea { min-height: 44px; font-size: 14px; }
#app-shell .page-view .campaign-form textarea,
#app-shell .page-view .appointment-form textarea { min-height: 100px; }
#app-shell .page-view .campaign-form label small,
#app-shell .page-view .lottery-form label small,
#app-shell .page-view .appointment-form label small,
#app-shell .page-view .campaign-appointment-fields > small { font-size: 12px; line-height: 1.8; }
#app-shell .page-view .campaign-poll-preview,
#app-shell .page-view .campaign-row-main small,
#app-shell .page-view .appointment-date small,
#app-shell .page-view .appointment-info small,
#app-shell .page-view .lottery-history-row small { font-size: 12px; line-height: 1.8; }
#app-shell .page-view .campaign-row-main strong,
#app-shell .page-view .appointment-date strong,
#app-shell .page-view .appointment-info strong,
#app-shell .page-view .lottery-history-row strong { font-size: 13px; line-height: 1.7; }
#app-shell .page-view .campaign-kind-chip,
#app-shell .page-view .appointment-status,
#app-shell .page-view .sent-status,
#app-shell .page-view .sent-delivery { font-size: 11px; line-height: 1.65; }
#app-shell .page-view .campaign-row-actions .button,
#app-shell .page-view .appointment-actions .button,
#app-shell .page-view .sent-details-button,
#app-shell .page-view .sent-pagination .button,
#app-shell .page-view .contacts-table .button,
#app-shell .page-view .group-send-button,
#app-shell .page-view .group-edit-button {
  min-height: 38px;
  padding-inline: 11px;
  font-size: 12px;
}
#app-shell #view-sent .sent-table thead th,
#app-shell #view-sent .sent-table tbody td { font-size: 12px; }
#app-shell #view-sent .sent-date,
#app-shell #view-sent .sent-details-grid small,
#app-shell #view-sent .sent-detail-message small,
#app-shell #view-sent .sent-detail-error small { font-size: 11px; }
#app-shell #view-contacts .contact-group-filter small,
#app-shell #view-contacts .contact-group-filter strong,
#app-shell #view-contacts .contact-group-chip,
#app-shell #view-contacts .contact-consent,
#app-shell #view-contacts .contact-no-group,
#app-shell #view-contacts .contact-updated { font-size: 11px !important; }
#app-shell #view-contacts .group-send-button,
#app-shell #view-contacts .group-edit-button { min-height: 36px; }
#app-shell .page-view .message-id,
#app-shell .page-view .sent-date,
#app-shell .page-view time { font-variant-numeric: tabular-nums; }

html.theme-dark .campaign-builder,
html.theme-dark .lottery-builder,
html.theme-dark .campaign-list-panel,
html.theme-dark .appointment-manager,
html.theme-dark .poll-results-panel,
html.theme-dark .campaign-row,
html.theme-dark .appointment-row,
html.theme-dark .lottery-history-row,
html.theme-dark .api-overview-card,
html.theme-dark .api-reference-card,
html.theme-dark .api-step {
  color: #dce7f1;
  background: #142338;
  border-color: #2a3b51;
}
html.theme-dark .campaign-form label,
html.theme-dark .lottery-form label,
html.theme-dark .appointment-form label,
html.theme-dark .campaign-row-main strong,
html.theme-dark .appointment-date strong,
html.theme-dark .appointment-info strong,
html.theme-dark .lottery-history-row strong,
html.theme-dark .api-reference-title h3,
html.theme-dark .api-step strong { color: #e2ebf4; }
html.theme-dark .campaign-form input,
html.theme-dark .campaign-form select,
html.theme-dark .campaign-form textarea,
html.theme-dark .lottery-form input,
html.theme-dark .lottery-form select,
html.theme-dark .appointment-form input,
html.theme-dark .appointment-form select,
html.theme-dark .appointment-form textarea,
html.theme-dark .campaign-appointment-fields {
  color: #e2ebf5;
  background: #0f1c2c;
  border-color: #34475e;
}
html.theme-dark .campaign-row-main small,
html.theme-dark .appointment-date small,
html.theme-dark .appointment-info small,
html.theme-dark .lottery-history-row small,
html.theme-dark .api-overview-card small,
html.theme-dark .api-overview-card span:not(.api-overview-icon),
html.theme-dark .api-step p,
html.theme-dark .api-reference-card > p { color: #a8b8ca; }
html.theme-dark .campaign-poll-preview { color: #a8cec2; background: #142e2d; border-color: #355a54; }
html.theme-dark .lottery-result { color: #ead49b; background: #302b1f; border-color: #5d4b2e; }
html.theme-dark .appointment-status.scheduled { color: #e5c36e; background: #382e1b; }
html.theme-dark .appointment-status.accepted { color: #91dbb9; background: #17362f; }
html.theme-dark .appointment-status.failed,
html.theme-dark .appointment-status.uncertain,
html.theme-dark .appointment-status.skipped { color: #f0a5a9; background: #38242d; }

@media (max-width: 680px) {
  .skip-link { inset-block-start: 6px; inset-inline-start: 6px; }
  #app-shell .page-view .page-heading h1 { font-size: 24px; }
  #app-shell .page-view .campaign-row-actions .button,
  #app-shell .page-view .appointment-actions .button { flex: 1 1 auto; }
  #app-shell .page-view .appointment-actions { flex-wrap: wrap; }
  .nav-item, .nav-item.active { font-size: 10px; line-height: 1.45; }
  .nav-icon { font-size: 18px; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 9px; }
  .top-actions { gap: 5px; }
  .page-wrap { padding-inline: 10px; }
  .panel { padding-inline: 11px; }
  #app-shell .page-view .page-heading h1 { font-size: 22px; }
  #app-shell .page-view .campaign-form input,
  #app-shell .page-view .campaign-form select,
  #app-shell .page-view .lottery-form input,
  #app-shell .page-view .lottery-form select,
  #app-shell .page-view .appointment-form input,
  #app-shell .page-view .appointment-form select { min-height: 42px; }
}

/* Keep the sidebar's compact device indicator anchored to its own card. */
.sidebar .device-mini { position: relative; overflow: visible; }
.sidebar .device-mini-top { position: relative; min-height: 20px; }
@media (max-width: 1100px) {
  .sidebar .device-mini-top { width: 100%; justify-content: center; }
  .sidebar .device-mini-top .tiny-status {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: calc(50% - 20px);
    margin: 0;
    z-index: 1;
  }
  .sidebar.is-expanded .device-mini-top { width: auto; justify-content: space-between; }
  .sidebar.is-expanded .device-mini-top .tiny-status { position: static; margin: 0; }
}
@media (min-width: 1101px) {
  .sidebar.is-collapsed .device-mini-top { justify-content: center; }
  .sidebar.is-collapsed .device-mini-top .tiny-status {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: calc(50% - 20px);
    margin: 0;
    z-index: 1;
  }
}

/* Unified type scale and contrast pass across every panel page. */
#app-shell .page-view {
  color: #30465d;
  font-size: 15px;
}
#app-shell .page-view .page-heading h1 {
  font-size: clamp(27px, 2.35vw, 31px) !important;
  font-weight: 800;
  line-height: 1.38;
}
#app-shell .page-view .eyebrow {
  margin-bottom: 6px;
  color: #27877e;
  font-size: 12.5px !important;
  font-weight: 750;
  line-height: 1.65;
}
#app-shell .page-view .page-heading .muted {
  color: #617489;
  font-size: 14px !important;
  line-height: 1.85;
}
#app-shell .page-view .panel-heading h2,
#app-shell .page-view > h2,
#app-shell .page-view .section-heading h2 {
  color: #273d53;
  font-size: 19px;
  font-weight: 780;
  line-height: 1.5;
}
#app-shell .page-view .panel-heading p,
#app-shell .page-view .message-page-intro small,
#app-shell .page-view .notice,
#app-shell .page-view .form-hint,
#app-shell .page-view .panel-footnote,
#app-shell .page-view .device-summary-footnote {
  color: #65788c;
  font-size: 13px !important;
  line-height: 1.85;
}
#app-shell .page-view small,
#app-shell .page-view .empty-state,
#app-shell .page-view .device-registry-empty,
#app-shell .page-view .notification-section-empty,
#app-shell .page-view .overview-diagnostic-summary,
#app-shell .page-view .overview-channel-empty,
#app-shell .page-view .channel-filter-empty {
  color: #667a8e;
  font-size: 12.5px !important;
  line-height: 1.8;
}
#app-shell .page-view label,
#app-shell .page-view .bulk-label,
#app-shell .page-view .device-form-field,
#app-shell .page-view .policy-field {
  color: #3f556b;
  font-size: 13.5px !important;
  font-weight: 650;
  line-height: 1.7;
}
#app-shell .page-view .button:not(.icon-button),
#app-shell .page-view button:not(.icon-button):not(.nav-item):not(.nav-group-toggle) {
  font-size: 13px;
  line-height: 1.55;
}
#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#app-shell .page-view select:not([multiple]),
#app-shell .page-view textarea {
  color: #2e455c;
  font-size: 14px;
}
#app-shell .page-view .status-badge,
#app-shell .page-view .device-online-badge,
#app-shell .page-view .device-registry-state,
#app-shell .page-view .device-registry-observation,
#app-shell .page-view .sent-status,
#app-shell .page-view .sent-delivery,
#app-shell .page-view .contact-consent,
#app-shell .page-view .contact-group-chip {
  font-size: 12px !important;
  line-height: 1.6;
}
#app-shell .page-view th,
#app-shell .page-view td {
  font-size: 12.5px;
  line-height: 1.75;
}
#app-shell #view-contacts .contacts-table th,
#app-shell #view-contacts .contacts-table td {
  font-size: 12.5px !important;
  line-height: 1.65;
}
#app-shell #view-contacts .contact-email { font-size: 12px !important; }
#app-shell #view-contacts .contact-consent,
#app-shell #view-contacts .contact-group-chip,
#app-shell #view-contacts .contact-no-group,
#app-shell #view-contacts .contact-updated { font-size: 11.5px !important; }
#app-shell #view-contacts .contact-form input,
#app-shell #view-contacts .contact-form select,
#app-shell #view-contacts .contact-form textarea,
#app-shell #view-contacts .contact-group-form input,
#app-shell #view-contacts .contacts-toolbar input,
#app-shell #view-contacts .contacts-toolbar select { font-size: 14px !important; }
.sidebar .nav-item { font-size: 13px; }
.sidebar .nav-subitem { font-size: 12.5px; }
.sidebar .device-mini strong { font-size: 12px; }
.sidebar .device-mini span:not(.device-icon),
.sidebar .device-mini small,
.sidebar .version,
.sidebar .logout { font-size: 11.5px; }
.table-scroll { scrollbar-width: thin; scrollbar-color: #91aaa9 #eef2f4; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #91aaa9; }

.encoding-route-guidance {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #ead9b6;
  border-radius: 11px;
  color: #775c28;
  background: #fff9eb;
  font-size: 12.5px;
  line-height: 1.85;
}
.encoding-route-guidance.is-routed {
  border-color: #c8e5dc;
  color: #286b61;
  background: #f0faf6;
}
.encoding-route-guidance.is-blocked {
  border-color: #efc9c9;
  color: #98464d;
  background: #fff4f4;
}
html.theme-dark #app-shell .page-view { color: #dce7f1; }
html.theme-dark #app-shell .page-view .eyebrow { color: #73cbbf; }
html.theme-dark #app-shell .page-view .page-heading .muted,
html.theme-dark #app-shell .page-view .panel-heading p,
html.theme-dark #app-shell .page-view small,
html.theme-dark #app-shell .page-view .form-hint { color: #afbed0; }
html.theme-dark #app-shell .page-view .panel-heading h2,
html.theme-dark #app-shell .page-view label { color: #e0e9f2; }
html.theme-dark .encoding-route-guidance.is-routed { color: #a6ded2; background: #142e2d; border-color: #355a54; }
html.theme-dark .encoding-route-guidance.is-blocked { color: #f0a5a9; background: #38242d; border-color: #69404a; }

/* Raise page-specific microcopy and metadata to a readable floor. */
#app-shell .page-view p,
#app-shell .page-view small,
#app-shell .page-view time,
#app-shell .page-view .status-badge,
#app-shell .page-view .device-online-badge,
#app-shell .page-view .device-registry-state,
#app-shell .page-view .device-registry-observation,
#app-shell .page-view .device-registry-visible-count,
#app-shell .page-view .device-registry-detail span,
#app-shell .page-view .device-registry-foot-meta span,
#app-shell .page-view strong,
#app-shell .page-view .device-correlation-next strong,
#app-shell .page-view .device-correlation-next p,
#app-shell .page-view .channel-results-count,
#app-shell .page-view .device-registry :is(span, small, p, strong, button),
#app-shell .page-view .modem-info-item strong,
#app-shell .page-view .ussd-result,
#app-shell .page-view .ussd-guidance,
#app-shell .page-view .ussd-howto-step,
#app-shell .page-view .contact-groups-empty,
#app-shell .page-view .contacts-import-summary,
#app-shell .page-view .bulk-file-name,
#app-shell .page-view .sent-id,
#app-shell .page-view .sent-recipient,
#app-shell .page-view .sent-status,
#app-shell .page-view .sent-delivery,
#app-shell .page-view .key-state,
#app-shell .page-view .settings-callout p,
#app-shell .page-view .inbox-forward-state,
#app-shell .page-view .inbox-forward-save-status,
#app-shell .page-view .contact-email,
#app-shell .page-view .contact-updated,
#app-shell .page-view .contact-no-group,
#app-shell .page-view .contact-group-filter strong,
#app-shell .page-view .group-total,
#app-shell .page-view .contact-edit-action,
#app-shell .page-view .contact-consent-action,
#app-shell .page-view .gateway-control-host,
#app-shell .page-view .policy-smsc-readout strong,
#app-shell .page-view .error-text,
#app-shell .page-view .message-date,
#app-shell .page-view .message-id,
#app-shell .page-view .key-prefix,
#app-shell .page-view .page-footer,
#app-shell .page-view .code-block,
#app-shell .page-view .encoding-route-guidance {
  font-size: clamp(12.5px, 0.88em, 16px) !important;
  line-height: 1.7;
}

/* Page-specific cards have extra-specific compact rules; keep their labels readable too. */
#app-shell #view-devices .device-summary-card :is(span, small, strong, p),
#app-shell #view-devices .device-registry-card :is(span, small, strong, p, button),
#app-shell #view-contacts .contact-group-filter :is(strong, small),
#app-shell #view-policy .policy-smsc-readout :is(strong, span, small, p) {
  font-size: clamp(12.5px, 0.88em, 16px) !important;
}
#app-shell #view-devices .device-summary-card > div > span,
#app-shell #view-devices .device-guide-card > summary small,
#app-shell #view-devices .device-form-field small {
  font-size: clamp(12.5px, 0.88em, 16px) !important;
}

/* At tablet widths the sidebar's own arrow is the only menu toggle; avoid a duplicate in the header. */
@media (min-width: 681px) and (max-width: 1100px) {
  #app-shell .main-area .top-sidebar-toggle { display: none !important; }
}

@media (max-width: 680px) {
  #app-shell .page-view .page-heading h1 { font-size: 25px !important; }
  #app-shell .page-view .page-heading .muted { font-size: 13.5px !important; }
  #app-shell .page-view .panel-heading h2 { font-size: 18px; }
  #app-shell .page-view small { font-size: 12.5px !important; }
  #app-shell .page-view .button:not(.icon-button) { min-height: 42px; }
}

/* Final responsive and readability pass for inbox and hardware status details. */
@media (max-width: 1100px) {
  #app-shell #view-inbox .inbox-panel > .panel-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #app-shell #view-inbox .inbox-panel > .panel-heading > div:first-child {
    flex: 1 1 220px;
    min-width: 0;
  }
  #app-shell #view-inbox .inbox-panel .inbox-tools {
    flex: 1 1 320px;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
  }
  #app-shell #view-inbox .inbox-tools input {
    flex: 1 1 150px;
    width: auto;
    min-width: 140px;
    max-width: 100%;
    min-height: 40px;
    font-size: 13px;
  }
  #app-shell #view-inbox .inbox-tools .count-pill,
  #app-shell #view-inbox .inbox-tools .button {
    flex: 0 0 auto;
  }
}

#app-shell .page-view .line-state {
  min-height: 25px;
  padding: 3px 7px;
  gap: 5px;
  border-radius: 8px;
  font: 11px/1.55 "Vazirmatn", Tahoma, sans-serif;
}
#app-shell .page-view .line-state i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}
#app-shell .page-view .socket-state,
#app-shell .page-view .inbox-status {
  min-height: 24px;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.55;
}
#app-shell #view-inbox .inbox-table th,
#app-shell #view-inbox .inbox-table td {
  font-size: 12px;
}
#app-shell #view-inbox .inbox-table td:first-child strong {
  font-size: 12px;
}
#app-shell #view-inbox .inbox-imported {
  font-size: 11px;
}

/* Keep per-channel inbox forwarding in settings as a compact operational control. */
#app-shell #view-settings .settings-forwarding-panel {
  grid-column: 1 / -1;
  padding: clamp(14px, 1.7vw, 20px);
}
#app-shell #view-settings .settings-forwarding-panel > .panel-heading {
  margin-bottom: 8px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forwarding-note {
  margin: 8px 0 11px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.7;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forwarding-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 10px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-card {
  gap: 8px;
  padding: 12px;
  border-radius: 13px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-channel-icon {
  width: 34px;
  height: 34px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-channel strong {
  font-size: 13px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-channel small,
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-state {
  font-size: 11px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-toggle {
  min-height: 42px;
  gap: 8px;
  padding: 7px 9px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-toggle strong {
  font-size: 12.5px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-toggle small {
  font-size: 11px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-recipient {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-recipient input {
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  font-size: 12px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-card-foot {
  min-height: 34px;
  gap: 8px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-card-foot .button {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 11.5px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-route,
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-save-status {
  font-size: 11px;
}
#app-shell #view-settings .settings-forwarding-panel .inbox-forward-save-status {
  min-height: 0;
  margin: 0;
}

@media (max-width: 680px) {
  #app-shell #view-settings .settings-forwarding-panel {
    padding: 13px 11px;
  }
  #app-shell #view-settings .settings-forwarding-panel .inbox-forwarding-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #app-shell #view-settings .settings-forwarding-panel .inbox-forward-recipient {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* Consistent finish across all panels: clearer hierarchy, stronger contrast,
   and more predictable form/table surfaces without changing page behavior. */
:root {
  --ui-ink: #172f46;
  --ui-muted: #586f84;
  --ui-border: #d8e3e9;
  --ui-surface-soft: #f3f8fa;
}
html.theme-dark {
  --ui-ink: #e7eff6;
  --ui-muted: #b5c4d2;
  --ui-border: #30445b;
  --ui-surface-soft: #17283c;
}

#app-shell .page-view .page-heading {
  padding: 0 2px 14px;
  margin-bottom: 21px;
  border-bottom: 1px solid var(--ui-border);
}
#app-shell .page-view .page-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-bottom: 5px;
  padding: 2px 9px;
  border: 1px solid rgba(21, 153, 141, .16);
  border-radius: 999px;
  background: rgba(21, 153, 141, .07);
  color: #287e74;
  font-size: 12px;
  font-weight: 700;
}
#app-shell .page-view .page-heading h1,
#app-shell .page-view .panel-heading h2 {
  color: var(--ui-ink);
  letter-spacing: -.015em;
}
#app-shell .page-view .page-heading .muted,
#app-shell .page-view .panel-heading p,
#app-shell .page-view .form-hint,
#app-shell .page-view .page-footer,
#app-shell .page-view .muted {
  color: var(--ui-muted);
}
#app-shell .page-view label {
  color: #40576d;
  font-weight: 650;
}
html.theme-dark #app-shell .page-view label { color: #d5e1ec; }

#app-shell .page-view .panel,
#app-shell .page-view .settings-panel {
  border-color: var(--ui-border);
  box-shadow: 0 8px 24px rgba(27, 53, 76, .055);
}
html.theme-dark #app-shell .page-view .panel,
html.theme-dark #app-shell .page-view .settings-panel {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .17);
}

#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#app-shell .page-view select:not([multiple]),
#app-shell .page-view textarea {
  border-color: #d2dee6;
  background-color: #fcfdfe;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
#app-shell .page-view select:not([multiple]):hover,
#app-shell .page-view textarea:hover {
  border-color: #aebfc9;
}
html.theme-dark #app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.theme-dark #app-shell .page-view select:not([multiple]),
html.theme-dark #app-shell .page-view textarea {
  border-color: #3a5068;
  background-color: #101e30;
  color: #e1eaf2;
}
#app-shell .page-view input::placeholder,
#app-shell .page-view textarea::placeholder { color: #75879a; opacity: 1; }
html.theme-dark #app-shell .page-view input::placeholder,
html.theme-dark #app-shell .page-view textarea::placeholder { color: #94a8bb; }

#app-shell .page-view table thead th {
  border-bottom-color: var(--ui-border);
  background: #f0f6f8;
  color: #3e566b;
  font-weight: 750;
}
#app-shell .page-view table tbody td { color: #40566b; }
#app-shell .page-view table tbody tr:not(:last-child) td { border-bottom-color: #e8eef2; }
html.theme-dark #app-shell .page-view table thead th {
  background: #1b2e43;
  color: #d9e5ef;
}
html.theme-dark #app-shell .page-view table tbody td { color: #cad7e3; }
html.theme-dark #app-shell .page-view table tbody tr:not(:last-child) td { border-bottom-color: #2d4056; }

#app-shell .page-view .button:not(:disabled) { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
#app-shell .page-view .button:not(:disabled):hover { transform: translateY(-1px); }
#app-shell .page-view .button.primary:not(:disabled):hover { box-shadow: 0 7px 16px rgba(18, 145, 133, .2); }

@media (max-width: 680px) {
  #app-shell .page-view .page-heading {
    padding-bottom: 11px;
    margin-bottom: 16px;
  }
  #app-shell .page-view .page-heading .eyebrow { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #app-shell .page-view input,
  #app-shell .page-view select,
  #app-shell .page-view textarea,
  #app-shell .page-view .button { transition: none !important; }
  #app-shell .page-view .button:not(:disabled):hover { transform: none; }
}