.application-shell { --shell-width: 216px; --shell-header-gap: 12px; --shell-header-padding: 20px 12px; color: var(--color-text); }
.application-shell > header { background: #121a22; border-color: #2c3946; }
.application-shell .brand { letter-spacing: 1px; padding: 4px 12px 12px; }
.application-shell .brand small { font-size: 11px; letter-spacing: 0; }
.application-shell #main-navigation { gap: 4px; }
.application-shell #main-navigation a { font-size: 13px; border-radius: 5px; }
.application-shell #main-navigation a[aria-current=page] { color: #a4eadb; background: #203638; box-shadow: inset 3px 0 #54c9b4; }
.application-shell #main-navigation .nav-section { padding-top: 14px; font-size: 10px; letter-spacing: 1px; }
.application-shell #main-navigation .area-switch { border: 1px solid #35434f; margin-top: 20px; }
.application-shell > main { padding: 20px 24px; }
.application-shell .workspace-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 0 14px; margin-bottom: 22px; border-bottom: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-muted); }
.workspace-location { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.workspace-area { font-weight: 600; }
.workspace-divider { color: var(--color-text-muted); }
.workspace-customer { color: var(--color-text); overflow-wrap: anywhere; }
.workspace-context-action { color: var(--color-accent-text); font-weight: 600; padding: 6px 0; }
.application-shell main > .toolbar { gap: 16px; flex-wrap: wrap; }
.application-shell main h1 { color: var(--color-text); font-size: 23px; font-weight: 650; letter-spacing: -.4px; }
.application-shell main h2 { color: var(--color-text); font-size: 17px; font-weight: 600; }
.application-shell .page-eyebrow { color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin: 0 0 4px; }
.application-shell.admin-workspace .panel, .application-shell.admin-workspace .table-wrap { border-radius: 8px; box-shadow: none; }
.application-shell.admin-workspace .management-metric { gap: 8px; padding: 20px; position: relative; }
.application-shell.admin-workspace .management-metric .admin-icon { color: var(--color-accent-text); }
.application-shell.admin-workspace .management-metric strong { color: var(--color-text); font-size: 28px; }
.application-shell.admin-workspace .management-metric span { color: var(--color-text-muted); font-size: 13px; }
.application-shell.admin-workspace .management-metric:hover { border-color: var(--color-accent); background: var(--color-row-hover); }
.application-shell.admin-workspace .management-table th, .application-shell.admin-workspace .management-table td { padding: 13px 16px; border-color: var(--color-border); }
.application-shell.admin-workspace thead th { text-transform: none; background: var(--color-surface-subtle); font-size: 12px; }
.application-shell.admin-workspace .management-table tbody tr:hover { background: var(--color-row-hover); }
.application-shell .customer-workspace .customer-tabs { gap: 20px; padding-bottom: 0; margin: 16px 0 22px; }
.application-shell .customer-workspace .customer-tabs a { padding: 12px 0; border-radius: 0; border-bottom: 2px solid transparent; font-size: 13px; }
.application-shell .customer-workspace .customer-tabs a[aria-current=page] { color: var(--color-accent-text); background: transparent; border-bottom-color: var(--color-accent); }
.application-shell .customer-workspace .customer-tabs a:hover { background: transparent; color: var(--color-text); }
.application-shell .customer-workspace .customer-heading h1 { margin-bottom: 8px; }
.application-shell .customer-workspace .customer-back { margin-bottom: 12px; }
.application-shell .customer-workspace .customer-list th, .application-shell .customer-workspace .customer-list td { padding: 13px 16px; }
.application-shell .customer-workspace .customer-metrics a { gap: 6px; }
.application-shell .customer-workspace .customer-metrics span { color: var(--color-text-muted); font-size: 13px; }
.application-shell .workspace-quick-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.application-shell > footer { font-size: 11px; padding: 12px; }
@media (max-width: 720px) {
    .application-shell > main { padding: 16px 12px; }
    .application-shell .workspace-context { margin-bottom: 16px; gap: 4px; }
    .application-shell .workspace-location { gap: 6px; }
    .application-shell .customer-workspace .customer-tabs { gap: 0 18px; }
    .application-shell .brand { padding: 0; }
    .application-shell .toolbar > div { min-width: 0; }
    .application-shell main h1 { font-size: 21px; overflow-wrap: anywhere; }
}
.application-shell { --radius-lg: 8px; }
:root[data-theme=dark] .application-shell { --color-surface: #14191f; --color-surface-panel: #1c232b; --color-surface-subtle: #222b34; --color-input-bg: #202932; --color-border: #34404b; --color-border-input: #52606e; --color-text: #edf2f7; --color-text-muted: #b0bdc9; --color-row-hover: #26313b; }
html .application-shell { --shell-width: 188px; --nav-item-min-height: 40px; --nav-item-padding: 8px 10px; }
.application-shell > main > .workspace-context { position: sticky; top: 0; z-index: 19; min-height: 58px; margin: -20px -24px 20px; padding: 10px 24px; background: var(--color-surface-panel); border-bottom: 1px solid var(--color-border); }
.application-shell .workspace-account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.application-shell .workspace-account button { min-height: 36px; padding: 7px 10px; }
.workspace-account-menu { position: relative; }
.workspace-account-menu > summary { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; list-style: none; color: var(--color-text); }
.workspace-account-menu > summary::-webkit-details-marker, .camera-more > summary::-webkit-details-marker { display: none; }
.workspace-account-menu > div { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; max-width: 280px; padding: 16px; background: var(--color-surface-panel); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px #0003; }
.workspace-account-menu strong { display: block; overflow-wrap: anywhere; margin-bottom: 12px; }
.workspace-account-menu form { margin: 0; }
.workspace-account-menu form button { width: 100%; }
.application-shell .customer-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 22px; align-items: start; }
.customer-layout > .customer-workspace { min-width: 0; }
.application-shell .client-tree { position: sticky; top: 78px; max-height: calc(100dvh - 100px); overflow: auto; border-right: 1px solid var(--color-border); padding-right: 14px; font-size: 13px; }
.client-tree summary { cursor: pointer; font-weight: 650; padding: 10px 0 16px; color: var(--color-text); }
.client-tree-directory { display: block; padding: 8px 0 16px; font-size: 12px; }
.client-tree nav { display: flex; flex-direction: column; gap: 4px; }
.application-shell .client-tree nav > a { display: flex; align-items: center; gap: 8px; padding: 10px 8px; color: var(--color-text); overflow-wrap: anywhere; border-radius: 5px; }
.application-shell .client-tree nav > a[aria-current=page] { background: var(--color-accent-bg); color: var(--color-accent-text); box-shadow: inset 2px 0 var(--color-accent); }
.client-tree-sites { display: grid; margin: 0 0 12px 16px; padding-left: 14px; border-left: 1px solid var(--color-border); }
.client-tree-sites a { padding: 8px 0; font-size: 12px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.application-shell .client-tree a:hover { color: var(--color-accent-text); background: var(--color-row-hover); }
.application-shell .customer-layout .customer-metrics { gap: 10px; }
.application-shell .customer-layout .customer-metrics .panel { padding: 16px; }
.application-shell .camera-row-actions { display: flex; align-items: center; gap: 12px; }
.camera-action-popover { position: fixed; inset: auto; margin: 0; width: 210px; max-width: calc(100vw - 16px); padding: 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-panel); color: var(--color-text); box-shadow: 0 10px 30px #0004; }
.camera-action-popover:popover-open { display: grid; }
.camera-action-popover strong { padding: 8px; overflow-wrap: anywhere; font-size: 12px; }
.camera-action-popover a { padding: 9px 8px; color: var(--color-accent-text); border-radius: 4px; font-size: 13px; }
.camera-action-popover a:hover { background: var(--color-row-hover); }
.camera-action-popover::backdrop { background: transparent; }
.camera-actions-trigger { min-width: 36px; }
.application-shell .recordings-library-toggle { margin: 0 0 10px; font-size: 12px; }
.application-shell .recordings-workspace.library-collapsed { grid-template-columns: minmax(0, 1fr); }
.application-shell .recordings-library { border-radius: 6px; background: var(--color-surface-panel); }
.application-shell:has(.monitor-workspace) > main > .workspace-context { margin: -10px -10px 12px; padding: 10px 16px; }
html .application-shell:has(.monitor-workspace) { background: var(--color-surface); color: var(--color-text); color-scheme: normal; }
.application-shell main .monitor-slot h2 { color: #dce6ef; }
.application-shell .monitor-library label, .application-shell .monitor-library p, .application-shell .monitor-library #library-status { color: var(--color-text-muted); }
.application-shell .monitor-library input, .application-shell .monitor-library select { color: var(--color-text); background: var(--color-input-bg); border-color: var(--color-border-input); }
.application-shell .monitor-library a, .application-shell .monitor-library #library-results .library-camera-row > button { color: var(--color-accent-text); }
.application-shell .monitor-library .library-metadata > summary { color: var(--color-text-muted); }
.application-shell .monitor-library #library-results .library-camera-row > span { color: var(--color-text-muted); background: var(--color-surface-subtle); border-color: var(--color-border); }
html .application-shell .monitor-grid[data-layout] { width: min(100%, max(480px, calc((100dvh - 230px) * 1.777778))); }
.application-shell .monitor-library, .application-shell .monitor-heading { color: var(--color-text); }
.application-shell .monitor-library { background: var(--color-surface-panel); border-color: var(--color-border); }
.application-shell .recording-workspace.playback { border-radius: 6px; padding: 8px; }
.application-shell .recording-workspace #player-shell { border-radius: 3px 3px 0 0; }
@media (max-width: 1100px) {
    .application-shell .customer-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 16px; }
    .application-shell .customer-layout .customer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .application-shell .customer-layout .customer-shortcuts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .application-shell .customer-layout { grid-template-columns: minmax(0, 1fr); }
    .application-shell .client-tree { position: static; max-height: 240px; border: 1px solid var(--color-border); padding: 0 12px; border-radius: 6px; }
}
@media (max-width: 720px) {
    .application-shell > main > .workspace-context { position: static; margin: -16px -12px 16px; padding: 10px 12px; }
    .application-shell .workspace-account { gap: 6px; }
    .workspace-account-menu > summary > span { display: none; }
    .application-shell .workspace-context-action { font-size: 11px; }
    .application-shell > header { padding: 10px 12px; }
}
.workspace-client-picker { position: relative; min-width: 0; }
.workspace-client-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 5px; min-height: 36px; }
.workspace-client-picker > summary::-webkit-details-marker { display: none; }
.workspace-client-options { position: absolute; top: calc(100% + 6px); left: 0; width: min(310px, calc(100vw - 40px)); padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-panel); box-shadow: 0 12px 30px #0004; z-index: 40; }
.workspace-client-results { max-height: 280px; overflow: auto; margin-top: 10px; }
.application-shell main .workspace-client-options button { display: block; width: 100%; text-align: left; padding: 10px; background: transparent; color: var(--color-text); font-size: 13px; }
.application-shell main .workspace-client-options button:hover, .application-shell main .workspace-client-options button[aria-current=true] { background: var(--color-accent-bg); color: var(--color-accent-text); }
.workspace-client-options input { width: 100%; }
@media(max-width:720px) { .workspace-client-picker { position: static; } .workspace-context { position: relative !important; } .workspace-client-options { left: 12px; top: 100%; } }