/*
 * System wizualny Softmarkt dla SoftApkServMonitor: panel (/) i strona potwierdzenia (/ack/...).
 * Wartości z księgi znaku: pomarańcz #FF6600, grafit #655150, ciepłe neutralne, Inter, gradient, szkło, miękkie cienie.
 *
 * Zasada dla monitoringu: pomarańcz marki nie oznacza stanu. Stany (OK, ostrzeżenie, krytyczny) mają kolory semantyczne
 * i zawsze etykietę tekstową, żeby pomarańcz nie mylił się z ostrzeżeniem.
 *
 * Motyw: bez atrybutu data-theme decyduje system; data-theme="light" albo "dark" na <html> to wybór z przełącznika w panelu.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-ext-wght.woff2") format("woff2-variations"), url("/fonts/inter-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marka: źródło prawdy */
  --sm-orange-50: #FFF3EB; --sm-orange-100: #FFE0CC; --sm-orange-300: #FFA866;
  --sm-orange-500: #FF6600; --sm-orange-600: #E65C00; --sm-orange-700: #CC5200;
  --sm-gray-50: #FAF8F7; --sm-gray-100: #F1EDEC; --sm-gray-200: #E0D9D7; --sm-gray-400: #A89F9D;
  --sm-gray-600: #655150; --sm-gray-800: #3D3231; --sm-gray-900: #2A2221;
  --sm-gradient: linear-gradient(135deg, #FF8A33 0%, #FF6600 55%, #E65C00 100%);
  --sm-r-sm: 4px; --sm-r-md: 8px; --sm-r-lg: 12px; --sm-r-xl: 16px; --sm-r-2xl: 20px;
  --sm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sm-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Motyw jasny */
  --bg: #FAF8F7;
  --app-bg: radial-gradient(1100px 560px at 100% -10%, rgba(255,102,0,.10), transparent 60%),
            radial-gradient(900px 520px at -10% 110%, rgba(45,127,249,.06), transparent 55%),
            linear-gradient(180deg, #FAF8F7 0%, #FFFFFF 60%);
  --fg: #2A2221;
  --fg-strong: #655150;
  --muted: #74676A;
  --line: #E0D9D7;
  --line-soft: rgba(241,237,236,.85);
  --surface: rgba(255,255,255,.82);
  --surface-solid: #FFFFFF;
  --surface-sunken: #FAF8F7;
  --glass: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.65);
  --shadow-soft: 0 1px 2px rgba(101,81,80,.04), 0 6px 20px rgba(101,81,80,.07);
  --shadow-glass: 0 8px 32px rgba(101,81,80,.10);
  --shadow-glow: 0 8px 24px rgba(255,102,0,.30);
  --accent: #FF6600;
  --accent-ink: #B34700;
  --accent-soft: #FFF3EB;
  --focus: #FF6600;
  --backdrop: rgba(42,34,33,.35);

  /* Stany: kolor znaku, tło etykiety, tekst etykiety (kontrast AA) */
  --success: #2E9E5B; --success-bg: #E5F4EB; --success-fg: #1C6B3B;
  --warning: #F5A623; --warning-bg: #FEF1D8; --warning-fg: #7A4E00;
  --danger:  #D64545; --danger-bg:  #FBEAEA; --danger-fg:  #A32E2E;
  --info:    #2D7FF9; --info-bg:    #E6EFFE; --info-fg:    #1C58B8;
  --neutral: #A89F9D; --neutral-bg: #F1EDEC; --neutral-fg: #655150;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1514;
    --app-bg: radial-gradient(1100px 560px at 100% -10%, rgba(255,102,0,.13), transparent 60%),
              radial-gradient(900px 520px at -10% 110%, rgba(45,127,249,.08), transparent 55%),
              linear-gradient(180deg, #1A1514 0%, #151110 60%);
    --fg: #F1EDEC; --fg-strong: #E9DFDC; --muted: #A89F9D;
    --line: #3D3231; --line-soft: rgba(255,255,255,.06);
    --surface: rgba(42,34,33,.76); --surface-solid: #251E1D; --surface-sunken: #1F1918;
    --glass: rgba(37,30,29,.74); --glass-border: rgba(255,255,255,.07);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.28);
    --shadow-glass: 0 8px 32px rgba(0,0,0,.38);
    --shadow-glow: 0 8px 24px rgba(255,102,0,.24);
    --accent: #FF7A1F; --accent-ink: #FF9A52; --accent-soft: #3A2416; --focus: #FF8A33;
    --backdrop: rgba(0,0,0,.55);
    --success-bg: rgba(46,158,91,.18);  --success-fg: #74D39E;
    --warning-bg: rgba(245,166,35,.18); --warning-fg: #FFC766;
    --danger-bg:  rgba(214,69,69,.22);  --danger-fg:  #FF8F8F;
    --info-bg:    rgba(45,127,249,.20); --info-fg:    #93BBFF;
    --neutral-bg: #2E2625; --neutral-fg: #D8CDCA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1514;
  --app-bg: radial-gradient(1100px 560px at 100% -10%, rgba(255,102,0,.13), transparent 60%),
            radial-gradient(900px 520px at -10% 110%, rgba(45,127,249,.08), transparent 55%),
            linear-gradient(180deg, #1A1514 0%, #151110 60%);
  --fg: #F1EDEC; --fg-strong: #E9DFDC; --muted: #A89F9D;
  --line: #3D3231; --line-soft: rgba(255,255,255,.06);
  --surface: rgba(42,34,33,.76); --surface-solid: #251E1D; --surface-sunken: #1F1918;
  --glass: rgba(37,30,29,.74); --glass-border: rgba(255,255,255,.07);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.28);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.38);
  --shadow-glow: 0 8px 24px rgba(255,102,0,.24);
  --accent: #FF7A1F; --accent-ink: #FF9A52; --accent-soft: #3A2416; --focus: #FF8A33;
  --backdrop: rgba(0,0,0,.55);
  --success-bg: rgba(46,158,91,.18);  --success-fg: #74D39E;
  --warning-bg: rgba(245,166,35,.18); --warning-fg: #FFC766;
  --danger-bg:  rgba(214,69,69,.22);  --danger-fg:  #FF8F8F;
  --info-bg:    rgba(45,127,249,.20); --info-fg:    #93BBFF;
  --neutral-bg: #2E2625; --neutral-fg: #D8CDCA;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Podstawa */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sm-app {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--app-bg);
  background-attachment: fixed;
  color: var(--fg);
  font: 400 14px/1.5 var(--sm-font);
}
a { color: var(--fg-strong); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--sm-r-sm); }
small, .sm-muted { color: var(--muted); }
code, .sm-mono { font-family: var(--sm-mono); font-size: .8125rem; }
.sm-num { font-variant-numeric: tabular-nums; }

