/*
 * Seven looks, switched with <html data-theme="...">, one for each of the seven
 * biggest childcare apps by App Store ratings and Play installs (28.10.2026).
 * Each follows its app's layout on every screen, not just its colours; the
 * colours are measured from their screens or read from their decompiled APKs
 * (istrazivanje/apk). The home, log and post screens are put together in app.js
 * (HOME, LOG, POST):
 *   ljubicasta   Famly: violet #5C34A3, child profile, action card, emoji reactions
 *   profil       brightwheel: caribbean #29B9BB and blurple #5463D6, banner, icon grid
 *   sunce        Procare (shown as "Tirkiz"): teal gradient #05AFAE, rounded type, floating cards
 *   dnevnik      Storypark: white iOS page, purple #746CC4, coral initials, story posts
 *   izvjestaj    Lillio: slate #367E7E, serif report headings, attendance buttons
 *   vijesti      Stay Informed: cobalt #064EC6, big title, tagged news, floating pill
 *   hronologija  ParentZone: Material blue #3666D2, filter card, chips, finance
 * styles.css stays the base; the live app gets the tokens and the bars.
 */
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-wght-normal.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bitter'; src: url('fonts/bitter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Bitter'; src: url('fonts/bitter-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ================= shared pieces the themes arrange ================= */
.face { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; background: var(--sunk); }

.hero { position: relative; margin: -8px -18px 0; }
.hero-bar, .hero-banner, .hero-group { display: none; }
.hero-main { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 18px 6px; }
.hero-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-txt .display { font-size: 32px; line-height: 36px; }
.hero-actions { display: flex; }
.hero-actions button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; font-size: 12.5px; font-weight: 650; }

/* The pickup is one quick action among the others (HOME in app.js); once
   sent, its button shows that the teacher knows and the day gets one line. */
.act[aria-disabled="true"] { cursor: default; }
.act-pickup.on, .act-pickup.on svg { color: var(--ok) !important; }
.tl-cancel { display: block; align-self: flex-start; justify-self: start; margin-top: 4px; min-height: 36px; padding: 0; text-align: left; font-size: 14px; font-weight: 700; color: var(--primary); }
/* Famly: a card of actions in two columns */
.acts-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin-top: 14px; padding: 6px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.acts-grid .act { display: flex; align-items: center; gap: 10px; min-height: 50px; font-size: 15px; font-weight: 650; text-align: left; }
.acts-grid .act svg { flex-shrink: 0; color: var(--primary); }
.acts-grid .act-sick svg { color: #D23F3F; }
.acts-grid .act-absence svg { color: var(--muted); }
/* Famly: the kindergarten's notice as a post */
.post { margin-top: 14px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.post-by { display: flex; align-items: center; gap: 10px; }
.post-by > span:last-child { display: flex; flex-direction: column; font-size: 13px; line-height: 17px; color: var(--muted); }
.post-by b { font-size: 15px; color: var(--ink); }
.post-logo { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFF1DC; color: #F4A340; flex-shrink: 0; }
.post-title { margin: 12px 0 2px; font-size: 16.5px; line-height: 22px; font-weight: 750; }
.post p { margin: 0; font-size: 15px; line-height: 21px; }
/* Procare: icons in the corner of the hero */
.hero-icons { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 2px; padding: 8px 8px 0; }
.hero-icons .act { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.hero-icons .act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-icons .act-pickup.on { background: #fff; }
/* Storypark: a small pill under the title */
.hero-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 14.5px; font-weight: 700; }
.hero-pill.on { background: var(--ok-soft); }
/* Lillio: a small square button in the corner of the header */
.hero-corner { position: absolute; top: 18px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700; }
.hero-corner.on { background: var(--ok-soft); }
/* Stay Informed: a blue pill floating over the news */
.fab { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 27px; background: var(--primary); color: #fff; font-size: 15.5px; font-weight: 750; box-shadow: 0 8px 20px rgba(10, 40, 110, 0.28); }
.fab.on { background: var(--surface); color: var(--ok); }

.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 2px 10px; }
.day-date { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.seg { display: flex; gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: 12px; background: var(--sunk); }
.seg-btn { flex: 1; min-height: 38px; border-radius: 9px; font-size: 14px; font-weight: 650; color: var(--muted); }
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }

.day-sheet .tl { display: flex; gap: 12px; padding: 14px 0; }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tl-kind { font-size: 12.5px; font-weight: 750; color: var(--k); }
.tl-top .tl-time { width: auto; padding: 0; font-size: 12.5px; font-weight: 650; color: var(--faint); }
.day-sheet .tl-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--k-soft); color: var(--k); }
.tl-title { font-size: 16px; line-height: 21px; font-weight: 700; margin-top: 1px; }
.tl-detail { margin: 3px 0 0; font-size: 14.5px; line-height: 20px; color: var(--muted); }
.tl-by { display: none; align-items: center; gap: 10px; margin-bottom: 10px; }
.tl-by > span { display: flex; flex-direction: column; font-size: 13px; line-height: 17px; color: var(--muted); }
.tl-by b { color: var(--ink); font-size: 14.5px; }
.tl-photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 200px; width: 100%; margin-top: 10px; border-radius: 14px; overflow: hidden; }
.tl-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-photos.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tl-photos.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.tl-photos.n3 img:first-child { grid-row: span 2; }

.msg.with-ava { flex-direction: row; align-items: flex-end; gap: 8px; }
.msg.with-ava.mine { justify-content: flex-end; }
.msg-col { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; min-width: 0; }
.mine .msg-col { align-items: flex-end; }
.msg-col .bubble { max-width: 100%; }
.msg-ava { margin-bottom: 19px; }
.chip .face { margin-left: -10px; }
.chip.on .face { box-shadow: 0 0 0 2px var(--primary-ink); }
.cubby .face { transition: filter 0.2s ease, opacity 0.2s ease; }
.cubby.expected .face, .cubby.absent .face { filter: grayscale(1); opacity: 0.6; }
.photo .img .count { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(18, 26, 30, 0.7); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }

/* Theme picker chips */
.theme-chip { padding-left: 8px; }
.theme-chip .swatch { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12); flex-shrink: 0; }
.desk-top .wrap + .wrap { margin-left: 8px; }

