/* Shared shell and operational screens. Configuration-specific controls live in configurations.css. */
body { background: #fff; letter-spacing: 0; }
.workspace { grid-template-columns: clamp(220px, 15.55vw, 300px) minmax(0, 1fr); gap: 0; padding: 0; }
.app-sidebar { top: 0; height: 100vh; border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 24px 0; gap: 30px; background: #fff; box-shadow: none; backdrop-filter: none; }
.sidebar-brand { grid-template-columns: 54px minmax(0, 1fr); padding: 0 24px; gap: 12px; }
.brand-logo { width: 54px; height: 54px; border: 0; padding: 0; }
.sidebar-brand strong { font-size: 28px; line-height: 1.2; }
.sidebar-brand span { font-size: 14px; line-height: 1.4; }
.sidebar-nav { gap: 8px; }
.sidebar-nav a { min-height: 56px; padding: 14px 28px; font-size: 16px; font-weight: 500; border-radius: 0; color: #30343b; border-left: 4px solid transparent; }
.sidebar-nav a.active { color: var(--primary); background: var(--primary-soft); box-shadow: none; border-left-color: var(--primary); }
.sidebar-nav .lucide { width: 23px; height: 23px; }
.sidebar-status { border: 0; border-radius: 0; padding: 0 28px; background: transparent; font-size: 12px; }
.sidebar-status .button { justify-content: flex-start; padding-left: 0; border: 0; box-shadow: none; }
.sidebar-status .version-text { justify-content: flex-start; }
.app-main { display: block; }
.topbar { position: static; padding: 26px 36px 28px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; background: #fff; backdrop-filter: none; min-height: 122px; }
.topbar h1 { margin-top: 10px; font-size: 28px; line-height: 1.25; font-weight: 600; }
.topbar-actions { display: none; }
.eyebrow { letter-spacing: 0; font-weight: 500; }
.app-page { padding: 30px 36px 48px; gap: 30px; }
.app-page[data-page="configs"], .app-page[data-page="phones"] { padding: 0; }
.workspace[data-route="phones"] .topbar { display: none; }
.connection-alert { margin: 24px 36px 0; border-radius: 4px; box-shadow: none; }
.button, .table-action { min-height: 42px; border-radius: 6px; font-size: 14px; font-weight: 500; box-shadow: none; }
.button .lucide { width: 18px; height: 18px; }
.button.icon-button.danger { color: var(--destructive); border-color: #ecd1d1; }
.button:active, .table-action:active { scale: .96; }
.sidebar-nav a:active, .list-item:active { scale: 1; }
input, select, textarea { box-shadow: none; min-height: 44px; font-size: 14px; border-radius: 5px; }
label { font-size: 14px; font-weight: 400; }
label > span { color: #4b5059; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.panel { border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.panel:hover, .summary-card:hover { box-shadow: none; transform: none; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #40464f; text-decoration: none; font-size: 13px; }
.text-link:hover { color: var(--primary); text-decoration: underline; }
.text-link .lucide { width: 17px; height: 17px; }
.summary-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 2px 0 30px; border-bottom: 1px solid var(--border); }
.summary-card { min-height: 112px; padding: 0 28px; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; text-decoration: none; gap: 10px; align-content: start; }
.summary-card:first-child { border-left: 0; padding-left: 0; }
.summary-card span { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.summary-card strong { font-size: 34px; font-weight: 600; }
.summary-card:hover strong { color: var(--primary); }
.summary-card small { font-size: 12px; }
.overview-section { min-width: 0; }
.overview-section + .overview-section { margin-top: 8px; }
.table-scroll { overflow-x: auto; }
.workspace-table { border-collapse: collapse; text-align: left; width: 100%; font-size: 14px; line-height: 1.5; }
.workspace-table th { color: #747982; background: #f8f9fa; font-weight: 400; font-size: 12px; white-space: nowrap; border-top: 1px solid var(--border); }
.workspace-table th, .workspace-table td { padding: 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.workspace-table td { overflow-wrap: anywhere; max-width: 340px; }
.workspace-table td strong { display: block; font-weight: 500; }
.workspace-table td small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 12px; }
.workspace-table tbody tr:hover { background: #fcfcfc; }
.workspace-table .mono { font-size: 12px; }
.workspace-table time { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; }
.workspace-table a { text-decoration: none; }
.workspace-table a:hover { color: var(--primary); text-decoration: underline; }
.table-empty { padding: 50px 20px !important; color: var(--muted-foreground); text-align: center; }
.state-text { font-size: 12px; text-transform: none; font-weight: 500; }
.state-dot, .connection-status::before { width: 6px; height: 6px; transform: none; border-radius: 50%; }
.search-field { position: relative; min-width: 0; }
.search-field > .lucide { position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; color: #858a92; pointer-events: none; }
.search-field input { padding-left: 38px; }
.view-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.view-tabs button { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 0 4px; color: #686d76; cursor: pointer; font-size: 14px; }
.view-tabs button[aria-pressed="true"] { border-bottom-color: var(--primary); color: var(--primary); }
.view-tabs .count { color: inherit; font-weight: 400; }
.history-toolbar { grid-template-columns: minmax(220px, 1fr) 160px auto; border: 0; padding: 0; background: none; margin-bottom: 22px; gap: 12px; }
.history-toolbar .history-export-button { min-height: 44px; }
.configured-list, .log-list { display: block; overflow: visible; }
.deployment-table { min-width: 1020px; }
.deployment-table tr.selected { background: #fff8f8; box-shadow: inset 3px 0 0 var(--primary); }
.deployment-table .table-action { min-width: 42px; width: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.table-action .lucide { width: 17px; height: 17px; }
.deployment-table td:nth-child(6) { font-size: 12px; }
.deployment-table td:nth-child(6) a { color: #5c616b; }
.history-pagination { min-height: 60px; font-size: 12px; padding-top: 14px; }
.history-page-button { width: 40px; height: 40px; min-height: 40px; }
.history-page-button .lucide { width: 16px; height: 16px; }
.deployment-detail { border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 26px 0 0; margin-top: 22px; }
.deployment-detail-grid { gap: 0; padding: 16px 0; border-block: 1px solid var(--border); }
.deployment-detail-grid > div { border: 0; border-radius: 0; background: none; padding: 0 20px; border-left: 1px solid var(--border); }
.deployment-detail-grid > div:first-child { border-left: 0; padding-left: 0; }
.deployment-detail-grid span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.json-preview { background: #f8f9fa; border: 1px solid var(--border); border-radius: 4px; color: #303740; padding: 20px; }
.events-toolbar { display: grid; grid-template-columns: minmax(200px, 460px) 200px 1fr; align-items: center; gap: 12px; margin-bottom: 24px; }
.events-toolbar .count { justify-content: flex-end; color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.event-table th:first-child { width: 180px; }
.event-table th:nth-child(2) { width: 210px; }
.event-table th:nth-child(3) { width: 150px; }
.event-table td:last-child { max-width: none; }
.event-channel { color: #4b5059; }
.event-channel small { font-size: 11px; }
.phones-workspace { grid-template-columns: clamp(280px, 21vw, 396px) minmax(0, 1fr); gap: 0; }
.phones-panel { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--border); padding: 28px 24px; }
.phones-panel .panel-heading { align-items: center; margin-bottom: 22px; }
.phones-panel h2 { margin: 0; font-size: 24px; font-weight: 600; }
.phone-add { margin-top: 16px; }
.phone-add summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 13px; min-height: 40px; color: #565c65; }
.phone-add summary::-webkit-details-marker { display: none; }
.phone-add .lucide { width: 16px; height: 16px; }
.phones-panel .list { gap: 0; padding: 0; margin-top: 18px; overflow: visible; }
.phones-panel .list.empty, .detail-empty { border: 0; background: transparent; padding: 32px 8px; }
.phones-panel .list-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 20px 10px; gap: 3px; }
.phones-panel .list-item.selected { border-radius: 4px; background: #f2f2f3; box-shadow: inset 3px 0 0 var(--primary); }
.phones-panel .list-item:hover { background: #f8f9fa; }
.phones-panel .item-title { font-size: 15px; font-weight: 500; flex-wrap: wrap; }
.phones-panel .item-meta { font-size: 11px; }
.phones-panel .item-meta-row { font-size: 12px; flex-wrap: wrap; }
.trash-section { margin-top: 26px; }
.trash-heading { cursor: pointer; list-style: none; min-height: 40px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }
.trash-heading::-webkit-details-marker { display: none; }
.trash-heading > span:first-child { display: inline-flex; gap: 8px; align-items: center; }
.trash-heading .lucide { width: 16px; height: 16px; }
.trash-item { background: transparent; }
.detail-panel { padding: 26px 32px 40px; }
.detail-grid { gap: 0; }
.phone-breadcrumb { font-size: 13px; color: var(--muted-foreground); margin-bottom: 22px; }
.phone-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
.phone-toolbar h1 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.phone-toolbar .detail-meta { font-size: 12px; margin-top: 9px; }
.phone-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.phone-toolbar-actions .button.primary { min-height: 42px; }
.phone-details-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 30%); gap: 32px; margin-top: 28px; }
.phone-settings { display: grid; gap: 28px; min-width: 0; }
.phone-form-section { display: grid; gap: 18px; }
.phone-form-section + .phone-form-section { border-top: 1px solid var(--border); padding-top: 26px; }
.phone-form-section h2, .phone-summary h2 { margin: 0; font-size: 19px; font-weight: 600; }
.phone-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.phone-field-grid .wide { grid-column: 1 / -1; }
.alias-field { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: end; }
.alias-field .button { height: 44px; }
.phone-settings .input-with-suffix { position: relative; display: block; }
.phone-settings .input-with-suffix input { padding-right: 48px; }
.phone-settings .input-with-suffix span { position: absolute; top: 12px; right: 12px; font-size: 13px; font-weight: 400; }
.phone-settings .check-line { min-height: 42px; padding: 4px 0; font-size: 14px; }
.phone-summary { min-width: 0; border-left: 1px solid var(--border); padding-left: 28px; }
.phone-summary dl { margin: 16px 0 0; }
.phone-summary dl > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 12px; }
.phone-summary dt { color: var(--muted-foreground); }
.phone-summary dd { margin: 0; overflow-wrap: anywhere; }
.phone-summary .detail-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 22px 0; border-bottom: 1px solid var(--border); }
.phone-summary .detail-kpis span { padding: 0 12px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: none; font-size: 11px; text-align: left; font-weight: 400; }
.phone-summary .detail-kpis span:first-child { padding-left: 0; border-left: 0; }
.phone-summary .detail-kpis strong { font-weight: 600; font-size: 24px; }
.phone-summary .command-status { border: 0; border-left: 2px solid var(--border); border-radius: 0; padding: 0 0 0 12px; box-shadow: none; background: none; margin-top: 22px; grid-template-columns: 36px minmax(0, 1fr); font-size: 11px; }
.phone-summary .command-status.success { border-color: var(--success); }
.phone-summary .command-status.pending { border-color: var(--warning); }
.phone-summary .command-status.danger { border-color: var(--destructive); }
.phone-log-share { border-bottom: 0; margin-top: 26px; padding-top: 24px; }
.phone-log-share .detail-subtitle { font-size: 16px; font-weight: 500; }
.phone-log-share label > span { font-size: 12px; }
.phone-log-share input { font-size: 11px; }
.phone-log-actions .button { font-size: 12px; min-height: 40px; padding: 7px 9px; }
.phone-log-actions .lucide { width: 14px; height: 14px; }
.phone-log-note { font-size: 11px; line-height: 1.6; }
.login-shell { background: #fff; }
.login-card { width: min(100%, 390px); border: 0; border-radius: 0; box-shadow: none; padding: 24px; gap: 30px; }
.login-logo { width: 62px; height: 62px; border: 0; padding: 0; box-shadow: none; }
.login-brand { gap: 18px; }
.login-brand .eyebrow { color: #747982; text-transform: none; font-size: 13px; }
.login-brand h1 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.3; }
.login-form { gap: 22px; }
.login-form .button { min-height: 46px; }
@media (max-width: 1350px) {
  .workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar-brand { padding: 0 16px; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
  .brand-logo { width: 38px; height: 38px; }
  .sidebar-brand strong { font-size: 23px; }
  .sidebar-brand span { font-size: 12px; }
  .sidebar-nav a { padding-inline: 18px; font-size: 14px; gap: 12px; }
  .phone-details-layout { grid-template-columns: minmax(0, 1fr); }
  .phone-summary { border-left: 0; border-top: 1px solid var(--border); padding: 26px 0 0; }
  .phone-toolbar { flex-direction: column; }
  .phone-toolbar-actions { align-self: stretch; justify-content: flex-end; }
  .history-toolbar { grid-template-columns: minmax(180px, 1fr) 150px; }
  .history-export-actions { grid-column: 1 / -1; }
  .summary-card { padding-inline: 18px; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { position: static; height: auto; padding: 18px 20px; gap: 18px; border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .sidebar-brand { padding: 0; }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .sidebar-nav a { min-height: 40px; border: 0; border-bottom: 2px solid transparent; padding: 8px 2px; font-size: 13px; gap: 7px; }
  .sidebar-nav a.active { border-bottom-color: var(--primary); background: transparent; }
  .sidebar-nav .lucide { width: 18px; height: 18px; }
  .sidebar-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0; gap: 10px; }
  .sidebar-status .button { min-height: 40px; }
  .topbar { padding: 26px 22px; min-height: 110px; }
  .app-page { padding: 26px 22px 40px; }
  .connection-alert { margin-inline: 22px; }
  .phones-workspace { grid-template-columns: minmax(0, 1fr); }
  .phones-panel { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 24px 22px; }
  .phones-panel #deviceList { max-height: 250px; overflow-y: auto; }
  .detail-panel { padding: 24px 22px; }
  .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .summary-card:nth-child(3) { padding-left: 0; border-left: 0; }
  .events-toolbar { grid-template-columns: minmax(0, 1fr) 180px; }
  .events-toolbar .count { grid-column: 1 / -1; justify-content: flex-start; }
  .deployment-detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .deployment-detail-grid > div { border-left: 0; padding: 0; }
}
@media (max-width: 600px) {
  .phone-field-grid, .history-toolbar, .events-toolbar { grid-template-columns: minmax(0, 1fr); }
  .phone-toolbar h1 { font-size: 23px; }
  .phone-toolbar-actions .button.primary { flex: 1; }
  .history-export-actions { justify-content: flex-start; }
  .history-export-actions .button { flex: 1 1 auto; font-size: 12px; }
  .event-table, .event-table tbody, .overview-table, .overview-table tbody { display: block; }
  :is(.event-table, .overview-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  :is(.event-table, .overview-table) tbody tr { display: grid; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--border); }
  :is(.event-table, .overview-table) td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; width: auto; max-width: none; padding: 0; border: 0; }
  :is(.event-table, .overview-table) td > * { grid-column: 2; min-width: 0; }
  :is(.event-table, .overview-table) td::before { grid-column: 1; grid-row: 1; }
  :is(.event-table, .overview-table) td::before { content: attr(data-label); color: var(--muted-foreground); font-size: 12px; }
  :is(.event-table, .overview-table) td.table-empty { display: block; }
  .overview-section .section-heading h2 { font-size: 18px; }
  .history-page-controls > span { width: 100%; }
  .history-page-controls { justify-content: flex-end; }
  .view-tabs { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .table-action, .sidebar-nav a, input, select { transition: none; }
  .button:active, .table-action:active { scale: 1; }
}