/* Imunomania · glineni skin: napuhane površine, hladna podloga i ćilibarski akcenat */

[data-skin="clay"] {
  --paper:      #e7ebf4;
  --paper-2:    #ffffff;
  --paper-edge: #dbe4f3;
  --ink:        #0e1630;
  --ink-2:      #2f3956;
  --ink-3:      #566080;

  /* ćilibar je ispuna, tekst na njemu ostaje tamnoplav */
  --accent:     #f2ad35;
  --accent-hi:  #f8c45f;
  --accent-lo:  #eda229;
  /* hladna pilula za sporedne površine */
  --cool:       #dbe4f3;

  --radius:   30px;
  --radius-s: 26px;

  /* glina: svetlo gore levo, hladna senka dole desno */
  --shadow:
    5px 7px 16px rgba(23, 38, 79, .10),
    -4px -4px 12px rgba(255, 255, 255, .9),
    inset 1px 1px 2px rgba(255, 255, 255, .9),
    inset -2px -4px 8px rgba(23, 38, 79, .05);
  --shadow-lg: 0 28px 64px rgba(23, 38, 79, .16);
  /* ćilibarske ispune nose svoj topli odsjaj */
  --shadow-amber:
    0 8px 20px rgba(237, 162, 41, .42),
    inset 0 1px 0 rgba(255, 255, 255, .55);

  --font-hand: "Poppins", "Montserrat", sans-serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* rukopisni naslovi ustupaju mesto debelom displeju */
[data-skin="clay"] .card h3,
[data-skin="clay"] .sheet h2,
[data-skin="clay"] .pantry-title,
[data-skin="clay"] .section-title,
[data-skin="clay"] .r-h,
[data-skin="clay"] .sheet-side-title,
[data-skin="clay"] .masthead h1 {
  font-weight: 700;
  letter-spacing: -.025em;
}
[data-skin="clay"] .card h3 { font-size: 19px; line-height: 1.25; }
[data-skin="clay"] .sheet h2 { font-size: 30px; line-height: 1.15; }
[data-skin="clay"] .pantry-title { font-size: 19px; }
[data-skin="clay"] .sheet-side-title { font-size: 17px; line-height: 1.3; }
[data-skin="clay"] .masthead h1 { font-size: clamp(38px, 8vw, 70px); }
[data-skin="clay"] .r-h { font-size: 17px; text-decoration: none; }

/* ---------- Zaglavlje ---------- */

[data-skin="clay"] .masthead {
  background: linear-gradient(165deg, #f4f7fc 0%, #e2e8f3 100%);
  border-bottom: 0;
}
[data-skin="clay"] .arcs {
  background: repeating-radial-gradient(
    circle at center,
    #c3d3ea 0 22px, #eef2f9 22px 44px, #f6d8a4 44px 66px, transparent 66px 88px);
  opacity: .55;
}

/* ---------- Trake, pilule i dugmad ---------- */

[data-skin="clay"] .tabs {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 0;
}
[data-skin="clay"] .tab { border-radius: 999px; font-weight: 600; }
[data-skin="clay"] .tab:hover { background: var(--cool); }

/* ćilibarske ispune: primarno dugme, aktivna strana, čekiran sastojak */
[data-skin="clay"] .tab.is-active,
[data-skin="clay"] .pantry-cta,
[data-skin="clay"] .pantry-count,
[data-skin="clay"] .pager-n.is-on,
[data-skin="clay"] .ing:has(:checked) {
  background: linear-gradient(160deg, var(--accent-hi) 0%, var(--accent-lo) 100%);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-amber);
}
[data-skin="clay"] .ing:has(:checked) .n { color: var(--ink-2); }

/* bele pilule sa napuhanom senkom */
[data-skin="clay"] .chip:not(.is-on),
[data-skin="clay"] .ing:not(:has(:checked)),
[data-skin="clay"] .btn-ghost,
[data-skin="clay"] .pager-n:not(.is-on),
[data-skin="clay"] .pager-arrow,
[data-skin="clay"] .sheet-nav-btn {
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
[data-skin="clay"] .btn-ghost { background: var(--cool); box-shadow: var(--shadow); }
[data-skin="clay"] .pager-n,
[data-skin="clay"] .pager-arrow { border-radius: 999px; }
[data-skin="clay"] .sheet-nav-btn { border-radius: 999px; }

[data-skin="clay"] .searchbar {
  background: #eef1f8;
  box-shadow:
    inset 3px 4px 8px rgba(23, 38, 79, .07),
    inset -2px -2px 6px rgba(255, 255, 255, .9);
}
[data-skin="clay"] .searchbar:focus-within {
  box-shadow:
    inset 3px 4px 8px rgba(23, 38, 79, .07),
    0 0 0 3px rgba(242, 173, 53, .45);
}

/* sve hairline ivice nestaju, oblik nose senke */
[data-skin="clay"] .searchbar,
[data-skin="clay"] .chip,
[data-skin="clay"] .ing,
[data-skin="clay"] .btn-ghost,
[data-skin="clay"] .icon-btn,
[data-skin="clay"] .pager-n,
[data-skin="clay"] .pager-arrow,
[data-skin="clay"] .sheet-nav-btn,
[data-skin="clay"] .sheet-close,
[data-skin="clay"] .legend .lg,
[data-skin="clay"] .card,
[data-skin="clay"] .pantry,
[data-skin="clay"] .pantry-body,
[data-skin="clay"] .sheet-panel,
[data-skin="clay"] .sheet-side,
[data-skin="clay"] .empty,
[data-skin="clay"] .r-tips,
[data-skin="clay"] .ing-row {
  border-color: transparent;
}

/* ---------- Boje poglavlja ---------- */

[data-skin="clay"] .chip .dot { background: color-mix(in srgb, var(--c, var(--ink-3)) 62%, #fff); }
[data-skin="clay"] .chip.is-on,
[data-skin="clay"] .chip.is-on.light-bg {
  background: color-mix(in srgb, var(--c, var(--accent)) 26%, #fff);
  color: var(--ink);
  box-shadow: var(--shadow);
}
[data-skin="clay"] .chip.is-on .n,
[data-skin="clay"] .chip.is-on.light-bg .n { color: var(--ink-2); }

/* „Sve" nema boju poglavlja, pa nosi ćilibar kao primarno dugme */
[data-skin="clay"] .chip.is-on[data-cat=""] {
  background: linear-gradient(160deg, var(--accent-hi) 0%, var(--accent-lo) 100%);
  font-weight: 700;
  box-shadow: var(--shadow-amber);
}
[data-skin="clay"] .chip.is-on .dot,
[data-skin="clay"] .chip.is-on.light-bg .dot {
  background: color-mix(in srgb, var(--c, var(--ink-3)) 70%, #fff);
}
[data-skin="clay"] .card .cat,
[data-skin="clay"] .r-cat,
[data-skin="clay"] .sheet-side-cat { color: color-mix(in srgb, var(--c, var(--ink-3)) 26%, var(--ink)); }
[data-skin="clay"] .r-cat .dot { background: color-mix(in srgb, var(--c) 58%, #fff); }
[data-skin="clay"] .book {
  background: color-mix(in srgb, var(--c, var(--ink-3)) 14%, #fff);
  border-color: transparent;
  box-shadow: var(--shadow);
}

/* ---------- Kartice jela ---------- */

[data-skin="clay"] .card {
  border: 0;
  border-left: 10px solid color-mix(in srgb, var(--c, var(--ink-3)) 40%, #fff);
  border-radius: var(--radius-s);
  padding: 20px 20px 18px;
}
[data-skin="clay"] .card:hover { transform: translateY(-3px); }
[data-skin="clay"] .card .missing b { color: #a05a12; }

[data-skin="clay"] .bucket-head { border-bottom-width: 4px; border-radius: 2px; }
[data-skin="clay"] .bucket-head.ok    { border-bottom-color: #9cc9ae; }
[data-skin="clay"] .bucket-head.miss1 { border-bottom-color: var(--accent); }
[data-skin="clay"] .bucket-head.miss2 { border-bottom-color: #b9cbe6; }

/* ---------- Legenda i ostava ---------- */

[data-skin="clay"] .legend {
  background: transparent;
  border: 0;
  padding: 0;
}
[data-skin="clay"] .legend .lg {
  background: var(--paper-2);
  border-radius: var(--radius-s);
  padding: 15px;
  box-shadow: var(--shadow);
}

[data-skin="clay"] .legend button.lg.is-on {
  background: color-mix(in srgb, var(--accent) 22%, var(--paper-2));
  box-shadow: var(--shadow), inset 0 0 0 2px var(--accent-lo);
}

/* ikonice dobijaju ćilibarski medaljon, kao u predlošku */
[data-skin="clay"] .legend .lg svg,
[data-skin="clay"] .pantry-icon {
  box-sizing: content-box;
  padding: 8px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-hi) 0%, var(--accent-lo) 100%);
  color: var(--ink);
  box-shadow: var(--shadow-amber);
}
[data-skin="clay"] .searchbar-icon,
[data-skin="clay"] .card .meta svg,
[data-skin="clay"] .r-meta svg { color: var(--ink-3); }

[data-skin="clay"] .pantry { border: 0; box-shadow: var(--shadow); }
[data-skin="clay"] .pantry summary {
  border-radius: var(--radius);
  background: transparent;
}
[data-skin="clay"] .pantry summary:hover { background: rgba(23, 38, 79, .04); }
[data-skin="clay"] .pantry[open] summary { border-radius: var(--radius) var(--radius) 0 0; }
[data-skin="clay"] .pantry-body { border-top: 0; }

/* ---------- Popup ---------- */

[data-skin="clay"] .sheet-backdrop { background: rgba(14, 22, 48, .4); backdrop-filter: blur(5px); }
[data-skin="clay"] .sheet-panel { border-radius: 34px; background: var(--paper-2); }
[data-skin="clay"] .sheet-main::after {
  background: linear-gradient(to top, var(--paper-2) 12%, transparent);
}
[data-skin="clay"] .sheet-close { background: var(--cool); box-shadow: var(--shadow); }
[data-skin="clay"] .sheet-nav { background: #eef1f8; border-top: 0; }
[data-skin="clay"] .sheet-side {
  border-radius: var(--radius);
  border-top: 7px solid color-mix(in srgb, var(--c, var(--ink-3)) 40%, #fff);
}
[data-skin="clay"] .sheet-side-arrow {
  background: linear-gradient(160deg, var(--accent-hi) 0%, var(--accent-lo) 100%);
  color: var(--ink);
  box-shadow: var(--shadow-amber);
}

[data-skin="clay"] .r-tips { background: #eef1f8; border-radius: var(--radius-s); }
[data-skin="clay"] .r-tips h3 { color: #a05a12; }

/* ---------- Podnožje ---------- */

[data-skin="clay"] .foot {
  background: linear-gradient(200deg, #e2e8f3 0%, #f4f7fc 100%);
  border-top: 0;
}

/* ---------- Prekidač dizajna ---------- */

.skins {
  display: flex; gap: 4px;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.skin {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 600 12px var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.skin:hover { color: var(--ink); }
.skin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skin.is-active { background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow); }

@media (max-width: 420px) {
  .skin { padding: 6px 9px; font-size: 11px; }
}

/* ---------- Plan, porcije, ne jedem ---------- */

[data-skin="clay"] .btn-plan,
[data-skin="clay"] .tab-n {
  background: linear-gradient(160deg, var(--accent-hi) 0%, var(--accent-lo) 100%);
  color: var(--ink);
  box-shadow: var(--shadow-amber);
}
[data-skin="clay"] .r-ing .sc { color: #a05a12; }
[data-skin="clay"] .r-plan,
[data-skin="clay"] .plan-day { border-color: transparent; border-radius: var(--radius-s); box-shadow: var(--shadow); background: var(--paper-2); }
[data-skin="clay"] .plan-day.is-empty { box-shadow: none; background: #eef1f8; }
[data-skin="clay"] .r-plan select,
[data-skin="clay"] .serv button,
[data-skin="clay"] .q-scope { border-color: transparent; background: var(--cool); }
[data-skin="clay"] .q-scope[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-skin="clay"] .avoid { border: 0; }
[data-skin="clay"] .avoid .pantry-icon { background: color-mix(in srgb, var(--warn) 18%, #fff); color: var(--warn); box-shadow: var(--shadow); }
[data-skin="clay"] .r-warn { border-color: transparent; box-shadow: var(--shadow); }