.nav-group{display:grid;gap:3px;position:relative;min-width:0}
.nav-group-toggle{width:100%;position:relative}
.nav-group-toggle.has-active,.nav-group.has-active>.nav-group-toggle{color:#fff;background:rgba(255,255,255,.07)}
.nav-group.has-active>.nav-group-toggle .nav-icon{color:#39cabb}
.nav-label{min-width:0}
.nav-chevron{margin-inline-start:auto;color:#8494aa;font-size:16px;line-height:1;transition:transform .18s ease}
.nav-group.is-open>.nav-group-toggle .nav-chevron{transform:rotate(180deg);color:#43caba}
.nav-submenu{display:none;gap:3px;margin-inline-start:14px;padding-inline-start:9px;border-inline-start:1px solid rgba(255,255,255,.12)}
.nav-group.is-open>.nav-submenu{display:grid}
.nav-subitem{min-height:39px;padding-block:8px;font-size:11px;color:#aab7c9}
.nav-subitem .nav-icon{font-size:14px;color:#849ab3}
.nav-subitem.active{color:#fff;background:#263b56;box-shadow:inset -2px 0 0 #e4485a}
.nav-subitem.active .nav-icon{color:#42caba}
.sidebar-toggle{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.06);color:#cbd5e3;font:22px/1 Tahoma,sans-serif;transition:background .16s,color .16s,transform .16s}
.sidebar-toggle:hover{background:rgba(255,255,255,.13);color:#fff}
.sidebar.is-collapsed .sidebar-toggle span{transform:rotate(180deg)}
.top-sidebar-toggle{display:none}
.message-page-intro{display:flex;align-items:center;gap:13px;margin:0 0 18px;padding:15px 17px;border:1px solid #dcece8;border-radius:15px;background:linear-gradient(115deg,#f2faf8,#fbfdfd 68%,#f4f8fc);box-shadow:0 8px 24px rgba(29,74,85,.035)}
.message-page-intro .intro-icon,.page-heading-mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;color:#258c80;background:#e0f3ef}
.message-page-intro .intro-icon .ui-icon,.page-heading-mark .ui-icon{width:21px;height:21px}
.message-page-intro strong{display:block;color:#315468;font-size:12px;margin-bottom:2px}
.message-page-intro small{display:block;color:#758a99;font-size:10.5px;line-height:1.8}
.page-heading-mark{width:48px;height:48px;flex-basis:48px;border:1px solid #e2eaf2;background:#f2f6fa;color:#5e7a98}
#campaign-builder-slot-campaigns,#campaign-builder-slot-appointments,#campaign-builder-slot-polls,#appointment-manager-slot,#campaign-history-slot-campaigns,#campaign-history-slot-appointments,#campaign-history-slot-polls,#poll-results-slot,#lottery-builder-slot{min-width:0}
.campaign-builder,.appointment-manager,.lottery-builder,.campaign-list-panel,.poll-results-panel{border-radius:16px;box-shadow:0 10px 30px rgba(23,49,72,.055)}
.campaign-builder{border-color:#dcebe8;background:linear-gradient(150deg,#fff,#fbfefd)}
.campaign-builder .panel-heading{padding-bottom:13px;border-bottom:1px solid #edf3f1}
.campaign-builder .panel-heading h2{font-size:15px}
.campaign-builder .campaign-card-icon{width:44px;height:44px;border-radius:14px}
.campaign-builder .campaign-card-icon.poll{color:#5575ae;background:#edf3ff}
.campaign-builder .campaign-card-icon.appointment{color:#a56d25;background:#fff5e5}
.campaign-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.campaign-form>#campaign-name,.campaign-form>#campaign-group,.campaign-form>#campaign-send-at-wrap,.campaign-form>#campaign-appointment-fields,.campaign-form>#campaign-poll-fields,.campaign-form>#campaign-message-label,.campaign-form>#campaign-poll-preview,.campaign-form>#campaign-create{grid-column:1/-1}
.campaign-form>#campaign-appointment-fields,.campaign-form>#campaign-poll-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.campaign-form>#campaign-message-label textarea{min-height:116px}
.campaign-form>#campaign-create{justify-self:start;min-width:190px}
.campaign-consent-note{border-radius:13px;line-height:1.9}
.campaign-list-panel{margin-top:16px}
.appointment-manager{margin-top:16px}
#lottery-builder{max-width:960px}
#lottery-builder .lottery-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
#lottery-builder .lottery-form label:first-child{grid-column:1/-1}
#lottery-builder .lottery-form>.button{grid-column:1/-1}
#lottery-history{margin-top:18px}
.bulk-compose-panel{border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(23,49,72,.055)}
.compose-layout{align-items:stretch}
.compose-card,.note-card{border-radius:16px}
@media(min-width:681px){
  .side-nav{direction:ltr}
  .side-nav>*{direction:rtl}
  .side-nav .nav-submenu{direction:rtl}
}
@media(min-width:1101px){
  .sidebar.is-collapsed{width:76px;padding-inline:10px}
  .sidebar.is-collapsed~.main-area{margin-right:76px}
  .sidebar.is-collapsed .brand{justify-content:center;padding-inline:0}
  .sidebar.is-collapsed .brand-copy,.sidebar.is-collapsed .side-label{display:none}
  .sidebar.is-collapsed .brand-mark{width:42px;height:42px}
  .sidebar.is-collapsed .sidebar-toggle{position:absolute;top:4px;left:0;width:25px;height:25px}
  .sidebar.is-collapsed .sidebar-bottom{display:block}
  .sidebar.is-collapsed .device-mini{display:flex;justify-content:center;padding:9px 4px;margin-bottom:8px}
  .sidebar.is-collapsed .device-mini-top{justify-content:center;margin:0}
  .sidebar.is-collapsed .device-mini strong,.sidebar.is-collapsed .device-mini span:not(.device-icon),.sidebar.is-collapsed .device-mini small{display:none}
  .sidebar.is-collapsed .logout{display:flex;justify-content:center;width:54px;padding:10px 4px;font-size:0;color:transparent}
  .sidebar.is-collapsed .logout .nav-icon{font-size:18px}
  .sidebar.is-collapsed .nav-item{justify-content:center;width:54px;padding-inline:4px;font-size:0;color:transparent}
  .sidebar.is-collapsed .nav-icon{width:22px;flex:0 0 22px;font-size:19px}
  .sidebar.is-collapsed .nav-group-toggle{height:48px}
  .sidebar.is-collapsed .nav-chevron{display:none}
  .sidebar.is-collapsed .nav-submenu{position:absolute;z-index:12;top:0;inset-inline-end:calc(100% + 10px);width:224px;margin:0;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:#14243a;box-shadow:0 16px 38px rgba(4,13,25,.28)}
  .sidebar.is-collapsed .nav-submenu .nav-item{display:flex;width:100%;min-height:40px;justify-content:flex-start;padding:8px 10px;color:#b8c5d5;font-size:11px}
  .sidebar.is-collapsed .nav-submenu .nav-label{font-size:11px}
  .sidebar.is-collapsed .nav-submenu .nav-icon{width:18px;flex-basis:18px;font-size:14px}
  .sidebar.is-collapsed .nav-submenu .nav-item.active{color:#fff}
  .sidebar.is-collapsed~.main-area .top-sidebar-toggle{display:grid}
}
@media(min-width:681px) and (max-width:1100px){
  .sidebar.is-expanded{z-index:15;width:246px;padding:20px 17px;box-shadow:-14px 0 38px rgba(9,22,38,.2)}
  .sidebar.is-expanded~.main-area{margin-right:246px}
  .sidebar.is-expanded .brand{justify-content:flex-start;padding:3px 8px 28px}
  .sidebar.is-expanded .brand-copy,.sidebar.is-expanded .side-label{display:block}
  .sidebar.is-expanded .brand-copy{display:block}
  .sidebar.is-expanded .sidebar-bottom{display:block}
  .sidebar.is-expanded .sidebar-bottom .logout{display:flex}
  .sidebar.is-expanded .sidebar-bottom .version{display:block}
  .sidebar.is-expanded .device-mini{display:block;padding:13px;margin-bottom:15px;text-align:initial}
  .sidebar.is-expanded .device-mini-top{justify-content:space-between;margin-bottom:7px}
  .sidebar.is-expanded .device-mini strong,.sidebar.is-expanded .device-mini span:not(.device-icon),.sidebar.is-expanded .device-mini small{display:block}
  .sidebar.is-expanded .nav-item{width:100%;min-height:42px;justify-content:flex-start;padding:10px 12px;color:#b5c0d1;font-size:12px;overflow:visible}
  .sidebar.is-expanded .nav-group-toggle{height:auto}
  .sidebar.is-expanded .nav-chevron{display:block}
  .sidebar.is-expanded .nav-icon{width:18px;flex:0 0 18px;font-size:16px}
  .sidebar.is-expanded .nav-submenu{position:static;width:auto;margin-inline-start:14px;padding:0 9px 0 0;border:0;border-inline-start:1px solid rgba(255,255,255,.12);background:transparent;box-shadow:none}
  .sidebar.is-expanded .nav-submenu .nav-item{width:100%;min-height:38px;padding:8px 10px;font-size:11px}
  .sidebar.is-expanded .nav-submenu .nav-icon{width:18px;flex:0 0 18px;font-size:14px}
  .sidebar.is-expanded~.main-area .top-sidebar-toggle{display:grid}
  .sidebar.is-expanded .sidebar-toggle{margin-inline-start:auto}
  .sidebar:not(.is-expanded) .nav-submenu{position:absolute;z-index:20;top:0;inset-inline-end:calc(100% + 10px);width:224px;margin:0;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:#14243a;box-shadow:0 16px 38px rgba(4,13,25,.28)}
  .sidebar:not(.is-expanded) .nav-submenu .nav-item{display:flex;width:100%;min-height:40px;justify-content:flex-start;padding:8px 10px;color:#b8c5d5;font-size:11px}
  .sidebar:not(.is-expanded) .nav-submenu .nav-label{font-size:11px}
  .sidebar:not(.is-expanded) .nav-submenu .nav-icon{width:18px;flex:0 0 18px;font-size:14px}
  .sidebar:not(.is-expanded) .sidebar-bottom{display:block}
  .sidebar:not(.is-expanded) .device-mini{display:flex;justify-content:center;padding:9px 4px;margin-bottom:8px}
  .sidebar:not(.is-expanded) .device-mini-top{justify-content:center;margin:0}
  .sidebar:not(.is-expanded) .device-mini strong,.sidebar:not(.is-expanded) .device-mini span:not(.device-icon),.sidebar:not(.is-expanded) .device-mini small{display:none}
  .sidebar:not(.is-expanded) .sidebar-bottom .logout{display:flex;width:54px;justify-content:center;padding:10px 4px;font-size:0;color:transparent}
  .sidebar:not(.is-expanded) .sidebar-bottom .logout .nav-icon{font-size:18px}
  .sidebar:not(.is-expanded) .sidebar-bottom .version{display:none}
}
@media(max-width:680px){
  .top-sidebar-toggle{display:none!important}
  .sidebar .nav-group{display:flex;flex:0 0 auto;height:100%;align-items:center}
  .sidebar .nav-group-toggle{width:48px;min-width:48px;height:48px;min-height:48px;flex:0 0 48px;padding:0}
  .sidebar .nav-group-toggle .nav-chevron{display:none}
  .sidebar .nav-submenu{position:fixed;z-index:25;right:8px;left:8px;bottom:calc(74px + env(safe-area-inset-bottom));max-height:min(58vh,440px);overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#14243a;box-shadow:0 16px 40px rgba(8,20,35,.32)}
  .sidebar .nav-submenu .nav-item{display:flex;width:100%;min-width:0;min-height:46px;height:auto;flex:initial;justify-content:flex-start;padding:8px 10px;color:#b8c5d5;font-size:11px}
  .sidebar .nav-submenu .nav-label{font-size:11px}
  .sidebar .nav-submenu .nav-icon{width:20px;flex:0 0 20px;font-size:15px}
  .message-page-intro{align-items:flex-start;padding:12px}
  .campaign-form{grid-template-columns:1fr}
  .campaign-form>#campaign-name,.campaign-form>#campaign-group,.campaign-form>#campaign-send-at-wrap,.campaign-form>#campaign-appointment-fields,.campaign-form>#campaign-poll-fields,.campaign-form>#campaign-message-label,.campaign-form>#campaign-poll-preview,.campaign-form>#campaign-create{grid-column:auto}
  .campaign-form>#campaign-appointment-fields,.campaign-form>#campaign-poll-fields{grid-template-columns:1fr}
  #lottery-builder .lottery-form{grid-template-columns:1fr}
  #lottery-builder .lottery-form label:first-child,#lottery-builder .lottery-form>.button{grid-column:auto}
  .bulk-compose-panel{padding:15px}
}

/* Shared finishing pass for consistent feedback across every panel page. */
html:not(.theme-dark) .panel {
  border-color: #e2eaf0;
  box-shadow: 0 7px 22px rgba(20, 43, 67, .045);
}
html:not(.theme-dark) .panel:hover {
  border-color: #d5e6e2;
  box-shadow: 0 10px 28px rgba(20, 43, 67, .065);
}
html:not(.theme-dark) .stat-card {
  border: 1px solid #e5ebf1;
  background: linear-gradient(150deg, #fff 0%, #fbfcfe 100%);
}
html:not(.theme-dark) .table-scroll,
html:not(.theme-dark) .api-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #bac6d2 #f1f4f7;
}
html:not(.theme-dark) .table-scroll::-webkit-scrollbar,
html:not(.theme-dark) .api-table-scroll::-webkit-scrollbar { height: 8px; }
html:not(.theme-dark) .table-scroll::-webkit-scrollbar-track,
html:not(.theme-dark) .api-table-scroll::-webkit-scrollbar-track { background: #f1f4f7; border-radius: 8px; }
html:not(.theme-dark) .table-scroll::-webkit-scrollbar-thumb,
html:not(.theme-dark) .api-table-scroll::-webkit-scrollbar-thumb { background: #bac6d2; border: 2px solid #f1f4f7; border-radius: 8px; }
html:not(.theme-dark) .table-scroll::-webkit-scrollbar-thumb:hover,
html:not(.theme-dark) .api-table-scroll::-webkit-scrollbar-thumb:hover { background: #91a2b3; }
html:not(.theme-dark) tbody tr { transition: background-color .14s ease; }
html:not(.theme-dark) tbody tr:hover { background: #f6faf9; }
.button:not(:disabled):active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(16, 33, 57, .12); }
.page-view.active { animation: panel-page-enter .16s ease-out both; }
@keyframes panel-page-enter {
  from { opacity: .82; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-view.active { animation: none; }
}

/* A component display rule must not override the native hidden attribute. */
.ussd-session-tools[hidden] { display: none !important; }
.info-icon .ui-icon { width: 12px; height: 12px; }

/* Keep the last known device sample visible, while clearly identifying it as stale. */
#overview-last-check.is-stale,
#device-health-checked-at.is-stale,
#serial-stats-note.is-stale {
  color: #9a5b12;
  font-weight: 700;
}
#channel-footnote.is-stale {
  color: #8f4d0a;
  background: #fff8e8;
  border: 1px solid #f0d59f;
  border-radius: 10px;
  padding: 9px 11px;
}
#device-health-state.is-stale,
#device-web-status.is-stale {
  outline: 1px solid #e9bf72;
  outline-offset: 2px;
}
html.theme-dark #overview-last-check.is-stale,
html.theme-dark #device-health-checked-at.is-stale,
html.theme-dark #serial-stats-note.is-stale { color: #f1c77f; }
html.theme-dark #channel-footnote.is-stale {
  color: #f1c77f;
  background: rgba(142, 91, 18, .14);
  border-color: rgba(230, 181, 93, .36);
}
html.theme-dark #device-health-state.is-stale,
html.theme-dark #device-web-status.is-stale { outline-color: rgba(230, 181, 93, .55); }

/* One readable type scale for every page, including the detailed device views. */
body {
  --panel-body-size: 16px;
  --panel-detail-size: 12.5px;
  --panel-label-size: 14px;
  --panel-control-size: 14.5px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: var(--panel-body-size);
  line-height: 1.8;
}
body.font-scale-large {
  --panel-body-size: 17px;
  --panel-detail-size: 13.5px;
  --panel-label-size: 15px;
  --panel-control-size: 15.5px;
}
#app-shell .page-view h1 {
  font-size: clamp(28px, 2.2vw, 34px);
  line-height: 1.45;
  font-weight: 800;
}
#app-shell .page-view h2 { font-size: 20px; line-height: 1.55; }
#app-shell .page-view h3 { font-size: 18px; line-height: 1.55; }
#app-shell .page-view .page-heading { margin-bottom: 25px; }
#app-shell .page-view .page-heading .eyebrow {
  margin-bottom: 6px;
  color: #287e74;
  font-size: 12.5px !important;
  letter-spacing: 0;
}
#app-shell .page-view .page-heading .muted,
#app-shell .page-view .muted {
  color: #5a6f84;
  font-size: 14.5px !important;
  line-height: 1.9;
}
#app-shell .page-view small,
#app-shell .page-view .panel-footnote,
#app-shell .page-view .form-hint,
#app-shell .page-view .page-footer,
#app-shell .page-view .channel-port,
#app-shell .page-view .channel-sub,
#app-shell .page-view .message-id,
#app-shell .page-view .message-date,
#app-shell .page-view .status-badge,
#app-shell .page-view .device-online-badge,
#app-shell .page-view .count-pill,
#app-shell .page-view .device-web-status,
#app-shell .page-view .registration-mode,
#app-shell .page-view .line-state {
  font-size: var(--panel-detail-size) !important;
  line-height: 1.8;
}
#app-shell .page-view .panel-heading h2,
#app-shell .page-view .api-section-heading h2 { font-size: 19px !important; }
#app-shell .page-view .panel-heading p,
#app-shell .page-view .api-step p,
#app-shell .page-view .api-contract-head p,
#app-shell .page-view .api-status-grid span,
#app-shell .page-view .api-reference-card > p,
#app-shell .page-view .campaign-poll-preview,
#app-shell .page-view .poll-result-row > div:first-child,
#app-shell .page-view .registration-diagnosis-summary > p,
#app-shell .page-view .registration-diagnosis-meta,
#app-shell .page-view .registration-diagnostic-meta,
#app-shell .page-view .device-correlation-detail,
#app-shell .page-view .device-reboot-copy p,
#app-shell .page-view .overview-diagnostic-summary,
#app-shell .page-view .hardware-note-panel p,
#app-shell .page-view .policy-field,
#app-shell .page-view .policy-toggle,
#app-shell .page-view .policy-channel-foot,
#app-shell .page-view .gateway-routes-complete,
#app-shell .page-view .bulk-format-note,
#app-shell .page-view .bulk-submit-row > span {
  font-size: var(--panel-detail-size) !important;
  line-height: 1.85;
}
#app-shell .page-view label,
#app-shell .page-view .quick-form label,
#app-shell .page-view .campaign-form label,
#app-shell .page-view .appointment-form label,
#app-shell .page-view .lottery-form label,
#app-shell .page-view .device-form-field,
#app-shell .page-view .contacts-import-group-label {
  color: #43586d;
  font-size: var(--panel-label-size) !important;
  line-height: 1.7;
}
#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#app-shell .page-view select,
#app-shell .page-view textarea {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: var(--panel-control-size) !important;
  line-height: 1.75;
}
#app-shell .page-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#app-shell .page-view select { min-height: 44px; }
#app-shell .page-view textarea { min-height: 96px; }
#app-shell .page-view input::placeholder,
#app-shell .page-view textarea::placeholder { color: #77899d; opacity: 1; }
#app-shell .page-view .button,
#app-shell .page-view .text-button,
#app-shell .page-view .channel-registration-retry,
#app-shell .page-view .channel-imei-read,
#app-shell .page-view .channel-clear-filter {
  min-height: 42px;
  font-size: 13.5px !important;
  line-height: 1.55;
}
#app-shell .page-view .button { padding-block: 9px; }
#app-shell .page-view .appointment-actions .button,
#app-shell .page-view .campaign-row-actions .button { min-height: 40px; }
#app-shell .page-view .table-scroll,
#app-shell .page-view .api-table-scroll { border-radius: 12px; }
#app-shell .page-view thead th,
#app-shell .page-view tbody td {
  font-size: 13px !important;
  line-height: 1.75;
}
#app-shell .page-view .diagnostic-check-index,
#app-shell .page-view .diagnostic-check-top > strong,
#app-shell .page-view .diagnostic-check-top > b,
#app-shell .page-view .diagnostic-check-copy > small,
#app-shell .page-view .registration-diagnosis-heading strong,
#app-shell .page-view .registration-diagnosis-heading small,
#app-shell .page-view .registration-mode,
#app-shell .page-view .modem-registration-diagnosis > p,
#app-shell .page-view .registration-diagnosis-summary > span,
#app-shell .page-view .registration-diagnosis-next-step,
#app-shell .page-view .registration-diagnosis-next-step strong,
#app-shell .page-view .registration-retry-result,
#app-shell .page-view .channel-registration-retry,
#app-shell .page-view .modem-imei-copy > span,
#app-shell .page-view .modem-imei-copy > small,
#app-shell .page-view .device-web-status,
#app-shell .page-view .modem-error-note {
  font-size: var(--panel-detail-size) !important;
  line-height: 1.8;
}
#app-shell .page-view .diagnostic-check-index { min-width: 26px; min-height: 26px; }
#app-shell .page-view .device-health-metric > div > span {
  overflow: visible;
  overflow-wrap: anywhere;
  color: #63768a;
  font-size: var(--panel-detail-size) !important;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.65;
}
#app-shell .page-view .device-health-metric small { font-size: var(--panel-detail-size) !important; }
#app-shell .page-view .device-registry-detail strong {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
#app-shell .page-view code,
#app-shell .page-view pre { font-size: var(--panel-detail-size) !important; line-height: 1.8; }
#app-shell .page-view option,
#app-shell .page-view bdi,
#app-shell .page-view .api-method,
#app-shell .page-view .appointment-status,
#app-shell .page-view .campaign-kind-chip,
#app-shell .page-view .device-registry-state,
#app-shell .page-view .device-registry-channel-range,
#app-shell .page-view .device-health-state,
#app-shell .page-view .modem-connection-badge,
#app-shell .page-view .operator-channel-count,
#app-shell .page-view .policy-state,
#app-shell .page-view .gateway-current-route-state,
#app-shell .page-view .overview-channel-copy strong,
#app-shell .page-view .overview-channel-state span,
#app-shell .page-view .overview-channel-empty,
#app-shell .page-view .overview-metric strong em,
#app-shell .page-view .group-total,
#app-shell .page-view .campaign-row-main strong,
#app-shell .page-view .poll-result-row strong {
  font-size: var(--panel-detail-size) !important;
  line-height: 1.7;
}
#app-shell .page-view span:not([class]):not([data-icon]) {
  font-size: var(--panel-detail-size) !important;
  line-height: 1.7;
}
html:not(.theme-dark) #app-shell .page-view small:not(.campaign-row-error),
html:not(.theme-dark) #app-shell .page-view .muted,
html:not(.theme-dark) #app-shell .page-view .panel-footnote,
html:not(.theme-dark) #app-shell .page-view .form-hint,
html:not(.theme-dark) #app-shell .page-view .page-footer,
html:not(.theme-dark) #app-shell .page-view .channel-sub,
html:not(.theme-dark) #app-shell .page-view .channel-port,
html:not(.theme-dark) #app-shell .page-view .message-date {
  color: #5e7185;
}
html.theme-dark #app-shell .page-view small:not(.campaign-row-error),
html.theme-dark #app-shell .page-view .muted,
html.theme-dark #app-shell .page-view .panel-footnote,
html.theme-dark #app-shell .page-view .form-hint,
html.theme-dark #app-shell .page-view .page-footer,
html.theme-dark #app-shell .page-view .channel-sub,
html.theme-dark #app-shell .page-view .channel-port,
html.theme-dark #app-shell .page-view .message-date,
html.theme-dark #app-shell .page-view .device-health-metric > div > span {
  color: #afbed0;
}
html:not(.theme-dark) #app-shell .page-view .api-step p,
html:not(.theme-dark) #app-shell .page-view .api-contract-head p,
html:not(.theme-dark) #app-shell .page-view .api-status-grid span,
html:not(.theme-dark) #app-shell .page-view .api-reference-card > p,
html:not(.theme-dark) #app-shell .page-view .registration-diagnosis-summary > p,
html:not(.theme-dark) #app-shell .page-view .registration-diagnostic-meta,
html:not(.theme-dark) #app-shell .page-view .device-correlation-detail,
html:not(.theme-dark) #app-shell .page-view .device-reboot-copy p,
html:not(.theme-dark) #app-shell .page-view .overview-diagnostic-summary,
html:not(.theme-dark) #app-shell .page-view .hardware-note-panel p,
html:not(.theme-dark) #app-shell .page-view .policy-channel-foot,
html:not(.theme-dark) #app-shell .page-view .bulk-format-note,
html:not(.theme-dark) #app-shell .page-view .bulk-submit-row > span {
  color: #5e7185;
}
html.theme-dark #app-shell .page-view .api-step p,
html.theme-dark #app-shell .page-view .api-contract-head p,
html.theme-dark #app-shell .page-view .api-status-grid span,
html.theme-dark #app-shell .page-view .api-reference-card > p,
html.theme-dark #app-shell .page-view .registration-diagnosis-summary > p,
html.theme-dark #app-shell .page-view .registration-diagnostic-meta,
html.theme-dark #app-shell .page-view .device-correlation-detail,
html.theme-dark #app-shell .page-view .device-reboot-copy p,
html.theme-dark #app-shell .page-view .overview-diagnostic-summary,
html.theme-dark #app-shell .page-view .hardware-note-panel p,
html.theme-dark #app-shell .page-view .policy-channel-foot,
html.theme-dark #app-shell .page-view .bulk-format-note,
html.theme-dark #app-shell .page-view .bulk-submit-row > span {
  color: #afbed0;
}
#app-shell .sidebar .side-label { font-size: 12px; }
#app-shell .sidebar .brand strong { font-size: 15px; }
#app-shell .sidebar .brand small,
#app-shell .sidebar .device-mini span:not(.device-icon),
#app-shell .sidebar .device-mini small { font-size: 12px; }
#app-shell .sidebar .device-mini strong { font-size: 13px; }
#app-shell .sidebar .version { font-size: 11px; }
#app-shell .breadcrumbs { font-size: 12.5px; }
#app-shell .connection-chip { font-size: 12px; }
body.font-scale-large #app-shell .page-view .muted { font-size: 16px !important; }
body.font-scale-large #app-shell .page-view .page-heading .muted { font-size: 16px !important; }
body.font-scale-large #app-shell .page-view .button,
body.font-scale-large #app-shell .page-view label { font-size: 15px !important; }

@media (max-width: 900px) {
  #app-shell .page-view .device-registry-grid { grid-template-columns: minmax(0, 1fr); }
  #app-shell .page-view .device-registry-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1101px) {
  #app-shell #view-inbox .table-scroll { overflow-x: hidden; }
  #app-shell #view-inbox .inbox-table { width: 100%; min-width: 0; table-layout: fixed; }
  #app-shell #view-inbox .inbox-table th,
  #app-shell #view-inbox .inbox-table td { padding-inline: 8px; overflow-wrap: anywhere; }
  #app-shell #view-inbox .inbox-table th:nth-child(1),
  #app-shell #view-inbox .inbox-table td:nth-child(1) { width: 16%; }
  #app-shell #view-inbox .inbox-table th:nth-child(2),
  #app-shell #view-inbox .inbox-table td:nth-child(2) { width: 8%; }
  #app-shell #view-inbox .inbox-table th:nth-child(3),
  #app-shell #view-inbox .inbox-table td:nth-child(3) { width: 15%; }
  #app-shell #view-inbox .inbox-table th:nth-child(4),
  #app-shell #view-inbox .inbox-table td:nth-child(4) { width: 31%; }
  #app-shell #view-inbox .inbox-table th:nth-child(5),
  #app-shell #view-inbox .inbox-table td:nth-child(5) { width: 8%; }
  #app-shell #view-inbox .inbox-table th:nth-child(6),
  #app-shell #view-inbox .inbox-table td:nth-child(6) { width: 12%; }
  #app-shell #view-inbox .inbox-table th:nth-child(7),
  #app-shell #view-inbox .inbox-table td:nth-child(7) { width: 10%; }
  #app-shell #view-inbox .inbox-message-text { max-width: none; overflow-wrap: anywhere; }
}
@media (max-width: 680px) {
  body { --panel-body-size: 15px; --panel-detail-size: 12px; --panel-label-size: 13.5px; --panel-control-size: 14px; }
  body.font-scale-large { --panel-body-size: 16px; --panel-detail-size: 13px; --panel-label-size: 14px; --panel-control-size: 15px; }
  #app-shell .page-view h1 { font-size: 27px; }
  #app-shell .page-view .page-heading .muted,
  #app-shell .page-view .muted { font-size: 14px !important; }
  #app-shell .page-view .panel { padding: 16px; }
  #app-shell .page-view .device-registry-details { grid-template-columns: minmax(0, 1fr); }
}

#app-shell #view-inbox .inbox-clear-button,
#app-shell #view-inbox .inbox-delete-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
#app-shell #view-inbox .inbox-delete-button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
#app-shell #view-inbox .inbox-delete-button svg,
#app-shell #view-inbox .inbox-clear-button svg { width: 15px; height: 15px; }

.settings-optout-panel { grid-column: 1 / -1; }
.settings-optout-label { display: grid; gap: 8px; color: #43586d; font-weight: 750; }
.settings-optout-label textarea {
  min-height: 140px !important;
  resize: vertical;
  direction: rtl;
  unicode-bidi: plaintext;
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  line-height: 1.9;
}
.settings-optout-label small { color: #657a8d; font-weight: 400; line-height: 1.85; }
.settings-optout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 13px; }
.settings-optout-actions > span { color: #667b8e; font-size: 13px; }
.settings-optout-list-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e7edf1; }
.settings-optout-list-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.settings-optout-list-heading strong { color: #344a60; }
.settings-optout-list { display: grid; gap: 7px; margin-top: 11px; }
.settings-optout-row { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(80px, .5fr) minmax(140px, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e8eef2; border-radius: 10px; background: #fbfcfd; }
.settings-optout-row bdi { color: #344a60; font: 700 14px/1.6 Consolas, monospace; text-align: right; }
.settings-optout-row span, .settings-optout-row time { color: #718398; font-size: 12px; }
.settings-optout-row time { text-align: left; }
.settings-optout-empty { padding: 14px; color: #73869a; border: 1px dashed #dce5ea; border-radius: 10px; text-align: center; }
.suppression-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.suppression-tools input { width: min(230px, 35vw); padding: 8px 10px; border: 1px solid #dce4eb; border-radius: 9px; background: #fff; }
.suppression-heading { align-items: flex-start !important; }

html.theme-dark .settings-optout-list-heading { border-color: #2b3c51; }
html.theme-dark .settings-optout-list-heading strong,
html.theme-dark .settings-optout-row bdi { color: #e1eaf4; }
html.theme-dark .settings-optout-row,
html.theme-dark .settings-optout-empty { color: #a6b6c8; background: #101d2e; border-color: #2b3c51; }
html.theme-dark .settings-optout-label,
html.theme-dark .settings-optout-label small,
html.theme-dark .settings-optout-actions > span,
html.theme-dark .settings-optout-row span,
html.theme-dark .settings-optout-row time { color: #a6b6c8; }
html.theme-dark .suppression-tools input { color: #e2ebf5; background: #0f1c2c; border-color: #34475e; }

@media (max-width: 680px) {
  .settings-optout-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .settings-optout-row time { grid-column: 1 / -1; text-align: right; }
  .suppression-heading, .suppression-tools { width: 100%; }
  .suppression-tools input { flex: 1 1 140px; width: auto; }
  .policy-operator-readout > strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
}

.sent-page-heading { align-items: center; }
.sent-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sent-status-note { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #dce9f0; border-radius: 14px; color: #526b82; background: linear-gradient(110deg,#f0f7fb,#fbfdff); }
.sent-status-note .sent-note-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; color: #4779a9; background: #e3eff9; }
.sent-status-note strong { display: block; margin-bottom: 2px; color: #344f67; font-size: 13px; }
.sent-status-note p { color: #637b91; font-size: 12px; line-height: 1.9; }
.sent-summary-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.sent-summary-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 16px; border: 1px solid #e6ecf1; border-radius: 15px; background: linear-gradient(145deg,#fff,#fbfcfe); box-shadow: 0 7px 20px rgba(25,46,70,.035); }
.sent-summary-icon { display: grid; width: 41px; height: 41px; flex: 0 0 41px; place-items: center; border-radius: 13px; color: #557ba4; background: #eef4fa; }
.sent-summary-icon .ui-icon { width: 20px; height: 20px; }
.sent-summary-card div { display: grid; min-width: 0; gap: 1px; }
.sent-summary-card small { color: #75869a; font-size: 11px; }
.sent-summary-card strong { color: #253a52; font-size: 20px; font-weight: 850; line-height: 1.5; }
.sent-summary-card span:last-child { color: #9aa6b3; font-size: 10px; }
.sent-summary-card.accepted .sent-summary-icon { color: #26866f; background: #e8f5ef; }
.sent-summary-card.queued .sent-summary-icon { color: #a57626; background: #fff5e5; }
.sent-summary-card.sending .sent-summary-icon { color: #4c76b0; background: #edf3fd; }
.sent-summary-card.delivered .sent-summary-icon { color: #3276b4; background: #eaf3fb; }
.sent-summary-card.attention .sent-summary-icon { color: #b87923; background: #fff4e3; }
.sent-history-panel { overflow: hidden; padding-bottom: 12px; border-color: #e1e8ef; box-shadow: 0 12px 32px rgba(24,47,70,.045); }
.sent-history-heading { align-items: center; margin-bottom: 16px; }
.sent-history-heading p { max-width: 720px; }
.sent-filters { display: grid; grid-template-columns: minmax(220px,1.65fr) repeat(3,minmax(145px,1fr)) repeat(2,minmax(130px,.8fr)) auto; align-items: end; gap: 10px; margin: 0 0 15px; padding: 14px; border: 1px solid #e9eef2; border-radius: 14px; background: linear-gradient(135deg,#fbfcfe,#f8fafc); }
.sent-filters label { display: grid; min-width: 0; gap: 5px; color: #617488; font-size: 11px; font-weight: 750; }
.sent-filters input,.sent-filters select { width: 100%; min-width: 0; height: 39px; padding: 7px 10px; border: 1px solid #dfe6ec; border-radius: 9px; color: #34495e; background: #fff; font-size: 12px; }
.sent-filters input:focus,.sent-filters select:focus { border-color: #83c9c0; outline: 3px solid rgba(20,168,154,.12); }
.sent-input-with-icon { position: relative; }
.sent-input-with-icon>span { position: absolute; top: 50%; right: 10px; display: grid; color: #8798a9; transform: translateY(-50%); pointer-events: none; }
.sent-input-with-icon .ui-icon { width: 16px; height: 16px; }
.sent-input-with-icon input { padding-right: 34px; }
.sent-clear-filters { min-height: 39px; padding-inline: 11px; white-space: nowrap; }
.sent-clear-filters .ui-icon { width: 15px; height: 15px; vertical-align: middle; }
.sent-table-wrap { position: relative; overflow: auto; border: 1px solid #e8edf2; border-radius: 12px; background: #fff; scrollbar-color: #d8e1e8 #f6f8fa; scrollbar-width: thin; }
.sent-table { width: 100%; min-width: 1190px; border-collapse: separate; border-spacing: 0; }
.sent-table thead th { position: sticky; z-index: 1; top: 0; padding: 12px 11px; border-bottom: 1px solid #e8edf2; color: #6c7e90; background: #f8fafc; font-size: 11px; font-weight: 800; white-space: nowrap; }
.sent-table tbody td { max-width: 250px; padding: 12px 11px; border-bottom: 1px solid #eef2f5; color: #41566b; font-size: 11px; vertical-align: middle; }
.sent-table tbody tr:last-child td { border-bottom: 0; }
.sent-table tbody tr:hover td { background: #fbfdfd; }
.sent-id,.sent-recipient,.sent-date { display: block; }
.sent-id { color: #536f8a; font: 750 11px/1.6 Consolas,monospace; }
.sent-recipient { color: #314a64; font: 750 12px/1.7 Consolas,monospace; white-space: nowrap; }
.sent-date { color: #8190a0; font-size: 10px; white-space: nowrap; }
.sent-message-preview { display: block; max-width: 210px; color: #465c72; line-height: 1.9; white-space: normal; overflow-wrap: anywhere; }
.sent-channel-pill { display: inline-grid; min-width: 30px; height: 28px; place-items: center; padding-inline: 7px; border: 1px solid #d9efeb; border-radius: 9px; color: #258a7e; background: #eef8f6; font-weight: 850; }
.sent-status,.sent-delivery { display: inline-flex; align-items: center; max-width: 185px; gap: 5px; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px; font-size: 10px; font-weight: 800; line-height: 1.7; }
.sent-status.queued { color: #9b6b1c; border-color: #f4e4c8; background: #fff7e9; }
.sent-status.sending { color: #416eaa; border-color: #deebfa; background: #f0f6fd; }
.sent-status.accepted { color: #24795e; border-color: #d8eee4; background: #edf8f2; }
.sent-status.failed,.sent-status.uncertain { color: #b14852; border-color: #f1d8db; background: #fff1f2; }
.sent-status.cancelled { color: #69798a; border-color: #e4e9ee; background: #f4f6f8; }
.sent-status.unknown { color: #6e5a9d; border-color: #e7e0f5; background: #f7f3ff; }
.sent-delivery.delivered { color: #287653; border-color: #d6ebde; background: #edf8f1; }
.sent-delivery.failed { color: #b14852; border-color: #f1d8db; background: #fff1f2; }
.sent-delivery.waiting { color: #98701f; border-color: #f2e4c9; background: #fff8eb; }
.sent-delivery.disabled { color: #718093; border-color: #e6ebef; background: #f5f7f9; }
.sent-parts { display: inline-block; min-width: 42px; color: #556d83; font-weight: 800; white-space: nowrap; }
.sent-details-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #dce8ee; border-radius: 8px; color: #55718c; background: #fbfdfe; font: inherit; font-size: 10px; font-weight: 800; white-space: nowrap; }
.sent-details-button:hover { border-color: #b7d8d5; color: #197e75; background: #f0faf8; }
.sent-details-button .ui-icon { width: 14px; height: 14px; }
.sent-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 0; }
.sent-table-footer .panel-footnote { margin: 0; color: #8492a1; font-size: 11px; }
.sent-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; color: #64788c; font-size: 11px; }
.sent-pagination label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sent-pagination select { height: 34px; padding: 5px 8px; border: 1px solid #dfe6ec; border-radius: 8px; color: #42586d; background: #fff; }
.sent-pagination .button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.sent-pagination .button .ui-icon { width: 14px; height: 14px; vertical-align: middle; }
.sent-load-state { padding: 10px 12px; color: #57738c; border-top: 1px solid #eaf0f3; background: #f7fafc; font-size: 11px; }
.sent-load-state.is-error { color: #a5424a; background: #fff3f4; }
.sent-details-dialog { width: min(760px,calc(100vw - 32px)); max-width: none; max-height: min(88vh,900px); padding: 0; overflow: auto; border: 1px solid #dfe8ed; border-radius: 19px; color: #34495f; background: #fff; box-shadow: 0 25px 90px rgba(13,29,48,.28); }
.sent-details-dialog::backdrop { background: rgba(13,27,44,.52); backdrop-filter: blur(3px); }
.sent-details-card { display: grid; gap: 16px; padding: clamp(18px,3vw,27px); }
.sent-details-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #edf1f4; }
.sent-details-top h2 { color: #263c52; font-size: 20px; }
.sent-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.sent-details-grid>div { display: grid; min-width: 0; gap: 3px; padding: 10px 12px; border: 1px solid #e9eef2; border-radius: 11px; background: #fbfcfd; }
.sent-details-grid small,.sent-detail-message small,.sent-detail-error small { color: #8391a0; font-size: 10px; }
.sent-details-grid strong { color: #3b536a; font-size: 12px; overflow-wrap: anywhere; }
.sent-details-grid .sent-detail-id { grid-column: 1/-1; }
.sent-detail-message,.sent-detail-error { padding: 12px 14px; border: 1px solid #e5ecef; border-radius: 12px; background: #f8fbfc; }
.sent-detail-message p,.sent-detail-error p { margin-top: 6px; color: #405970; font-size: 13px; line-height: 2; overflow-wrap: anywhere; white-space: pre-wrap; }
.sent-detail-error { border-color: #f0d9dc; background: #fff6f6; }
.sent-detail-error p { color: #9d4951; }
.sent-detail-explainer { padding: 10px 12px; border-radius: 10px; color: #657c91; background: #f1f6fa; font-size: 11px; line-height: 1.9; }
.sent-details-actions { display: flex; justify-content: flex-end; }

html.theme-dark .sent-status-note,html.theme-dark .sent-summary-card,html.theme-dark .sent-history-panel,html.theme-dark .sent-table-wrap { color: #aebdce; background: #142235; border-color: #2c3e53; }
html.theme-dark .sent-status-note strong,html.theme-dark .sent-summary-card strong,html.theme-dark .sent-details-top h2 { color: #e4edf6; }
html.theme-dark .sent-status-note p,html.theme-dark .sent-summary-card small,html.theme-dark .sent-summary-card span:last-child,html.theme-dark .sent-history-heading p { color: #aab9c9; }
html.theme-dark .sent-filters,html.theme-dark .sent-table thead th,html.theme-dark .sent-details-grid>div,html.theme-dark .sent-detail-message { color: #bdcad8; background: #101d2e; border-color: #2c3e53; }
html.theme-dark .sent-filters label,html.theme-dark .sent-table tbody td,html.theme-dark .sent-detail-message p,html.theme-dark .sent-details-grid strong { color: #c0ccda; }
html.theme-dark .sent-filters input,html.theme-dark .sent-filters select,html.theme-dark .sent-pagination select { color: #e1eaf3; background: #0f1c2c; border-color: #34475e; }
html.theme-dark .sent-table tbody tr:hover td { background: #192b41; }
html.theme-dark .sent-details-dialog { color: #c5d0dc; background: #142235; border-color: #2c3e53; }
html.theme-dark .sent-detail-explainer { color: #adbdcd; background: #1a2b40; }

@media (max-width: 1220px) {
  .sent-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sent-search-field { grid-column: span 2; }
  .sent-clear-filters { justify-self: start; }
  .sent-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .sent-page-heading { align-items: flex-start; }
  .sent-page-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .sent-page-heading,.sent-page-actions { width: 100%; }
  .sent-page-actions .button { flex: 1 1 145px; }
  .sent-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .sent-summary-card { gap: 8px; padding: 11px 9px; }
  .sent-summary-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .sent-summary-card small { font-size: 9px; }
  .sent-summary-card strong { font-size: 17px; }
  .sent-summary-card span:last-child { font-size: 8px; }
  .sent-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 10px; }
  .sent-search-field { grid-column: 1/-1; }
  .sent-clear-filters { grid-column: 1/-1; justify-self: stretch; justify-content: center; }
  .sent-table-footer { align-items: flex-start; }
  .sent-pagination { width: 100%; justify-content: space-between; gap: 6px; }
  .sent-pagination label { width: 100%; justify-content: space-between; }
  .sent-details-grid { grid-template-columns: 1fr; }
  .sent-details-grid .sent-detail-id { grid-column: auto; }
}