/* The app's surfaces, decided 8 November ("hotta upp designen", see PROJECT_CONTEXT.md): a calm cool canvas with
   white cards (a hairline and a soft shadow), the area colour only as an accent (menu icon, active tab and a dot
   before the page label), two typefaces (Inter for text, Sora for headings and key figures since 9 November) and one
   button vocabulary. Replaces the tinted sections of 5 November. Loaded last, so it adjusts the component styles
   without changing their layout. */
:root {
  --surface-page: #f4f5f9;
  --surface-card: #ffffff;
  --surface-sunken: #f7f8fb;
  --surface-tint: #f6f5fb;
  --surface-tint-strong: #eeecf7;
  --line-soft: #e8e9f0;
  --card-line: #e2e4ed;
  --card-shadow: 0 1px 2px rgb(24 28 52 / 0.04), 0 3px 14px -6px rgb(24 28 52 / 0.1);
  --surface-raised-shadow: var(--card-shadow);
  --radius-card: 14px;
  --control-line: #cdd1dd;
  /* Area colours: deep tone for text and marks, soft tone for highlights, light tone on the dark menu. */
  --area-home: #5040a1;
  --area-home-soft: #f1eefa;
  --area-home-on-dark: #c3b9f7;
  --area-requests: #9a4d12;
  --area-requests-soft: #fcf1e4;
  --area-requests-on-dark: #f2b277;
  --area-screens: #1d6672;
  --area-screens-soft: #e3f2f3;
  --area-screens-on-dark: #83d2db;
  --area-content: #8b3b6c;
  --area-content-soft: #f8ebf3;
  --area-content-on-dark: #ebaad2;
  --area-finance: #3c4f7a;
  --area-finance-soft: #e9eef8;
  --area-finance-on-dark: #adbfe9;
  --area-sales: #2d6a3e;
  --area-sales-soft: #e6f3e9;
  --area-sales-on-dark: #9bd6aa;
  --area-platform: #4c5367;
  --area-platform-soft: #eceef3;
  --area-platform-on-dark: #c3c8d6;
  --area: var(--area-home);
  --area-soft: var(--area-home-soft);
}
[data-area='home'] {
  --area: var(--area-home);
  --area-soft: var(--area-home-soft);
}
[data-area='requests'] {
  --area: var(--area-requests);
  --area-soft: var(--area-requests-soft);
}
[data-area='screens'] {
  --area: var(--area-screens);
  --area-soft: var(--area-screens-soft);
}
[data-area='content'] {
  --area: var(--area-content);
  --area-soft: var(--area-content-soft);
}
[data-area='finance'] {
  --area: var(--area-finance);
  --area-soft: var(--area-finance-soft);
}
[data-area='sales'] {
  --area: var(--area-sales);
  --area-soft: var(--area-sales-soft);
}
[data-area='platform'] {
  --area: var(--area-platform);
  --area-soft: var(--area-platform-soft);
}

/* Type: Inter for text and controls, with Sora, the typeface of Glimt's logo, for headings and key figures. */
body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.app-layout :is(h1, h2),
.onboarding-shell :is(h1, h2),
.loop-kpis strong {
  font-family: var(--font-display);
}
/* Sora is wider than the earlier face, so a long word such as Bokningsförfrågningar is hyphenated, or broken where
   the browser has no Swedish hyphenation, rather than running past a phone's edge. */
.app-layout :is(h1, h2),
.onboarding-shell :is(h1, h2) {
  overflow-wrap: break-word;
  hyphens: auto;
}
.workspace h1 {
  font-size: clamp(28px, 2.3vw, 36px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.workspace h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
}
.workspace :is(h3, h4) {
  letter-spacing: -0.005em;
}

/* The page: one calm canvas. The area shows on the menu icon, the active tab and the dot before the page label. */
body,
sv-app:has(.app-layout) > footer {
  background: var(--surface-page);
}
.app-layout {
  background: var(--surface-page);
}
.workspace .page-heading .eyebrow,
.workspace .page-heading > div > .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}
.workspace .page-heading .eyebrow::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--area);
}
.workspace .page-heading h1 {
  color: var(--color-ink);
}
.workspace .page-heading p {
  color: var(--color-muted);
  font-size: 15px;
  max-width: 68ch;
}

/* Cards: white with a hairline and a soft shadow. Cards inside a card are sunken, without a shadow. */
.workspace .panel {
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
}
.workspace .panel :is(.panel, .live-screen-card, .media-card, .notification-card) {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-sunken);
  box-shadow: none;
}
.workspace :is(.live-screen-card, .media-card) {
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
}
.workspace .panel :is(.loop-day-cell, .monitor-stage) {
  box-shadow: none;
}

