/* ASAP24PRO · 09D “Rama w ruchu” / T1 · shared low-key application theme.
   Load after the color adapter and module styles. Keep working areas calm. */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/brand/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/brand/barlow-bold-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #0b0e15;
  --bg-deep: #0b0e15;
  --surface: #121823;
  --surface-strong: #192130;
  --surface-dark: #0e131d;
  --glass-panel: #121823;
  --glass-panel-strong: #161e2c;
  --glass-card: #161e2c;
  --glass-card-strong: #192130;
  --glass-border: #293448;
  --glass-shadow: 0 12px 36px rgb(0 0 0 / 16%);
  --glass-blur: none;
  --field-bg: #0e141f;
  --text: #f0f3f8;
  --ink: #f0f3f8;
  --muted: #a2aaba;
  --line: #303d52;
  --primary: #2054f4;
  --primary-strong: #9bb4ff;
  --accent: #9bb4ff;
  --blue-bg: #192b50;
  --blue-line: #4362a0;
  --success: #92dfb9;
  --success-bg: #162e29;
  --success-line: #3c7061;
  --warning: #edc17d;
  --warning-bg: #30291f;
  --warning-line: #74603e;
  --danger: #ffa5ac;
  --danger-bg: #342029;
  --danger-line: #80515e;
  --available: var(--blue-bg);
  --checked-out: var(--warning-bg);
  --shadow: 0 18px 48px rgb(0 0 0 / 18%);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --font-display: 'Barlow', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
}
body,
body.warehouse-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  --app-bg-image: none;
  --wh-ink: var(--text);
  --wh-muted: var(--muted);
  --wh-line: var(--line);
  --wh-soft: var(--surface-strong);
  --wh-suggest: var(--blue-bg);
  --wh-selected: var(--success-bg);
}
body::before, body.warehouse-page::before {
  display: block;
  background: url('/assets/brand/asap24pro-kv-przesuniecie.webp') right top / auto 560px no-repeat;
  opacity: .2;
  mask-image: linear-gradient(to bottom, #000 140px, transparent 600px);
  -webkit-mask-image: linear-gradient(to bottom, #000 140px, transparent 600px);
  pointer-events: none;
}
::selection { background: #315acf; color: #fff; }
:where(a) { color: var(--primary-strong); }
:where(button, input, select, textarea) { font-family: var(--font-body); }
:where(button, a, summary, input, select, textarea):focus-visible,
.warehouse-page :focus-visible {
  outline: 2px solid #9bb4ff;
  outline-offset: 3px;
}
:where(input, select, textarea):focus {
  border-color: #9bb4ff;
  outline-color: #9bb4ff;
}
input::placeholder, textarea::placeholder { color: #939eb2; opacity: 1; }
input[type='checkbox'], input[type='radio'], .warehouse-page input[type='checkbox'] {
  accent-color: var(--primary);
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
  caret-color: var(--text);
}
option, optgroup { background: var(--field-bg); color: var(--text); }
:where(button, input, select, textarea):disabled { opacity: .55; }
:where(h1, h2), .warehouse-page h1, .warehouse-page h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
  line-height: 1.08;
}
.hero, .warehouse-page .hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, #121823 18%, rgb(18 24 35 / 46%)), url('/assets/brand/asap24pro-kv-przesuniecie.webp') right bottom / auto 110% no-repeat, var(--surface);
  border: 1px solid #293448;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 12%);
  backdrop-filter: none;
}
.hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.brand-signature {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 15px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo { display: block; width: 196px; height: auto; max-width: 100%; }
.hero .brand-logo { width: 154px; }
.hero .brand-signature { margin-bottom: 12px; }
.hero .session-user, .hero .session-user strong,
.warehouse-page .hero .session-user span { color: var(--text); }
.hero .sync-indicator { background: var(--surface-dark); border: 1px solid var(--line); }
.dot { animation: none; background: #87a6ff; box-shadow: 0 0 0 4px rgb(135 166 255 / 10%); }
.eyebrow, .panel-kicker, .warehouse-page .panel-kicker {
  color: var(--primary-strong);
  font-family: var(--font-body);
  font-style: normal;
  letter-spacing: .12em;
}
.primary-button, .warehouse-page .primary-button {
  color: #fff;
  background: var(--primary);
  border: 1px solid #4774ff;
  box-shadow: none;
}
.primary-button:not(:disabled):hover, .warehouse-page .primary-button:not(:disabled):hover {
  background: #1746d3;
  border-color: #87a6ff;
}
.secondary-button, .warehouse-page .secondary-button,
.ghost-button, .warehouse-page .ghost-button,
.hero .ghost-button, .warehouse-page .hero .ghost-button {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--line);
  box-shadow: none;
}
.secondary-button:not(:disabled):hover, .ghost-button:not(:disabled):hover,
.warehouse-page .ghost-button:not(:disabled):hover {
  color: #fff;
  background: #233047;
  border-color: #607498;
}
.danger-button { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.warehouse-page input, .warehouse-page select, .warehouse-page textarea,
.journey .field input, .journey .field select { background: var(--field-bg); color: var(--text); }
.warehouse-page .hero .mobile-nav-menu-panel,
.mobile-nav-menu-panel { background: #192130; border-color: var(--line); box-shadow: var(--shadow); }
.warehouse-page .hero .mobile-nav-menu > summary { background: var(--surface-strong); border-color: var(--line); }

.availability-quick-title strong, .availability-detail-title strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
}

/* Horyzont / Głębia is strongest on entry screens; working areas stay opaque. */
.home-panel, .login-panel {
  position: relative;
  background: linear-gradient(90deg, #121823 12%, rgb(18 24 35 / 32%) 85%), url('/assets/brand/asap24pro-kv-przesuniecie.webp') right top / min(100%, 940px) auto no-repeat, var(--surface);
  border: 1px solid #293448;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgb(0 0 0 / 22%);
  backdrop-filter: none;
}
.home-panel { padding: clamp(24px, 4vw, 48px); }
.home-panel .brand-signature { margin: 0 0 32px; }
.home-panel h1 { max-width: 20ch; font-size: clamp(2.7rem, 4.6vw, 3.8rem); margin-bottom: 36px; text-transform: uppercase; }
.home-panel .session-user { margin-bottom: 26px; }
.hub-link {
  position: relative;
  background: #161e2c;
  border: 1px solid #2c374c;
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: none;
  min-height: 235px;
}
.hub-link:hover { background: #1b263a; border-color: #6384d3; }
.hub-link strong { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.75rem; line-height: 1.08; color: var(--text); }
.hub-link-kicker { background: transparent; color: var(--primary-strong); border: 1px solid #4362a0; border-radius: 4px 12px 4px 12px; }
.hub-link > span:last-child { color: var(--muted); line-height: 1.65; }
.login-shell { width: min(100%, 460px); }
.login-panel { gap: 26px; padding: clamp(26px, 5vw, 40px); }
.login-panel .brand-signature { margin: 0 0 12px; }
.login-panel h1 { font-size: 2.7rem; max-width: 10ch; text-transform: uppercase; }
.login-panel .primary-button { min-height: 50px; margin-top: 8px; }
.login-message.error { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); }
.login-message.info { color: var(--primary-strong); background: var(--blue-bg); }

.warehouse-page .action-tiles small { color: var(--primary-strong); background: var(--blue-bg); }
.warehouse-page .action-tiles strong { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.7rem; }
@media (min-width: 1100px) {
  .disk-page .summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 701px) and (max-width: 1099px) {
  .disk-page .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Operational states keep their meaning while sharing the same dark surfaces. */
.summary-card strong { font-family: var(--font-body); font-style: normal; font-variant-numeric: tabular-nums; }
.calendar-day { background: var(--surface); }
.calendar-day.is-today { border-color: #87a6ff; box-shadow: inset 0 2px #87a6ff; }
.calendar-day.is-outside { opacity: .6; }
.availability-chip { background: color-mix(in srgb, var(--status-color, var(--primary)) 18%, var(--surface)); }
.availability-chip-status-badge, .availability-status-tag,
.availability-status-note, .availability-status-pill {
  color: color-mix(in srgb, var(--status-color, var(--primary)) 40%, #f0f3f8);
}
.availability-quick-dialog, .availability-detail-dialog, .partner-finance-modal-dialog { background: #161e2c; border: 1px solid var(--line); }
.availability-duty-check-box::after { border-left-color: #fff; border-bottom-color: #fff; }
.availability-quick-backdrop, .availability-detail-backdrop, .mazi-easter-backdrop,
.disk-detail-backdrop, .partner-finance-link-dialog, .warehouse-page dialog::backdrop { background: rgb(3 6 12 / 78%); }
.warehouse-page .journey-paths button[aria-pressed=true],
.warehouse-page .journey-paths button[aria-pressed=true]:hover {
  background: var(--blue-bg); color: var(--text); border-color: #87a6ff; box-shadow: inset 0 0 0 1px #87a6ff;
}
.warehouse-page .journey-paths button[aria-pressed=true] small,
.warehouse-page .journey-paths button[aria-pressed=true] span { color: #c3d2ef; }
.warehouse-page .journey-equipment.is-selected { background: var(--success-bg); border-color: var(--success-line); }
.warehouse-page .action-steps [aria-current=step],
.warehouse-page .journey-phase-title[aria-current=step],
.warehouse-page .journey-step-links button[aria-current=step] { background: var(--blue-bg); color: #c5d5ff; }
.warehouse-page .journey-badge.suggested,
.warehouse-page .journey-recommendation,
.warehouse-page .journey-kit-label { color: #b2c7ff; }
.warehouse-page .journey-badge.suggested { background: var(--blue-bg); }
.warehouse-page .journey-footer { background: #192130; box-shadow: 0 -8px 30px rgb(0 0 0 / 20%); }
.warehouse-page .action-warning { color: var(--warning) !important; }
.warehouse-page .history-card { border-left-color: #87a6ff; }
.warehouse-page .history-card.return { border-left-color: var(--success); }

@media (max-width: 720px) {
  .home-mobile-session-page .session-user {
    position: static;
    margin: 0 0 18px;
    justify-content: space-between;
    font-size: .75rem;
  }
  .home-mobile-session-page .session-user button { order: 1; }
  .home-panel .hub-link strong { font-size: 1.15rem; }
  .availability-page .hero h1 { white-space: normal; }
}
@media (max-width: 700px) {
  .home-panel h1 { font-size: clamp(2.25rem, 10vw, 3.25rem); margin-bottom: 26px; }
  .home-panel .brand-signature { margin-bottom: 24px; }
  .hero .brand-logo { width: 140px; }
  .hero .brand-signature { margin-bottom: 10px; }
  .home-panel, .login-panel { background-size: auto, auto 320px; }
  body::before, body.warehouse-page::before { background-size: auto 440px; opacity: .14; }
  .hub-link { min-height: 170px; }
  .login-body { padding: 18px; }
  .login-panel h1 { font-size: 2.45rem; }
  .availability-page .hero h1 { font-size: 1.8rem; }
  .warehouse-page .journey-progress { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}