/* ================= 1. Ljubičasta (Famly) ================= */
html[data-theme="ljubicasta"] {
  --wall: #F3F0FA; --wall-deep: #E2D8F3; --bg: #F3F0FA;
  --surface: #FFFFFF; --sunk: #EFE8F8; --line: #E2D8F3;
  --ink: #120A20; --muted: #5C5470; --faint: #6B6480;
  --primary: #5C34A3; --primary-ink: #FFFFFF; --primary-soft: #EFE8F8;
  --accent: #B4500F; --accent-fill: #FF8A3D; --accent-soft: #FFEEE2;
  --font-display: 'Figtree', system-ui, sans-serif;
}
html[data-theme="ljubicasta"] .display, html[data-theme="ljubicasta"] .title, html[data-theme="ljubicasta"] .section-title { font-weight: 800; letter-spacing: -0.4px; }
/* violet app bar with the kindergarten's name */
html[data-theme="ljubicasta"] .hero-bar { display: flex; align-items: center; height: 54px; padding: 0 18px; background: var(--primary); color: #fff; font-weight: 800; font-size: 17px; }
html[data-theme="ljubicasta"] .hero-bar .kid { display: none; }
/* child profile: white sheet, big round photo, name, then actions as tabs */
html[data-theme="ljubicasta"] .hero-main { flex-direction: column; text-align: center; gap: 10px; padding: 22px 18px 14px; background: var(--surface); }
html[data-theme="ljubicasta"] .hero-main .face { width: 96px !important; height: 96px !important; }
html[data-theme="ljubicasta"] .hero-txt { align-items: center; }
html[data-theme="ljubicasta"] .hero-txt .display { font-size: 26px; line-height: 30px; }
html[data-theme="ljubicasta"] .hero-group { display: block; font-size: 13px; color: var(--faint); }
html[data-theme="ljubicasta"] .hero-main { border-bottom: 1px solid var(--line); }
html[data-theme="ljubicasta"] .pickup:not(.sent):not(.done) { background: var(--primary); }
html[data-theme="ljubicasta"] .day-sheet { border-radius: 16px; border-color: var(--line); padding: 2px 14px; }
html[data-theme="ljubicasta"] .day-sheet .tl-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--k); color: #fff; }
html[data-theme="ljubicasta"] .day-sheet .tl + .tl { border-top: 1px solid var(--line); }
/* a moment with photos reads as a Famly post: who, when, text, big photo */
html[data-theme="ljubicasta"] .has-photo .tl-ico, html[data-theme="ljubicasta"] .has-photo .tl-top { display: none; }
html[data-theme="ljubicasta"] .has-photo .tl-by { display: flex; }
html[data-theme="ljubicasta"] .has-photo .tl-photos { width: calc(100% + 28px); margin: 12px -14px -14px; border-radius: 0; height: 230px; }
html[data-theme="ljubicasta"] .header, html[data-theme="ljubicasta"] .subhead, html[data-theme="ljubicasta"] .chat-top { background: var(--primary); color: #fff; border: 0; }
html[data-theme="ljubicasta"] .header .display { font-size: 22px; line-height: 28px; }
html[data-theme="ljubicasta"] .header .sub, html[data-theme="ljubicasta"] .chat-top .small { color: rgba(255, 255, 255, 0.78); }
html[data-theme="ljubicasta"] .header { padding: 14px 18px; }
html[data-theme="ljubicasta"] .chat-top .face { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
html[data-theme="ljubicasta"] .tab.on .ico { background: transparent; }
html[data-theme="ljubicasta"] .tab.on { color: var(--primary); }
html[data-theme="ljubicasta"] .grid2 { gap: 12px; }
html[data-theme="ljubicasta"] .photo { background: var(--surface); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
html[data-theme="ljubicasta"] .photo .img { border-radius: 0; }
html[data-theme="ljubicasta"] .photo .small, html[data-theme="ljubicasta"] .photo .faint { padding: 0 10px; }
html[data-theme="ljubicasta"] .photo .faint { padding-bottom: 10px; }
html[data-theme="ljubicasta"] .cubby { border-radius: 14px; border-color: var(--line); }

/* ================= 2. Profil (brightwheel) ================= */
html[data-theme="profil"] {
  --wall: #EBEFF4; --wall-deep: #DDE3EA; --bg: #EBEFF4;
  --surface: #FFFFFF; --sunk: #F1F4F8; --line: #DFE5EC;
  --ink: #18181D; --muted: #55575F; --faint: #686A72;
  --primary: #13898B; --primary-ink: #FFFFFF; --primary-soft: #DDF4F4;
  --bar: #29B9BB; --blurple: #5463D6;
  --accent: #9A5B00; --accent-fill: #FECC38; --accent-soft: #FFF5D6;
  --ok: #2E8540; --ok-soft: #E2F4E5;
  --font-display: 'Figtree', system-ui, sans-serif;
}
html[data-theme="profil"] .display, html[data-theme="profil"] .title, html[data-theme="profil"] .section-title { font-weight: 900; letter-spacing: -0.3px; }
/* teal nav bar with the child's name, photo banner, face overlapping it */
html[data-theme="profil"] .hero { background: var(--surface); }
html[data-theme="profil"] .hero-bar { display: flex; align-items: center; justify-content: center; height: 52px; background: var(--bar); color: #fff; font-weight: 800; font-size: 17px; }
html[data-theme="profil"] .hero-bar .kg { display: none; }
html[data-theme="profil"] .hero-banner { display: block; height: 130px; overflow: hidden; }
html[data-theme="profil"] .hero-banner img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.92); }
html[data-theme="profil"] .hero-main { position: relative; z-index: 1; flex-direction: column; gap: 6px; padding: 0 18px 12px; margin-top: -58px; text-align: center; }
html[data-theme="profil"] .hero-main .face { width: 112px !important; height: 112px !important; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(20, 40, 50, 0.18); }
html[data-theme="profil"] .hero-txt { align-items: center; }
html[data-theme="profil"] .hero-txt .display { display: none; }
html[data-theme="profil"] .hero-actions { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-theme="profil"] .hero-actions button { color: var(--muted); font-weight: 700; }
html[data-theme="profil"] .hero-actions svg { color: var(--primary); }
html[data-theme="profil"] .pickup:not(.sent):not(.done) { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
html[data-theme="profil"] .pickup:not(.sent):not(.done) .title { color: var(--ink); }
html[data-theme="profil"] .pickup:not(.sent):not(.done) p { color: var(--muted); }
html[data-theme="profil"] .pickup:not(.sent):not(.done) .btn.light { background: var(--primary); color: #fff; }
html[data-theme="profil"] .pickup:not(.sent):not(.done) .link { color: var(--muted); }
/* underline tabs instead of a segmented control */
html[data-theme="profil"] .seg { background: transparent; padding: 0; gap: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
html[data-theme="profil"] .seg-btn { border-radius: 0; min-height: 42px; }
html[data-theme="profil"] .seg-btn.on { background: transparent; box-shadow: inset 0 -3px 0 var(--bar); color: var(--primary); }
html[data-theme="profil"] .day-date { color: #3F64D8; font-weight: 800; }
/* activity list edge to edge: solid colour circle, bold title, grey detail, time under */
html[data-theme="profil"] .day-sheet { margin: 0 -18px; border-radius: 0; border-width: 1px 0; padding: 0 18px; }
html[data-theme="profil"] .day-sheet .tl-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--k); color: #fff; }
html[data-theme="profil"] .tl-body { display: flex; flex-direction: column; }
html[data-theme="profil"] .tl-top { order: 4; margin-top: 4px; }
html[data-theme="profil"] .tl-kind { display: none; }
html[data-theme="profil"] .tl-photos { order: 3; border-radius: 10px; }
html[data-theme="profil"] .day-sheet .tl + .tl { border-top: 1px solid var(--line); }
html[data-theme="profil"] .header, html[data-theme="profil"] .subhead { background: var(--bar); color: #fff; justify-content: center; text-align: center; padding: 14px 18px; }
html[data-theme="profil"] .header .display { font-size: 19px; line-height: 24px; }
html[data-theme="profil"] .header .sub { color: rgba(255, 255, 255, 0.85); }
html[data-theme="profil"] .subhead .title { color: #fff; font-size: 18px; }
html[data-theme="profil"] .chat-top { background: var(--bar); color: #fff; border: 0; }
html[data-theme="profil"] .chat-top .small { color: rgba(255, 255, 255, 0.85); }
html[data-theme="profil"] .bubble { background: var(--primary); color: #fff; border: 0; border-radius: 18px 18px 18px 4px; }
html[data-theme="profil"] .mine .bubble { background: #E8EDEF; color: var(--ink); border-radius: 18px 18px 4px 18px; }
html[data-theme="profil"] .tab.on .ico { background: transparent; }
html[data-theme="profil"] .tab.on { color: var(--primary); font-weight: 900; }
/* photo wall: tight square grid, no captions */
html[data-theme="profil"] .grid2 { grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 12px -18px 0; }
html[data-theme="profil"] .photo .img { aspect-ratio: 1; border-radius: 0; }
html[data-theme="profil"] .photo .small, html[data-theme="profil"] .photo .faint { display: none; }
/* roster: a list with a status pill */
html[data-theme="profil"] .cubbies { display: flex; flex-direction: column; gap: 0; margin: 0 -18px; background: var(--surface); border-top: 1px solid var(--line); }
html[data-theme="profil"] .cubby, html[data-theme="profil"] .cubby.expected, html[data-theme="profil"] .cubby.absent { flex-direction: row; gap: 14px; min-height: 68px; padding: 8px 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); text-align: left; opacity: 1; }
html[data-theme="profil"] .cubby .face { width: 48px !important; height: 48px !important; }
html[data-theme="profil"] .cubby .nm { flex: 1; font-size: 16px; }
html[data-theme="profil"] .cubby .st { padding: 4px 12px; border-radius: 999px; background: var(--ok-soft); }
html[data-theme="profil"] .cubby.expected .st { background: var(--accent-soft); }
html[data-theme="profil"] .cubby.absent .st { background: var(--danger-soft); }
html[data-theme="profil"] .cubby.gone .st { background: var(--sunk); }
html[data-theme="profil"] .cubby .flag { top: 10px; left: 50px; right: auto; }

/* ================= 3. Sunce (Procare) ================= */
html[data-theme="sunce"] {
  --wall: #EFF5F6; --wall-deep: #E0EBED; --bg: #EFF5F6;
  --surface: #FFFFFF; --sunk: #EAF1F2; --line: #DCE7E9;
  --ink: #26323A; --muted: #56656D; --faint: #66757D;
  --primary: #04807F; --primary-ink: #FFFFFF; --primary-soft: #DDF4F3;
  --accent: #8A6A00; --accent-fill: #FADA3F; --accent-soft: #FFF7D1;
  --sun: linear-gradient(160deg, #05AFAE 0%, #0FB8CB 55%, #19C2ED 100%);
  --font-display: 'Nunito', system-ui, sans-serif;
  --font-ui: 'Nunito', system-ui, sans-serif;
}
/* gradient hero: action icons in the corner, centred face with a white ring, light name */
html[data-theme="sunce"] .hero { background: var(--sun); }
html[data-theme="sunce"] .hero-icons .act-pickup.on { color: var(--ok); }
html[data-theme="sunce"] .hero-main { flex-direction: column; text-align: center; gap: 12px; padding: 0 18px 70px; color: #fff; }
html[data-theme="sunce"] .hero-main .face { width: 112px !important; height: 112px !important; border: 4px solid rgba(255, 255, 255, 0.95); box-shadow: 0 10px 24px rgba(120, 40, 10, 0.25); }
html[data-theme="sunce"] .hero-txt { align-items: center; }
html[data-theme="sunce"] .hero-txt .display { font-weight: 300; font-size: 34px; line-height: 38px; letter-spacing: 0; color: #fff; }
html[data-theme="sunce"] .hero-txt .status { color: #fff !important; font-weight: 600; }
/* everything below floats up over the hero on white cards */
html[data-theme="sunce"] .today-body { position: relative; margin-top: -46px; }
html[data-theme="sunce"] .pickup:not(.sent):not(.done), html[data-theme="sunce"] .pickup { margin-top: 0; background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(42, 39, 51, 0.10); }
html[data-theme="sunce"] .pickup .title { color: var(--ink); }
html[data-theme="sunce"] .pickup p { color: var(--muted); }
html[data-theme="sunce"] .pickup .btn.light { background: var(--primary); color: #fff; }
html[data-theme="sunce"] .pickup .link { color: var(--muted); }
html[data-theme="sunce"] .note { background: var(--surface); box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .day-date { background: var(--accent-soft); color: var(--accent); font-weight: 750; padding: 3px 10px; border-radius: 999px; }
html[data-theme="sunce"] .seg { background: var(--surface); box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); border-radius: 14px; padding: 4px; }
html[data-theme="sunce"] .seg-btn.on { background: var(--primary); color: #fff; box-shadow: none; }
/* each moment its own card: outlined icon, small capital label, time on the right */
html[data-theme="sunce"] .day-sheet { background: none; border: 0; padding: 0; }
html[data-theme="sunce"] .day-sheet .tl { background: var(--surface); border-radius: 16px; padding: 14px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .day-sheet .tl + .tl { border: 0; }
html[data-theme="sunce"] .day-sheet .tl-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--k-soft); }
html[data-theme="sunce"] .tl-kind { text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); font-weight: 800; }
html[data-theme="sunce"] .tl-title { font-weight: 600; }
html[data-theme="sunce"] .menu-card { border: 0; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .header, html[data-theme="sunce"] .subhead, html[data-theme="sunce"] .chat-top { background: var(--sun); color: #fff; border: 0; }
html[data-theme="sunce"] .header { padding: 18px 18px 16px; }
html[data-theme="sunce"] .header .display { font-weight: 400; font-size: 26px; letter-spacing: 0; }
html[data-theme="sunce"] .header .sub, html[data-theme="sunce"] .chat-top .small { color: rgba(255, 255, 255, 0.9); }
html[data-theme="sunce"] .subhead .title { color: #fff; }
html[data-theme="sunce"] .chat-top .face { box-shadow: 0 0 0 2px #fff; }
html[data-theme="sunce"] .bubble { border: 0; box-shadow: 0 2px 8px rgba(42, 39, 51, 0.08); }
html[data-theme="sunce"] .tab.on .ico { background: var(--primary-soft); }
html[data-theme="sunce"] .tab.on { color: var(--primary); }
html[data-theme="sunce"] .card { border: 0; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .photo { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.07); }
html[data-theme="sunce"] .photo .img { border-radius: 0; }
html[data-theme="sunce"] .photo .small, html[data-theme="sunce"] .photo .faint { padding: 0 12px; }
html[data-theme="sunce"] .photo .faint { padding-bottom: 12px; }
/* roster rows: face, name, status under it */
html[data-theme="sunce"] .cubbies { grid-template-columns: 1fr; gap: 8px; }
html[data-theme="sunce"] .cubby, html[data-theme="sunce"] .cubby.expected, html[data-theme="sunce"] .cubby.absent { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; justify-items: start; min-height: 0; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); text-align: left; opacity: 1; }
html[data-theme="sunce"] .cubby .face { grid-row: span 2; width: 50px !important; height: 50px !important; }
html[data-theme="sunce"] .cubby .nm { align-self: end; font-size: 16px; }
html[data-theme="sunce"] .cubby .st { align-self: start; }

/* ================= 4. Dnevnik (Storypark) ================= */
html[data-theme="dnevnik"] {
  --wall: #FFFFFF; --wall-deep: #F2F2F7; --bg: #FFFFFF;
  --surface: #FFFFFF; --sunk: #F2F2F7; --line: #E5E5EA;
  --ink: #1C1C1E; --muted: #636366; --faint: #6E6E73;
  --primary: #5F57B8; --primary-ink: #FFFFFF; --primary-soft: #EEECFA;
  --accent: #B8473B; --accent-fill: #F56E5F; --accent-soft: #FDECEA;
  --font-display: 'Figtree', -apple-system, system-ui, sans-serif;
}
html[data-theme="dnevnik"] .display { font-weight: 800; letter-spacing: -0.9px; }
/* iOS large title with the face on the right */
html[data-theme="dnevnik"] .hero-main { padding: 24px 18px 4px; justify-content: space-between; }
html[data-theme="dnevnik"] .hero-main .face { order: 2; width: 56px !important; height: 56px !important; }
html[data-theme="dnevnik"] .hero-txt .display { font-size: 36px; line-height: 40px; }
html[data-theme="dnevnik"] .hero-txt .status { font-size: 14px; }
html[data-theme="dnevnik"] .pickup:not(.sent):not(.done) { background: var(--sunk); color: var(--ink); }
html[data-theme="dnevnik"] .pickup:not(.sent):not(.done) .title { color: var(--ink); }
html[data-theme="dnevnik"] .pickup:not(.sent):not(.done) p { color: var(--muted); }
html[data-theme="dnevnik"] .pickup:not(.sent):not(.done) .btn.light { background: var(--primary); color: #fff; }
html[data-theme="dnevnik"] .pickup:not(.sent):not(.done) .link { color: var(--muted); }
html[data-theme="dnevnik"] .note { background: var(--accent-soft); box-shadow: none; }
html[data-theme="dnevnik"] .section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
html[data-theme="dnevnik"] .seg { background: #EEEEF0; border-radius: 10px; }
html[data-theme="dnevnik"] .seg-btn { min-height: 32px; font-size: 13.5px; border-radius: 8px; color: var(--ink); font-weight: 600; }
/* every moment is a story card; photo moments carry the teacher and a collage */
html[data-theme="dnevnik"] .day-sheet { background: none; border: 0; padding: 0; }
html[data-theme="dnevnik"] .day-sheet .tl { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
html[data-theme="dnevnik"] .day-sheet .tl + .tl { border-top: 1px solid var(--line); }
html[data-theme="dnevnik"] .day-sheet .tl-ico { width: 30px; height: 30px; border-radius: 50%; }
html[data-theme="dnevnik"] .has-photo { padding: 14px 14px 16px; }
html[data-theme="dnevnik"] .has-photo .tl-ico, html[data-theme="dnevnik"] .has-photo .tl-top { display: none; }
html[data-theme="dnevnik"] .has-photo .tl-by { display: flex; }
html[data-theme="dnevnik"] .has-photo .tl-title { font-size: 18px; line-height: 23px; font-weight: 800; }
html[data-theme="dnevnik"] .has-photo .tl-detail { color: var(--ink); }
html[data-theme="dnevnik"] .has-photo .tl-photos { height: 240px; border-radius: 10px; }
html[data-theme="dnevnik"] .menu-card { background: var(--sunk); border: 0; }
html[data-theme="dnevnik"] .header { padding: 22px 18px 8px; }
html[data-theme="dnevnik"] .header .display { font-size: 34px; line-height: 40px; }
html[data-theme="dnevnik"] .chat-top { background: rgba(255, 255, 255, 0.92); }
html[data-theme="dnevnik"] .bubble { background: #E9E9EB; border: 0; border-radius: 19px; }
html[data-theme="dnevnik"] .mine .bubble { background: var(--primary); border-radius: 19px; }
html[data-theme="dnevnik"] .tabbar { background: rgba(249, 249, 249, 0.94); backdrop-filter: blur(12px); }
html[data-theme="dnevnik"] .tab.on .ico { background: transparent; }
html[data-theme="dnevnik"] .tab.on { color: var(--primary); }
html[data-theme="dnevnik"] .card { border-color: var(--line); border-radius: 14px; }
html[data-theme="dnevnik"] .photo .img { border-radius: 10px; }
/* faces wall: round photos with a ring, no boxes */
html[data-theme="dnevnik"] .cubbies { grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
html[data-theme="dnevnik"] .cubby, html[data-theme="dnevnik"] .cubby.expected, html[data-theme="dnevnik"] .cubby.absent { background: none; border: 0; padding: 4px 0; min-height: 0; gap: 6px; opacity: 1; }
html[data-theme="dnevnik"] .cubby .face { width: 62px !important; height: 62px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--line); }
html[data-theme="dnevnik"] .cubby.present .face { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px #34C759; }
html[data-theme="dnevnik"] .cubby .nm { font-size: 14px; font-weight: 650; }
html[data-theme="dnevnik"] .cubby .st { font-size: 12px; }
html[data-theme="dnevnik"] .cubby .flag { top: 0; right: 10px; }

/* ================= 5. Izvještaj (Lillio) ================= */
html[data-theme="izvjestaj"] {
  --wall: #F5F6F3; --wall-deep: #E9ECE6; --bg: #F5F6F3;
  --surface: #FFFFFF; --sunk: #EEF1EC; --line: #E0E5DE;
  --ink: #233038; --muted: #56656C; --faint: #67757B;
  --primary: #367E7E; --primary-ink: #FFFFFF; --primary-soft: #E0EEEE;
  --report: #3B8456;
  --accent: #A8461F; --accent-fill: #F6C343; --accent-soft: #FDF2D3;
  --font-display: 'Bitter', Georgia, serif;
}
html[data-theme="izvjestaj"] .display, html[data-theme="izvjestaj"] .title, html[data-theme="izvjestaj"] .section-title { font-weight: 700; letter-spacing: -0.2px; }
/* slate strip, then a white report header with shapes and a square photo */
html[data-theme="izvjestaj"] .hero { background: var(--surface); overflow: hidden; border-bottom: 1px solid var(--line); }
html[data-theme="izvjestaj"] .hero-bar { display: flex; align-items: center; height: 46px; padding: 0 18px; background: var(--primary); color: rgba(255, 255, 255, 0.92); font-size: 14px; font-weight: 650; }
html[data-theme="izvjestaj"] .hero-bar .kid { display: none; }
html[data-theme="izvjestaj"] .hero-main { position: relative; overflow: hidden; padding: 22px 18px 20px; gap: 16px; }
html[data-theme="izvjestaj"] .hero-main::before { content: ''; position: absolute; left: -38px; top: -44px; width: 110px; height: 110px; border-radius: 50%; background: #F6C343; opacity: 0.9; }
html[data-theme="izvjestaj"] .hero-main::after { content: ''; position: absolute; right: 52px; bottom: 14px; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid #EF7C5E; transform: rotate(-16deg); }
html[data-theme="izvjestaj"] .hero-main .face { width: 78px !important; height: 78px !important; border-radius: 18px; position: relative; z-index: 1; }
html[data-theme="izvjestaj"] .hero-txt { position: relative; z-index: 1; }
html[data-theme="izvjestaj"] .hero-txt .display { font-size: 30px; line-height: 34px; }
html[data-theme="izvjestaj"] .hero-group { display: block; font-size: 13px; color: var(--faint); }
html[data-theme="izvjestaj"] .pickup:not(.sent):not(.done) { background: var(--primary); }
html[data-theme="izvjestaj"] .pickup:not(.sent):not(.done) .btn.light { background: var(--accent-fill); color: var(--ink); }
html[data-theme="izvjestaj"] .note { background: var(--surface); border: 1px solid var(--line); }
html[data-theme="izvjestaj"] .note svg { color: #C2502E; }
html[data-theme="izvjestaj"] .section-title { font-size: 22px; }
html[data-theme="izvjestaj"] .seg { background: transparent; padding: 0; gap: 18px; border-radius: 0; }
html[data-theme="izvjestaj"] .seg-btn { flex: 0 0 auto; border-radius: 0; min-height: 40px; color: var(--muted); }
html[data-theme="izvjestaj"] .seg-btn.on { background: transparent; box-shadow: inset 0 -3px 0 var(--accent-fill); color: var(--ink); }
/* the day as a written report: green serif heading per moment, no icons */
html[data-theme="izvjestaj"] .day-sheet { border-radius: 12px; padding: 4px 18px; }
html[data-theme="izvjestaj"] .day-sheet .tl-ico { display: none; }
html[data-theme="izvjestaj"] .day-sheet .tl { padding: 16px 0; }
html[data-theme="izvjestaj"] .day-sheet .tl + .tl { border-top: 1px dashed var(--line); }
html[data-theme="izvjestaj"] .tl-kind { font-family: 'Bitter', Georgia, serif; font-size: 19px; line-height: 24px; font-weight: 700; color: var(--report); }
html[data-theme="izvjestaj"] .tl-top .tl-time { font-size: 13.5px; }
html[data-theme="izvjestaj"] .tl-title { font-size: 15.5px; margin-top: 4px; }
html[data-theme="izvjestaj"] .tl-photos { border-radius: 8px; height: 210px; }
html[data-theme="izvjestaj"] .menu-card { border-radius: 12px; }
html[data-theme="izvjestaj"] .header, html[data-theme="izvjestaj"] .subhead, html[data-theme="izvjestaj"] .chat-top { background: var(--primary); color: #fff; border: 0; }
html[data-theme="izvjestaj"] .header { padding: 16px 18px; }
html[data-theme="izvjestaj"] .header .display { font-size: 24px; line-height: 30px; }
html[data-theme="izvjestaj"] .header .sub, html[data-theme="izvjestaj"] .chat-top .small { color: rgba(255, 255, 255, 0.8); }
html[data-theme="izvjestaj"] .subhead .title { color: #fff; }
html[data-theme="izvjestaj"] .chat-top .face { border-radius: 12px; }
html[data-theme="izvjestaj"] .mine .bubble { background: var(--primary); }
html[data-theme="izvjestaj"] .tab .ico { border-radius: 0; height: 30px; }
html[data-theme="izvjestaj"] .tab.on .ico { background: transparent; box-shadow: inset 0 3px 0 var(--accent-fill); }
html[data-theme="izvjestaj"] .tab.on { color: var(--primary); }
/* the album as a journal: one photo per row with a serif caption */
html[data-theme="izvjestaj"] .grid2 { grid-template-columns: 1fr; gap: 18px; }
html[data-theme="izvjestaj"] .photo .img { aspect-ratio: 16 / 10; border-radius: 10px; }
html[data-theme="izvjestaj"] .photo .small { font-family: 'Bitter', Georgia, serif; font-size: 17px; font-weight: 700; margin-top: 8px !important; }
/* register: square faces, status as a tag on the right */
html[data-theme="izvjestaj"] .cubbies { grid-template-columns: 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
html[data-theme="izvjestaj"] .cubby, html[data-theme="izvjestaj"] .cubby.expected, html[data-theme="izvjestaj"] .cubby.absent { flex-direction: row; gap: 14px; min-height: 64px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); text-align: left; opacity: 1; }
html[data-theme="izvjestaj"] .cubby .face { width: 46px !important; height: 46px !important; border-radius: 12px; }
html[data-theme="izvjestaj"] .cubby .nm { flex: 1; font-size: 16px; }
html[data-theme="izvjestaj"] .cubby .st { min-width: 74px; text-align: center; padding: 6px 10px; border-radius: 8px; border: 1.5px solid currentColor; }
html[data-theme="izvjestaj"] .cubby .flag { top: 8px; left: 52px; right: auto; }

/* date over a big bold name, the face on the right in a double ring */
/* the note as a plain greeting card, no icon */
/* the daily report: plain lines, a bold lowercase heading for each */

/* magenta bar, then the child as one compact row */
/* the day as a short timeline card */
/* photos as news feed posts: who, text, one wide photo over two small */

/* sky blue bar: the child's photo, the name of the kindergarten, the pickup on the right */
/* the timeline: album posts edge to edge, the teacher under the photos */
/* albums: two columns, a title and the count under each */

/* =====================================================================
 * The other screens, after each app (LOG, POST in app.js and the shared
 * markup of chat, album, roster and "Više"). First the pieces, then each look.
 * ===================================================================== */
.cubby[hidden] { display: none !important; }
.cb-btn, .msg-meta, .in-time, .msg-ava.me, .chat-day, .mr-n, .reacts, .post-tags { display: none; }
.lg-meal { margin-top: 10px; }
.lg-save { margin-top: 22px; }
.lg-all { margin: 10px 0 4px; }
.lk { text-align: left; }
.lk-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lk-txt { display: flex; flex-direction: column; min-width: 0; }
.lk-name { font-weight: 700; }
.lk-val, .lk-end, .lk-edit { display: none; }
.lk-form { padding: 14px 0 6px; }
/* kinds as coloured tiles (brightwheel) */
.lk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; margin: 6px 0 22px; }
.lk-tiles .lk { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 13.5px; }
.lk-tiles .lk-ico { width: 66px; height: 66px; border-radius: 18px; background: var(--k); color: #fff; }
.lk-tiles .lk.on .lk-ico { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--k); }
.lk-tiles .lk-name { font-weight: 650; }
/* kinds as round outline icons (Procare) */
.lk-circles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; margin: 4px 0 8px; }
.lk-circles .lk { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.lk-circles .lk-ico { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: var(--k); box-shadow: 0 3px 10px rgba(30, 40, 60, 0.07); }
.lk-circles .lk.on .lk-ico { border-color: var(--primary); background: var(--primary-soft); }
.lk-circles .lk.on { color: var(--ink); }
.lk-circles .lk-name { font-weight: 600; }
/* kinds as a list of rows (Famly, Lillio) */
.lk-rows { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lk-rows .lk { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; font-size: 16px; }
.lk-rows .lk + .lk, .lk-rows .lk-form + .lk { border-top: 1px solid var(--line); }
.lk-rows .lk-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--k); color: #fff; }
.lk-rows .lk-ico svg { width: 20px; height: 20px; }
.lk-rows .lk-txt { flex: 1; }
.lk-rows .lk-end { display: flex; color: var(--faint); }
.lk-rows .lk.on { background: var(--primary-soft); }
.lk-rows .lk.on .lk-end { color: var(--primary); }
.lk-rows .lk-form { padding: 6px 14px 16px; background: var(--primary-soft); }
/* kinds as a segmented control (Storypark) */
.lk-seg { display: flex; gap: 2px; padding: 3px; margin: 4px 0 6px; border-radius: 10px; background: #EEEEF0; }
.lk-seg .lk { flex: 1; display: flex; justify-content: center; min-height: 34px; border-radius: 8px; font-size: 13.5px; }
.lk-seg .lk-ico { display: none; }
.lk-seg .lk-name { font-weight: 600; }
.lk-seg .lk.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
/* kinds as a ticked list (Stay Informed) */
.lk-checks { display: flex; flex-direction: column; }
.lk-checks .lk { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 18px; font-size: 16px; }
.lk-checks .lk + .lk { border-top: 1px solid var(--line); }
.lk-checks .lk-ico { width: 30px; height: 30px; border-radius: 7px; background: var(--k-soft); color: var(--k); }
.lk-checks .lk-ico svg { width: 18px; height: 18px; }
.lk-checks .lk-txt { flex: 1; }
.lk-checks .lk-name { font-weight: 500; }
.lk-checks .lk.on .lk-end { display: flex; color: var(--primary); }
.lk-checks .lk:not(.on) .lk-end { display: none; }
/* children */
.lw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.lw .face { transition: opacity 0.15s ease, box-shadow 0.15s ease; }
.lw-check { position: absolute; top: 0; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--primary); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.lw.on .lw-check { display: flex; }
.lw:not(.on) .face { opacity: 0.45; }
.lw-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.lw-faces .face { width: 60px !important; height: 60px !important; }
.lw-faces .lw.on .face { box-shadow: 0 0 0 3px var(--primary); }
.lw-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.lw-strip::-webkit-scrollbar { display: none; }
.lw-strip .lw { flex: 0 0 auto; width: 58px; }
.lw-strip .lw.on .face { box-shadow: 0 0 0 2.5px var(--primary); }
.lw-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lw-list .lw { flex-direction: row; gap: 14px; min-height: 60px; padding: 8px 14px; font-size: 16px; font-weight: 600; }
.lw-list .lw + .lw { border-top: 1px solid var(--line); }
.lw-list .face { width: 42px !important; height: 42px !important; opacity: 1 !important; }
.lw-list .lw-name { flex: 1; text-align: left; }
.lw-list .lw-check { position: static; display: flex; width: 26px; height: 26px; background: var(--surface); color: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.lw-list .lw.on .lw-check { background: var(--primary); color: #fff; box-shadow: none; }
/* how it went */
.lh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lh-chips .lh { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 600; }
.lh-chips .lh.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.lh-chips .lh-check { display: none; }
.lh-checks { display: flex; flex-direction: column; }
.lh-checks .lh { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 6px 16px; font-size: 16px; text-align: left; }
.lh-checks .lh + .lh { border-top: 1px solid var(--line); }
.lh-checks .lh-check { display: flex; color: var(--primary); visibility: hidden; }
.lh-checks .lh.on .lh-check { visibility: visible; }
/* iOS grouped lists (Storypark) */
.lg-group { margin-top: 22px; }
.lg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 7px; font-size: 13.5px; color: var(--muted); }
.lg-head .chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
.lg-body { background: var(--surface); border-radius: 12px; overflow: hidden; }
.lg-body > .lw-strip { padding: 12px 14px 10px; }
.lg-body > .lw-list { border: 0; border-radius: 0; }
.lg-body > .field { border: 0; border-radius: 0; }
/* brightwheel's row form */
.lf { margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lf-row { padding: 14px 16px; }
.lf-row + .lf-row { border-top: 1px solid var(--line); }
.lf-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 15.5px; font-weight: 800; }
.lf-label .chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
.lf-time { display: block; font-size: 15.5px; font-weight: 650; color: #3F64D8; }
.lf-row .lf-time { margin-top: -4px; }
/* Procare's hint bar and roster search */
.lf-hint { margin: 2px 0 18px; padding: 10px 14px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 14px; font-weight: 600; }
.roster-search { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--faint); }
.roster-search .field { border: 0; padding: 10px 0; background: transparent; min-height: 46px; }
/* Famly's payments card */
.bal { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(40, 20, 80, 0.06); }
.bal-top { display: flex; align-items: center; gap: 12px; }
.bal-name { font-size: 21px; line-height: 26px; font-weight: 750; }
.bal-row { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 14px; font-size: 16px; color: var(--muted); }
.bal-row b { font-size: 22px; color: #D23F3F; }
.bal-row b.paid { color: var(--ok); }
/* Lillio's invoice table */
.bill-bal { display: flex; flex-direction: column; margin-bottom: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.bill-bal b { font-family: var(--font-display); font-size: 30px; line-height: 36px; }
.bill-bal span { font-size: 13px; color: var(--muted); }
.bill-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; border-radius: 10px; overflow: hidden; }
.bill-table th { background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; text-align: left; padding: 10px; }
.bill-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bill-table .num { text-align: right; white-space: nowrap; }
.st-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 650; white-space: nowrap; }
.st-due { color: #C2502E; font-weight: 700; white-space: nowrap; }
/* composers */
.composer-card { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.composer-card .field { margin: 12px 0; border: 0; padding: 4px 0; font-size: 17px; }
.collage { display: grid; gap: 3px; height: 270px; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); border-radius: 12px; overflow: hidden; background: #2C2C2E; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.collage.l-0 img:first-child { grid-column: span 2; }
.collage.l-1 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.collage.l-2 { grid-template-columns: 1fr; }
.collage.l-3 { grid-template-columns: 2fr 1fr; }
.collage.l-3 img:first-child { grid-row: span 3; }
.collage > img:only-child { grid-column: 1 / -1 !important; grid-row: auto !important; }
.collage-empty { display: flex; align-items: center; justify-content: center; height: 140px; padding: 0 24px; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 14.5px; text-align: center; }
.layouts { display: flex; justify-content: center; gap: 12px; margin: 12px 0 20px; }
.lay { width: 54px; height: 42px; display: grid; gap: 2px; padding: 6px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); }
.lay i { display: block; border-radius: 2px; background: #C7C7CC; }
.lay.on { border-color: var(--primary); }
.lay.on i { background: var(--primary); }
.lay-0 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lay-0 i:first-child { grid-column: span 2; }
.lay-1 { grid-template-columns: repeat(3, 1fr); }
.lay-2 { grid-template-rows: repeat(3, 1fr); }
.lay-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.lay-3 i:first-child { grid-row: span 2; }
/* Lillio's report preview */
.rep-prev { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.rep-k { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #2A8C8C; }
.rep-cap { font-size: 15px; font-weight: 600; }
.rep-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; min-height: 70px; border-radius: 6px; overflow: hidden; }
.rep-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.rep-strip span { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--line); border-radius: 6px; color: var(--faint); font-size: 14px; }
.rep-note { margin-top: 8px; font-size: 12.5px; color: var(--faint); }
/* Lillio's child profile */
.enr { margin-bottom: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.enr-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.enr-photo { width: 92px; height: 92px; border-radius: 8px; object-fit: cover; }
.enr-name { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 700; }
.enr-h { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.enr-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14.5px; color: var(--muted); }
.enr-row b { color: var(--ink); font-weight: 650; }
.enr-link { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; min-height: 40px; font-size: 14.5px; font-weight: 700; color: var(--primary); }

/* ---- 1. Ljubičasta (Famly): pick children first, square icons, both photos in chat, payments card ---- */
html[data-theme="ljubicasta"] .tally { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
html[data-theme="ljubicasta"] .msg-ava.me { display: block; margin-bottom: 19px; }
html[data-theme="ljubicasta"] .mine .bubble { border-radius: 18px; }
html[data-theme="ljubicasta"] .bubble { border-radius: 18px; }
html[data-theme="ljubicasta"] .more-list .tile-ico { background: var(--primary-soft); color: var(--primary); }
html[data-theme="ljubicasta"] .cubbies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-theme="ljubicasta"] .cubby, html[data-theme="ljubicasta"] .cubby.expected, html[data-theme="ljubicasta"] .cubby.absent { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; justify-items: start; min-height: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; opacity: 1; }
html[data-theme="ljubicasta"] .cubby .face { grid-row: span 2; width: 42px !important; height: 42px !important; }
html[data-theme="ljubicasta"] .cubby .nm { align-self: end; }
html[data-theme="ljubicasta"] .cubby .st { align-self: start; font-weight: 600; }
html[data-theme="ljubicasta"] .cubby.present .face { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
html[data-theme="ljubicasta"] .cubby .flag { top: 6px; left: 42px; right: auto; }

/* ---- 2. Profil (brightwheel): coloured tiles, row form, name over messages, icon grid ---- */
html[data-theme="profil"] .msg-meta { display: block; margin: 0 4px 3px; font-size: 12px; color: var(--faint); }
html[data-theme="profil"] .msg time { display: none; }
html[data-theme="profil"] .msg-ava { margin-bottom: 0; align-self: flex-end; }
html[data-theme="profil"] .more-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 6px; padding: 10px 0; background: none; border: 0; }
html[data-theme="profil"] .more-list .list-row { position: relative; flex-direction: column; gap: 8px; min-height: 0; padding: 0; border: 0 !important; text-align: center; }
html[data-theme="profil"] .more-list .tile-ico { width: 66px; height: 66px; border-radius: 18px; color: #fff; }
html[data-theme="profil"] .more-list .tile-ico svg { width: 30px; height: 30px; }
html[data-theme="profil"] .more-list .head { font-size: 13.5px; font-weight: 700; }
html[data-theme="profil"] .more-list .mr-chev { display: none; }
html[data-theme="profil"] .more-list .pill { position: absolute; top: -6px; right: 4px; }
html[data-theme="profil"] .mr-menu .tile-ico { background: #F5A030; }
html[data-theme="profil"] .mr-absence .tile-ico { background: #3A9BF0; }
html[data-theme="profil"] .mr-bills .tile-ico { background: #34A853; }
html[data-theme="profil"] .mr-trusted .tile-ico { background: #E8508A; }
html[data-theme="profil"] .mr-notices .tile-ico { background: #F05454; }
html[data-theme="profil"] .mr-settings .tile-ico { background: #9B4DCA; }

/* ---- 3. Sunce (Procare): round icons, roster list with search, floating cards ---- */
html[data-theme="sunce"] .cubbies { display: flex; flex-direction: column; gap: 0; background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .cubby, html[data-theme="sunce"] .cubby.expected, html[data-theme="sunce"] .cubby.absent { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
html[data-theme="sunce"] .cubby.present .face { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #34C759; }
html[data-theme="sunce"] .lw-list { border: 0; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .more-list { display: flex; flex-direction: column; gap: 10px; background: none; border: 0; overflow: visible; }
html[data-theme="sunce"] .more-list .list-row { background: var(--surface); border-radius: 16px; border: 0 !important; box-shadow: 0 4px 14px rgba(42, 39, 51, 0.06); }
html[data-theme="sunce"] .lf-hint { background: #DDF4F3; color: #04706F; }

/* ---- 4. Dnevnik (Storypark): iOS form, messages as posts, masonry album, iOS settings list ---- */
html[data-theme="dnevnik"] .scroll[data-sk="t-log"], html[data-theme="dnevnik"] .scroll[data-sk="p-more"] { background: #F2F2F7; }
html[data-theme="dnevnik"] .chat-list { gap: 0; }
html[data-theme="dnevnik"] .msg.with-ava, html[data-theme="dnevnik"] .msg.with-ava.mine { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
html[data-theme="dnevnik"] .msg.mine { flex-direction: row-reverse !important; justify-content: flex-end !important; }
html[data-theme="dnevnik"] .msg-ava, html[data-theme="dnevnik"] .msg-ava.me { display: block; margin: 0; }
html[data-theme="dnevnik"] .msg-col, html[data-theme="dnevnik"] .mine .msg-col { align-items: flex-start; max-width: none; flex: 1; }
html[data-theme="dnevnik"] .msg-meta { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
html[data-theme="dnevnik"] .bubble, html[data-theme="dnevnik"] .mine .bubble { background: none; color: var(--ink); border: 0; border-radius: 0; padding: 0; max-width: none; font-size: 15.5px; }
html[data-theme="dnevnik"] .msg time { display: none; }
html[data-theme="dnevnik"] .grid2 { display: block; columns: 2; column-gap: 12px; }
html[data-theme="dnevnik"] .photo { display: block; width: 100%; break-inside: avoid; margin-bottom: 16px; }
html[data-theme="dnevnik"] .photo:nth-child(3n + 1) .img { aspect-ratio: 0.78; }
html[data-theme="dnevnik"] .photo:nth-child(3n + 2) .img { aspect-ratio: 1.25; }
html[data-theme="dnevnik"] .more-list { border: 0; border-radius: 12px; }
html[data-theme="dnevnik"] .more-list .list-row { min-height: 50px; padding: 8px 16px; }
html[data-theme="dnevnik"] .more-list .tile-ico { width: 30px; height: 30px; border-radius: 7px; color: #fff; }
html[data-theme="dnevnik"] .more-list .tile-ico svg { width: 18px; height: 18px; }
html[data-theme="dnevnik"] .more-list .head { font-weight: 500; }
html[data-theme="dnevnik"] .mr-menu .tile-ico { background: #FF9500; }
html[data-theme="dnevnik"] .mr-absence .tile-ico { background: #FF3B30; }
html[data-theme="dnevnik"] .mr-bills .tile-ico { background: #34C759; }
html[data-theme="dnevnik"] .mr-trusted .tile-ico { background: #5856D6; }
html[data-theme="dnevnik"] .mr-notices .tile-ico { background: #FF2D55; }
html[data-theme="dnevnik"] .mr-settings .tile-ico { background: #8E8E93; }
html[data-theme="dnevnik"] .lh-checks .lh { padding: 6px 16px; }

/* ---- 5. Izvještaj (Lillio): activity rows opening in place, attendance buttons, invoice table ---- */
html[data-theme="izvjestaj"] .tl-kind { color: var(--k); }
html[data-theme="izvjestaj"] .lk-room { background: none; border: 0; gap: 6px; overflow: visible; }
html[data-theme="izvjestaj"] .lk-room .lk { background: #EEF1EE; border-radius: 6px; min-height: 50px; border: 0 !important; }
html[data-theme="izvjestaj"] .lk-room .lk-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--k); box-shadow: inset 0 0 0 1.5px var(--k); }
html[data-theme="izvjestaj"] .lk-room .lk-name { font-family: var(--font-ui); font-weight: 500; font-size: 15.5px; }
html[data-theme="izvjestaj"] .lk-room .lk.on { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--primary); }
html[data-theme="izvjestaj"] .lk-room .lk-form { margin: 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
html[data-theme="izvjestaj"] .lk-room .lf-row { padding: 6px 0 12px; }
html[data-theme="izvjestaj"] .lk-room .lf-row + .lf-row { border-top: 0; }
html[data-theme="izvjestaj"] .cubby .nm { color: var(--primary); }
html[data-theme="izvjestaj"] .cubby .st { min-width: 0; border: 0; padding: 0; text-align: left; font-weight: 650; }
html[data-theme="izvjestaj"] .cubby.present .st { color: var(--ok); }
html[data-theme="izvjestaj"] .cubby.expected .st, html[data-theme="izvjestaj"] .cubby.gone .st { color: #C2502E; }
html[data-theme="izvjestaj"] .cb-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0; color: #fff; background: #4CA34A; }
html[data-theme="izvjestaj"] .cubby.present .cb-btn { background: #D9534F; }

/* ---- shared pieces of the two newer looks and Famly's reactions ---- */
.bar-ico { margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; }
.post-tags { gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; font-weight: 650; }
.post-tags span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 6px; background: var(--sunk); color: var(--muted); }
.post-tags .tag-info { background: var(--primary-soft); color: var(--primary); }
.post-tags .tag-info::before { content: ''; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.reacts { gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 4px; min-width: 36px; min-height: 32px; padding: 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; justify-content: center; }
.react span { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.react.on { background: var(--primary-soft); border-color: var(--primary); }
.react.add { color: var(--faint); }
.m-actions { display: flex; gap: 8px; margin-top: 12px; }
.m-actions .act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--primary); color: var(--primary); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.m-actions .act-pickup { flex: 1.7; background: var(--primary); color: #fff; letter-spacing: 0.02em; }
.m-actions .act-pickup.on { background: var(--ok-soft); border-color: var(--ok); }
.pz-filter { margin-top: 12px; padding: 12px 14px 14px; background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.pz-f-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; font-size: 13px; color: var(--muted); }
.pz-clear { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.pz-kids { display: flex; gap: 10px; margin: 6px 0 10px; }
.pz-kids .face { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.pz-lab { display: block; margin: 14px 0 8px; font-size: 13px; color: var(--muted); }
.pz-filter .pz-lab { margin-top: 0; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid #C9C9C9; background: var(--surface); font-size: 13.5px; color: var(--ink); }
.pz-chip svg { color: var(--muted); }
.pz-chip.on { background: #8E5BD6; border-color: #8E5BD6; color: #fff; }
.pz-chip.on svg { color: #fff; }
.lk-mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-mchips .lk { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid #C9C9C9; background: var(--surface); font-size: 14px; }
.lk-mchips .lk-ico svg { width: 17px; height: 17px; color: var(--muted); }
.lk-mchips .lk-name { font-weight: 500; }
.lk-mchips .lk.on { background: #8E5BD6; border-color: #8E5BD6; color: #fff; }
.lk-mchips .lk.on .lk-ico svg { color: #fff; }
.m-field .field { border: 1px solid #BDBDBD; border-radius: 4px; }
.m-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.m-bar .btn { width: auto; min-height: 42px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; padding: 0 20px; }
.m-bar .banner { flex: 1; }
.m-text { min-height: 42px; padding: 0 14px; color: var(--primary); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.pz-bal { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); font-size: 14.5px; color: var(--muted); }
.pz-bal b { font-size: 16px; color: var(--ink); }
.pz-card { margin-top: 12px; padding: 4px 16px 8px; background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.pz-card .pz-lab { margin: 10px 0 4px; }
.tx { display: flex; align-items: center; gap: 12px; min-height: 58px; border-top: 1px solid var(--line); }
.tx-ico { color: var(--muted); display: flex; }
.tx b { display: block; font-size: 14.5px; font-weight: 600; }
.tx .grow span { font-size: 12.5px; color: var(--faint); }
.tx-amt { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.tx-amt.cr { color: #2E7D32; }
.tx-amt.db { color: #C62828; }
.pz-pay { display: flex; justify-content: flex-end; margin-top: 18px; }
.pz-pay .btn { width: auto; border-radius: 28px; padding: 0 26px; min-height: 52px; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 4px 12px rgba(30, 60, 150, 0.3); }
.pz-pay .banner, .pz-pay .card { flex: 1; }

/* ---- 1. Famly: its reactions under the other side's messages, its purple on the chat bar ---- */
html[data-theme="ljubicasta"] .reacts { display: flex; flex-wrap: wrap; }
html[data-theme="profil"] .chat-top { background: var(--blurple); }
html[data-theme="profil"] .tab.on { color: var(--primary); }
html[data-theme="dnevnik"] .msg-ava.me .avatar, html[data-theme="dnevnik"] .msg-ava .avatar { background: #F56E5F !important; }

/* ================= 6. Vijesti (Stay Informed) ================= */
html[data-theme="vijesti"] {
  --wall: #F1F3F7; --wall-deep: #E3E7EF; --bg: #F1F3F7;
  --surface: #FFFFFF; --sunk: #EBEEF4; --line: #DDE2EB;
  --ink: #1B2233; --muted: #565F72; --faint: #687083;
  --primary: #064EC6; --primary-ink: #FFFFFF; --primary-soft: #E3ECFC;
  --accent: #9E4A00; --accent-fill: #F5B53D; --accent-soft: #FFF3DB;
  --font-display: 'Figtree', system-ui, sans-serif;
}
html[data-theme="vijesti"] .display, html[data-theme="vijesti"] .title, html[data-theme="vijesti"] .section-title { font-weight: 800; }
/* a tall blue bar with the big title, then the child as one white row */
html[data-theme="vijesti"] .hero-bar { display: block; padding: 22px 18px 24px; background: var(--primary); color: #fff; }
html[data-theme="vijesti"] .hero-bar .kg { display: block; font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.5px; }
html[data-theme="vijesti"] .hero-bar .kid { display: none; }
html[data-theme="vijesti"] .hero-main { gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
html[data-theme="vijesti"] .hero-main .face { width: 44px !important; height: 44px !important; }
html[data-theme="vijesti"] .hero-txt { gap: 1px; }
html[data-theme="vijesti"] .hero-txt .display { font-size: 18px; line-height: 22px; }
html[data-theme="vijesti"] .hero-txt .status { font-size: 13.5px; }
/* news cards: date and author, tags, bold title, the text */
html[data-theme="vijesti"] .post { border-radius: 8px; border: 0; box-shadow: 0 1px 3px rgba(20, 30, 60, 0.12); }
html[data-theme="vijesti"] .post-logo { background: var(--primary-soft); color: var(--primary); }
html[data-theme="vijesti"] .post-tags { display: flex; }
html[data-theme="vijesti"] .post-title { font-size: 17px; font-weight: 800; }
/* the day as outlined entries, like its calendar cards */
html[data-theme="vijesti"] .day-sheet { background: none; border: 0; padding: 0; }
html[data-theme="vijesti"] .day-sheet .tl { padding: 10px 14px; margin-bottom: 10px; background: var(--surface); border: 1.5px solid var(--k); border-radius: 6px; }
html[data-theme="vijesti"] .day-sheet .tl + .tl { border-top: 1.5px solid var(--k); }
html[data-theme="vijesti"] .day-sheet .tl-ico { display: none; }
html[data-theme="vijesti"] .tl-body { display: flex; flex-direction: column; }
html[data-theme="vijesti"] .tl-top { order: 0; }
html[data-theme="vijesti"] .tl-kind { font-size: 12px; font-weight: 700; color: var(--k); }
html[data-theme="vijesti"] .tl-photos { border-radius: 6px; }
html[data-theme="vijesti"] .today-body { padding-bottom: 64px; }
html[data-theme="vijesti"] .header, html[data-theme="vijesti"] .subhead, html[data-theme="vijesti"] .chat-top { background: var(--primary); color: #fff; border: 0; }
html[data-theme="vijesti"] .header { padding: 18px 18px 16px; }
html[data-theme="vijesti"] .header .display { font-size: 28px; line-height: 34px; }
html[data-theme="vijesti"] .header .sub, html[data-theme="vijesti"] .chat-top .small { color: rgba(255, 255, 255, 0.82); }
html[data-theme="vijesti"] .subhead .title { color: #fff; }
/* messenger: sender's name over each message, a red "new" line, blue own messages */
html[data-theme="vijesti"] .chat-day { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; color: #D93025; text-transform: uppercase; letter-spacing: 0.06em; }
html[data-theme="vijesti"] .chat-day::before, html[data-theme="vijesti"] .chat-day::after { content: ''; flex: 1; height: 1px; background: #F2B8B5; }
html[data-theme="vijesti"] .msg-meta { display: block; margin: 0 4px 3px; font-size: 12px; font-weight: 700; color: var(--ink); }
html[data-theme="vijesti"] .mine .msg-meta { display: none; }
html[data-theme="vijesti"] .bubble { border-radius: 8px; border: 0; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.12); }
html[data-theme="vijesti"] .mine .bubble { border-radius: 8px; }
html[data-theme="vijesti"] .send:not(:disabled) { background: var(--primary); }
html[data-theme="vijesti"] .tab.on .ico { background: transparent; }
html[data-theme="vijesti"] .photo .img { border-radius: 6px; }
/* the menu as its side drawer: white rows, blue icons, no arrows */
html[data-theme="vijesti"] .more-list { margin: 0 -18px; border-radius: 0; border-left: 0; border-right: 0; }
html[data-theme="vijesti"] .more-list .list-row { min-height: 56px; padding: 8px 22px; }
html[data-theme="vijesti"] .more-list .tile-ico { background: transparent; color: var(--primary); width: 28px; }
html[data-theme="vijesti"] .more-list .head { font-weight: 700; }
html[data-theme="vijesti"] .more-list .mr-chev { display: none; }
/* teacher: messenger-like roster, blue round ticks in the forms */
html[data-theme="vijesti"] .cubbies { display: flex; flex-direction: column; gap: 0; margin: 0 -18px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-theme="vijesti"] .cubby, html[data-theme="vijesti"] .cubby.expected, html[data-theme="vijesti"] .cubby.absent { flex-direction: row; gap: 14px; min-height: 64px; padding: 8px 18px; border: 0; border-radius: 0; background: var(--surface); text-align: left; opacity: 1; }
html[data-theme="vijesti"] .cubby + .cubby { box-shadow: inset 0 1px 0 var(--line); }
html[data-theme="vijesti"] .cubby .face { width: 44px !important; height: 44px !important; }
html[data-theme="vijesti"] .cubby .nm { flex: 1; font-size: 16px; }
html[data-theme="vijesti"] .cubby .flag { top: 10px; left: 52px; right: auto; }
html[data-theme="vijesti"] .lk-checks, html[data-theme="vijesti"] .lh-checks { background: var(--surface); border-radius: 8px; box-shadow: 0 1px 3px rgba(20, 30, 60, 0.1); }
html[data-theme="vijesti"] .lk-checks .lk { padding: 6px 14px; }
html[data-theme="vijesti"] .lk-checks .lk-end, html[data-theme="vijesti"] .lh-checks .lh-check { display: flex; visibility: visible; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px #B8C2D6; color: transparent; }
html[data-theme="vijesti"] .lk-checks .lk.on .lk-end, html[data-theme="vijesti"] .lh-checks .lh.on .lh-check { background: var(--primary); box-shadow: none; color: #fff; }
html[data-theme="vijesti"] .lk-checks .lk-end svg, html[data-theme="vijesti"] .lh-checks .lh-check svg { width: 14px; height: 14px; }
html[data-theme="vijesti"] .lw-list { border: 0; box-shadow: 0 1px 3px rgba(20, 30, 60, 0.1); }
html[data-theme="vijesti"] .lg-save .btn { border-radius: 8px; }
html[data-theme="vijesti"] .si-tags { display: flex; margin: 0 0 12px; }

/* ================= 7. Hronologija (ParentZone) ================= */
html[data-theme="hronologija"] {
  --wall: #EEEEEE; --wall-deep: #E0E0E0; --bg: #EEEEEE;
  --surface: #FFFFFF; --sunk: #F5F5F5; --line: #E0E0E0;
  --ink: #212121; --muted: #5F5F5F; --faint: #6E6E6E;
  --primary: #2F5FCB; --primary-ink: #FFFFFF; --primary-soft: #E4EBFA;
  --bar: #3666D2;
  --accent: #8E5BD6; --accent-fill: #F2B84B; --accent-soft: #F1EAFB;
  --font-display: Roboto, 'Figtree', system-ui, sans-serif;
  --font-ui: Roboto, 'Figtree', system-ui, sans-serif;
}
html[data-theme="hronologija"] .display, html[data-theme="hronologija"] .title, html[data-theme="hronologija"] .section-title { font-weight: 700; letter-spacing: 0; }
/* Material app bar: the title, the chat icon on the right */
html[data-theme="hronologija"] .hero-bar { display: flex; align-items: center; height: 56px; padding: 0 6px 0 18px; background: var(--bar); color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
html[data-theme="hronologija"] .hero-bar .kg { font-size: 19px; font-weight: 600; }
html[data-theme="hronologija"] .hero-bar .kid, html[data-theme="hronologija"] .hero-main { display: none; }
html[data-theme="hronologija"] .note { background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .note svg { color: var(--primary); }
/* timeline posts as Material cards */
html[data-theme="hronologija"] .day-sheet { margin-top: 12px; background: none; border: 0; padding: 0; }
html[data-theme="hronologija"] .day-sheet .tl { padding: 12px 14px; margin-bottom: 10px; background: var(--surface); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .day-sheet .tl + .tl { border: 0; }
html[data-theme="hronologija"] .day-sheet .tl-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--k-soft); color: var(--k); }
html[data-theme="hronologija"] .tl-kind { color: var(--muted); font-weight: 600; }
html[data-theme="hronologija"] .tl-photos { width: calc(100% + 74px); margin: 12px -14px -12px -60px; border-radius: 0 0 4px 4px; height: 210px; }
html[data-theme="hronologija"] .menu-card { border: 0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .header, html[data-theme="hronologija"] .subhead, html[data-theme="hronologija"] .chat-top { background: var(--bar); color: #fff; border: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
html[data-theme="hronologija"] .header { padding: 15px 18px; }
html[data-theme="hronologija"] .header .display { font-size: 20px; line-height: 26px; font-weight: 600; }
html[data-theme="hronologija"] .header .sub, html[data-theme="hronologija"] .chat-top .small { color: rgba(255, 255, 255, 0.82); }
html[data-theme="hronologija"] .subhead .title { color: #fff; }
html[data-theme="hronologija"] .bubble { border-radius: 4px 12px 12px 12px; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .mine .bubble { border-radius: 12px 4px 12px 12px; }
html[data-theme="hronologija"] .tab.on .ico { background: transparent; }
html[data-theme="hronologija"] .card { border: 0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .btn { border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14.5px; }
/* gallery: a dense wall of photos, four across */
html[data-theme="hronologija"] .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 12px -18px 0; }
html[data-theme="hronologija"] .photo .img { aspect-ratio: 1; border-radius: 0; }
html[data-theme="hronologija"] .photo .small, html[data-theme="hronologija"] .photo .faint, html[data-theme="hronologija"] .photo .pill { display: none; }
/* the menu as a Material drawer */
html[data-theme="hronologija"] .more-list { margin: 0 -18px; border: 0; border-radius: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .more-list .list-row { min-height: 52px; padding: 6px 20px; gap: 28px; }
html[data-theme="hronologija"] .more-list .list-row + .list-row { border-top: 0; }
html[data-theme="hronologija"] .more-list .tile-ico { background: transparent; color: var(--muted); width: 24px; }
html[data-theme="hronologija"] .more-list .head { font-weight: 500; font-size: 15px; }
html[data-theme="hronologija"] .more-list .mr-chev { display: none; }
/* teacher: elevated cards for the roster, Material chips in the observation form */
html[data-theme="hronologija"] .cubby, html[data-theme="hronologija"] .cubby.expected, html[data-theme="hronologija"] .cubby.absent { border: 0; border-radius: 4px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
html[data-theme="hronologija"] .cubby.expected { box-shadow: inset 0 0 0 1.5px #BDBDBD; }
html[data-theme="hronologija"] .lw-strip .lw.on .face { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
html[data-theme="hronologija"] .lg-all { margin: 6px 0 0; }
html[data-theme="hronologija"] .lh-chips .lh { border-radius: 18px; min-height: 36px; font-size: 14px; font-weight: 500; border-width: 1px; border-color: #C9C9C9; }
html[data-theme="hronologija"] .lh-chips .lh.on { background: var(--primary); border-color: var(--primary); }
html[data-theme="hronologija"] .grid3 { gap: 4px; }
html[data-theme="hronologija"] .pick { border-radius: 4px; }