/* Dolly Train's native visual family, adapted to the existing Admin workflows. */
@font-face {
  font-family: "Swivel Helvetica Now";
  src: url("./assets/fonts/HelveticaNowDisplay-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Swivel Helvetica Now";
  src: url("./assets/fonts/HelveticaNowDisplay-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --admin-ground: #0d0e14;
  --admin-surface: #15161e;
  --admin-raised: #1e1f27;
  --admin-field: #292d32;
  --admin-ink: #cbcdde;
  --admin-muted: #a0a3b6;
  --admin-accent: #edff00;
  --admin-line: #343643;
  --admin-hover: #252630;
  --admin-success: #8ed7a7;
  --admin-danger: #ff9b9d;
  --admin-warning: #efc780;
  --admin-radius: 16px;
  --admin-pill: 24px;
  --admin-panel-shadow: 0 12px 24px #0004, inset 0 8px 28px #ffffff07, inset 0 1px 0 #ffffff09;
  --admin-font: "Swivel Helvetica Now", "Helvetica Neue", sans-serif;
  --control-bg: var(--admin-field);
  --control-border: #575b6e;
  --control-focus: var(--admin-accent);
  --control-error: var(--admin-danger);
  --accent: var(--admin-accent);
  --muted: var(--admin-muted);
  background: var(--admin-ground);
  color: var(--admin-ink);
  font-family: var(--admin-font);
  font-synthesis: none;
}
body {
  background: radial-gradient(ellipse at 55% 110%, #151a3280, transparent 65%), var(--admin-ground);
  color: var(--admin-ink);
  font-family: var(--admin-font);
  font-weight: 500;
  font-size: 14px;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--admin-ground); background: var(--admin-accent); }
* { scrollbar-color: #555968 transparent; scrollbar-width: thin; }
input, textarea { caret-color: var(--admin-ink); }
a { text-underline-offset: 3px; }
.app-shell { padding: 0; gap: 12px; grid-template-columns: 204px minmax(0, 1fr); }
.sidebar, .preview-shell .sidebar {
  top: 0; height: 100dvh; padding: 32px 16px 24px; border: 0 !important;
  border-radius: 0; background: none; box-shadow: none;
}
.brand { display: block; padding: 0 8px 26px; }
.brand-logo { display: block; width: 156px; max-width: 100%; height: auto; }
.brand span { display: block; color: var(--admin-muted); margin-top: 8px; font-size: 12px; }
.sidebar nav { gap: 4px; min-height: 0; overflow-y: auto; }
.sidebar nav button {
  padding: 10px 16px; min-height: 44px; gap: 14px;
  border: 0; border-radius: var(--admin-pill); color: var(--admin-muted);
  font-weight: 500; font-size: 14px; background: transparent;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.sidebar nav button span { order: 0; text-align: left; flex: 1; }
.sidebar nav button svg { order: 1; width: 19px; height: 19px; flex-shrink: 0; }
.sidebar nav button:hover { background: #1e1f2780; color: var(--admin-ink); }
.sidebar nav button.active { background: var(--admin-raised); color: var(--admin-ink); box-shadow: inset 0 1px 0 #ffffff0f; font-weight: 700; }
.sidebar nav button.active svg { color: var(--admin-accent); }
.sidebar nav button.active::before { content: none; }
.sidebar-bottom { border: 0; margin-top: auto; padding: 24px 14px 0; flex-shrink: 0; }
.sidebar-bottom::before {
  content: ""; display: block; width: 94px; height: 32px; margin-bottom: 20px;
  background: url("./assets/swivel-audio.svg") left center / contain no-repeat;
}
.admin-version { display: flex; align-items: baseline; gap: 8px; text-transform: none; }
.admin-version, .admin-version b { color: var(--admin-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.admin-version b { display: inline; font-variant-numeric: tabular-nums; }
.signout { color: var(--admin-muted); padding: 8px 0; font-size: 13px; }
.signout:hover { color: var(--admin-ink); }
.workspace {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 34px 28px 32px 0; min-height: 100dvh;
}
.workspace h1 { color: var(--admin-ink); font-size: 30px; letter-spacing: -.025em; font-weight: 700; line-height: 1.2; margin: 0; }
.workspace header { align-items: center; margin-bottom: 28px; }
.workspace header .eyebrow { margin: 7px 0 0; color: var(--admin-muted); text-transform: none; letter-spacing: 0; font-size: 12px; }
.service, .preview-shell .service { background: transparent; color: var(--admin-muted); border-color: var(--admin-line); box-shadow: none; font-size: 12px; }
.service span, .preview-shell .service span { background: var(--admin-accent); box-shadow: none; }
.preview-banner { border: 1px solid var(--admin-line); border-radius: 8px; background: #171923; color: var(--admin-muted); font-size: 12px; padding: 10px 14px; margin-bottom: 24px; }
.panel, .grid article, .products-card, .table-wrap, .products-results>.products-card, .global-search-results {
  border: 0; border-radius: var(--admin-radius); background: var(--admin-surface);
  box-shadow: var(--admin-panel-shadow);
}
.panel { padding: 24px; margin-top: 24px; }
.recent-activity>.table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.panel h2, .settings-sections h2 { color: var(--admin-ink); font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.metrics { gap: 0; padding: 20px 4px; margin-bottom: 24px; border-radius: var(--admin-radius); background: var(--admin-surface); box-shadow: var(--admin-panel-shadow); }
.metrics article { padding: 4px 20px; background: none; box-shadow: none; border: 0; border-right: 1px solid var(--admin-line); border-radius: 0; }
.metrics article:last-child { border: 0; }
.metrics .eyebrow { text-transform: none; letter-spacing: 0; color: var(--admin-muted); font-size: 13px; margin-bottom: 10px; }
.metrics article strong { color: var(--admin-ink); font-size: 28px; font-weight: 700; }
.empty, .product-muted, .products-subtitle, .product-description, .modal p, .notice { color: var(--admin-muted); }
.products-subtitle { font-size: 14px; margin-bottom: 20px; }
.filters, .products-filters, .collection-layout>.filters { gap: 12px; margin-bottom: 20px; }
input, select, textarea, .panel input, .panel select, .panel textarea,
.products-filters input, .products-filters select, .collection-layout>.filters input, .collection-layout>.filters select,
.catalog-editor input, .catalog-editor select, .catalog-editor textarea {
  color: var(--admin-ink); background-color: var(--admin-field); background-image: none;
  border: 1px solid var(--control-border); border-radius: 8px; box-shadow: none;
  min-height: 44px; font-size: 14px; font-weight: 500;
}
.search-field input, .products-filters .search-field input, .collection-layout>.filters .search-field input {
  border: 1px solid transparent; border-radius: var(--admin-pill); padding-left: 42px; height: 46px;
}
.search-field svg { color: var(--admin-muted); }
input::placeholder, textarea::placeholder { color: var(--admin-muted); opacity: 1; }
select, .panel select, .products-filters select, .collection-layout>.filters select, .catalog-editor select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='m2 2 5 5 5-5' fill='none' stroke='%23cbcdde' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
select option { background: var(--admin-raised); color: var(--admin-ink); }
label, .catalog-editor label { color: var(--admin-muted); font-size: 13px; letter-spacing: 0; text-transform: none; }
.primary, .secondary, .danger { min-height: 44px; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 700; box-shadow: none; }
.primary { color: #15160d; background: var(--admin-accent); border: 1px solid transparent; }
.primary:hover:not(:disabled) { background: #f2ff5c; }
.secondary { color: var(--admin-ink); background: var(--admin-raised); border: 1px solid #4e5161; }
.secondary:hover:not(:disabled) { background: #2b2d38; border-color: #707489; }
.danger { color: var(--admin-danger); background: #321e27; border: 1px solid #94535c; }
.danger:hover:not(:disabled) { background: #48232e; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.record-row:focus-visible:not([data-row-focus="pointer"]), .product-row:focus-visible:not([data-row-focus="pointer"]) { outline: 2px solid var(--admin-accent); outline-offset: 3px; }
.table-wrap th, .products-card th, .product-inner-table th { background: #1e1f2770; color: var(--admin-muted); font-size: 13px; font-weight: 500; border: 0; text-transform: none; letter-spacing: 0; padding: 14px 18px; }
.table-wrap td, .products-card td, .product-inner-table td { color: var(--admin-ink); border-color: #cbcdde0c; font-size: 14px; height: 66px; padding: 14px 18px; }
.table-wrap td:first-child b, .primary-cell>b, .primary-cell>span, .cell-value, .product-list-identity b { color: var(--admin-ink); }
.table-wrap td small, .cell-id, .cell-value.date, .product-list-identity small { color: var(--admin-muted); }
tbody tr:not(.detail-row):hover td, .products-card .product-row:hover td { background: #cbcdde0b; }
.selected td, .products-card .product-row.selected td { background: #cbcdde14; }
.products-card .product-row.selected td:first-child, .record-row.selected td:first-child { box-shadow: none; border-left: 0; }
.product-mark, .product-identity .product-mark { background: var(--admin-raised); border: 0; border-radius: 10px; box-shadow: inset 0 1px 0 #ffffff0d; }
.product-mark i { background: var(--admin-accent); }
.state, .products-card .state, .product-dialog .state, .products-card .state:not(.state-active), .product-dialog .state:not(.state-active) {
  color: var(--admin-ink); background: #cbcdde0a; border: 1px solid #555969; border-radius: 6px; font-size: 12px; font-weight: 500;
}
.state-active, .state-paid, .state-ready, .state-completed, .products-card .state-active, .product-dialog .state-active { color: var(--admin-success); border-color: #456b56; background: #8ed7a708; }
.state-revoked, .state-refunded, .state-cancelled, .state-failed, .product-dialog .state-revoked, .product-dialog .state-failed { color: var(--admin-danger); border-color: #85525b; background: #ff9b9d08; }
.state-remote-reset, .state-expired, .state-inactive, .product-dialog .state-inactive { color: var(--admin-warning); border-color: #7b6849; background: #efc78008; }
.assignment-badge { color: var(--admin-ink); border-color: #555969; background: transparent; }
.pagination { color: var(--admin-muted); font-size: 13px; }
.products-results .pagination [aria-current] { color: var(--admin-accent); border-color: #646c20; }
.record-link, .license-customer-link:hover { color: var(--admin-accent); }
.global-search-results li button { color: var(--admin-ink); }
.global-search-results li button:hover { background: var(--admin-hover); }
.global-search-results li small, .global-search-results li code, .global-search-results h2 span { color: var(--admin-muted); }
.global-search-results section+section, .global-search-results li+li { border-color: var(--admin-line); }
.details-drawer, .catalog-form-dialog, .modal {
  --detail-rule: var(--admin-line); --detail-muted: var(--admin-muted); --detail-text: var(--admin-ink);
  color: var(--admin-ink); background: linear-gradient(165deg, #1e1f27, #141620 70%);
  border: 0; box-shadow: -16px 16px 50px #0006, inset 0 1px 0 #ffffff0e;
}
.details-drawer { padding: 28px; }
.details-drawer::backdrop, .catalog-form-dialog::backdrop { background: #07081099; }
.details-drawer[aria-modal=false]::backdrop { background: transparent; }
.record-modal-content { --detail-rule: var(--admin-line); --detail-muted: var(--admin-muted); --detail-text: var(--admin-ink); }
.details-drawer .product-dialog-content h3, .record-modal-content .product-dialog-content h3,
.detail-title-heading h2, .product-title-line h2, .catalog-form-dialog h2 { color: var(--admin-ink); }
.detail-subtitle, .product-summary dt, .product-dates dt, .product-fixture-note,
.details-drawer .product-fixture-note, .bundle-product-list p, .related-summary { color: var(--admin-muted); }
.icon-button { color: var(--admin-ink); background: transparent; border-color: var(--admin-line); }
.icon-button:hover { background: #cbcdde0d; }
.product-tabs { border-color: var(--admin-line); gap: 8px; }
.product-tabs button { color: var(--admin-muted); padding: 12px 8px; }
.product-tabs button[aria-selected=true] { color: var(--admin-ink); }
.product-tabs button[aria-selected=true]::after { height: 2px; background: var(--admin-accent); }
.product-inner-table { border: 1px solid var(--admin-line); border-radius: 12px; background: #10121a; }
.product-inner-table td { height: auto; font-size: 13px; padding: 12px; }
.product-bundles li { color: var(--admin-ink); border-color: #555969; border-radius: 16px; background: #cbcdde08; }
.serial-control .license-serial-value { background: #10121a; border-color: #565e36; border-radius: 10px; }
.serial-control .license-serial-value code, .serial-control code, .license-serial-value code { color: var(--admin-ink); }
.serial-control code { background: #10121a; border-color: var(--admin-line); }
.details-drawer .serial-control .icon-button { color: var(--admin-accent); background: #edff0009; }
.license-serial-cell small, .license-vendor { color: var(--admin-muted); }
.customer-stats>div, .customer-relation-rows button { background: #cbcdde06; }
.customer-stats span, .customer-relation-meta, .customer-relation-main small { color: var(--admin-muted); }
.customer-relation-rows, .customer-relation-rows li+li, .product-dialog-footer, .product-section,
.human-related-record, .bundle-product-list>li, .bundle-edit-list>li, .settings-sections>section,
.setting-row, .administrator-row, .batch-detail>section, .batch-files li, .batch-deliveries li { border-color: var(--admin-line); }
.customer-relation-rows button:hover { background: var(--admin-hover); }
.setting-row dt, .setting-row>summary>span, .administrator-row small, .settings-help summary,
.expiry-options legend, .bundle-edit-identity small, .relation-count { color: var(--admin-muted); }
.results article, .detail-grid>div, .customer-profile>div { background: var(--admin-surface); border-color: var(--admin-line); box-shadow: none; }
.results span, .customer-profile span, .detail-grid span { color: var(--admin-muted); }
.notice { border: 1px solid #656d38; border-radius: 8px; background: #25291a; }
.error, .catalog-editor [role=alert] { color: #ffb9b9; background-color: #351f29; border-color: #85525b; }
.confirmation, .bundle-item-fields { border-color: var(--admin-line); }
.destructive-final { background: #321e27; border-color: #85525b; }
.details-drawer :is(button,summary):focus-visible, .record-modal-content :is(button,summary):focus-visible { outline-color: var(--admin-accent); }
.details-drawer ::selection, .record-modal-content ::selection { color: var(--admin-ground); background: var(--admin-accent); }
.login-shell { color: var(--admin-ink); background: transparent; }
.login-card { color: var(--admin-ink); background: var(--admin-surface); border: 0; border-radius: var(--admin-radius); box-shadow: var(--admin-panel-shadow); }
.login-wordmark { width: 94px; height: 32px; object-fit: contain; object-position: left; margin-bottom: 28px; }
.login-card h1 { color: var(--admin-ink); font-size: 34px; letter-spacing: -.025em; line-height: 1.1; }
.login-card>p:not(.eyebrow), .login-card .remember-session { color: var(--admin-muted); }
.login-card .eyebrow { color: var(--admin-muted); font-size: 13px; letter-spacing: 0; text-transform: none; }
.login-card small { color: var(--admin-muted); letter-spacing: .02em; }
.login-card .remember-session input { min-height: 18px; accent-color: var(--admin-accent); }
.version-overview { color: var(--admin-muted); border-color: var(--admin-line); }
/* Each overlay owns one header and one scrolling body, including related records. */
.catalog-form-dialog { overflow: hidden; padding: 28px; }
.catalog-form-dialog>header { gap: 20px; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.catalog-form-dialog>header h2 { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.catalog-form-dialog>header .icon-button, .detail-title-heading .icon-button { margin: 0; }
.catalog-form-content { overflow: auto; scrollbar-gutter: stable; padding-right: 8px; }
.record-modal-content { display: block; }
.record-modal-content .record-drawer-title { padding: 0 0 16px; }
.record-modal-content .detail-subtitle { margin-top: 0; }
.record-modal-content .product-dialog-content { overflow: visible; max-height: none; padding-right: 0; }
.catalog-form-content>.panel { width: auto; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; }
.customer-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; }
.customer-stats>div { display: flex; align-items: baseline; gap: 8px; padding: 0; border-radius: 0; background: none; }
.customer-stats b { font-size: 16px; }
.customer-stats span { font-size: 13px; text-transform: none; }
.details-drawer .product-dialog-content>section, .record-modal-content .product-dialog-content>section { padding: 16px 0; }
.record-modal-content .record-fields { gap: 12px 24px; }
.overview-content { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.overview-content>.panel { width: auto; max-width: none; margin: 0; min-width: 0; }
.overview-content .table-wrap table { min-width: 0; }
.operations-summary .empty { padding: 8px 0; margin: 0; }
.operations-summary h3 { font-size: 14px; margin-top: 20px; }
.settings-runtime { display: block; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--admin-line); color: var(--admin-muted); }
.settings-runtime summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-size: 14px; }
.settings-runtime>span { display: inline-block; margin: 12px 20px 0 0; }
.settings-sections>section { padding: 20px 0; }
.setting-row>summary { min-height: 44px; }
.batch-library>.batch-filters { margin: 0; }
.batch-library>.table-wrap { margin-top: 0; }
.pagination, .products-results .pagination { padding: 16px 0; margin: 0; border: 0; background: none; gap: 16px; }
.pagination>div, .products-results .pagination>div { display: flex; gap: 8px; align-items: center; }
.pagination .secondary { min-height: 44px; padding: 8px 12px; }
.products-results .pagination [aria-current] { color: var(--admin-muted); border: 0; padding: 0; background: none; }
.cell-value.date { white-space: normal; line-height: 1.5; }
.customer-email-fields p[role="status"] { color: var(--admin-muted); }
.cell-value.email, .license-customer-cell>small { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; max-width: none; }
.collection-layout .license-table { table-layout: fixed; min-width: 980px; }
.collection-layout .license-table th:first-child { width: 27%; }
.collection-layout .license-table th:nth-child(2) { width: 20%; }
.collection-layout .license-table th:nth-child(3) { width: 15%; }
.collection-layout .license-table td:first-child { min-width: 0; max-width: none; }
.collection-layout .license-table td { overflow-wrap: anywhere; }
.issue-panel { width: 100%; max-width: none; }
.issue-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.issue-target { display: grid; align-content: start; gap: 16px; min-width: 0; }
.issue-target h3 { font-size: 16px; margin: 0; }
.issue-target .catalog-picker { border: 0; padding: 0; }
.issue-target .notice { margin: 0; }
.catalog-picker .pagination { padding: 0; margin: 0; }
.catalog-form-content .issue-targets { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .app-shell { display: block; padding: 0; }
  .sidebar, .preview-shell .sidebar { position: static; height: auto; padding: 20px 18px 12px; margin: 0; }
  .brand { padding: 0 8px 18px; }
  .sidebar nav { display: flex; gap: 6px; overflow-x: auto; padding: 3px 3px 8px; }
  .sidebar nav button { flex: 0 0 auto; padding: 10px 16px; min-height: 44px; white-space: nowrap; }
  .sidebar nav button svg { display: block; width: 18px; height: 18px; }
  .sidebar-bottom { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0; }
  .sidebar-bottom::before { display: none; }
  .sidebar-bottom .admin-version { margin: 0; }
  .workspace { min-height: 0; padding: 20px 24px 28px; }
  .workspace h1 { font-size: 28px; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 0; }
  .metrics article:nth-child(3) { border: 0; }
  .overview-content { grid-template-columns: minmax(0, 1fr); }
  .issue-targets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sidebar, .preview-shell .sidebar { padding: 18px 10px 8px; }
  .workspace { padding: 18px 16px 24px; }
  .workspace header { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  .workspace header .service { margin-top: 0; }
  .workspace h1 { font-size: 26px; }
  .preview-banner { line-height: 1.5; padding: 10px 12px; }
  .panel { padding: 18px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics article:nth-child(3) { border-right: 1px solid var(--admin-line); }
  .metrics article:nth-child(even), .metrics article:last-child { border: 0; }
  .metrics article strong { font-size: 25px; }
  .login-shell { padding: 16px; }
  .login-card { padding: 28px 24px; }
  .details-drawer, .catalog-form-dialog { padding: 18px 16px; border-radius: 0; }
  .table-wrap td, .products-card td { padding: 12px 16px; }
}
/* Semantic state colors remain distinct within the native family. */
.product-dialog .state.state-revoked, .product-dialog .state.state-refunded,
.product-dialog .state.state-cancelled, .product-dialog .state.state-failed {
  color: var(--admin-danger); border-color: #85525b; background: #ff9b9d08;
}
.product-dialog .state.state-remote-reset, .product-dialog .state.state-expired {
  color: var(--admin-warning); border-color: #7b6849; background: #efc78008;
}

/* License terms are an explicit decision, ahead of customer/product setup. */
.issue-license-class { margin-bottom: 24px; }
.issue-license-class > label > strong { font-size: 16px; }
.license-class-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.license-class-heading strong { font-size: 22px; }
.license-class-control .catalog-editor { margin-top: 16px; }