/* Buttons: a filled main action, white secondary actions with a hairline, and text actions without a frame. */
.workspace button:not([class], [role]),
.workspace .button-link {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 1px 2px rgb(32 36 60 / 0.18);
}
.workspace button:not([class], [role]):disabled {
  border-color: transparent;
  background: var(--surface-tint-strong);
  color: #7c769f;
  box-shadow: none;
  opacity: 1;
}
.workspace :is(button.secondary, a.button.secondary, .booking-workspace-link) {
  border: 1px solid var(--control-line);
  background: var(--surface-card);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgb(32 36 60 / 0.06);
}
.workspace :is(button.secondary, a.button.secondary, .booking-workspace-link):hover:not(:disabled) {
  border-color: #b7bccd;
  background: var(--surface-sunken);
  color: var(--color-ink);
}
.workspace button.secondary:disabled {
  border-color: var(--line-soft);
  background: var(--surface-sunken);
  color: var(--color-muted);
  box-shadow: none;
}
.workspace :is(button, a).text-action {
  font-weight: 600;
  text-decoration: none;
}
.workspace :is(button, a).text-action:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Controls: one field style, and a drawn arrow on lists so they look the same in every browser. */
.workspace :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']), select, textarea) {
  border-color: var(--control-line);
  background-color: var(--surface-card);
}
.workspace
  :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']), select, textarea):hover:not(
    :disabled,
    :focus
  ) {
  border-color: #aab0c2;
}
.workspace select:not([multiple]) {
  appearance: none;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23646b81' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Status labels as calm pills. */
.workspace .badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Tables: quiet column headings. */
.workspace thead th {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
}

/* A page or section with nothing in it yet starts with a small mark. */
.workspace .empty-state::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--color-accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235040a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2.5'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E")
    center / 22px no-repeat;
}

/* The screen tiles: the screen on a white card, lifting a little on hover. */
.screen-tile .monitor-stage {
  border: 1px solid var(--card-line);
  background: var(--surface-card);
  box-shadow: var(--card-shadow);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.screen-tile:hover .monitor-stage {
  border-color: #c9c2e6;
  background: var(--surface-card);
  box-shadow:
    0 1px 2px rgb(24 28 52 / 0.05),
    0 10px 24px -10px rgb(24 28 52 / 0.25);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .screen-tile .monitor-stage {
    transition: none;
  }
  .screen-tile:hover .monitor-stage {
    transform: none;
  }
}

/* A screen with nothing on it is dark glass rather than a flat black box. */
.monitor-frame > svg.monitor-off {
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0.07) 0 34%, transparent 34.2%),
    linear-gradient(160deg, #263041, #0f141b 70%);
}

/* The week plan: a day that has passed and had no places for sale is outlined only. */
.loop-day-cell.is-past.is-closed {
  border-style: dashed;
  background: transparent;
}
.loop-day-cell.is-past:not(.is-closed) {
  background: var(--surface-sunken);
}

/* The week's figures: the number in the display face, occupancy with a bar. */
.loop-kpis strong {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.loop-kpis progress {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-tint-strong);
  appearance: none;
  overflow: hidden;
}
.loop-kpis progress::-webkit-progress-bar {
  background: var(--surface-tint-strong);
  border-radius: 999px;
}
.loop-kpis progress::-webkit-progress-value {
  background: var(--color-accent);
  border-radius: 999px;
}
.loop-kpis progress::-moz-progress-bar {
  background: var(--color-accent);
  border-radius: 999px;
}

/* Local development only: the test mailbox stays small and out of the way. */
.app-layout .dev-box {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
  font-size: 11px;
}

/* The main menu shows each area's colour on its icon and a bar on the active item; the phone tab bar marks the
   active area. */
.app-sidebar .main-nav a.nav[data-area='home'] .icon {
  color: var(--area-home-on-dark);
}
.app-sidebar .main-nav :is(a.nav[data-area='requests'], sv-request-link a.nav) .icon {
  color: var(--area-requests-on-dark);
}
.app-sidebar .main-nav a.nav[data-area='screens']:not(.nav-cta) .icon {
  color: var(--area-screens-on-dark);
}
.app-sidebar .main-nav a.nav[data-area='content'] .icon {
  color: var(--area-content-on-dark);
}
.app-sidebar .main-nav a.nav[data-area='finance'] .icon {
  color: var(--area-finance-on-dark);
}
.app-sidebar .main-nav a.nav[data-area='platform'] .icon {
  color: var(--area-platform-on-dark);
}
@media (min-width: 741px) {
  .app-sidebar .main-nav :is(a.nav, sv-request-link a.nav).active {
    position: relative;
  }
  .app-sidebar .main-nav :is(a.nav, sv-request-link a.nav).active::before {
    content: '';
    position: absolute;
    inset-block: 10px;
    inset-inline-start: -14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #c3b9f7;
  }
}
.area-tabs a[aria-current='page'] {
  border-block-end-color: var(--area);
}
@media (max-width: 740px) {
  .app-sidebar .main-nav a.nav .icon,
  .app-sidebar .main-nav sv-request-link a.nav .icon {
    color: inherit;
  }
  .app-sidebar .main-nav a.nav.active[data-area],
  .app-sidebar .main-nav sv-request-link a.nav.active {
    color: var(--area);
  }
  .app-sidebar .main-nav a.nav.active .icon {
    background: var(--area-soft);
  }
}
@media (forced-colors: active) {
  .workspace .panel {
    border: 1px solid CanvasText;
  }
  .workspace .page-heading .eyebrow::before,
  .workspace .empty-state::before {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
}