/* Panel-only shell: sidebar, tables, dialogs and admin layouts. */
.admin-app { min-height: 100dvh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; overflow-y: auto; background: var(--sidebar); border-right: 1px solid var(--border); transition: width 180ms ease; }
.sidebar-brand { min-height: 88px; padding: 0 24px; display: flex; align-items: center; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.google-mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand-name { font-size: 22px; font-weight: 400; letter-spacing: 0; }
.brand-name > span { color: var(--secondary); }
.navigation { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; width: 100%; align-items: center; height: 48px; gap: 16px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--secondary); text-align: left; white-space: nowrap; font-size: 14px; font-weight: 400; }
.nav-item > svg { color: var(--muted); }
.nav-item.is-active { background: var(--selected); color: var(--on-selected); font-weight: 500; }
.nav-item.is-active > svg { color: var(--on-selected); }
.nav-item.is-active:hover { background: color-mix(in srgb, var(--selected), var(--on-selected) 8%); }
.nav-label { flex: 1; }
.sidebar-bottom { margin-top: auto; padding: 24px 16px 16px; }
.sidebar-footer { display: flex; justify-content: flex-end; }
.icon-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--secondary); }
.icon-button:hover { background: var(--surface-hover); color: var(--text); }
.app-content { position: relative; min-height: 100dvh; margin-left: var(--sidebar-width); transition: margin-left 180ms ease; }
main { min-width: 0; outline: none; }
.overview-page { width: 100%; max-width: 1600px; margin: 0 auto; padding: 40px 36px; }
.page-heading { display: flex; align-items: center; min-height: 40px; margin-bottom: 28px; }
h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 16px; }
.overview-card { min-width: 0; min-height: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.card-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 0; }
.card-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.card-label h2 { margin: 0; color: var(--text); font-size: 14px; line-height: 20px; font-weight: 500; }
.clock-content { padding: 12px 20px 8px; flex: 1; }
.metric-content { display: flex; flex-direction: column; gap: 8px; padding: 8px 20px 16px; flex: 1; }
.digital-clock { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.digital-clock time { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: 0; }
.clock-period { font-size: 14px; color: var(--secondary); }
.clock-date { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.card-footer { min-height: 56px; display: flex; align-items: center; padding: 0 16px 16px; font-size: 11px; color: var(--muted); }
.clock-footer { justify-content: space-between; gap: 8px; }
.custom-dropdown { display: inline-block; min-width: 0; max-width: 100%; }
.dropdown-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 1px solid var(--outline); border-radius: var(--radius-pill); background: transparent; color: var(--secondary); font-size: 14px; line-height: 20px; text-align: left; }
.dropdown-trigger:not(:disabled):hover { background: var(--surface-hover); color: var(--text); }
.dropdown-trigger:disabled { opacity: .45; cursor: not-allowed; }
.dropdown-trigger[aria-expanded="true"] { border-color: var(--blue); }
.dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-option-label { flex: 1; min-width: 0; }
.dropdown-option-image { display: block; flex-shrink: 0; width: 20px; height: 20px; object-fit: contain; }
.dropdown-chevron { transition: transform 160ms ease; }
.dropdown-trigger[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }
.dropdown-menu { position: fixed; inset: auto; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--outline); border-radius: 12px; background: var(--surface-raised); color: var(--text); box-shadow: 0 8px 24px #0006; font-family: inherit; scrollbar-width: thin; }
.dropdown-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 20px; white-space: nowrap; }
.dropdown-option[data-active="true"] { background: var(--border); }
.dropdown-option[aria-selected="true"] { color: var(--on-selected); }
.dropdown-option[aria-selected="true"][data-active="true"] { background: var(--selected); }
.timezone-picker { flex: 1; max-width: 240px; }
.timezone-picker .dropdown-trigger { min-height: 40px; font-size: 12px; line-height: 18px; }
.timezone-picker .dropdown-option { font-size: 12px; line-height: 18px; }
.utc-offset { font-size: 12px; white-space: nowrap; }
.metric-value { display: block; font-size: 36px; line-height: 44px; color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }
.metric-trend { min-width: 0; margin: auto 0 0; }
.metric-chart { display: block; width: 100%; height: 36px; overflow: visible; }
.metric-chart-baseline { stroke: var(--border); stroke-width: 1; }
.metric-chart-area { fill: var(--blue); fill-opacity: .08; }
.metric-chart-line { fill: none; stroke: var(--blue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.metric-chart-dot, .metric-chart-bar { fill: var(--blue); }
.metric-chart-bar.is-empty { fill: var(--border); }
.metric-trend figcaption { margin-top: 4px; color: var(--secondary); font-size: 12px; line-height: 16px; }
.sessions-section { margin-top: 32px; }
.sessions-heading { margin: 0 0 16px; color: var(--text); font-size: 20px; line-height: 28px; font-weight: 400; }
.sessions-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sessions-heading-row .sessions-heading { margin: 0; }
.sessions-clear-button { min-height: 32px; padding: 4px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--blue); font-size: 13px; line-height: 18px; }
.sessions-clear-button:hover { background: var(--surface-hover); }
.sessions-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.sessions-table-scroll { overflow-x: auto; scrollbar-width: thin; outline-offset: -3px; }
.sessions-table { width: 100%; min-width: 1000px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.sessions-step-column { width: 8%; }
.sessions-email-column { width: 22%; }
.sessions-ip-column { width: 22%; }
.sessions-device-column { width: 11%; }
.sessions-status-column { width: 13%; }
.sessions-started-column { width: 12%; }
.sessions-actions-column { width: 12%; }
.sessions-table th { height: 48px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface-header); color: var(--secondary); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; }
.sessions-table td { overflow: hidden; padding: 16px 20px; color: var(--text); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.sessions-table .ip-location-cell { padding-top: 8px; padding-bottom: 8px; }
.sessions-table tbody tr + tr { border-top: 1px solid var(--border); }
.sessions-table tbody tr:hover { background: var(--surface-hover); }
.sessions-table .session-step, .sessions-table .session-started { color: var(--secondary); }
.session-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; line-height: 18px; }
.session-status--active, .domain-status--added { background: #1e3629; color: #81c995; }
.session-status--idle, .session-status--closed-out { background: var(--border); color: var(--secondary); }
.session-status--pending, .domain-status--pending { background: #3d3420; color: #fdd663; }
.domain-status--down { background: #3c2528; color: #f2b8b5; }
.session-status-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.session-device-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--secondary); vertical-align: middle; }
.session-device-icons { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.session-browser-icon { flex-shrink: 0; color: var(--secondary); }
.sessions-table .sessions-actions-heading { text-align: right; }
.sessions-table .sessions-actions-cell { overflow: visible; padding: 8px 16px; }
.session-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.session-actions .icon-button { flex-shrink: 0; }
.session-view:hover { background: var(--border); color: var(--text); }
.session-remove:hover { background: #3a2527; color: #f28b82; }
.session-approve { color: #81c995; }
.session-approve:hover { background: #1e3629; color: #a8dab5; }
.sessions-table .sessions-empty { height: 128px; padding: 32px 24px; color: var(--muted); text-align: center; }
.account-table { min-width: 560px; }
.account-email-column { width: 44%; }
.account-date-column { width: 140px; }
.account-date { color: var(--secondary); font-size: 13px; white-space: nowrap; }
.account-actions-column { width: 88px; }
.account-delete { position: relative; z-index: 1; }
@media (max-width: 480px) {
  .account-table th, .account-table td { padding-right: 12px; padding-left: 12px; }
}
.session-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 24px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); font: inherit; }
.session-dialog::backdrop { background: #0008; }
.session-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.session-dialog-header h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 400; }
.session-details { display: grid; gap: 16px; margin: 0; }
.session-details > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 16px; }
.session-details dt { color: var(--muted); font-size: 12px; line-height: 20px; }
.session-details dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
.session-browser-info { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.session-browser-info h3 { margin: 0 0 16px; font-size: 14px; line-height: 20px; font-weight: 500; }
.session-browser-panel { padding: 16px; background: var(--surface-header); }
.session-user-agent { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 13px; line-height: 20px; }
.session-user-agent.is-unavailable { color: var(--secondary); }
.session-confirm-dialog { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px; overflow: hidden; border: 0; background: transparent; color: var(--text); font: inherit; }
.session-confirm-dialog[open] { display: grid; place-items: center; }
.session-confirm-dialog::backdrop { background: transparent; }
.session-confirm-scrim { position: absolute; inset: 0; background: #0008; }
.session-confirm-surface { position: relative; z-index: 1; margin: 0; overflow-y: auto; transform-origin: center; }
.confirmation-surface-enter-active { transition: opacity var(--session-enter-duration) var(--session-ease-out), transform var(--session-enter-duration) var(--session-ease-out); }
.confirmation-surface-leave-active { transition: opacity var(--session-exit-duration) var(--session-ease-out), transform var(--session-exit-duration) var(--session-ease-out); }
.confirmation-surface-enter-from, .confirmation-surface-leave-to { opacity: 0; transform: scale(0.96); }
.confirmation-scrim-enter-active { transition: opacity var(--session-enter-duration) var(--session-ease-out); }
.confirmation-scrim-leave-active { transition: opacity var(--session-exit-duration) var(--session-ease-out); }
.confirmation-scrim-enter-from, .confirmation-scrim-leave-to { opacity: 0; }
.session-confirm-dialog[data-motion="reduced"] .confirmation-surface-enter-active, .session-confirm-dialog[data-motion="reduced"] .confirmation-surface-leave-active, .session-confirm-dialog[data-motion="reduced"] .confirmation-scrim-enter-active, .session-confirm-dialog[data-motion="reduced"] .confirmation-scrim-leave-active { transition-property: opacity; transition-duration: var(--session-reduced-duration); }
.session-confirm-dialog[data-motion="reduced"] .confirmation-surface-enter-from, .session-confirm-dialog[data-motion="reduced"] .confirmation-surface-leave-to { transform: none; }
.session-confirm-description { margin: 0; overflow-wrap: anywhere; color: var(--secondary); font-size: 14px; line-height: 22px; }
.session-confirm-description strong { color: var(--text); font-weight: 500; }
.session-confirm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.session-confirm-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 88px; min-height: 40px; padding: 8px 20px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 14px; line-height: 20px; font-weight: 500; }
.session-confirm-button:active { transform: scale(0.97); }
.session-confirm-cancel { background: transparent; color: var(--blue); }
.session-confirm-primary { background: var(--blue); color: var(--on-blue); }
.session-confirm-delete { background: var(--blue); color: var(--on-blue); }
.session-confirm-button:disabled { cursor: default; opacity: .55; }
@keyframes settings-spin { to { transform: rotate(360deg); } }
.session-confirm-button .is-spinning { animation: settings-spin 800ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .session-confirm-button .is-spinning { animation: none; } }
.domain-form { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.domain-field { flex: 1; min-width: 0; max-width: 560px; }
.domain-field label { display: block; margin-bottom: 8px; color: var(--secondary); font-size: 12px; line-height: 18px; }
.domain-input { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--outline); border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; line-height: 20px; }
.domain-input::placeholder { color: var(--muted); }
.domain-input[aria-invalid="true"] { border-color: #f2b8b5; }
.primary-button { min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.primary-button:active { transform: scale(0.97); }
.domain-error { margin: -8px 0 24px; color: #f2b8b5; font-size: 12px; line-height: 18px; }
.domain-table { min-width: 880px; }
.domain-auto-disable-column { width: 168px; }
.domain-column-heading { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.domain-column-heading .ui-tooltip { margin-left: 0; }
.domain-status-column { width: 156px; }
.domain-mode-column { width: 168px; }
.domain-enabled-column { width: 112px; }
.domain-actions-column { width: 88px; }
.domain-table .domain-mode-cell { padding: 8px 20px; }
.domain-mode-picker { display: block; width: 100%; }
.domain-mode-picker .dropdown-trigger { min-height: 40px; font-size: 12px; line-height: 18px; }
.domain-mode-picker .dropdown-option { font-size: 12px; line-height: 18px; }
.domain-table .domain-enabled-cell { padding: 8px 20px; }
.domain-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.domain-switch { position: relative; appearance: none; flex-shrink: 0; width: 36px; height: 20px; margin: 0; border: 2px solid var(--outline); border-radius: var(--radius-pill); background: var(--border); cursor: pointer; }
.domain-switch::before { content: ''; position: relative; z-index: 1; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--secondary); transform: translate(2px, 2px); transition: transform 160ms var(--ease-out); }
.domain-switch::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: var(--blue); opacity: 0; transition: opacity 160ms var(--ease-out); }
.domain-switch:checked::before { background: var(--on-blue); transform: translate(18px, 2px); }
.domain-switch:checked::after { opacity: 1; }
.domain-switch:active:not(:focus-visible) { transform: scale(0.97); }
.domain-switch:focus-visible::before, .domain-switch:focus-visible::after { transition: none; }
.domain-value { display: flex; align-items: center; gap: 12px; min-width: 0; }
.domain-value > svg { color: var(--secondary); }
.domain-value > .domain-down-icon { color: #f2b8b5; }
.domain-value > .domain-flagged { color: #f2b8b5; }
.domain-value > .domain-flagged .ui-tooltip-trigger { width: 20px; height: 20px; color: #f2b8b5; }
.domain-value > .domain-flagged .ui-tooltip-trigger:hover { background: transparent; color: #ffb4ab; }
.domain-value > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.domain-table .domain-name-cell { padding-top: 8px; padding-bottom: 8px; }
.domain-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.domain-identity .domain-value { width: 100%; }
.domain-setup-link { min-height: 24px; margin-left: 30px; padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 12px; line-height: 18px; text-align: left; }
.domain-setup-link:hover { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .session-confirm-cancel:hover { background: var(--surface-raised); }
  .session-confirm-delete:hover { background: color-mix(in srgb, var(--blue), var(--on-blue) 8%); }
  .primary-button:hover { background: color-mix(in srgb, var(--blue), var(--on-blue) 8%); }
}
@media (max-width: 600px) {
  .domain-form { flex-direction: column; align-items: stretch; }
  .domain-field { flex: auto; max-width: none; }
  .domain-input { font-size: 16px; }
  .domain-form .primary-button { align-self: flex-end; }
}
.mobile-menu, .mobile-close, .sidebar-backdrop { display: none; }
.sidebar-collapsed { --sidebar-width: 80px; }
.is-collapsed .sidebar-brand { padding: 0; justify-content: center; }
.is-collapsed .brand-name, .is-collapsed .nav-label { display: none; }
.is-collapsed .navigation { padding: 8px 16px; }
.is-collapsed .nav-item { padding: 0; justify-content: center; }
.is-collapsed .sidebar-bottom { padding-right: 20px; padding-left: 20px; }
.is-collapsed .sidebar-footer { justify-content: center; }
@media (max-width: 1150px) {
  :root { --sidebar-width: 224px; }
  .sidebar-brand { padding-left: 20px; }
  .brand-name { font-size: 20px; }
  .overview-page { padding: 36px 28px; }
  .card-footer { padding-right: 12px; padding-left: 12px; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-card { grid-column: 1 / -1; }
  .metric-card { min-height: 128px; }
  .metric-content { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .metric-trend { margin: 0; }
  .metric-chart { height: 28px; }
  .metric-trend figcaption { font-size: 10px; line-height: 14px; }
  .timezone-picker { max-width: 240px; }
}
@media (max-width: 760px) {
  :root, .sidebar-collapsed { --sidebar-width: 256px; }
  .sidebar { transform: translateX(-100%); transition: transform 180ms ease; visibility: hidden; border-radius: 0 24px 24px 0; }
  .sidebar.is-open { transform: translateX(0); visibility: visible; }
  .app-content { margin-left: 0; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: #0008; }
  .mobile-menu, .mobile-close { display: inline-flex; }
  .mobile-menu { position: absolute; z-index: 20; top: 28px; left: 14px; }
  .mobile-close { margin-left: auto; }
  .sidebar-brand { padding: 0 12px 0 20px; }
  .collapse-button { display: none; }
  .overview-page { padding: 28px 20px; }
  .page-heading { padding-left: 44px; margin-bottom: 24px; }
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-card { grid-column: 1 / -1; }
  .metric-card { min-height: 128px; }
  .metric-card .card-heading { padding: 16px 16px 0; }
  .metric-content { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 16px 12px; }
  .metric-trend { margin: 0; }
  .metric-chart { height: 28px; }
  .metric-trend figcaption { font-size: 10px; line-height: 14px; }
  .timezone-picker { max-width: 240px; }
  .is-collapsed .brand-name, .is-collapsed .nav-label { display: inline; }
  .is-collapsed .sidebar-brand { justify-content: flex-start; padding: 0 12px 0 20px; }
  .is-collapsed .navigation { padding: 8px 12px; }
  .is-collapsed .nav-item { padding: 0 16px; justify-content: flex-start; }
}
@media (max-width: 380px) {
  .overview-page { padding-right: 16px; padding-left: 16px; }
  .metric-card .card-heading { min-height: 56px; align-items: flex-start; }
  .metric-card .card-label { align-items: flex-start; }
  .card-footer { padding-right: 12px; padding-left: 12px; }
  .timezone-picker { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .nuxt-loading-indicator { transform: none !important; transition: opacity 120ms linear !important; }
  .domain-switch:active:not(:focus-visible) { transform: none; }
  .domain-switch::after { transition: opacity 120ms var(--ease-out) !important; }
  .domain-switch:focus-visible::after { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .session-confirm-dialog .confirmation-surface-enter-active, .session-confirm-dialog .confirmation-surface-leave-active, .session-confirm-dialog .confirmation-scrim-enter-active, .session-confirm-dialog .confirmation-scrim-leave-active { transition-property: opacity !important; transition-duration: var(--session-reduced-duration) !important; transition-timing-function: var(--session-ease-out) !important; }
  .session-confirm-dialog .confirmation-surface-enter-from, .session-confirm-dialog .confirmation-surface-leave-to { transform: none !important; }
}

.account-sync-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--secondary); font-size: 13px; line-height: 20px; }
.account-sync-status button { min-height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--blue); font-size: 13px; }
.account-sync-status button:hover { background: var(--surface-hover); }