:root {
  color-scheme: light;
  --navy: #12314a;
  --navy-deep: #0b263a;
  --blue: #196b8f;
  --blue-dark: #0f526f;
  --orange: #f8ac35;
  --orange-soft: #fff4df;
  --background: #f3f7f8;
  --surface: #ffffff;
  --text: #17242d;
  --muted: #64757f;
  --border: #d9e4e8;
  --success: #147a53;
  --success-soft: #e7f5ef;
  --warning: #9a5a16;
  --warning-soft: #fff4df;
  --danger: #a73737;
  --danger-soft: #fff0f0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 96% 3%, rgba(248, 172, 53, .13), transparent 23rem),
    linear-gradient(180deg, #e9f2f5 0, var(--background) 29rem);
  color: var(--text);
}

button, input, textarea { font: inherit; }
a { color: var(--blue); }

code {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
}

.page-shell {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 28px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  padding: 16px clamp(18px, 3vw, 32px);
  border-radius: 22px;
  background: var(--navy);
  box-shadow: 0 18px 46px rgba(11, 38, 58, .16);
}

.header-tools { display: flex; align-items: center; gap: 24px; }
.header-tools nav { display: flex; align-items: center; gap: 6px; }
.header-tools nav a { padding: 9px 10px; border-radius: 8px; color: #d9e7ec; font-size: .82rem; font-weight: 700; text-decoration: none; }
.header-tools nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.header-tools nav a[aria-current="page"] { background: rgba(255, 255, 255, .11); color: #fff; }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  color: #fff;
  text-decoration: none;
}

.brand-lockup img {
  display: block;
  width: 176px;
  height: auto;
}

.brand-product {
  display: grid;
  gap: 2px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .24);
}

.brand-product small { color: #bed3dd; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.brand-product strong { color: #fff; font-size: 1.04rem; }

.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 54px 8px 30px;
}

.hero > div:first-child { max-width: 760px; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; color: var(--navy); font-size: clamp(2.35rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.05em; }
h2 { margin-bottom: 8px; color: var(--navy); }
h3 { margin-bottom: 8px; color: var(--navy); }

.eyebrow {
  margin-bottom: 9px;
  color: var(--blue);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow-light { color: var(--orange); }
.subtitle { margin-bottom: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

.sync-note {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 270px;
  padding: 13px 16px;
  border: 1px solid #c8dce3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
}

.sync-note > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(25, 107, 143, .11); }
.sync-note div { display: grid; gap: 3px; }
.sync-note strong { color: var(--navy); font-size: .88rem; }
.sync-note small { color: var(--muted); }

.fleet-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 38px;
}

.summary-card {
  position: relative;
  display: grid;
  min-height: 128px;
  align-content: center;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 11px 28px rgba(18, 49, 74, .05);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.summary-card:hover, .summary-card.filter-active { border-color: #8db8c9; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(18, 49, 74, .09); }
.summary-card:focus-visible { outline: 3px solid rgba(25, 107, 143, .25); outline-offset: 2px; }

.summary-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.summary-card > span { color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.summary-card > strong { margin: 2px 0; color: var(--navy); font-size: 2.1rem; line-height: 1; }
.summary-card > small { color: var(--muted); }
.summary-online::before { background: var(--success); }
.summary-active::before { background: var(--success); }
.summary-inactive::before { background: #87969e; }
.summary-month::before { background: var(--orange); }
.summary-delayed::before { background: var(--orange); }
.summary-offline::before { background: var(--danger); }
.summary-battery-low::before { background: var(--danger); }
.summary-account-missing::before { background: var(--orange); }
.summary-customer-missing::before { background: var(--blue); }

.compact-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.compact-status-strip .summary-card {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 9px 14px 9px 17px;
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(18, 49, 74, .04);
}
.compact-status-strip .summary-card > span { font-size: .68rem; }
.compact-status-strip .summary-card > strong { margin: 0; font-size: 1.35rem; }

.attention-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  margin: -8px 0 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18, 49, 74, .05);
}
.attention-panel.good { border-left-color: var(--success); background: linear-gradient(90deg, var(--success-soft), #fff 32%); }
.attention-panel.warn { border-left-color: var(--orange); background: linear-gradient(90deg, var(--warning-soft), #fff 32%); }
.attention-panel.bad { border-left-color: var(--danger); background: linear-gradient(90deg, var(--danger-soft), #fff 32%); }
.attention-panel h2 { margin-bottom: 4px; font-size: 1.2rem; }
.attention-panel p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.5; }
.attention-panel > a { white-space: nowrap; font-size: .86rem; font-weight: 800; }
.attention-icon { display: block; width: 16px; height: 16px; border: 4px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 6px currentColor; opacity: .13; }
.attention-panel.good .attention-icon, .state-guidance.good .attention-icon { color: var(--success); }
.attention-panel.warn .attention-icon, .state-guidance.warn .attention-icon { color: var(--warning); }
.attention-panel.bad .attention-icon, .state-guidance.bad .attention-icon { color: var(--danger); }
.attention-panel.pending .attention-icon, .state-guidance.pending .attention-icon { color: var(--muted); }

.status-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 36px; padding: 11px 16px; border-radius: 12px; background: rgba(255, 255, 255, .68); color: var(--muted); font-size: .78rem; }
.status-legend strong { color: var(--navy); }
.status-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.legend-dot.good { background: var(--success); }
.legend-dot.warn { background: var(--orange); }
.legend-dot.bad { background: var(--danger); }
.legend-dot.pending { background: #87969e; }

.section-title,
.device-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.tablet-title { align-items: center; margin: 0 2px 16px; }
.tablet-title h2 { margin-bottom: 0; font-size: 1.7rem; }
.tablet-title p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-size: .88rem; }

.panel {
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(18, 49, 74, .07);
}

.device-grid { display: grid; gap: 22px; }
.device-card { padding: clamp(20px, 4vw, 34px); border-top: 4px solid var(--navy); }
.device-table-shell { padding: 0; overflow: hidden; }
.table-scroll { width: 100%; overflow-x: auto; }
.device-detail-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.device-detail-table th,
.device-detail-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; }
.device-detail-table thead th { background: #f4f8f9; color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.device-detail-table thead th:nth-child(1) { width: 17%; }
.device-detail-table thead th:nth-child(2) { width: 25%; }
.device-detail-table thead th:nth-child(3) { width: 43%; }
.device-detail-table thead th:nth-child(4) { width: 15%; }
.device-detail-table tbody th { color: var(--navy); font-size: .8rem; font-weight: 850; }
.device-detail-table tbody tr:last-child > * { border-bottom: 0; }
.device-detail-table tbody tr:hover { background: #fbfdfe; }
.device-detail-table td { color: var(--navy); font-size: .8rem; }
.device-detail-table td strong,
.device-detail-table td small { display: block; }
.device-detail-table td small { margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.device-detail-table td a { color: var(--blue); font-weight: 800; text-decoration: none; }
.device-detail-table td a:hover { text-decoration: underline; }
.device-detail-table .table-action { white-space: nowrap; }
.device-detail-table .contact-countdown { min-height: 0; gap: 2px; }
.device-detail-table .contact-countdown > span { font-size: .62rem; }
.device-detail-table .contact-countdown > strong { font-size: .8rem; }
.device-detail-table .contact-countdown > small { font-size: .65rem; }
.device-detail-table .policy-source-list { display: grid; gap: 5px; margin: 0 0 6px; }
.device-detail-table .policy-source-chip { display: flex; align-items: baseline; width: fit-content; max-width: 100%; border-radius: 8px; }
.device-detail-table .policy-source-chip small { display: inline; margin: 0; }
.device-detail-table form { margin: 0; }
.device-highlight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; padding: 18px; background: #f5f9fa; border-bottom: 1px solid var(--border); }
.device-highlight-card { position: relative; display: flex; min-height: 122px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-width: 0; padding: 12px; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 12px; background: #fff; box-shadow: 0 4px 13px rgba(18, 49, 74, .05); }
.device-highlight-card.good { border-top-color: var(--success); }
.device-highlight-card.warn { border-top-color: var(--orange); }
.device-highlight-card.bad { border-top-color: var(--danger); }
.device-highlight-card.identity-card { background: #fafdfe; }
.device-highlight-card > span { color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.device-highlight-card > strong { max-width: 100%; color: var(--navy); font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.device-highlight-card.identity-card > strong { font-size: .94rem; }
.device-highlight-card > small { max-width: 100%; margin-top: auto; color: var(--muted); font-size: .7rem; line-height: 1.35; overflow-wrap: anywhere; }
.device-highlight-card .contact-countdown { min-height: 0; margin-top: auto; gap: 2px; }
.device-highlight-card .contact-countdown > span { font-size: .6rem; }
.device-highlight-card .contact-countdown > strong { font-size: .76rem; }
.device-highlight-card .contact-countdown > small { display: none; }
.device-highlight-card form { width: 100%; margin-top: auto; }
.device-highlight-card .table-action { width: 100%; margin-top: 4px; padding: 7px 9px; font-size: .7rem; }
.device-highlight-card .policy-source-list { display: grid; width: 100%; gap: 4px; margin: 2px 0; }
.device-highlight-card .policy-source-chip { display: grid; gap: 2px; width: 100%; padding: 5px 7px; border-radius: 7px; font-size: .68rem; }
.device-highlight-card .policy-source-chip small { font-size: .61rem; }
.device-highlight-card.policy-highlight-card { overflow-y: auto; }
.device-more-info { margin: 0 18px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.device-more-info > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: var(--navy); font-weight: 850; cursor: pointer; list-style: none; }
.device-more-info > summary::-webkit-details-marker, .device-recent-actions > summary::-webkit-details-marker, .security-readiness-collapsed > summary::-webkit-details-marker { display: none; }
.device-more-info > summary::after { content: "+"; color: var(--blue); font-size: 1.2rem; }
.device-more-info[open] > summary::after { content: "−"; }
.device-more-info > summary small { margin-left: auto; color: var(--muted); font-size: .72rem; font-weight: 550; }
.device-more-info .device-secondary-section { padding-top: 8px; }
.device-more-info .device-app-install-panel { margin: 0 18px 14px; }
.device-recent-actions { margin: 12px 18px; border: 1px solid var(--border); border-radius: 10px; }
.device-recent-actions > summary { padding: 12px 14px; color: var(--navy); font-weight: 850; cursor: pointer; list-style: none; }
.device-recent-actions > summary small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; }
.device-recent-actions-content { padding: 0 12px 12px; }
.security-readiness-collapsed { width: min(100%, 380px); margin: 0 0 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.82); }
.security-readiness-collapsed > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; color: var(--navy); font-size: .8rem; font-weight: 800; cursor: pointer; list-style: none; }
.security-readiness-collapsed .security-readiness { margin: 0; padding: 14px; box-shadow: none; }
.security-readiness-collapsed .security-readiness .section-title { margin-bottom: 10px; }
.security-readiness-collapsed .security-readiness h2 { font-size: 1rem; }
main[data-policy-device]:not([data-policy-device=""]) [data-global-policy-header],
main[data-policy-device]:not([data-policy-device=""]) .policy-global-overview,
main[data-policy-device]:not([data-policy-device=""]) [data-policy-global-content] { display: none; }
main[data-policy-device]:not([data-policy-device=""]) [data-scoped-policy-heading] { display: block; }
.device-policy-scope { margin-bottom: 18px; padding: 18px 20px; }
.device-policy-scope h2 { margin: 3px 0 6px; }
.device-policy-scope p:not(.eyebrow) { margin-bottom: 12px; }
.scoped-policy-card { padding: 0; overflow: hidden; scroll-margin-top: 18px; }
.scoped-policy-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; color: var(--navy); cursor: pointer; list-style: none; }
.scoped-policy-card > summary::-webkit-details-marker { display: none; }
.scoped-policy-card > summary::after { content: "+"; color: var(--blue); font-size: 1.2rem; }
.scoped-policy-card[open] > summary::after { content: "−"; }
.scoped-policy-card > summary strong { font-size: 1rem; }
.scoped-policy-card > summary span { color: var(--muted); font-size: .76rem; }
.scoped-policy-card[open] > header, .scoped-policy-card[open] > form { margin-inline: 18px; }
.scoped-policy-card[open] > form { padding-bottom: 18px; }
.device-secondary-section { padding: 22px 24px 24px; }
.device-secondary-section .section-title { margin-bottom: 12px; }
.device-secondary-section .section-title h2 { margin: 0; font-size: 1.1rem; }
.table-inline-form { padding: 0 16px 16px; }
.table-inline-form .device-additional-policies { padding-top: 0; }
.device-app-install-panel { margin-top: 22px; overflow: hidden; }
.device-app-install-panel .section-title { padding: 24px 26px 0; }
.device-app-table { min-width: 700px; }
.device-app-table thead th:nth-child(1) { width: 35%; }
.device-app-table thead th:nth-child(2) { width: 25%; }
.device-app-table thead th:nth-child(3) { width: 20%; }
.device-app-table thead th:nth-child(4) { width: 20%; }
.device-app-table td small { overflow-wrap: anywhere; }
.device-app-table .catalog-install-action { display: inline; }
.device-app-table .empty-apps { color: var(--muted); }
.priority-device-card { display: grid; gap: 18px; }
.priority-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.device-identity { min-width: 0; }
.device-identity > .eyebrow { margin: 16px 0 4px; }
.device-identity h2 { margin: 0 0 6px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.device-identity > p:last-of-type { margin: 0; color: var(--muted); font-weight: 650; }
.device-integration-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--border); }
.device-integration-strip > div { display: grid; min-width: 0; min-height: 68px; align-content: center; gap: 5px; padding: 12px 15px; background: #fff; }
.device-integration-strip span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.device-integration-strip a { overflow: hidden; color: var(--blue); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.device-integration-strip > .button { margin: 0 12px; white-space: nowrap; }
.device-link-editor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: #f7fafb; }
.device-link-editor[hidden] { display: none; }
.device-link-editor .button { margin: 0; }
.primary-reboot { display: grid; width: min(230px, 100%); flex: 0 0 auto; padding: 17px; border: 1px solid #efcaca; border-radius: 14px; background: #fffafa; }
.primary-reboot > span { color: var(--danger); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.primary-reboot .button { width: 100%; }
.primary-reboot small { margin-top: 8px; color: var(--muted); line-height: 1.4; }
.reboot-empty { margin: 12px 0 0; color: var(--muted); font-size: .75rem; }
.reboot-progress { display: grid; gap: 7px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #efd9d9; list-style: none; }
.reboot-progress li { display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 8px; }
.reboot-progress li > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e8eef0; color: var(--muted); font-size: .7rem; font-weight: 900; }
.reboot-progress li.done > span { background: var(--success-soft); color: var(--success); }
.reboot-progress li.failed > span { background: var(--danger-soft); color: var(--danger); }
.reboot-progress li div { display: grid; gap: 1px; }
.reboot-progress li strong { color: var(--navy); font-size: .76rem; }
.reboot-progress li small { margin: 0; color: var(--muted); font-size: .68rem; }
.reboot-progress.compact { min-width: 210px; margin-top: 9px; padding-top: 8px; border-top-color: var(--border); }
.reboot-progress.compact li { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; }
.reboot-progress.compact li > span { width: 17px; height: 17px; font-size: .58rem; }
.reboot-progress.compact li strong { font-size: .69rem; }
.reboot-progress.compact li small { font-size: .62rem; }
.reboot-status-wrap { display: grid; gap: 8px; }
.reboot-job-time,
.reboot-heartbeat-countdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 9px 11px; border: 1px solid #cfe2e8; border-radius: 10px; background: #f3fafc; }
.reboot-job-time span,
.reboot-heartbeat-countdown span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.reboot-job-time strong,
.reboot-heartbeat-countdown strong { color: var(--navy); font-size: .76rem; font-variant-numeric: tabular-nums; }
.reboot-heartbeat-countdown small { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .65rem; }
.reboot-heartbeat-countdown.due,
.reboot-heartbeat-countdown.overdue { border-color: #efd39c; background: #fff8e8; }
.reboot-progress.compact { min-width: 0; }
.reboot-progress.compact + * { min-width: 0; }
.reboot-status-wrap:has(.reboot-progress.compact) .reboot-job-time,
.reboot-status-wrap:has(.reboot-progress.compact) .reboot-heartbeat-countdown { padding: 7px 8px; gap: 1px 8px; }
.reboot-status-wrap:has(.reboot-progress.compact) .reboot-job-time span,
.reboot-status-wrap:has(.reboot-progress.compact) .reboot-heartbeat-countdown span { font-size: .59rem; }
.reboot-status-wrap:has(.reboot-progress.compact) .reboot-job-time strong,
.reboot-status-wrap:has(.reboot-progress.compact) .reboot-heartbeat-countdown strong { font-size: .66rem; }
.fleet-reboot-control { display: grid; gap: 5px; }
.reboot-inline-message { display: block; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.reboot-inline-message:empty { display: none; }
.reboot-inline-message.error { color: var(--danger); font-weight: 750; }
.priority-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

/* The tablet page follows the operational reading order: assignment, live
   connectivity, technical facts, policies, then maintenance controls. */
.priority-device-card > .device-integration-strip { order: 1; }
.priority-device-card > .device-link-editor { order: 2; }
.priority-device-card > .customer-account-strip { order: 3; }
.priority-device-card > .priority-facts { order: 4; }
.priority-device-card > .technical-summary { order: 5; }
.priority-device-card > .device-policy-status { order: 6; }
.priority-device-card > .detail-action-row { order: 7; }
.priority-device-card > .device-setup { order: 8; }
.priority-device-card > .priority-columns { order: 9; }
.priority-device-card > .activity-primary { order: 10; }
.priority-device-card > .technical-details { order: 11; }
.priority-device-card > .economics-panel { order: 12; }

.technical-summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.technical-summary-list > div { display: grid; grid-template-columns: minmax(125px, .55fr) minmax(0, 1.45fr); gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--border); background: #fff; }
.technical-summary-list > div:nth-child(odd) { border-right: 1px solid var(--border); }
.technical-summary-list dt { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.technical-summary-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: .82rem; font-weight: 700; }
.priority-fact { position: relative; display: grid; gap: 5px; min-width: 0; padding: 17px 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: #fbfcfc; }
.priority-fact::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.priority-fact.good::before { background: var(--success); }
.priority-fact.warn::before { background: var(--warning); }
.priority-fact.bad::before { background: var(--danger); }
.priority-fact > span { color: var(--muted); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.priority-fact > strong { color: var(--navy); font-size: 1rem; overflow-wrap: anywhere; }
.priority-fact > small { color: var(--muted); line-height: 1.35; }
.priority-fact.contact-fact { padding: 12px; }
.contact-countdown { display: grid; align-content: center; gap: 5px; min-height: 100%; }
.contact-countdown > span { color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.contact-countdown > strong { color: var(--navy); font-size: 1rem; }
.contact-countdown > small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.contact-countdown.due { border-radius: 8px; background: var(--warning-soft); }
.priority-fact a { color: var(--blue); font-weight: 800; text-decoration: none; }
.priority-fact a:hover { text-decoration: underline; }
.model-emphasis { margin: 2px 0 0; color: var(--navy); font-size: 1.05rem; font-weight: 850; }
.links-fact { grid-column: span 2; }
.imei-fact { border-color: #b9d8e4; background: #f3f9fb; }
.imei-fact > strong { font-size: 1.18rem; letter-spacing: .03em; }
.device-policy-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 17px 19px; border: 1px solid var(--border); border-left: 5px solid #87969e; border-radius: 14px; background: #f8fafb; }
.device-policy-status.good { border-left-color: var(--success); background: linear-gradient(90deg, var(--success-soft), #fff 35%); }
.device-policy-status.warn { border-left-color: var(--orange); background: linear-gradient(90deg, var(--warning-soft), #fff 35%); }
.device-policy-status.bad { border-left-color: var(--danger); background: linear-gradient(90deg, var(--danger-soft), #fff 35%); }
.device-policy-status h3 { margin: 0 0 3px; font-size: 1rem; }
.device-policy-status p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .82rem; }
.policy-source-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.policy-source-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 9px; border: 1px solid #bfd4dd; border-radius: 999px; background: #fff; color: var(--navy); font-size: .74rem; }
.policy-source-chip { text-decoration: none; }
.policy-source-chip:hover, .policy-source-chip:focus-visible { border-color: var(--blue); background: #f3f9fb; }
.policy-source-chip small { color: var(--muted); font-size: .67rem; }
.device-additional-policies { grid-column: 1 / -1; min-width: 0; padding-top: 4px; }
.device-additional-policies[hidden] { display: none; }
.policy-add-content { display: grid; gap: 13px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.policy-add-guidance { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.policy-add-content .policy-devices { margin: 0; }
.policy-add-content > .button { justify-self: start; }
.policy-option { display: grid; align-content: start; gap: 5px; min-width: 0; }
.policy-option > a { padding-inline: 12px; font-size: .74rem; font-weight: 750; }
.priority-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 14px; }
.primary-panel, .activity-primary { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 15px; background: #fbfcfc; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-heading h3 { margin-bottom: 0; }
.speed-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 16px 0 12px; }
.speed-cards > div { display: grid; gap: 5px; padding: 15px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.speed-cards span, .telemarie-version span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.speed-cards strong { color: var(--navy); font-size: 1.12rem; }
.internet-panel > small { color: var(--muted); line-height: 1.45; }
.speed-history { margin-top: 17px; padding: 14px 14px 9px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.speed-history.pending { display: grid; gap: 3px; padding: 15px; background: #f5f8f9; }
.speed-history.pending strong { color: var(--navy); font-size: .86rem; }
.speed-history.pending small { color: var(--muted); }
.speed-history-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; }
.speed-history-heading strong { color: var(--navy); font-size: .9rem; }
.speed-history-heading span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.speed-history-heading i { width: 14px; height: 3px; margin-left: 5px; border-radius: 999px; }
.speed-history-heading i.download { background: var(--blue); }
.speed-history-heading i.upload { background: var(--orange); }
.speed-history svg { display: block; width: 100%; height: auto; overflow: visible; }
.speed-grid-line { stroke: #dce5e8; stroke-width: 1; }
.speed-download-line, .speed-upload-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.speed-download-line { stroke: var(--blue); }
.speed-upload-line { stroke: var(--orange); }
.speed-download-point { fill: var(--blue); }
.speed-upload-point { fill: var(--orange); }
.speed-axis-label, .speed-date-label, .speed-unit-label { fill: #667985; font-family: inherit; font-size: 10px; }
.speed-unit-label { font-size: 9px; font-weight: 750; }
.telemarie-version { display: grid; gap: 5px; margin: 10px 0 15px; padding: 16px; border-left: 4px solid var(--muted); border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.telemarie-version.current { border-left-color: var(--success); background: var(--success-soft); }
.telemarie-version.older { border-left-color: var(--orange); background: var(--warning-soft); }
.telemarie-version.newer { border-left-color: var(--blue); background: #edf6fa; }
.telemarie-version strong { color: var(--navy); font-size: 1.16rem; }
.version-badge { display: inline-flex; width: fit-content; align-items: center; padding: 4px 8px; border-radius: 999px; background: #e8eef0; color: var(--muted); font-size: .7rem; font-weight: 900; }
.version-badge.current { background: #ccebdd; color: #0b6040; }
.version-badge.older { background: #ffe1ad; color: #7a4800; }
.version-badge.newer { background: #d8ebf4; color: #145f80; }
.fleet-app-version { min-width: 205px; border-left: 4px solid var(--muted); }
.fleet-app-version.current { border-left-color: var(--success); background: var(--success-soft); }
.fleet-app-version.older { border-left-color: var(--orange); background: var(--warning-soft); }
.fleet-app-version.newer { border-left-color: var(--blue); background: #edf6fa; }
.fleet-app-version .version-badge { margin: 6px 0 2px; }
.app-inventory { overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.app-inventory > summary { display: grid; gap: 3px; padding: 13px 15px; cursor: pointer; }
.app-inventory > summary span { color: var(--navy); font-weight: 800; }
.app-inventory > summary strong { color: var(--muted); font-size: .76rem; }
.app-list { display: grid; padding: 0 15px 12px; border-top: 1px solid var(--border); }
.app-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e6edef; }
.app-list article:last-child { border-bottom: 0; }
.app-list article div { display: grid; min-width: 0; gap: 2px; }
.app-list article strong { color: var(--navy); }
.app-list article small { color: var(--muted); overflow-wrap: anywhere; }
.app-list article > span { flex: 0 0 auto; color: var(--muted); font-size: .78rem; text-align: right; }
.app-list article.current { border-left: 4px solid var(--success); padding-left: 9px; }
.app-list article.older { border-left: 4px solid var(--orange); padding-left: 9px; }
.app-list article.newer { border-left: 4px solid var(--blue); padding-left: 9px; }
.app-list .app-version { display: grid; justify-items: end; gap: 5px; color: var(--muted); font-size: .78rem; text-align: right; }
.empty-apps { margin: 12px 0 0; color: var(--muted); }
.activity-primary ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.activity-primary li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.activity-primary li span { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.activity-primary li strong { color: var(--navy); font-size: .78rem; line-height: 1.35; }
.secondary-details { margin: 0; }
.secondary-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.device-heading { padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.device-heading h2 { margin: 12px 0 5px; font-size: 1.55rem; }
.device-id { color: var(--muted); }
.device-purpose { margin: 0; color: var(--muted); font-size: .88rem; font-weight: 650; }

.last-seen { display: grid; gap: 4px; min-width: 190px; text-align: right; }
.last-seen strong { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.last-seen small { color: var(--muted); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.status span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(20, 122, 83, .1); }
.status.online { color: var(--success); background: var(--success-soft); }
.status.delayed { color: var(--warning); background: var(--warning-soft); }
.status.offline, .status.never, .status.unknown { color: var(--danger); background: var(--danger-soft); }

.state-guidance { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; margin: 22px 0 16px; padding: 15px 17px; border-left: 4px solid #87969e; border-radius: 11px; background: #f4f7f8; }
.state-guidance.good { border-left-color: var(--success); background: var(--success-soft); }
.state-guidance.warn { border-left-color: var(--orange); background: var(--warning-soft); }
.state-guidance.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.state-guidance strong { color: var(--navy); }
.state-guidance p { margin: 3px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }

.operational-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.operational-item { position: relative; display: grid; gap: 4px; min-width: 0; padding: 15px 16px 15px 19px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfc; }
.operational-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #87969e; }
.operational-item.good::before { background: var(--success); }
.operational-item.warn::before { background: var(--orange); }
.operational-item.bad::before { background: var(--danger); }
.operational-item > span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.operational-item > strong { color: var(--navy); overflow-wrap: anywhere; }
.operational-item > small { color: var(--muted); overflow-wrap: anywhere; }

.device-workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; margin-bottom: 18px; }
.readiness-panel, .connection-panel { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 15px; background: #fbfcfc; }
.subsection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.subsection-heading h3 { margin-bottom: 0; font-size: 1.13rem; }
.subsection-heading > div > p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.count-badge { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #edf2f4; color: var(--muted); font-size: .7rem; font-weight: 800; }
.count-badge.good { background: var(--success-soft); color: var(--success); }
.count-badge.warn { background: var(--warning-soft); color: var(--warning); }
.count-badge.bad { background: var(--danger-soft); color: var(--danger); }
.count-badge.pending { background: #edf2f4; color: var(--muted); }

.check-list { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #e6edef; }
.check-list li > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #e8eef0; color: var(--muted); font-size: .76rem; font-weight: 900; }
.check-list li.good > span { background: var(--success-soft); color: var(--success); }
.check-list li.warn > span { background: var(--warning-soft); color: var(--warning); }
.check-list li.bad > span { background: var(--danger-soft); color: var(--danger); }
.check-list li div { display: grid; gap: 2px; }
.check-list li strong { color: var(--navy); font-size: .88rem; }
.check-list li small { color: var(--muted); line-height: 1.35; }

.network-facts { display: grid; gap: 0; margin: 14px 0 0; }
.network-facts > div { display: grid; gap: 3px; padding: 13px 0; border-top: 1px solid #e6edef; }
.network-facts dt { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.network-facts dd { margin: 0; color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.network-facts small { color: var(--muted); line-height: 1.4; }

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--border);
}

.metrics div { min-width: 0; padding: 15px; background: var(--surface); }
.metrics dt { margin-bottom: 5px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.metrics dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.events { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: #f6f9fa; }
.events summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.events ul { columns: 2; margin: 14px 0 0; padding-left: 20px; color: var(--muted); }
.events li { display: grid; gap: 2px; margin-bottom: 9px; break-inside: avoid; }
.events li strong { color: var(--navy); font-size: .83rem; }
.events li code { color: var(--muted); font-size: .7rem; }

.connectivity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}

.connectivity-card { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #f8fbfc; }
.connectivity-card h3 { overflow-wrap: anywhere; }
.connectivity-card p { margin-bottom: 7px; color: var(--muted); }
.connectivity-card small { display: block; color: var(--muted); line-height: 1.45; }
.sim-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sim-list li { display: grid; gap: 3px; }
.sim-list span { color: var(--muted); font-size: .86rem; }
.pending-hint { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--warning-soft); color: var(--warning) !important; }
.privacy-card { background: #f7fafb; }

.technical-details { margin-bottom: 24px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.technical-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; cursor: pointer; list-style: none; }
.technical-details > summary::-webkit-details-marker { display: none; }
.technical-details > summary::before { content: "+"; display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; order: 3; border-radius: 50%; background: #edf3f5; color: var(--navy); font-weight: 900; }
.technical-details[open] > summary::before { content: "−"; }
.technical-details > summary > span:first-child { display: grid; gap: 3px; }
.technical-details > summary small { color: var(--muted); }
.data-completeness { display: grid; gap: 6px; min-width: 150px; margin-left: auto; color: var(--muted); font-size: .72rem; text-align: right; }
.data-completeness > i { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #e3eaed; }
.data-completeness > i > i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.technical-body { padding: 0 18px 18px; border-top: 1px solid var(--border); }
.technical-body .connectivity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.remote-section { padding-top: 3px; }
.remote-section > .subsection-heading { margin-bottom: 13px; }
.remote-management-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.remote-control-note { margin: 14px 0 0; padding: 13px 15px; border-left: 4px solid var(--blue); border-radius: 10px; background: #eef7fa; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.remote-control-note strong { color: var(--navy); }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.action-box { display: flex; min-width: 0; flex-direction: column; padding: 20px; border: 1px solid var(--border); border-radius: 14px; }
.action-box p { min-height: 45px; color: var(--muted); line-height: 1.45; }
.action-box label { margin-top: auto; }
.danger-box { border-color: #efcaca; background: #fffafa; }
.speed-box { background: #f5fafc; }
.data-usage-panel { margin-top: 18px; }
.data-usage-panel .panel-heading { align-items: center; }
.data-usage-panel .panel-heading form { flex: 0 0 auto; }
.data-usage-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.data-usage-values > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #f7fafb; }
.data-usage-values span { color: var(--muted); font-size: .82rem; }
.data-usage-values strong { color: var(--navy); font-size: 1.35rem; }
.data-usage-panel > p { color: var(--muted); }
.data-usage-panel > small { display: block; margin-top: 8px; color: var(--muted); }
.data-usage-pending { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #f5fafc; color: var(--muted); }
@media (max-width: 700px) { .data-usage-panel .panel-heading { align-items: stretch; flex-direction: column; } .data-usage-panel .panel-heading form { width: 100%; } }

label { display: grid; gap: 8px; color: var(--navy); font-size: .85rem; font-weight: 700; line-height: 1.45; }
input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #b8cbd3;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}

input:focus { outline: 3px solid rgba(25, 107, 143, .18); border-color: var(--blue); }

.policy-hero { align-items: center; }
.policy-hero .button { flex: 0 0 auto; margin: 0; }
.policy-safety { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; margin-bottom: 42px; padding: clamp(22px, 4vw, 34px); border-top: 4px solid var(--orange); }
.policy-safety p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.58; }
.policy-code-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.policy-code-catalog span { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px; background: #f8fbfc; }
.policy-code-catalog code { color: var(--navy); font-weight: 800; }
.policy-code-catalog small { color: var(--muted); }
.policy-grid { display: grid; gap: 20px; margin: 15px 0 46px; }
.policy-new-grid { margin-bottom: 0; }
.policy-card { overflow: hidden; border-top: 4px solid var(--navy); }
.policy-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px clamp(20px, 4vw, 32px); border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #f8fbfc, #fff); }
.policy-base-group { margin-bottom: 34px; }
.policy-additional-heading { margin-top: 12px; }
.policy-card-base { border: 2px solid #e6a42b; box-shadow: 0 12px 30px rgba(189, 126, 18, .12); }
.policy-card-base > header { background: linear-gradient(135deg, #fff7e5, #fff); }
.policy-card-additional { border-left: 4px solid #9aaab0; }
.policy-base-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 20px; background: #fff0c9; color: #6b4300; border-bottom: 1px solid #f0d18b; }
.policy-base-banner strong { letter-spacing: .05em; text-transform: uppercase; }
.policy-base-banner span { font-size: .8rem; }
.policy-empty { padding: 24px; color: var(--muted); }
.policy-card > header h3 { margin: 0; font-size: 1.35rem; }
.policy-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.policy-counts span { padding: 6px 9px; border-radius: 999px; background: #eaf2f5; color: var(--blue); font-size: .7rem; font-weight: 800; }
.policy-form { display: grid; gap: 22px; padding: clamp(20px, 4vw, 32px); }
.policy-basics { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(280px, 1.2fr) minmax(180px, .55fr); gap: 14px; }
.policy-basics label { align-content: start; }
.policy-basics label > small { margin-top: 5px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.policy-basics input[readonly] { border-color: #c8d6dc; background: #f1f5f6; color: var(--navy); }
.policy-code-label textarea { width: 100%; min-height: 360px; resize: vertical; padding: 16px; border: 1px solid #9fb8c3; border-radius: 12px; background: #102b3d; color: #ecf5f8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.55; tab-size: 2; }
.policy-code-label textarea:focus { outline: 3px solid rgba(25, 107, 143, .18); border-color: var(--orange); }
.policy-code-label textarea[readonly] { background: #294554; color: #e7f0f3; cursor: default; }
.policy-code-label > small { color: var(--muted); font-weight: 500; }
.policy-advanced { padding: 14px 16px; border: 1px solid var(--border); border-radius: 11px; background: #f8fbfc; }
.policy-advanced > summary { color: var(--muted); font-size: .84rem; font-weight: 800; cursor: pointer; }
.policy-advanced[open] > summary { margin-bottom: 14px; color: var(--navy); }
.policy-advanced .policy-code-label { display: grid; gap: 8px; }
.policy-install-note { margin: 0 0 28px; padding: 20px 22px; border-left: 5px solid var(--blue); }
.policy-install-note h2 { margin-bottom: 6px; font-size: 1.2rem; }
.policy-install-note p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.policy-app-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: #f4f8fa; }
.policy-app-presets > strong { margin-right: 4px; color: var(--navy); font-size: .78rem; }
.policy-app-presets button { min-height: 34px; padding: 6px 10px; border: 1px solid #a9c8d4; border-radius: 8px; background: #fff; color: var(--blue); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.policy-app-presets button:hover { border-color: var(--orange); color: var(--warning); }
.policy-effects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.policy-effects > div { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #f8fbfc; }
.policy-effects h4 { margin: 0 0 10px; color: var(--navy); font-size: .9rem; }
.policy-effects p { margin: 0; color: var(--muted); font-size: .84rem; }
.policy-effects ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.policy-effects li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; color: var(--navy); font-size: .84rem; }
.policy-effects li span { color: var(--muted); font-size: .78rem; }
.policy-devices { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--border); border-radius: 13px; }
.policy-devices legend { padding: 0 7px; color: var(--navy); font-weight: 850; }
.policy-devices > p { margin: 0 0 12px; color: var(--muted); font-size: .84rem; }
.policy-devices > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.device-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfc; cursor: pointer; }
.device-check:has(input:checked) { border-color: #8cc0d3; background: #eef8fb; }
.device-check:has(input:disabled) { cursor: default; opacity: .78; }
.device-check input { width: 19px; min-height: 19px; margin: 0; accent-color: var(--blue); }
.device-check span { display: grid; min-width: 0; gap: 2px; }
.device-check strong { overflow-wrap: anywhere; }
.device-check small { color: var(--muted); overflow-wrap: anywhere; font-weight: 500; }
.policy-default-hint { margin: 13px 0 0 !important; padding: 10px 12px; border-radius: 9px; background: var(--orange-soft); color: var(--warning) !important; }
.policy-layer-hint { margin: 13px 0 0 !important; padding: 10px 12px; border-radius: 9px; background: #eaf4f8; color: var(--blue) !important; }
.empty-policy-devices { margin: 0; color: var(--muted); }
.policy-form > .button { width: fit-content; min-width: 210px; margin: 0; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 17px;
  border: 1px solid var(--blue);
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--blue-dark); }
.button:disabled,
.button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(248, 172, 53, .55); outline-offset: 3px; }
.button.secondary { margin-top: 0; border-color: var(--border); background: #fff; color: var(--navy); }
.button.secondary:hover { border-color: var(--blue); color: var(--blue); }
.site-header .button.secondary { border-color: rgba(255, 255, 255, .4); background: transparent; color: #fff; }
.site-header .button.secondary:hover { border-color: var(--orange); color: var(--orange); }
.button.danger { border-color: var(--danger); background: var(--danger); }
.button.danger:hover { background: #842727; }

.flash { margin: 0 0 24px; padding: 15px 17px; border-radius: 12px; font-weight: 700; }
.flash.success { color: #0b6040; background: var(--success-soft); border: 1px solid #b9e3d2; }
.flash.error { color: #842727; background: var(--danger-soft); border: 1px solid #efcaca; }

.commands { margin-top: 28px; padding: clamp(20px, 4vw, 30px); }
.command-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.command-history > summary::-webkit-details-marker { display: none; }
.command-history > summary h2 { margin: 0; }
.command-history > summary > span { color: var(--blue); font-size: .8rem; font-weight: 800; }
.command-history[open] > summary { margin-bottom: 20px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.fleet-list { margin: 24px 0 38px; padding: clamp(20px, 4vw, 30px); }
.fleet-list .section-title { margin: 0 0 16px; }
.fleet-list td > small { display: block; margin-top: 4px; color: var(--muted); }
.fleet-list td > a { color: var(--blue); text-decoration: none; }
.fleet-list td > a:hover { text-decoration: underline; }
.fleet-table { min-width: 1320px; }
.fleet-table td { vertical-align: middle; }
.fleet-table td > strong,
.heartbeat-time { display: block; margin-top: 5px; color: var(--navy); }
.fleet-battery { min-width: 205px; border-left: 4px solid var(--success); }
.fleet-display { min-width: 170px; border-left: 4px solid var(--success); }
.fleet-display.screen-black { border-left-color: var(--navy); background: #f1f4f6; }
.fleet-display.stale { border-left-color: var(--orange); background: var(--warning-soft); }
.fleet-battery > strong { font-size: 1.15rem; }
.fleet-battery.stale { border-left-color: var(--orange); background: var(--warning-soft); }
.fleet-battery.low { border-left-color: var(--danger); background: var(--danger-soft); }
.compact-battery-low { box-shadow: inset 4px 0 var(--danger); background: var(--danger-soft); color: var(--danger); }
.battery-mail { display: inline-block; margin-top: 8px; color: var(--blue); font-size: .78rem; font-weight: 850; }
.battery-alert-status { display: block; width: fit-content; margin-top: 8px; padding: 5px 8px; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.battery-alert-status.sent { background: var(--success-soft); color: #0b6040; }
.battery-alert-status.pending { background: var(--warning-soft); color: #7a4800; }
.battery-alert-status.failed { background: var(--danger-soft); color: var(--danger); }
.contact-missing { color: var(--danger) !important; font-weight: 800; }
.battery-fact > strong { font-size: 1.35rem; }
.fleet-reboot { margin: 0; }
.compact-reboot { min-height: 40px; margin: 0; padding: 8px 13px; white-space: nowrap; }
.compact-fleet { padding: 18px 20px; }
.compact-fleet .section-title { align-items: center; margin-bottom: 13px; }
.compact-fleet .section-title p:not(.eyebrow) { max-width: 800px; margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.fleet-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto; align-items: end; gap: 10px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: #f7fafb; }
.fleet-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fleet-toolbar input, .fleet-toolbar select { min-height: 38px; padding: 7px 10px; }
.fleet-toolbar > strong { padding: 0 4px 10px; color: var(--navy); font-size: .82rem; white-space: nowrap; }
.compact-fleet-wrap { width: 100%; max-height: 620px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 11px; }
.compact-fleet-table { width: 100%; min-width: 0; table-layout: fixed; font-size: .72rem; }
.compact-fleet-table thead { position: sticky; top: 0; z-index: 2; background: #edf3f5; }
.compact-fleet-table th { padding: 7px 6px; overflow-wrap: anywhere; }
.compact-fleet-table td { padding: 7px 6px; line-height: 1.2; overflow-wrap: anywhere; }
.compact-fleet-table th:nth-child(1) { width: 18%; }
.compact-fleet-table th:nth-child(2) { width: 8%; }
.compact-fleet-table th:nth-child(3) { width: 10%; }
.compact-fleet-table th:nth-child(4) { width: 18%; }
.compact-fleet-table th:nth-child(5) { width: 20%; }
.compact-fleet-table th:nth-child(6) { width: 13%; }
.compact-fleet-table th:nth-child(7) { width: 7%; }
.compact-fleet-table th:nth-child(8) { width: 6%; }
.compact-fleet-table .button { min-height: 32px; padding: 5px 7px; font-size: .68rem; }
.compact-fleet-table tbody td { height: 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.compact-fleet-table td > strong,
.compact-fleet-table .heartbeat-time { display: inline; margin: 0; }
.compact-fleet-table td > small { display: inline; margin: 0; }
.compact-device-identity small { color: var(--muted); font-size: .68rem; }
.compact-version-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.compact-version-dot.current { background: var(--success); }
.compact-version-dot.older { background: var(--orange); }
.compact-version-dot.newer { background: var(--blue); }
.compact-speed { margin-left: 5px !important; color: var(--muted); }
.compact-fleet-table .status { margin-right: 5px; padding: 4px 6px; font-size: .62rem; }
.compact-fleet-table .status span { width: 6px; height: 6px; }
.compact-contact { font-weight: 800; }
.compact-device-row { transition: background .15s ease; }
.compact-device-row:hover { background: #f3f8fa; cursor: pointer; }
.compact-device-row:focus-visible { outline: 3px solid rgba(25, 107, 143, .25); outline-offset: -3px; background: #f3f8fa; }
.compact-device-row.selected { background: #e8f4f8; box-shadow: inset 4px 0 var(--blue); }
.device-detail-link { color: var(--navy) !important; text-decoration: none !important; }
.device-detail-link:hover { color: var(--blue) !important; }
.compact-health { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #e8eef0; color: var(--muted); font-weight: 850; }
.compact-health.good { background: var(--success-soft); color: #0b6040; }
.compact-health.bad { background: var(--danger-soft); color: var(--danger); }
.version-inline.current { color: var(--success); font-weight: 850; }
.version-inline.older { color: var(--warning); font-weight: 850; }
.version-inline.newer { color: var(--blue); font-weight: 850; }
.compact-open { min-height: 34px; margin: 0; padding: 6px 10px; font-size: .74rem; white-space: nowrap; }
.compact-open[aria-current="true"] { border-color: var(--blue); background: #e3f1f6; color: var(--navy); }
.sim-security-alert { margin-bottom: 10px; padding: 11px 12px; border: 1px solid #efc1c1; border-radius: 10px; background: var(--danger-soft); }
.sim-security-alert strong { color: var(--danger); }
.sim-security-alert p { margin: 4px 0 0; color: var(--navy); font-size: .78rem; line-height: 1.45; }
.sim-security-alert small { color: var(--muted); font-weight: 700; }
.fleet-empty-filter { margin: 14px 0 2px; color: var(--muted); text-align: center; }
.device-detail-page { padding-top: 26px; }
.detail-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 2px 18px; }
.detail-page-heading h1 { margin: 0 0 6px; font-size: clamp(2rem, 4vw, 3.4rem); }
.detail-page-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.device-name-editor { display: grid; gap: 6px; max-width: 560px; margin-top: 14px; }
.device-name-editor label { color: var(--navy); font-size: .8rem; font-weight: 800; }
.device-name-editor > div { display: flex; flex-wrap: wrap; gap: 8px; }
.device-name-editor input { min-width: min(260px, 100%); flex: 1 1 240px; }
.device-name-editor small { color: var(--muted); font-size: .75rem; }
.panel-inset { margin: 18px 0; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: #f8fbfc; }
.device-setup .panel-heading { margin-bottom: 0; }
.device-setup .panel-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); }
.setup-editor { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); }
.setup-editor > summary { cursor: pointer; color: var(--blue); font-weight: 800; }
.setup-editor form { display: grid; gap: 16px; margin-top: 16px; }
.setup-warning { margin: 0; padding: 12px 14px; border-left: 4px solid var(--danger); border-radius: 9px; background: var(--danger-soft); color: #842727; }
.setup-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.setup-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.setup-check:has(input:checked) { border-color: #9acdb9; background: var(--success-soft); }
.setup-check.required-step:not(:has(input:checked)) { border-color: #efcaca; background: #fffafa; }
.setup-check input { width: 18px; min-height: 18px; margin: 2px 0 0; accent-color: var(--success); }

.login-shell { min-height: calc(100vh - 55px); display: grid; place-items: center; }
.login-card { display: grid; width: min(960px, 100%); grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); overflow: hidden; }
.login-brand-panel { position: relative; display: flex; min-height: 570px; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 66px); overflow: hidden; background: var(--navy); color: #dce8ed; }
.login-brand-panel::after { content: ""; position: absolute; width: 290px; height: 290px; right: -130px; bottom: -130px; border: 44px solid rgba(248, 172, 53, .13); border-radius: 50%; }
.login-brand-panel img { display: block; width: min(260px, 75%); height: auto; margin-bottom: 48px; }
.login-brand-panel h1 { margin-bottom: 20px; color: #fff; font-size: clamp(2.45rem, 5vw, 4rem); }
.login-brand-panel > p:not(.eyebrow) { max-width: 430px; color: #c7d8df; line-height: 1.65; }
.login-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.login-trust span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #e9f2f5; font-size: .72rem; }
.login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 66px); }
.login-form-panel h2 { margin-bottom: 12px; font-size: 2rem; }
.login-form { display: grid; margin-top: 32px; }
.login-form .button { width: 100%; }
.login-cookie-note { margin-top: 18px; color: var(--muted); font-size: .8rem; line-height: 1.5; }

.empty { padding: 44px; text-align: center; }
footer { padding: 27px 0 4px; color: var(--muted); font-size: .75rem; text-align: center; }

@media (max-width: 1050px) {
  .fleet-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connectivity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-highlight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compact-status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-primary ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header-tools nav { display: none; }
}

@media (max-width: 900px) {
  .fleet-toolbar { grid-template-columns: 1fr 1fr; }
  .fleet-toolbar > strong { grid-column: 1 / -1; padding-bottom: 2px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operational-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-workspace { grid-template-columns: 1fr; }
  .technical-body .connectivity-grid { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
  .priority-columns { grid-template-columns: 1fr; }
  .secondary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-box p { min-height: auto; }
  .login-card { grid-template-columns: 1fr; }
  .policy-safety, .policy-basics, .policy-effects { grid-template-columns: 1fr; }
  .policy-devices > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-brand-panel { min-height: 0; padding-block: 42px; }
  .login-brand-panel img { width: 200px; margin-bottom: 30px; }
  .login-brand-panel h1 { font-size: 2.5rem; }
}

@media (max-width: 720px) {
  .setup-check-grid { grid-template-columns: 1fr; }
  .device-highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .compact-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-more-info { margin-inline: 14px; }
  .device-secondary-section { padding: 18px 14px 14px; }
  .page-shell { width: min(100% - 20px, 1240px); padding-top: 10px; }
  .site-header { align-items: stretch; border-radius: 15px; }
  .brand-product { display: none; }
  .hero, .device-heading { display: grid; }
  .priority-header { display: grid; }
  .device-policy-status { grid-template-columns: 1fr; }
  .device-policy-status > .button { justify-self: start; }
  .primary-reboot { width: 100%; }
  .activity-primary ul { grid-template-columns: 1fr 1fr; }
  .hero { padding: 38px 5px 24px; }
  .sync-note { min-width: 0; }
  .fleet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 30px; }
  .attention-panel { grid-template-columns: auto minmax(0, 1fr); }
  .attention-panel > a { grid-column: 2; }
  .last-seen { min-width: 0; text-align: left; }
  .events ul { columns: 1; }
  .technical-details > summary { align-items: flex-start; flex-wrap: wrap; }
  .data-completeness { width: calc(100% - 45px); margin-left: 0; text-align: left; }
}

@media (max-width: 520px) {
  .site-header { display: grid; }
  .brand-lockup { justify-content: center; }
  .brand-lockup img { width: 160px; }
  .header-tools, .site-header form, .site-header .button { width: 100%; }
  .header-tools { display: block; }
  h1 { font-size: 2.45rem; }
  .fleet-summary, .metrics, .connectivity-grid, .operational-strip { grid-template-columns: 1fr; }
  .device-highlight-grid, .compact-status-strip { grid-template-columns: 1fr; }
  .device-more-info > summary { align-items: flex-start; flex-direction: column; }
  .device-more-info > summary small { margin-left: 0; }
  .fleet-toolbar { grid-template-columns: 1fr; }
  .fleet-toolbar > strong { grid-column: auto; }
  .priority-facts, .speed-cards, .activity-primary ul, .secondary-metrics, .technical-summary-list { grid-template-columns: 1fr; }
  .technical-summary-list > div:nth-child(odd) { border-right: 0; }
  .policy-hero { align-items: stretch; }
  .policy-code-catalog, .policy-devices > div { grid-template-columns: 1fr; }
  .policy-card > header { display: grid; }
  .policy-counts { justify-content: flex-start; }
  .policy-form > .button { width: 100%; }
  .device-integration-strip, .device-link-editor { grid-template-columns: 1fr; }
  .device-integration-strip > .button { margin: 10px 12px; }
  .attention-panel { grid-template-columns: 1fr; }
  .attention-panel .attention-icon { display: none; }
  .attention-panel > a { grid-column: auto; }
  .status-legend { align-items: flex-start; flex-direction: column; }
  .summary-card { min-height: 104px; }
  .tablet-title { align-items: stretch; }
  .tablet-title .button { white-space: nowrap; }
  .section-title h2 { font-size: 1.25rem; }
  .login-brand-panel { padding: 34px 28px; }
  .login-brand-panel img { width: 175px; }
  .login-brand-panel h1 { font-size: 2.2rem; }
  .login-form-panel { padding: 36px 28px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

.detail-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.detail-title-line h1 { margin: 0; }
.customer-account-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, .8fr); gap: 1px; border-block: 1px solid var(--border); background: var(--border); }
.customer-account-strip > div,
.customer-account-strip > details { min-width: 0; padding: 15px 17px; background: #fff; }
.customer-account-strip > div { display: grid; align-content: start; gap: 5px; }
.customer-account-strip span,
.customer-account-strip small { color: var(--muted); font-size: .72rem; }
.customer-account-strip strong { overflow-wrap: anywhere; color: var(--navy); }
.customer-account-strip details summary { color: var(--blue); font-size: .76rem; font-weight: 800; cursor: pointer; }
.customer-account-strip ul { display: grid; gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.customer-account-strip li { display: grid; gap: 2px; }
.customer-account-strip .contact-link { width: fit-content; color: var(--blue); font-size: .76rem; font-weight: 800; }
.customer-editor form { display: grid; gap: 10px; margin-top: 12px; }
.customer-editor .button { width: 100%; }
.policy-source-chip { align-items: flex-start; }
.economics-panel { margin-top: 16px; }
.economics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.economics-grid > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.economics-grid span, .economics-grid small { color: var(--muted); font-size: .7rem; }
.economics-grid strong { color: var(--navy); overflow-wrap: anywhere; }
.economics-grid .good { border-color: #9bd7bd; background: var(--success-soft); }
.economics-grid .warn { border-color: #efd09b; background: var(--warning-soft); }
.economics-editor { margin-top: 12px; }
.economics-editor summary { color: var(--blue); font-size: .78rem; font-weight: 800; cursor: pointer; }
.economics-editor form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px; margin-top: 12px; }
.economics-editor .button { margin: 0; }
.wifi-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin: 18px 0 28px; }
.wifi-profile-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.wifi-profile-card h3 { margin: 4px 0; color: var(--navy); }
.wifi-profile-card details { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.wifi-profile-card summary { color: var(--blue); font-weight: 800; cursor: pointer; }
.wifi-profile-card form, .wifi-profile-new form { display: grid; gap: 12px; margin-top: 14px; }
.wifi-profile-card > form { margin-top: 12px; }
.wifi-profile-new { max-width: 760px; }
.wifi-vault-locked { border-color: var(--warning); background: var(--warning-soft); }
.app-catalog-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; padding: 0; overflow: hidden; background: var(--border); }
.app-catalog-status > div { display: grid; gap: 4px; padding: 16px; background: #fff; }
.app-catalog-status strong { color: var(--navy); }
.app-catalog-status small, .app-catalog-table small { display: block; color: var(--muted); }
.app-catalog-status .eyebrow { margin: 0; font-size: .68rem; }
.beta-rollout-panel { border-top: 4px solid #d9992b; }
.beta-rollout-panel > h2 { margin: 4px 0 8px; color: var(--navy); }
.beta-rollout-panel > p { color: var(--muted); line-height: 1.5; }
.beta-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.beta-columns > article { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fbfdfe; }
.beta-columns h3, .beta-rollouts h3 { margin: 0 0 12px; color: var(--navy); }
.beta-form { display: grid; gap: 12px; }
.beta-form label { display: grid; gap: 6px; color: var(--navy); font-weight: 650; }
.beta-form input:not([type=checkbox]), .beta-form select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.beta-device-list { display: grid; gap: 8px; max-height: 280px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.beta-device-choice { display: flex !important; align-items: flex-start; gap: 9px !important; padding: 8px; border-radius: 8px; background: #fff; }
.beta-device-choice span, .beta-list-item > div { display: grid; gap: 3px; }
.beta-device-choice small, .beta-list-item small, .beta-rollout-card small { color: var(--muted); overflow-wrap: anywhere; }
.beta-list, .beta-groups { display: grid; gap: 9px; margin: 12px 0; padding: 0; list-style: none; }
.beta-list-item, .beta-rollout-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.beta-groups li { padding: 8px 10px; border-radius: 8px; background: #edf5f8; }
.beta-groups small { display: block; color: var(--muted); }
.beta-rollouts { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.beta-rollout-card > div:first-child { min-width: 0; }
.beta-rollout-card h3 { margin: 4px 0; color: var(--navy); }
.beta-rollout-card p { margin: 5px 0; }
.beta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.beta-warning { padding: 12px 14px; border-left: 3px solid #d9992b; border-radius: 7px; background: #fff8e9; color: #604310 !important; }
@media (max-width: 1050px) { .beta-columns { grid-template-columns: 1fr 1fr; } .beta-columns > article:last-child { grid-column: 1 / -1; } }
@media (max-width: 650px) { .beta-columns { grid-template-columns: 1fr; } .beta-columns > article:last-child { grid-column: auto; } .beta-rollout-card { align-items: flex-start; flex-direction: column; } .beta-actions { justify-content: flex-start; } }
.status-card-warn { background: var(--warning-soft) !important; }
.app-feature-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; margin: 18px 0; }
.app-feature-card { min-width: 0; }
.app-feature-card h2 { margin-bottom: 5px; }
.app-feature-card code { color: var(--blue); }
.app-version-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0; padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px; background: #f7fafb; }
.app-version-summary span { color: var(--muted); font-size: .8rem; }
.app-version-summary strong { color: var(--navy); }
.telemarie-feature { border-top: 4px solid var(--orange); }
.managed-play-feature { border-top: 4px solid #9aaab0; }
.managed-play-feature p { color: var(--muted); line-height: 1.5; }
.app-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-catalog-note { margin: 14px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.upload-step { display: grid; gap: 10px; padding: 16px; border: 1px solid #d7e5e9; border-radius: 14px; background: rgba(248, 252, 253, .9); }
.upload-step > strong { color: var(--navy); }
.file-drop { padding: 14px; border: 1px dashed #8db8c9; border-radius: 10px; background: #fff; }
.file-picker { display: flex; align-items: center; gap: 8px; }
.file-picker .file-drop { flex: 1; }
.file-clear { min-width: 42px; padding-inline: 10px; font-size: 1.25rem; line-height: 1; }
.upload-status { padding: 12px 14px; border-radius: 10px; background: #edf6f8; color: var(--navy); font-size: .92rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.managed-store-panel { margin-top: 18px; }
.app-catalog-editors { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); gap: 18px; margin: 18px 0; }
.app-catalog-form { display: grid; gap: 12px; margin-top: 14px; }
.app-catalog-form .button { justify-self: start; }

@media (max-width: 1050px) {
  .customer-account-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .economics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-catalog-editors, .app-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .customer-account-strip { grid-template-columns: 1fr; }
  .economics-grid, .economics-editor form { grid-template-columns: 1fr; }
  .app-catalog-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-form-grid { grid-template-columns: 1fr; }
}