/* Selected application design: Skärmstudio. Kept separate from the historical
   prototypes and playback pages. Component styles still own behavior/layout;
   these semantic tokens and shared surfaces define the application theme. */
:root {
  --color-canvas: #f3f4f8;
  --color-surface: #fff;
  --color-sidebar: #24273b;
  --color-ink: #20243c;
  --color-muted: #646b81;
  --color-line: #e0e3ed;
  --color-accent: #5040a1;
  --color-accent-hover: #3b2f7c;
  --color-accent-soft: #eeebf8;
  --sidebar-ink: #e7e9f3;
  --sidebar-muted: #b1b7cd;
  --sidebar-active: #3b3e59;
  --color-stage: #e9ebf2;
  --control-border: #a1a8bb;
  --surface-muted: #f3f4f8;
  --radius-control: 7px;
  --radius-panel: 10px;
  --shadow-panel: none;
  --sidebar-width: 252px;
  --line: var(--color-line);
  /* One status vocabulary: needs your action, waiting for someone else, done, problem and neutral. */
  --status-action: #864210;
  --status-action-soft: #fdebd6;
  --status-waiting: #314f7c;
  --status-waiting-soft: #e6ecf6;
  --status-done: #24603b;
  --status-done-soft: #e1f0e6;
  --status-problem: #8c2c22;
  --status-problem-soft: #fae4e1;
  --status-muted: #4c5367;
  --status-muted-soft: #eceef3;
}
body {
  background: var(--color-canvas);
}
h1 {
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 650;
  letter-spacing: -1.2px;
  text-wrap: balance;
}
h2 {
  font-size: 20px;
  font-weight: 650;
}
h3 {
  font-weight: 650;
}
p {
  font-size: 14px;
}
a {
  color: var(--color-accent);
}
:where(a, button, summary) {
  touch-action: manipulation;
}
.booking-total,
.market-hours strong,
.settings-comparison {
  font-variant-numeric: tabular-nums;
}
button,
.button-link,
.booking-workspace-link {
  font-size: 13px;
  border-radius: var(--radius-control);
  min-height: 44px;
}
button:disabled {
  cursor: not-allowed;
}
button.secondary,
.booking-workspace-link {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
}
button.secondary:hover,
.booking-workspace-link:hover {
  background: var(--color-accent-soft);
  border-color: #c9c2e6;
  color: var(--color-accent);
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
input,
select,
textarea {
  min-width: 0;
  border-color: var(--control-border);
  border-radius: var(--radius-control);
  font-size: 14px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-accent);
  border-color: transparent;
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--color-accent);
}
label {
  font-size: 13px;
}
.panel,
.login-card {
  border-radius: var(--radius-panel);
  border-color: var(--color-line);
  box-shadow: none;
}
.panel {
  padding: 24px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
}
.hint {
  line-height: 1.6;
}
.badge {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.row {
  border-color: var(--color-line);
}

/* One continuous dark navigation rail, with a quiet utility bar above the work. */
.app-topbar {
  height: 72px;
  padding: 0 28px 0 0;
  gap: 24px;
}
.app-topbar > .brand {
  flex: 0 0 var(--sidebar-width);
  align-self: stretch;
  background: var(--color-sidebar);
  color: var(--sidebar-ink);
  padding: 0 24px;
  font-size: 23px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-topbar .brand-icon {
  color: #c3baf9;
  flex-shrink: 0;
}
.app-topbar .byline {
  border: 0;
  padding: 0;
  font-size: 10px;
}
.app-layout {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: calc(100dvh - 130px);
}
aside.app-sidebar {
  padding: 24px 14px;
  background: var(--color-sidebar);
  border: 0;
  color: var(--sidebar-ink);
}
.app-sidebar nav {
  display: block;
  margin: 24px 0 0;
}
.app-sidebar :is(a.nav, button.nav) {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 7px;
  color: var(--sidebar-ink);
  background: transparent;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 450;
  hyphens: none;
}
.app-sidebar :is(a.nav, button.nav) > span:not(.badge) {
  min-width: 0;
  text-align: left;
}
.app-sidebar :is(a.nav, button.nav) .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
}
.app-sidebar :is(a.nav, button.nav):is(:hover, .active) {
  color: #fff;
  background: var(--sidebar-active);
}
.app-sidebar :is(a.nav, button.nav).active {
  font-weight: 600;
}
.app-sidebar :focus-visible {
  outline-color: #c3baf9;
}
.notification-link .notification-count {
  margin-left: auto;
  border-radius: 4px;
  padding: 2px 7px;
  background: #f8edcf;
  color: #71551b;
}
.workspace {
  min-width: 0;
  max-width: 1370px;
  padding: 38px 44px 32px;
  container-type: inline-size;
}
.page-heading {
  margin-bottom: 28px;
  align-items: center;
}
.page-heading p {
  max-width: 76ch;
}
.dev-box {
  color: var(--color-muted);
  border-color: var(--color-line);
  font-size: 12px;
  margin-top: 36px;
}
.dev-box button {
  min-height: 36px;
}
footer {
  color: var(--color-muted);
  font-size: 11px;
  padding-block: 18px;
}
sv-app:has(.app-layout) > footer {
  margin-left: var(--sidebar-width);
  padding-inline: 44px;
  background: var(--color-canvas);
}

/* Information hierarchy: screen, content, status, then optional detail. */
.live-screen-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.live-screen-card {
  padding: 0;
  border-radius: 10px;
  box-shadow: none;
  gap: 0;
}
.live-screen-card > header {
  padding: 16px 18px;
  margin: 0;
  min-height: 72px;
  justify-content: space-between;
}
.live-screen-card > header > div {
  min-width: 0;
}
.live-screen-card :is(h2, h3) {
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.35px;
  margin: 0;
  overflow-wrap: anywhere;
}
.live-screen-card .eyebrow {
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.setup-status {
  font-size: 11px;
}
.monitor-stage {
  background: var(--color-stage);
  border-radius: 7px;
}
.live-screen-card > .monitor-stage {
  border-radius: 0;
  margin: 0;
  height: 220px;
  padding: 16px;
}
.live-screen-card > .monitor-stage .monitor-frame > :is(img, svg) {
  max-height: 188px;
  border-width: 6px;
  border-radius: 7px;
}
.screen-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  min-width: 0;
}
.screen-card-body > p {
  margin: 0;
}
.preview-caption {
  font-size: 12px;
  text-align: left;
  color: var(--color-muted);
}
.screen-connection {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}
.screen-details {
  border-top: 1px solid var(--color-line);
}
.screen-details summary {
  padding: 12px 0;
  font-size: 12px;
  color: var(--color-muted);
  min-height: 44px;
}

.sales-disabled {
  min-height: 38px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
}

.overview-controls {
  padding: 18px 20px;
  gap: 12px;
}
.overview-controls + .hint {
  margin: 0 0 24px;
  font-size: 12px;
  max-width: 100ch;
}
.overview-status {
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
}
.overview-status span,
.overview-status p {
  font-size: 11px;
  color: var(--color-muted);
}
.overview-plan {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 0 0 12px;
  font-size: 13px;
}
.overview-plan > strong {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 500;
}
.overview-plan p {
  color: var(--color-ink);
  font-size: 14px;
  margin: 0;
  overflow-wrap: anywhere;
}
.overview-card summary {
  font-size: 12px;
  color: var(--color-muted);
  min-height: 44px;
  padding: 12px 0;
}
.overview-card .store-form-actions {
  margin: 0;
  flex-wrap: wrap;
}
.overview-periods {
  font-size: 12px;
}

.ai-balance-inline {
  color: var(--color-muted);
}
.gallery-upload {
  background: var(--color-surface);
  border-color: var(--color-line);
  border-radius: 8px;
  padding: 16px 20px;
}
.gallery-upload p,
.media-comparison figcaption {
  color: var(--color-muted);
}
.media-grid {
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
}
.media-card {
  padding: 14px;
  border-radius: 10px;
}
.media-comparison img {
  background: var(--color-stage);
  border-radius: 6px;
}

.media-card h3 {
  font-size: 15px;
  line-height: 1.45;
}
.media-card p {
  font-size: 12px;
}

.ai-reference,
.ai-source-preview,
.ai-package-review {
  background: var(--surface-muted);
  border-color: var(--color-line);
  border-radius: 8px;
}
.ai-reference-empty {
  background: var(--color-stage);
}
.ai-format-choice {
  border-color: var(--control-border);
}
.ai-format-choice:has(input:checked) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
.ai-balance strong {
  color: var(--color-ink);
}
.ai-balance small,
.ai-submit small,
.ai-format-choice small,
.ai-jobs small,
.ai-jobs p {
  color: var(--color-muted);
}
.ai-jobs {
  border-color: var(--color-line);
}
.ai-jobs article {
  background: var(--surface-muted);
  border-color: var(--color-line);
}
.ai-running {
  color: var(--color-accent);
}
.ai-job-spinner {
  border-color: #d1caec;
  border-top-color: var(--color-accent);
}
.gallery-dialog,
.booking-gallery {
  border-radius: 12px;
  color: var(--color-ink);
}
.gallery-dialog::backdrop,
.booking-gallery::backdrop {
  background: #20243c88;
}

/* Forms and secondary workflows keep the same visual vocabulary. */
.store-legal,
.player-link-block,
.store-entry,
.secret,
.mail {
  background: var(--surface-muted);
}
.booking-list-item {
  border-color: var(--color-line);
}
.booking-list-item:hover {
  background: var(--color-accent-soft);
}
.price-rule {
  border-radius: 8px;
}
:is(sv-booking-workspace, sv-booking-requests) .alert.info {
  background: var(--color-accent-soft);
  border-color: #d6d0ed;
}
.store-editor,
.screen-editor {
  border-color: #d6d0ed;
}
:is(sv-store-workspace, sv-ai-editor, sv-ai-settings, sv-sales-workspace, sv-marketplace-workspace) textarea {
  border-color: var(--control-border);
}
.screen-art {
  background: #e5e2f2;
  box-shadow: 26px 16px 0 #efedf6;
}
.screen-art > div {
  background: #dcd6f0;
  border-color: var(--color-accent);
  color: var(--color-ink);
}
@container (max-width: 650px) {
  .live-screen-grid {
    grid-template-columns: 1fr;
  }
  .store-form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  .workspace {
    padding: 28px 24px;
  }
  .app-topbar {
    gap: 16px;
    padding-right: 20px;
  }
  .app-topbar .byline {
    display: none;
  }
}
@media (max-width: 740px) {
  .app-topbar {
    padding: 0 16px;
    height: auto;
    min-height: 72px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .app-topbar > .brand {
    flex: 1 1 auto;
    background: transparent;
    color: var(--color-ink);
    padding: 16px 0;
    font-size: 21px;
  }
  .app-topbar .brand-icon {
    color: var(--color-accent);
  }
  .app-layout {
    display: block;
  }
  .workspace {
    padding: 26px 16px;
  }
  .panel {
    padding: 20px 16px;
  }
  .page-heading {
    align-items: flex-start;
    gap: 16px;
  }
  .page-heading > button {
    margin-top: 14px;
  }
  .overview-controls label {
    flex-basis: 100%;
  }
  .live-screen-grid {
    grid-template-columns: 1fr;
  }

  .store-form-actions {
    flex-wrap: wrap;
  }
  sv-app:has(.app-layout) > footer {
    margin-left: 0;
    padding-inline: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .app-sidebar :is(a.nav, button.nav).active {
    outline: 1px solid Highlight;
  }
  .monitor-frame > :is(img, svg) {
    border-color: CanvasText;
  }
}
/* In-page confirmation (confirm-dialog.ts). */
.confirm-dialog {
  color: var(--color-ink);
  background: var(--color-surface);
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  padding: 24px;
  overscroll-behavior: contain;
}
.confirm-dialog::backdrop {
  background: #14222d70;
  overflow: hidden;
  overscroll-behavior: contain;
}
.confirm-message {
  margin: 0 0 20px;
  font-size: 16px;
  white-space: pre-line;
}
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* The AI form (13 November): what to make on the left, and the order beside it, in view while scrolling, with the
   formats, where the image is saved, the rights, what it costs and the button. One column on narrow containers, the
   order last. These rules follow store.css's earlier ones for the form and take their place where both apply. */
sv-ai-editor {
  container: ai-editor / inline-size;
  /* The height the order can stay in view in: the window's, or the slideshow dialog's. */
  --ai-order-room: 100dvh;
}
.slideshow-ai sv-ai-editor {
  --ai-order-room: calc(100dvh - 40px);
}
.workspace sv-ai-editor .ai-editor {
  max-inline-size: 78rem;
}
sv-ai-editor .ai-form-layout {
  display: grid;
  gap: 20px 28px;
  align-items: start;
  margin-top: 18px;
}
sv-ai-editor
  :is(.ai-form-what, .ai-form-order, .ai-form-order > fieldset, fieldset.ai-references, fieldset.ai-formats) {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}
sv-ai-editor fieldset.ai-references,
sv-ai-editor fieldset.ai-formats {
  gap: 10px;
}
sv-ai-editor
  .ai-editor
  :is(.ai-form-what, .ai-form-order, .ai-form-order > fieldset, fieldset.ai-references, fieldset.ai-formats)
  > :not(legend) {
  margin: 0;
}
sv-ai-editor :is(.ai-references, .ai-formats) legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 650;
}
sv-ai-editor .ai-form-what .ai-prompt + .hint {
  margin-top: -8px;
}
sv-ai-editor .ai-wizard-entry {
  padding: 8px 8px 8px 14px;
  font-size: 14px;
}
sv-ai-editor .ai-logo {
  padding: 8px 12px;
  align-items: center;
}
sv-ai-editor .ai-editor .ai-logo .hint {
  margin: 0;
}
/* The images chosen so far, small enough that five fit on a row or two. */
sv-ai-editor .ai-reference-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 8px;
  margin: 0;
}
sv-ai-editor .ai-reference {
  gap: 6px;
  padding: 8px;
}
sv-ai-editor .ai-reference p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
sv-ai-editor .ai-reference-image {
  height: 76px;
  border-radius: 6px;
  background: var(--color-stage);
}
sv-ai-editor .ai-reference-remove {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 13px;
}
/* Välj bland dina bilder and Ladda upp en bild side by side; the file input keeps its own focus and keyboard. */
sv-ai-editor .ai-reference-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
sv-ai-editor .ai-reference-add .icon {
  width: 18px;
  height: 18px;
}
sv-ai-editor .ai-upload {
  position: relative;
  display: inline-flex;
}
sv-ai-editor .ai-upload .ai-file-input {
  position: absolute;
  inset: 0;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
sv-ai-editor .ai-upload label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--control-line, var(--color-line));
  border-radius: 8px;
  background: var(--surface-card, var(--color-surface));
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgb(32 36 60 / 0.06);
  font-weight: 600;
  cursor: pointer;
}
sv-ai-editor .ai-upload label:hover {
  border-color: #b7bccd;
  background: var(--surface-sunken, var(--surface-muted));
}
sv-ai-editor .ai-upload:has(.ai-file-input:focus-visible) label {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
sv-ai-editor .ai-upload:has(.ai-file-input:disabled) label {
  color: var(--color-muted);
  background: var(--surface-sunken, var(--surface-muted));
  cursor: not-allowed;
}
sv-ai-editor .ai-style-details {
  margin: 0;
}

/* The order: a card of its own beside the form, and below it on narrow containers. */
sv-ai-editor .ai-form-order {
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--surface-card, var(--color-surface));
}
sv-ai-editor fieldset.ai-formats {
  grid-template-columns: minmax(0, 1fr);
}
sv-ai-editor .ai-format-list {
  display: grid;
  gap: 6px;
}
sv-ai-editor .ai-format-choice {
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
}
sv-ai-editor .ai-format-choice span {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 10px;
}
sv-ai-editor .ai-format-choice input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}
sv-ai-editor .ai-format-choice strong {
  font-size: 14px;
}
sv-ai-editor .ai-unsupported ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
sv-ai-editor .ai-unsupported li {
  display: inline;
  font-weight: 600;
  white-space: nowrap;
}
sv-ai-editor .ai-unsupported li + li::before {
  content: ', ';
}
sv-ai-editor .ai-format-hint {
  align-items: flex-start;
}
sv-ai-editor .ai-format-hint .hint,
sv-ai-editor .ai-editor .ai-form-order .hint {
  margin: 0;
}
sv-ai-editor .ai-form-order .ai-form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}
sv-ai-editor .ai-rights {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
sv-ai-editor .ai-rights input {
  margin-top: 2px;
}
sv-ai-editor .ai-submit {
  flex-flow: row wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding-top: 14px;
}
sv-ai-editor .ai-submit p {
  flex: 1 1 9rem;
  font-size: 14px;
}
sv-ai-editor .ai-submit small {
  margin-top: 2px;
}
sv-ai-editor .ai-form-order .ai-responsibility {
  font-size: 12px;
  line-height: 1.5;
}

@container ai-editor (min-width: 52rem) {
  sv-ai-editor .ai-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  }
  /* In view while the form scrolls. One taller than the window scrolls until its button shows, and stays there. */
  sv-ai-editor .ai-form-order {
    position: sticky;
    top: min(16px, calc(var(--ai-order-room) - var(--ai-order-height, 0px) - 16px));
  }
}

/* Välj bland dina bilder: the slideshow picker's filters, grid and actions in a dialog of the AI form. */
.ai-picker-dialog {
  width: min(980px, calc(100vw - 24px));
  /*
   * Focus scrolling keeps a tile clear of the sticky Lägg till bar: the bar's height, measured by the picker, plus the
   * dialog's bottom padding (28px, 20px on a phone), which the sticky bar keeps clear of the edge.
   */
  scroll-padding-bottom: calc(var(--picker-actions-height, 6rem) + 40px);
}
sv-ai-image-picker {
  display: block;
  margin-top: 0.75rem;
}