/* Logo zawsze na białym polu: logotyp „soft” jest grafitowy i ginie na ciemnym tle */
.sm-logo-chip { display: inline-flex; align-items: center; background: #FFFFFF; border-radius: var(--sm-r-lg); padding: 7px 12px; box-shadow: var(--shadow-soft); }
.sm-logo-chip img { display: block; height: 28px; width: auto; }

/* Szkło i karta */
.sm-glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.sm-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid var(--line-soft);
  border-radius: var(--sm-r-2xl);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

/* Przyciski */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 14px;
  font: 600 .8125rem/1.2 var(--sm-font);
  color: var(--fg-strong); background: var(--surface-solid);
  border: 1px solid var(--line); border-radius: var(--sm-r-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s, filter .15s, box-shadow .15s;
}
.sm-btn:hover { border-color: var(--fg-strong); color: var(--fg); }
.sm-btn--brand { color: #FFFFFF; background: var(--sm-gradient); border-color: transparent; box-shadow: var(--shadow-glow); }
.sm-btn--brand:hover { color: #FFFFFF; border-color: transparent; filter: brightness(1.05); }
.sm-btn--brand:active { filter: brightness(.95); }
.sm-btn--sm { min-height: 28px; padding: 4px 10px; font-size: .75rem; }
.sm-icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  color: var(--fg-strong); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--sm-r-md); cursor: pointer;
}
.sm-icon-btn:hover { border-color: var(--fg-strong); }
.sm-icon-btn svg { width: 18px; height: 18px; }

/* Etykiety stanów */
.sm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px; border-radius: 9999px;
  font: 600 .75rem/1.5 var(--sm-font); white-space: nowrap;
  color: var(--neutral-fg); background: var(--neutral-bg);
}
.sm-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); flex: none; }
.sm-badge--success { color: var(--success-fg); background: var(--success-bg); }
.sm-badge--success::before { background: var(--success); }
.sm-badge--warning { color: var(--warning-fg); background: var(--warning-bg); }
.sm-badge--warning::before { background: var(--warning); }
.sm-badge--danger { color: var(--danger-fg); background: var(--danger-bg); }
.sm-badge--danger::before { background: var(--danger); }
.sm-badge--info { color: var(--info-fg); background: var(--info-bg); }
.sm-badge--info::before { background: var(--info); }

