/* =========================================================
   SKÓRKA "MORO" — barwy Wojska Polskiego.
   Włączana z panelu admina (WYGLĄD → Skórka) → <body data-skin="moro">.

   Zasady:
   - przewaga kamuflażu: tło, panele i przyciski pokazują wzór moro z prawdziwych tkanin
       assets/camo/wz93.jpg      — wz.93 (tło, panele, komunikaty)
       assets/camo/woodland.jpg  — moro na przyciskach (łatki pod tintem koloru)
     Wzorów nie rysujemy — używamy zdjęć tkanin, tylko z wyrównanym oświetleniem.
   - akcent aktywnych przycisków i podświetleń: bordo beretu,
   - akcenty narodowe: biel i czerwień (flaga),
   - czytelność: tekst biały na przyciemnionym moro, kontrast ≥ 4.5:1.
   ========================================================= */
body[data-skin="moro"],
.skin-prev-moro {
  --bg: #1c2116;
  --bg-2: #20261a;
  --panel: #1a1f14;
  --panel-2: #20271a;
  --panel-3: #2a3222;
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .34);

  --text: #ffffff;
  --muted: #e6e2ce;
  --dim: #bdb8a0;

  /* bordo beretu = akcent aktywnych elementów */
  --beret: #8a1628;
  --beret-hi: #d23a52;
  --flag-red: #dc143c;
  --cyan: #d23a52;
  --cyan-deep: #8a1628;
  --olive: #5b6b3a;
  --lime: #f6f3e8;          /* biel: potwierdzenia, gotowość */
  --amber: #f0b43c;         /* gwiazdki */
  --red: #ff4d63;

  /* tinty przycisków (kładzione na moro) */
  --good-1: #6f9440; --good-2: #3c5a20; --good-edge: #1f300c;
  --ok-1:   #d2c08a; --ok-2:   #a08d58; --ok-edge:   #5a4c26;
  --bad-1:  #8f5c3c; --bad-2:  #5a3420; --bad-edge:  #2c180c;
  --steel-1:#4a5537; --steel-2:#29321e; --steel-edge:#12170b;
  --send-1: #b8283f; --send-2: #6e1222; --send-edge: #3a0710;
  --ready-1:#b8283f; --ready-2:#7a1426; --ready-edge:#3a0710; --ready-glow: rgba(226, 50, 80, .9);
  --sel-ring: #ffffff;
  --spark: #ffffff;
  --need: #ff4d63;
  --guide: rgba(226, 58, 86, .8);
  --input-bg: rgba(12, 15, 8, .82);
  --track-1: rgba(10, 12, 7, .82); --track-2: rgba(16, 19, 11, .82);
  --thumb-1: #3d4830; --thumb-2: #222a17;
}

/* ---------- tło: wz.93 na cały ekran ---------- */
body[data-skin="moro"] { background: #1c2116 url("../assets/camo/wz93.jpg") center / cover fixed; }
body[data-skin="moro"] .hud-grid {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(10,12,7,.18), rgba(10,12,7,.38)),
    url("../assets/camo/wz93.jpg") center / cover;
  mask-image: none;
}
body[data-skin="moro"] .hud-vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%); }
body[data-skin="moro"] .hud-scan { background: linear-gradient(180deg, transparent, rgba(255,255,255,.035) 60%, rgba(255,255,255,.09) 98%, transparent); }