/* Pola formularzy */
.sm-field { display: grid; gap: 4px; font-size: .75rem; font-weight: 500; color: var(--muted); min-width: 0; }
.sm-input, .sm-select, .sm-textarea {
  width: 100%; min-height: 34px; padding: 6px 10px;
  font: 400 .875rem/1.4 var(--sm-font); color: var(--fg);
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--sm-r-md);
}
.sm-textarea { min-height: 84px; resize: vertical; }
.sm-input:focus, .sm-select:focus, .sm-textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); }
.sm-input::placeholder, .sm-textarea::placeholder { color: var(--muted); opacity: .8; }

/* Tabele */
.sm-table-wrap { overflow-x: auto; border-radius: inherit; }
.sm-table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.sm-table th {
  text-align: left; white-space: nowrap;
  padding: 10px 14px; font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.sm-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sm-table tbody tr:last-child td { border-bottom: 0; }
.sm-table tbody tr:hover td { background: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }

/* Okno dialogowe */
.sm-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; color: var(--fg);
  border-radius: var(--sm-r-2xl);
}
.sm-dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sm-dialog form { display: grid; gap: 16px; padding: 22px; }
.sm-dialog h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--fg-strong); letter-spacing: -.01em; }
.sm-dialog p { margin: 0; color: var(--muted); font-size: .875rem; }
.sm-dialog__body { display: grid; gap: 12px; }
.sm-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Strona potwierdzenia z linku */
body.sm-center { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px 16px; }
.sm-ack { width: min(420px, calc(100vw - 32px)); padding: 26px 24px 24px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.sm-ack .sm-logo-chip { box-shadow: none; padding: 8px 14px; }
.sm-ack .sm-logo-chip img { height: 44px; }
.sm-ack__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-top: 4px; }
.sm-ack--ok .sm-ack__icon { color: var(--success-fg); background: var(--success-bg); }
.sm-ack--info .sm-ack__icon { color: var(--info-fg); background: var(--info-bg); }
.sm-ack--error .sm-ack__icon { color: var(--danger-fg); background: var(--danger-bg); }
.sm-ack__title { margin: 0; font-size: 1.375rem; line-height: 1.25; font-weight: 700; color: var(--fg-strong); letter-spacing: -.015em; text-wrap: balance; }
.sm-ack__detail { margin: 0; font-size: .9375rem; color: var(--fg); overflow-wrap: anywhere; }
.sm-ack .sm-btn { margin-top: 6px; width: 100%; min-height: 42px; font-size: .875rem; }
.sm-ack__foot { margin: 0; font-size: .75rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}