/* ---------- panele: to samo moro, przyciemnione (wyrównane z tłem) ---------- */
body[data-skin="moro"] .meal,
body[data-skin="moro"] .comment, body[data-skin="moro"] .comment-tab, body[data-skin="moro"] .ribbon-in,
body[data-skin="moro"] .klasa,
body[data-skin="moro"] .card-status,
body[data-skin="moro"] .reader-chip,
body[data-skin="moro"] .keyboard,
body[data-skin="moro"] .toast,
body[data-skin="moro"] .alert,
body[data-skin="moro"] .side,
body[data-skin="moro"] .main,
body[data-skin="moro"] .login-card,
body[data-skin="moro"] .drawer-panel,
body[data-skin="moro"] .modal-panel {
  background:
    linear-gradient(rgba(16,20,11,.66), rgba(16,20,11,.74)),
    url("../assets/camo/wz93.jpg") center / cover fixed;
  border: 1px solid var(--line-strong);
}
body[data-skin="moro"] .meal,
body[data-skin="moro"] .comment, body[data-skin="moro"] .comment-tab, body[data-skin="moro"] .ribbon-in,
body[data-skin="moro"] .klasa {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.5);
}
body[data-skin="moro"] .meal::before,
body[data-skin="moro"] .meal::after { border-color: rgba(255,255,255,.8); }
body[data-skin="moro"] .meal-title h2,
body[data-skin="moro"] .brand h1 { text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
body[data-skin="moro"] .brand-kicker { color: #ffffff; }
body[data-skin="moro"] .brand-desc { color: var(--muted); }
/* znak: biało-czerwona flaga */
body[data-skin="moro"] .brand-mark { background: linear-gradient(#ffffff 0 50%, var(--flag-red) 50% 100%); clip-path: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
body[data-skin="moro"] .rate-label,
body[data-skin="moro"] .tri-label,
body[data-skin="moro"] .klasa-label,
body[data-skin="moro"] .comment-head label { text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

/* ---------- przyciski: łatki moro pod kolorem ---------- */
body[data-skin="moro"] .btn3d {
  --cx: 30%; --cy: 40%;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 80%, transparent), color-mix(in srgb, var(--c2) 88%, transparent)),
    url("../assets/camo/woodland.jpg") var(--cx) var(--cy) / 380px auto;
  border: 1px solid rgba(0,0,0,.45);
  box-shadow:
    0 var(--depth) 0 var(--edge),
    0 calc(var(--depth) + 8px) 18px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -3px 0 rgba(0,0,0,.2);
}
/* każdy przycisk pokazuje inny fragment tkaniny */
body[data-skin="moro"] .btn3d:nth-child(2n)  { --cx: 75%; --cy: 15%; }
body[data-skin="moro"] .btn3d:nth-child(3n)  { --cx: 10%; --cy: 85%; }
body[data-skin="moro"] .btn3d:nth-child(4n)  { --cx: 55%; --cy: 65%; }
body[data-skin="moro"] .btn3d:nth-child(5n)  { --cx: 90%; --cy: 50%; }
/* jasny tint (piasek) — ciemny napis, bez cienia */
body[data-skin="moro"] .tone-ok { text-shadow: none; --ink: #1b170a; }
body[data-skin="moro"] .tone-good,
body[data-skin="moro"] .tone-bad,
body[data-skin="moro"] .tone-send,
body[data-skin="moro"] .tone-steel { --ink: #ffffff; }
body[data-skin="moro"] .btn3d:hover:not(:disabled) { filter: brightness(1.12); }
body[data-skin="moro"] .btn3d:active:not(:disabled),
body[data-skin="moro"] .btn3d.pressed:not(:disabled) {
  box-shadow: 0 1px 0 var(--edge), 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 24px rgba(255,255,255,.22);
}
body[data-skin="moro"] .btn3d:disabled {
  --c1: #2a3020; --c2: #1a1f13; --edge: #0c0f08; --ink: var(--muted);
  filter: saturate(.5);
  border: 1px dashed rgba(255,255,255,.35);
}
/* wybrana ocena / klasa: biała obwódka + poświata bordo */
body[data-skin="moro"] .rate .btn3d.sel,
body[data-skin="moro"] .klasa-btn.sel {
  box-shadow:
    0 calc(var(--depth) - 2px) 0 var(--edge),
    0 0 0 3px #ffffff,
    0 0 0 6px var(--beret-hi),
    0 0 34px 6px rgba(210,58,82,.6),
    inset 0 1px 0 rgba(255,255,255,.3);
}
body[data-skin="moro"] .klasa-btn.sel { --c1: var(--send-1); --c2: var(--send-2); --edge: var(--send-edge); --ink: #ffffff; }
body[data-skin="moro"] .rate.has-choice .btn3d:not(.sel),
body[data-skin="moro"] .klasa-row.has-choice .klasa-btn:not(.sel) { filter: saturate(.45) brightness(.6); }

/* ---------- przełączniki ---------- */
body[data-skin="moro"] .tri-track { border-radius: 6px; border-color: var(--line-strong); }
body[data-skin="moro"] .tri-thumb { border-radius: 4px; border-color: rgba(255,255,255,.85); box-shadow: 0 4px 0 #070905, 0 0 16px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.15); }
body[data-skin="moro"] .tri-track[data-pos="0"] .tri-thumb,
body[data-skin="moro"] .tri-track[data-pos="2"] .tri-thumb { border-color: var(--beret-hi); box-shadow: 0 4px 0 #070905, 0 0 20px rgba(210,58,82,.45), inset 0 1px 0 rgba(255,255,255,.15); }
body[data-skin="moro"] .tri-track button { color: var(--dim); }
body[data-skin="moro"] .tri-track button.on { color: #ffffff; }
body[data-skin="moro"] .tri-track[data-pos="0"] button.on,
body[data-skin="moro"] .tri-track[data-pos="2"] button.on { color: #ff9aa9; }

/* ---------- status karty, czytnik, pola ---------- */
body[data-skin="moro"] .card-status { border-color: rgba(210,58,82,.75); }
body[data-skin="moro"] .nfc-ring { color: #ffffff; border-color: var(--beret-hi); background: radial-gradient(circle, rgba(210,58,82,.45), rgba(138,22,40,.15) 70%); }
body[data-skin="moro"] #cardTitle { color: #ffffff; }
body[data-skin="moro"].state-ready .card-status { border-color: #ffffff; }
body[data-skin="moro"].state-ready .nfc-ring { color: #ffffff; border-color: #ffffff; background: radial-gradient(circle, rgba(255,255,255,.3), transparent 70%); }
body[data-skin="moro"].state-ready #cardTitle { color: #ffffff; }
body[data-skin="moro"] .card-status-txt small { color: var(--muted); }
body[data-skin="moro"] .round-btn { color: #ffffff; background: linear-gradient(rgba(20,24,14,.55), rgba(20,24,14,.7)), url("../assets/camo/woodland.jpg") 40% 40% / 260px auto; border-color: rgba(255,255,255,.4); }
body[data-skin="moro"] .round-btn.is-on { color: #ffffff; border-color: var(--beret-hi); box-shadow: 0 4px 0 #04070a, 0 0 18px rgba(210,58,82,.6); }
body[data-skin="moro"] .reader-chip { color: var(--muted); }
body[data-skin="moro"] .reader-chip[data-state="ok"] { color: #ffffff; border-color: rgba(255,255,255,.6); }
body[data-skin="moro"] .reader-chip[data-state="ok"] i { background: var(--flag-red); }
@keyframes liveMoro { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,20,60,.75); } 50% { box-shadow: 0 0 0 6px transparent; } }
body[data-skin="moro"] .reader-chip[data-state="ok"] i { animation-name: liveMoro; }
body[data-skin="moro"] .comment textarea { border-color: var(--line-strong); }
body[data-skin="moro"] .comment textarea::placeholder { color: var(--dim); }
body[data-skin="moro"] .comment textarea:focus { border-color: var(--beret-hi); box-shadow: 0 0 0 3px rgba(210,58,82,.3); }
body[data-skin="moro"] .counter { color: var(--dim); }
body[data-skin="moro"] .keyboard { border-top: 3px solid var(--beret-hi); }
body[data-skin="moro"] .send-progress i { background: rgba(255,255,255,.22); }
body[data-skin="moro"] .send-progress i.done { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.8); }

/* ---------- WYŚLIJ (krawędź 3D jako ramka dolna — maska nadgryzienia) ---------- */
body[data-skin="moro"] .send-zone .send {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.45);
  border-bottom: var(--depth) solid var(--edge);
}
body[data-skin="moro"] .send-zone .send:active:not(:disabled) { box-shadow: inset 0 0 26px rgba(255,255,255,.25); }

/* ---------- komunikaty: moro + biało-czerwony pasek ---------- */
body[data-skin="moro"] .toast,
body[data-skin="moro"] .alert { overflow: hidden; border-radius: 10px; }
body[data-skin="moro"] .toast::before,
body[data-skin="moro"] .alert::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(#ffffff 0 50%, var(--flag-red) 50% 100%);
}
body[data-skin="moro"] .toast { border: 2px solid var(--beret-hi); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 70px rgba(210,58,82,.45), 0 30px 80px rgba(0,0,0,.6); }
body[data-skin="moro"] .toast p { text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); }
body[data-skin="moro"] .toast { padding-top: calc(clamp(24px, 5vh, 56px) + 10px); }
body[data-skin="moro"] .toast-ring { color: #ffffff; }
body[data-skin="moro"] .alert { border: 2px solid var(--beret-hi); box-shadow: 0 0 50px rgba(210,58,82,.4); }
body[data-skin="moro"] .alert.info { border-color: #d2c08a; box-shadow: 0 0 40px rgba(210,192,138,.25); }
body[data-skin="moro"] .alert p { text-shadow: 0 1px 6px rgba(0,0,0,.6); padding-top: 4px; }
body[data-skin="moro"] .need-msg { background: var(--beret); border: 1px solid #ffffff; }
body[data-skin="moro"] .demo-ribbon { background: linear-gradient(#ffffff 0 50%, var(--flag-red) 50% 100%); color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.6); font-weight: 700; }

/* ---------- efekty kinowe w barwach beretu ---------- */
@keyframes beaconMoro {
  0%, 100% { box-shadow: 0 0 0 0 transparent, 0 0 20px rgba(210,58,82,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(210,58,82,.18), 0 0 44px rgba(210,58,82,.55); }
}
body[data-skin="moro"].state-idle .card-status { animation-name: beaconMoro; }
@keyframes bracketMoro { 50% { border-color: var(--beret-hi); box-shadow: 0 0 12px rgba(210,58,82,.6); } }
body[data-skin="moro"] .meal::before, body[data-skin="moro"] .meal::after { animation-name: bracketMoro; }
body[data-skin="moro"] .flash { background: radial-gradient(circle at var(--fx, 70%) var(--fy, 6%), rgba(255,255,255,.4), rgba(210,58,82,.25) 35%, transparent 65%); }

/* ekran przyciągający */
/* wygaszacz w MORO: ta sama maskująca tapeta co ekran głosowania (bez rozmycia, lekkie przyciemnienie) */
body[data-skin="moro"] .attract {
  background:
    radial-gradient(ellipse 55% 45% at 50% 52%, rgba(10,12,7,.55), transparent 75%),
    linear-gradient(rgba(10,12,7,.18), rgba(10,12,7,.38)),
    #1c2116 url("../assets/camo/wz93.jpg") center / cover fixed;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-skin="moro"] .big-clock { background: rgba(14,17,9,.78); border-color: rgba(255,255,255,.18); }
body[data-skin="moro"] .radar { color: #ffffff; }
body[data-skin="moro"] .radar span { border-color: var(--beret-hi); }
body[data-skin="moro"] .radar::before { border-color: #ffffff; background: radial-gradient(circle, rgba(210,58,82,.55), rgba(138,22,40,.2) 70%); box-shadow: 0 0 60px rgba(210,58,82,.55), inset 0 0 30px rgba(210,58,82,.4); }
body[data-skin="moro"] .radar svg { filter: drop-shadow(0 0 16px rgba(255,255,255,.7)); }
body[data-skin="moro"] .attract-title {
  text-transform: uppercase; letter-spacing: .03em;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 38%, #ff5a72 46%, #ffffff 50%, #dc143c 54%, #ffffff 62%, #ffffff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.7));
}
body[data-skin="moro"] .attract-kicker { color: #ffffff; }
body[data-skin="moro"] .attract-sub { color: #f1eedf; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
body[data-skin="moro"] .attract-stats div { border-top: 3px solid; border-image: linear-gradient(90deg, #ffffff 50%, var(--flag-red) 50%) 1; background: rgba(10,12,7,.45); }
body[data-skin="moro"] .attract-stats strong { color: #ffffff; }
body[data-skin="moro"] .attract-stats small { color: var(--muted); }

/* gotowy WYŚLIJ: bordo beretu, biały napis */
body[data-skin="moro"] .send-zone.ready .send { --ink: #ffffff; }
body[data-skin="moro"] .send-zone.ready .send-txt { text-shadow: 0 2px 6px rgba(0,0,0,.5); }
body[data-skin="moro"] .meal-title h2, body[data-skin="moro"] .rate-label, body[data-skin="moro"] .tri-label,
body[data-skin="moro"] .klasa-label, body[data-skin="moro"] .comment-head label, body[data-skin="moro"] .brand-desc,
body[data-skin="moro"] .stars-num { text-shadow: 0 1px 4px rgba(0,0,0,.85); }

/* pasek akcji na telefonie */
@media (max-width: 560px), (max-height: 520px) and (min-aspect-ratio: 1/1) {
  body[data-skin="moro"] .action-bar {
    background: linear-gradient(rgba(16,20,11,.72), rgba(16,20,11,.82)), url("../assets/camo/wz93.jpg") center / cover fixed;
    border-top: 3px solid; border-image: linear-gradient(90deg, #ffffff 50%, var(--flag-red) 50%) 1;
  }
  body[data-skin="moro"] .action-bar .klasa { background: none; border: 0; }
}

/* ---------- MORO: zegar wygaszacza, strzałka czytnika, okno identyfikacji ---------- */
body[data-skin="moro"] .bc-time { color: #ffffff; filter: none; }
body[data-skin="moro"] .bc-sep { color: var(--beret-hi); }
body[data-skin="moro"] .bc-day { color: #f1eedf; }
body[data-skin="moro"] .bc-ms, body[data-skin="moro"] .bc-sep-ms { color: #ff8a9b; }
body[data-skin="moro"] .attract-title { filter: drop-shadow(0 4px 14px rgba(0,0,0,.85)); }
body[data-skin="moro"] .reader-arrow { --ra: var(--beret-hi); }
body[data-skin="moro"] .ra-label { color: #ffffff; }
body[data-skin="moro"] .ident-card {
  background: linear-gradient(rgba(16,20,11,.82), rgba(16,20,11,.9)), url("../assets/camo/wz93.jpg") center / cover;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(210,58,82,.35);
}
body[data-skin="moro"] .ident-kicker { color: #ffffff; }
body[data-skin="moro"] .ident-title span { color: var(--beret-hi); }
body[data-skin="moro"] .ident-or span { background: #1b2014; }
body[data-skin="moro"] .pin-box.caret, body[data-skin="moro"] .pin-box.filled { border-color: var(--beret-hi); box-shadow: 0 0 0 4px rgba(210,58,82,.2); }
body[data-skin="moro"] .numpad .np-ok { background: linear-gradient(180deg, var(--beret-hi), var(--beret)); color: #ffffff; box-shadow: 0 5px 0 #4a0b15; }
/* MORO: wstęga COMMENTS, przyciski „Mam ochotę na”, Kadra */
body[data-skin="moro"] .ribbon-in { border-color: rgba(255,255,255,.4); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(210,58,82,.35); }
body[data-skin="moro"] .ribbon textarea { background: rgba(8,10,6,.82); border-color: var(--line-strong); }
body[data-skin="moro"] .chip:not(.on) { background: linear-gradient(rgba(14,17,10,.7), rgba(14,17,10,.8)), url("../assets/camo/woodland.jpg") center / 300px auto; color: #fff; }
body[data-skin="moro"] .chip.on { background: radial-gradient(circle at 50% 30%, #ffd2da, var(--beret-hi) 50%, var(--beret)); color: #fff; box-shadow: 0 4px 0 #4a0b15, 0 0 0 3px #fff, 0 0 28px rgba(210,58,82,.8); --chip-hot: #ff5a72; }
body[data-skin="moro"] .chips-lbl { color: #fff; }
body[data-skin="moro"] .ident-tabs button.on { color: #fff; background: var(--beret-hi); box-shadow: 0 0 18px rgba(210,58,82,.5); }
body[data-skin="moro"] .name-box { border-color: var(--beret-hi); }