/* ===========================================================================
   DvaDoma - Components · Direction "B" (Jasna)
   Crisp, near-mono warm paper + petrol/ochre. Built on Bootstrap 5.
   Depends on tokens.css. Mobile-first. WCAG 2.1 AA. All app classes are
   dd-prefixed to avoid Bootstrap collisions (.card/.row are Bootstrap's).
   =========================================================================== */

@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:local("Inter"),url("/fonts/inter/Inter-roman.var.woff2") format("woff2");
}

/* ---- Base ---- */
html{font-size:var(--dd-fs-root);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--dd-font-sans);font-size:var(--dd-fs-base);line-height:var(--dd-lh-normal);
  color:var(--dd-text);background:var(--dd-bg);-webkit-font-smoothing:antialiased;letter-spacing:-.009em;overflow-x:hidden}
h1,h2,h3,h4{line-height:var(--dd-lh-tight);font-weight:var(--dd-fw-bold);color:var(--dd-text);letter-spacing:-.02em;margin:0}
/* Zero-specificity (:where) so a button-styled <a> keeps its OWN label colour
   in every state. A plain `a:hover{color}` (0,1,1) used to beat a filled
   button's base colour (0,1,0) on hover and repaint white text navy on a
   navy button, so the label vanished. Content links are unaffected: nothing
   else sets their colour, and the specific .x a:hover rules still win. */
:where(a){color:var(--dd-primary);text-underline-offset:2px}
:where(a:hover){color:var(--dd-primary-dark)}
.dd-muted{color:var(--dd-muted)!important}.dd-faint{color:var(--dd-faint)}
.dd-num{font-variant-numeric:tabular-nums}
.dd-caps{font-size:var(--dd-caps);letter-spacing:.12em;text-transform:uppercase;font-weight:var(--dd-fw-bold);color:var(--dd-muted)}

:focus-visible{outline:none;box-shadow:var(--dd-focus-ring);border-radius:var(--dd-radius-sm)}
.dd-skip{position:absolute;left:-999px;top:0;z-index:2000;background:var(--dd-surface);color:var(--dd-primary);
  padding:var(--dd-sp-3) var(--dd-sp-4);border-radius:0 0 var(--dd-radius-sm) 0;box-shadow:var(--dd-shadow-md)}
.dd-skip:focus{left:0}

.dd-container{max-width:var(--dd-container-max);margin-inline:auto;padding-inline:var(--dd-sp-4)}
.dd-narrow{max-width:600px;margin-inline:auto}

/* ---- Icons ---- */
.dd-ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.dd-ic-16{width:16px;height:16px}.dd-ic-18{width:18px;height:18px}

/* ===========================================================================
   Buttons
   =========================================================================== */
.dd-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--dd-radius-input);padding:12px 22px;min-height:var(--dd-tap-min);
  font-weight:var(--dd-fw-semibold);font-size:var(--dd-fs-sm);font-family:var(--dd-font-sans);
  text-decoration:none;cursor:pointer;transition:background var(--dd-transition),border-color var(--dd-transition)}
.dd-btn-lg{padding:14px 26px;font-size:var(--dd-fs-base)}
.dd-btn-sm{min-height:38px;padding:8px 14px;font-size:var(--dd-fs-sm)}
.dd-btn-primary{background:var(--dd-primary);color:#fff}
.dd-btn-primary:hover{background:var(--dd-primary-dark);color:#fff}
.dd-btn-outline{background:var(--dd-surface);color:var(--dd-text);border:1px solid var(--dd-border)}
.dd-btn-outline:hover{background:var(--dd-surface-2);border-color:var(--dd-border-strong)}
.dd-btn-ghost{background:transparent;color:var(--dd-primary);border:1px solid transparent}
.dd-btn-ghost:hover{background:var(--dd-primary-soft)}
.dd-btn-text{background:transparent;color:var(--dd-muted);font-weight:var(--dd-fw-semibold);text-decoration:none;
  border:0;border-bottom:1.5px solid transparent;padding:0 0 2px;border-radius:0;min-height:0}
.dd-btn-text:hover{color:var(--dd-text);border-color:var(--dd-text)}
.dd-btn-danger{background:transparent;color:var(--dd-danger);border:1px solid var(--dd-danger)}
.dd-btn-danger:hover{background:var(--dd-danger-soft)}
.dd-btn:disabled,.dd-btn.disabled{opacity:.55;cursor:not-allowed}
/* compact inline text button (e.g. row-level Izbriši) */
.dd-linkbtn{background:transparent;border:0;padding:6px 8px;font:inherit;font-size:13px;font-weight:var(--dd-fw-semibold);color:var(--dd-primary);cursor:pointer;border-radius:8px;white-space:nowrap}
.dd-linkbtn:hover{background:rgba(25,27,26,.05)}
.dd-linkbtn--danger{color:var(--dd-danger)}
.dd-linkbtn--danger:hover{background:var(--dd-danger-soft)}
/* quick-fill suggestion chips (add-event form) */
.dd-chipset{display:flex;flex-wrap:wrap;gap:8px}
.dd-suggest{background:var(--dd-primary-soft);color:var(--dd-primary-dark);border:1px solid transparent;border-radius:var(--dd-radius-pill);padding:6px 13px;font:inherit;font-size:13px;font-weight:var(--dd-fw-semibold);cursor:pointer}
.dd-suggest:hover{background:var(--dd-primary);color:#fff}
.dd-btn-block{width:100%}

/* Legacy Bootstrap-.btn aliases used by landing/auth (btn-dd-*) - same B look */
.btn{border-radius:var(--dd-radius-input);min-height:var(--dd-tap-min);font-weight:var(--dd-fw-semibold);padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.btn-lg{padding:14px 26px;font-size:var(--dd-fs-base)}
.btn.btn-sm{min-height:38px;padding:8px 14px;font-size:var(--dd-fs-sm)}
.btn-dd-primary{background:var(--dd-primary);color:#fff;border:0}
.btn-dd-primary:hover{background:var(--dd-primary-dark);color:#fff}
.btn-dd-outline{background:var(--dd-surface);color:var(--dd-text);border:1px solid var(--dd-border)}
.btn-dd-outline:hover{background:var(--dd-surface-2);border-color:var(--dd-border-strong)}
.btn-dd-ghost{background:transparent;color:var(--dd-primary);border:1px solid transparent}
.btn-dd-ghost:hover{background:var(--dd-primary-soft)}

/* ===========================================================================
   Cards & panels
   =========================================================================== */
.dd-card{background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:var(--dd-radius-card);
  box-shadow:var(--dd-shadow-sm);padding:var(--dd-sp-5)}
.dd-card--flat{box-shadow:none}
.dd-card-title{font-size:var(--dd-fs-lg);font-weight:var(--dd-fw-semibold);margin:0 0 var(--dd-sp-2)}
.dd-card-sub{color:var(--dd-muted);font-size:var(--dd-fs-sm);margin:0}

/* panel = card with an inner header + divided rows */
.dd-panel{background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:var(--dd-radius-card);
  box-shadow:var(--dd-shadow-sm);overflow:hidden}
.dd-panel-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px 15px;border-bottom:1px solid var(--dd-hair)}
.dd-panel-head .t{font-size:var(--dd-fs-sm);font-weight:var(--dd-fw-bold)}
.dd-panel-head .more{color:var(--dd-muted);font-size:13px;font-weight:var(--dd-fw-semibold);text-decoration:none;display:inline-flex;gap:5px;align-items:center}
.dd-panel-head .more:hover{color:var(--dd-primary)}

/* section label with optional attention dot */
.dd-slabel{display:flex;align-items:center;gap:8px;margin:34px 2px 12px}
.dd-slabel .dot{width:6px;height:6px;border-radius:50%;background:var(--dd-secondary)}

/* consistent page header (title + optional action) - SAME across all screens.
   Matches the approved Koledar header: title on its own line, action below
   (full-width) on mobile; side-by-side on desktop. */
.dd-page-head{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.dd-page-head h1{font-size:var(--dd-fs-xl);font-weight:var(--dd-fw-bold);letter-spacing:-.02em;margin:0}
.dd-page-head .dd-btn{width:100%;justify-content:center}
@media (min-width:768px){
  .dd-page-head{flex-direction:row;align-items:center}
  .dd-page-head h1{flex:1;min-width:0}
  .dd-page-head .dd-btn{width:auto}
}

/* ===========================================================================
   Forms
   =========================================================================== */
.form-label{display:block;font-weight:var(--dd-fw-medium);font-size:var(--dd-fs-sm);color:var(--dd-text);margin-bottom:.35rem}
.form-label .dd-req{color:var(--dd-danger)}
.form-control,.form-select{display:block;width:100%;box-sizing:border-box;border:1px solid var(--dd-border);border-radius:var(--dd-radius-input);
  padding:.7rem .9rem;min-height:var(--dd-tap-min);color:var(--dd-text);background:var(--dd-surface);font-size:var(--dd-fs-base);
  /* form controls do NOT inherit the page font on their own: a bare input/select
     falls back to the browser default (Arial) and a textarea to monospace. Without
     this line every form in the app was typeset in a different family than the page
     around it, which is the locked design not being applied rather than a choice. */
  font-family:inherit}
.form-control::placeholder{color:var(--dd-faint)}
.form-control:focus,.form-select:focus{border-color:var(--dd-primary);box-shadow:var(--dd-focus-ring)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--dd-danger)}
.dd-help{font-size:var(--dd-fs-xs);color:var(--dd-muted);margin-top:.35rem}
.dd-error{font-size:var(--dd-fs-xs);color:var(--dd-danger);margin-top:.35rem;display:flex;gap:.3rem;align-items:center}
.dd-field{margin-bottom:var(--dd-sp-4)}
/* onboarding: repeatable child rows (2nd+ get a divider) */
.dd-kidrow + .dd-kidrow{border-top:1px solid var(--dd-hair);margin-top:16px;padding-top:16px}
.dd-kidrow .dd-kidrm{margin-top:2px}

/* --- Layout compat shim - the design is self-sufficient (no Bootstrap runtime
   dependency). These cover the few Bootstrap utilities used by landing/auth so
   pages render correctly WITHOUT /css/bootstrap.min.css (which is intentionally
   not shipped). Everything else is dd-* classes. --- */
.row{display:flex;flex-wrap:wrap}
.row.align-items-center{align-items:center}
.row.g-5{gap:var(--dd-sp-7)}
[class^="col-"],[class*=" col-"]{flex:1 1 100%;min-width:0}
@media (min-width:992px){
  .col-lg-6{flex:0 0 calc(50% - (var(--dd-sp-7) / 2));max-width:calc(50% - (var(--dd-sp-7) / 2))}
}
.lead{font-size:var(--dd-fs-lg);line-height:var(--dd-lh-normal);color:var(--dd-muted)}
.spinner-border{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.15em;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:dd-spin .7s linear infinite}
.spinner-border-sm{width:1em;height:1em;border-width:.12em}
@keyframes dd-spin{to{transform:rotate(360deg)}}

/* ===========================================================================
   Status chips / badges (colour + text/icon, never colour alone)
   =========================================================================== */
.dd-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--dd-fs-xs);font-weight:var(--dd-fw-semibold);
  padding:.28rem .6rem;border-radius:var(--dd-radius-pill);border:1px solid transparent;line-height:1.4;white-space:nowrap}
.dd-chip .dd-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dd-chip--home1{background:var(--dd-primary-soft);color:var(--dd-primary-dark);border-color:#CBD6EC}
.dd-chip--home2{background:var(--dd-secondary-soft);color:var(--dd-secondary-dark);border-color:#E7D6AE}
.dd-chip--pending{background:var(--dd-secondary-soft);color:#8A6414;border-color:#E7D6AE}
.dd-chip--success{background:var(--dd-success-soft);color:var(--dd-success);border-color:#C7E4D4}
.dd-chip--danger{background:var(--dd-danger-soft);color:var(--dd-danger);border-color:#E8CBC7}
.dd-chip--neutral{background:var(--dd-surface-2);color:var(--dd-muted);border-color:var(--dd-border)}

/* status = a coloured dot + text (crisp, no pill) */
.dd-status{font-size:12px;font-weight:var(--dd-fw-semibold);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dd-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dd-status--pending{color:var(--dd-secondary-dark)}
.dd-status--success{color:var(--dd-success)}
.dd-status--danger{color:var(--dd-danger)}

/* ===========================================================================
   Alerts
   =========================================================================== */
.dd-alert{border-radius:var(--dd-radius-md);padding:var(--dd-sp-3) var(--dd-sp-4);display:flex;gap:var(--dd-sp-3);
  align-items:flex-start;border:1px solid transparent;font-size:var(--dd-fs-sm)}
.dd-alert .dd-alert-ic{flex:none;margin-top:1px}
.dd-alert--info{background:var(--dd-info-soft);border-color:#CBDEE1;color:#1C424A}
.dd-alert--success{background:var(--dd-success-soft);border-color:#C7E4D4;color:#1F5A40}
.dd-alert--warning{background:var(--dd-secondary-soft);border-color:#E7D6AE;color:#7A5A15}
.dd-alert--danger{background:var(--dd-danger-soft);border-color:#E8CBC7;color:#8A342D}

/* ===========================================================================
   App shell - top bar
   =========================================================================== */
.dd-topbar{position:sticky;top:0;z-index:900;background:rgba(243,242,238,.9);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--dd-border);height:58px;display:flex;align-items:center;gap:8px;padding:0 12px}
.dd-logo{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap;font-weight:var(--dd-fw-bold);color:var(--dd-primary);text-decoration:none;font-size:18px;letter-spacing:-.02em}
.dd-logo:hover{color:var(--dd-primary-dark)}
.dd-logo .dd-mark{width:23px;height:23px}
.dd-topbar-spacer{flex:1}
.dd-iconbtn{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:transparent;border:0;color:var(--dd-text);position:relative;cursor:pointer}
.dd-iconbtn:hover{background:rgba(25,27,26,.05)}
.dd-badge-dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--dd-secondary);border:2px solid var(--dd-bg)}
.dd-csel{display:inline-flex;align-items:center;gap:8px;background:var(--dd-surface);border:1px solid var(--dd-border);
  border-radius:var(--dd-radius-pill);padding:5px 12px 5px 5px;font-size:13.5px;font-weight:var(--dd-fw-semibold);cursor:pointer}
.dd-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:var(--dd-fw-bold);font-size:12px;background:var(--dd-primary)}
/* the child's own photo, wherever the child is named */
.dd-avatar--photo{background:var(--dd-surface-2);overflow:hidden;padding:0}
.dd-avatar--photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ===========================================================================
   App shell - bottom nav (mobile) & side nav (desktop)
   =========================================================================== */
.dd-bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:950;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.2) blur(10px);border-top:1px solid var(--dd-border);
  height:calc(var(--dd-bottomnav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex;justify-content:space-around}
.dd-navlink{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--dd-faint);text-decoration:none;font-size:10.5px;font-weight:var(--dd-fw-semibold);
  min-height:var(--dd-bottomnav-h);min-width:var(--dd-tap-min)}
.dd-navlink .dd-navic{width:22px;height:22px}
.dd-navlink.active{color:var(--dd-text)}
.dd-navlink.active .dd-navic{color:var(--dd-primary)}
.dd-sidenav{display:none}
.dd-app-main{padding:var(--dd-sp-5) var(--dd-sp-4);padding-bottom:calc(var(--dd-bottomnav-h) + env(safe-area-inset-bottom,0px) + var(--dd-sp-6));max-width:600px;margin-inline:auto}

@media (min-width:992px){
  .dd-bottomnav{display:none}
  .dd-app-shell{display:grid;grid-template-columns:var(--dd-sidenav-w) 1fr;min-height:calc(100vh - 58px)}
  .dd-sidenav{display:flex;flex-direction:column;gap:2px;padding:var(--dd-sp-4) var(--dd-sp-2);border-right:1px solid var(--dd-border);background:var(--dd-surface)}
  .dd-sidenav .dd-navlink{flex-direction:row;justify-content:flex-start;gap:var(--dd-sp-2);padding:.7rem var(--dd-sp-2);
    border-radius:var(--dd-radius-md);min-height:46px;font-size:var(--dd-fs-base)}
  .dd-sidenav .dd-navlink.active{background:var(--dd-primary-soft)}
  .dd-app-main{padding:var(--dd-sp-6);max-width:640px}
  .dd-app-main--wide{max-width:var(--dd-container-max)}
}
.dd-stack>*+*{margin-top:var(--dd-sp-4)}

/* ===========================================================================
   Danes - status statement, stat strip
   =========================================================================== */
.dd-status-head h1{font-size:var(--dd-fs-2xl);line-height:1.12;font-weight:var(--dd-fw-bold);letter-spacing:-.03em;margin:14px 0 0}
.dd-status-head h1 .home{color:var(--dd-primary)}
.dd-strip{display:flex;margin-top:var(--dd-sp-5);border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);
  background:var(--dd-surface);overflow:hidden;box-shadow:var(--dd-shadow-sm)}
.dd-strip .c{flex:1;padding:18px 20px}
.dd-strip .c+.c{border-left:1px solid var(--dd-border)}
.dd-strip .k{margin:0 0 8px}
.dd-strip .v{font-size:16px;font-weight:var(--dd-fw-bold);letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.dd-strip .v small{color:var(--dd-muted);font-weight:var(--dd-fw-semibold);font-size:12px}
.dd-strip .v .dd-ic{color:var(--dd-primary)}

/* ===========================================================================
   Calendar box - switch (segmented) + 7-day list + handover timeline
   =========================================================================== */
.dd-calbox{margin-top:var(--dd-sp-4);border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);
  background:var(--dd-surface);box-shadow:var(--dd-shadow-sm);padding:16px 20px 8px}
.dd-seg{display:inline-flex;background:var(--dd-bg);border:1px solid var(--dd-border);border-radius:11px;padding:3px;margin-bottom:20px}
.dd-seg button{border:0;background:transparent;padding:8px 18px;font-size:12.5px;font-weight:var(--dd-fw-semibold);
  border-radius:8px;color:var(--dd-muted);cursor:pointer;font-family:var(--dd-font-sans)}
.dd-seg button.on{background:var(--dd-surface);color:var(--dd-text);box-shadow:0 1px 3px rgba(25,27,26,.1)}
.dd-view[hidden]{display:none}
/* 7-day vertical list */
.dd-daylist .drow{display:flex;align-items:center;gap:16px;padding:14px 2px}
.dd-daylist .drow+.drow{border-top:1px solid var(--dd-hair)}
.dd-daylist .dt{flex:none;width:38px;text-align:center}
.dd-daylist .dt .n{font-size:17px;font-weight:var(--dd-fw-bold);letter-spacing:-.02em}
.dd-daylist .dt .w{display:block;font-size:10.5px;color:var(--dd-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;font-weight:var(--dd-fw-bold)}
.dd-daylist .drow.now .dt .n{color:var(--dd-primary)}
.dd-daylist .home{flex:1;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:var(--dd-fw-semibold)}
.dd-daylist .home .hd{width:10px;height:10px;border-radius:3px;flex:none}
.dd-daylist .home .hd.h1{background:var(--dd-home1)}.dd-daylist .home .hd.h2{background:var(--dd-home2)}
.dd-daylist .drow .tag{margin-left:auto;font-size:11px;font-weight:var(--dd-fw-bold);color:var(--dd-primary);letter-spacing:.05em}
.dd-daylist .drow .tag.mut{color:var(--dd-muted)}
/* event marker — same dot the month grid uses; shown when a day has an event that
   the single text tag does not already name. It always follows the tag. */
.dd-daylist .drow .dd-drow-dot{width:7px;height:7px;border-radius:50%;background:var(--dd-text-2);opacity:.5;flex:none;margin-left:8px}
/* Home 7-day AGENDA row: residence on top, each event on its own line below
   (a day with 3 events shows 3 lines). Only these rows (they carry .dbody) switch
   to top alignment, so the calendar's own week list is untouched. */
.dd-daylist .drow:has(.dbody){align-items:flex-start}
.dd-daylist .dbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dd-daylist .dhome{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:var(--dd-fw-semibold)}
.dd-daylist .dhome .hd{width:10px;height:10px;border-radius:3px;flex:none}
.dd-daylist .dhome .hd.h1{background:var(--dd-home1)}.dd-daylist .dhome .hd.h2{background:var(--dd-home2)}
.dd-daylist .dev{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dd-text-2);font-weight:var(--dd-fw-medium);line-height:1.2}
.dd-daylist .dev .dd-drow-dot{margin-left:0;width:6px;height:6px;opacity:.5}
/* handover timeline */
.dd-timeline{padding:2px 0 0}
.dd-tlrow{display:flex;gap:16px}
a.dd-tlrow--link{text-decoration:none;color:inherit}
a.dd-tlrow--link .dd-tlbody{border-radius:8px;transition:background .12s ease}
a.dd-tlrow--link:hover .dd-tlbody{background:var(--dd-surface-2)}
.dd-tlnode{flex:none;display:flex;flex-direction:column;align-items:center;width:16px}
.dd-tlnode .d{width:14px;height:14px;border-radius:50%;flex:none;margin-top:2px;box-sizing:border-box}
.dd-tlnode .d.now{background:var(--dd-primary)}
.dd-tlnode .d.next{background:#fff;border:3px solid var(--dd-secondary)}
.dd-tlnode .d.fut{background:#fff;border:2px solid var(--dd-border)}
/* an EVENT node in the flow: a small filled neutral dot, visibly different from a
   handover's ring so the two layers read apart at a glance */
.dd-tlnode .d.event{background:var(--dd-text-2);border:0;opacity:.5;width:9px;height:9px;margin-top:4px}
.dd-tlnode .ln{width:2px;flex:1;background:var(--dd-hair);margin:4px 0}
.dd-tlbody{flex:1;min-width:0;padding-bottom:22px}
.dd-tlrow:last-child .dd-tlbody{padding-bottom:14px}
.dd-tlbody .t{font-weight:var(--dd-fw-semibold);font-size:15px;letter-spacing:-.01em}
.dd-tlbody .t .now-tag{margin-left:8px;font-size:11px;font-weight:var(--dd-fw-bold);color:var(--dd-primary);letter-spacing:.06em}
.dd-tlbody .s{color:var(--dd-muted);font-size:13.5px;margin-top:5px;line-height:1.4}
.dd-tlbody .s b{color:var(--dd-text-2);font-weight:var(--dd-fw-semibold)}

/* ===========================================================================
   Quick actions (segmented)
   =========================================================================== */
.dd-qa{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:var(--dd-sp-4);border:1px solid var(--dd-border);
  border-radius:var(--dd-radius-md);overflow:hidden;background:var(--dd-surface);box-shadow:var(--dd-shadow-sm)}
.dd-qa a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 6px;text-decoration:none;
  color:var(--dd-text);font-size:12.5px;font-weight:var(--dd-fw-semibold);text-align:center}
.dd-qa a+a{border-left:1px solid var(--dd-hair)}
.dd-qa a:hover{background:var(--dd-surface-2)}
.dd-qa a .dd-ic{color:var(--dd-primary)}

/* ===========================================================================
   List rows (pregled, expenses, messages, threads)
   =========================================================================== */
.dd-listrow{display:flex;align-items:center;gap:16px;padding:20px;text-decoration:none;color:var(--dd-text)}
.dd-listrow+.dd-listrow{border-top:1px solid var(--dd-hair)}
.dd-listrow:hover{background:var(--dd-surface-2)}
.dd-listrow .ri{color:var(--dd-text-2);flex:none}
.dd-listrow .rm{flex:1;min-width:0;display:flex;flex-direction:column}
.dd-listrow .rt{display:block;font-weight:var(--dd-fw-semibold);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-listrow .rs{display:block;color:var(--dd-muted);font-size:13.5px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-listrow .rr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-left:12px}
.dd-listrow .amt{font-weight:var(--dd-fw-bold);font-size:16px;letter-spacing:-.02em}
.dd-listrow .chev{color:var(--dd-faint)}
.dd-avatar--msg{width:34px;height:34px;border-radius:50%;font-size:13px}
.dd-avatar--2{background:var(--dd-secondary)}

/* ===========================================================================
   Calendar (Koledar) - month grid; pending = amber DASHED (no left stripe)
   =========================================================================== */
/* calendar header - title on its own line, controls below (mobile);
   side-by-side on desktop (title never wraps) */
.dd-cal-head{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.dd-cal-nav{display:flex;align-items:center;gap:8px}
.dd-cal-nav h1{font-size:1.25rem;white-space:nowrap;margin:0;font-weight:var(--dd-fw-bold)}
.dd-cal-navbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--dd-border);background:var(--dd-surface);
  display:grid;place-items:center;color:var(--dd-text);cursor:pointer;flex:none}
.dd-cal-navbtn:hover{background:var(--dd-surface-2)}
.dd-cal-controls{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;column-gap:10px}
.dd-cal-controls .dd-seg{flex:1 1 100%;margin-bottom:0}        /* mobile: full-width row */
.dd-cal-controls .dd-btn{flex:1 1 100%;justify-content:center} /* mobile: own full-width row */
@media (min-width:768px){
  .dd-cal-head{flex-direction:row;align-items:center}
  .dd-cal-nav{margin-right:auto}
  .dd-cal-controls{flex-wrap:nowrap;row-gap:0}
  .dd-cal-controls .dd-seg{flex:0 0 auto}
  .dd-cal-controls .dd-btn{flex:0 0 auto}
}

/* month grid - airy, borderless colour blocks (modern, not gridded) */
.dd-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.dd-cal-dow{text-align:center;font-size:11px;color:var(--dd-muted);font-weight:var(--dd-fw-semibold);text-transform:uppercase;letter-spacing:.04em;padding-bottom:8px}
/* taller cell so a day can carry the number PLUS two stacked marks (e.g. a
   birthday gift over an event dot) without crowding the number. */
.dd-day{position:relative;box-sizing:border-box;background:transparent;border:1.5px solid transparent;border-radius:9px;min-height:64px;overflow:hidden}
.dd-day--home1{background:#E8EDF8}       /* ORIGINAL soft powder petrol (Maja) */
.dd-day--home2{background:#F6EFDD}       /* ORIGINAL soft powder ochre (Rok) */
.dd-day--out .dd-day-num{color:var(--dd-faint)}
.dd-day--today{box-shadow:inset 0 0 0 2px var(--dd-primary)}   /* ring, not a circle */
/* public holiday = a coloured INSET stroke along the TOP edge. A pseudo-element,
   so it never changes the cell height and coexists with the today ring; it is
   NOT an icon, which leaves the mark row free for a birthday + an event.
   The stroke is ALWAYS red: red reads as "holiday" on every background, and — unlike
   a tint-matched colour — it stays visible on the today cell, whose blue ring would
   otherwise swallow a blue edge. */
.dd-day--holiday::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:#C0392B;border-radius:9px 9px 0 0;z-index:1}
.dd-day--today .dd-day-num{font-weight:var(--dd-fw-bold);color:var(--dd-primary-dark)}
.dd-day--pending{background:transparent;border:1.5px dashed var(--dd-secondary)}
.dd-day-num{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:14px;font-weight:var(--dd-fw-semibold);line-height:1;color:var(--dd-text)}
.dd-day-init{font-size:11.5px;font-weight:var(--dd-fw-bold);letter-spacing:.03em;line-height:1}
.dd-day-init.h1{color:var(--dd-primary-dark)}.dd-day-init.h2{color:var(--dd-secondary-dark)}
.dd-day--pending .dd-day-init{color:#8A6414}
.dd-day-home{display:none;font-size:10px;font-weight:var(--dd-fw-medium);line-height:1}
.dd-day-tag{display:none;font-size:.62rem;color:var(--dd-muted);text-align:center;line-height:1.05}
/* day marks stack VERTICALLY at the bottom-centre, so a birthday gift and an
   event dot sit one above the other and both fit (holiday is the top edge, not
   a mark here). Shape = meaning; no colour to decode. */
.dd-day-ev{position:absolute;bottom:10px;left:0;right:0;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center}
.dd-day-ev svg{width:16px;height:16px;stroke:var(--dd-text-2);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.dd-day-ev svg.holiday{stroke:#C0392B}
.dd-day-dots{display:flex;gap:3px;align-items:center;line-height:0}
.dd-day-dots i{width:7px;height:7px;border-radius:50%;display:block}
/* event marker colours are DISTINCT from home colours (petrol/ochre) and from
   each other, and visible on both tinted backgrounds */
.dd-day-dots .ev-handover{background:#33406B}   /* ink - predaja */
.dd-day-dots .ev-activity{background:#6E63A6}   /* violet - dejavnost */
.dd-day-dots .ev-holiday{background:#C0392B}    /* red - praznik */
.dd-day-hoflag{width:4px;height:4px;border-radius:50%;background:var(--dd-secondary)}   /* legacy alias */
/* public-holiday day: subtle number treatment */
/* a holiday no longer outlines the number: it is just another "something is on
   this day", and the day screen names it. One square, one message. */
/* a day the current parent can add an event to → tappable */
a.dd-day{text-decoration:none;color:inherit;display:block;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}
a.dd-day--addable:hover{border-color:var(--dd-primary)}
a.dd-day--addable:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--dd-primary)}
.dd-leg-ic{flex:none}
.dd-leg-ic.holiday{color:#C0392B}

/* school-break / info banner above the grid */
.dd-cal-note{display:flex;align-items:center;gap:9px;background:var(--dd-secondary-soft);border:1px solid #EADCB8;
  border-radius:10px;padding:9px 13px;font-size:13px;color:#7A5A15;font-weight:var(--dd-fw-medium);margin-bottom:12px}
.dd-cal-note .dd-ic{color:#8A6414;flex:none}

/* organised legend (grouped: Dom / Oznake) */
.dd-cal-legend{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px 28px;padding:14px 16px;background:var(--dd-surface);
  border:1px solid var(--dd-border);border-radius:12px;box-shadow:var(--dd-shadow-xs)}
/* a wrapping flex jumbled the marks into an unreadable run; a fixed 2-column
   grid lines every mark up under the one above it — scannable in one pass. */
.dd-leg-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
@media(min-width:768px){.dd-leg-group{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dd-leg-group>.dd-leg-h{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:var(--dd-fw-bold);color:var(--dd-faint)}
.dd-leg-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dd-text-2);font-weight:var(--dd-fw-medium);white-space:nowrap}
.dd-leg-sw{width:14px;height:14px;border-radius:4px;flex:none}
.dd-leg-dot{width:8px;height:8px;border-radius:50%;flex:none}
.dd-leg-dash{width:14px;height:14px;border-radius:4px;border:1.5px dashed var(--dd-secondary);flex:none;box-sizing:border-box}

@media (min-width:768px){
  .dd-cal-grid{gap:5px}
  .dd-day{min-height:74px;align-items:flex-start;padding:8px 10px;gap:6px;border-radius:11px}
  .dd-day-num{width:auto;height:auto;min-width:24px;border-radius:6px;padding:1px 5px;font-size:13.5px}
  .dd-day-init,.dd-day-hoflag,.dd-day-home{display:none}
  .dd-day-dots{align-self:flex-start}
  .dd-day-tag{display:block;text-align:left;align-self:stretch;font-size:.66rem}
}

/* ===========================================================================
   Empty & skeleton
   =========================================================================== */
.dd-empty{text-align:center;padding:var(--dd-sp-7) var(--dd-sp-4);color:var(--dd-muted)}
.dd-empty-ic{color:var(--dd-faint);margin-bottom:var(--dd-sp-3);display:inline-block}
.dd-empty-ic.dd-ic{width:36px;height:36px}
.dd-empty-title{font-weight:var(--dd-fw-semibold);color:var(--dd-text);margin-bottom:var(--dd-sp-2)}
.dd-skel{background:linear-gradient(90deg,#ECEAE3 25%,#F4F2EC 37%,#ECEAE3 63%);background-size:400% 100%;
  animation:dd-shimmer 1.4s ease infinite;border-radius:var(--dd-radius-sm)}
.dd-skel--line{height:12px;margin-bottom:8px}.dd-skel--title{height:18px;width:55%;margin-bottom:12px}
@keyframes dd-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- utils ---- */
.dd-grid-2{display:grid;grid-template-columns:1fr;gap:var(--dd-sp-4)}
@media(min-width:560px){.dd-grid-2{grid-template-columns:1fr 1fr}}
.dd-hide-mobile{display:none}
@media(min-width:992px){.dd-hide-mobile{display:initial}.dd-hide-desktop{display:none}}

/* ── desktop gate: phone-first app; on wide screens show QR to open on mobile ── */
.dd-desktop-gate { display:none; }
@media (min-width:900px){
  body:has(.dd-desktop-gate) .dd-topbar,
  .dd-app-shell, .dd-bottomnav { display:none !important; }
  .dd-desktop-gate { display:flex; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:2rem;
    background:radial-gradient(1100px 620px at 50% -12%, var(--dd-primary-soft), transparent), var(--dd-bg); }
  .dd-gate-card { max-width:440px; text-align:center; background:var(--dd-surface); border:1px solid var(--dd-border);
    border-radius:26px; padding:2.75rem 2.5rem; box-shadow:0 44px 90px -44px rgba(24,40,44,.42); }
  .dd-gate-logo { font-size:1.7rem; font-weight:800; letter-spacing:-.025em; color:var(--dd-primary); }
  .dd-gate-card h2 { font-size:1.5rem; margin:1.35rem 0 .65rem; letter-spacing:-.02em; }
  .dd-gate-card p { color:var(--dd-muted); line-height:1.6; margin:0 0 1.9rem; }
  .dd-gate-qr { width:184px; height:184px; padding:16px; background:#fff; border:1px solid var(--dd-border); border-radius:18px; box-shadow:0 10px 24px -14px rgba(24,40,44,.35); }
  .dd-gate-url { display:block; margin-top:1.1rem; font-weight:700; color:var(--dd-primary); letter-spacing:.01em; }
}
/* keep the topbar hidden on desktop too */
@media (min-width:900px){ .dd-topbar { display:none !important; } }

/* ═══════════════════════════════════════════════════════════════
 * Family space - child Info Bank, Documents, Journal, Attachments
 * ═══════════════════════════════════════════════════════════════ */

/* profile header card */
.dd-phead{display:flex;align-items:center;gap:16px}
.dd-phead .av{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:var(--dd-fw-bold);font-size:22px;flex:none}
.dd-phead .nm{font-size:19px;font-weight:var(--dd-fw-bold);letter-spacing:-.02em}
.dd-phead .mt{color:var(--dd-muted);font-size:13.5px;margin-top:3px}

/* key/value definition rows (Info Bank sections) */
/* Info-Bank key/value GRID (otrok, dokument): label|value 2-col, stacks ≤430px.
 * Distinct class from the flex `.dd-kv` detail-row below — they are two different
 * components and must not share a name (see QA BULGU 30: the flex one silently
 * overrode this grid, breaking otrok/dokument). Container-with-.row structure. */
.dd-kvgrid{display:grid;gap:0}
.dd-kvgrid .row{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--dd-hair);align-items:baseline}
.dd-kvgrid .row:first-child{border-top:0;padding-top:2px}
.dd-kvgrid .k{color:var(--dd-muted);font-size:13.5px}
.dd-kvgrid .v{color:var(--dd-text);font-size:14.5px;font-weight:var(--dd-fw-semibold);text-align:right;overflow-wrap:anywhere}
.dd-kvgrid .v.empty{color:var(--dd-faint);font-weight:400}
@media(max-width:430px){.dd-kvgrid .row{grid-template-columns:1fr;gap:3px}.dd-kvgrid .v{text-align:left}}

/* card head with a trailing edit action */
.dd-cardrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dd-cardrow .dd-card-title{margin:0}
.dd-secedit{color:var(--dd-primary);font-size:13px;font-weight:var(--dd-fw-semibold);text-decoration:none;white-space:nowrap}
.dd-secedit:hover{text-decoration:underline}

/* file / document icon tile */
.dd-fico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--dd-primary-soft);color:var(--dd-primary)}
.dd-fico--zdravje{background:var(--dd-success-soft);color:var(--dd-success)}
.dd-fico--pravno{background:var(--dd-secondary-soft);color:var(--dd-secondary-dark)}
.dd-fico--nujni{background:#F7E7E7;color:#B23A48}
.dd-fico--sola{background:#EDE9F6;color:#6E63A6}
.dd-fico--varstvo{background:#F6E9EA;color:#A2524E}
.dd-fico--dejavnosti{background:#E4F0ED;color:#3E7C6A}
.dd-fico--drugo{background:var(--dd-surface-2);color:var(--dd-muted)}

/* filter chip row */
.dd-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dd-filter{padding:7px 13px;border-radius:999px;border:1px solid var(--dd-border);background:var(--dd-surface);color:var(--dd-muted);font-size:13px;font-weight:var(--dd-fw-semibold);text-decoration:none;cursor:pointer}
.dd-filter.on{background:var(--dd-primary);color:#fff;border-color:var(--dd-primary)}

/* message / journal attachments + photo thumbs */
.dd-attach{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:9px 12px;border:1px solid var(--dd-border);border-radius:11px;background:var(--dd-surface-2);font-size:13px;color:var(--dd-text-2);text-decoration:none;max-width:100%}
.dd-attach .dd-ic{color:var(--dd-primary);flex:none}
.dd-attach .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--dd-fw-semibold)}
.dd-attach .sz{color:var(--dd-muted);flex:none}
.dd-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dd-thumb{width:66px;height:66px;border-radius:11px;object-fit:cover;border:1px solid var(--dd-border);background:var(--dd-surface-2);display:grid;place-items:center;color:var(--dd-faint)}

/* journal entry photo: the whole point of attaching one is that the other parent
   SEES it, so it gets real size, not a 66px chip. Capped so a portrait photo
   cannot push the timeline into a scroll of its own. */
.dd-jphoto{display:block;width:100%;max-width:300px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--dd-border);background:var(--dd-surface-2);margin-top:12px}
.dd-jacts{display:flex;align-items:center;gap:14px;margin-top:12px}
.dd-jacts form{margin:0}
.dd-jedit{margin-top:12px;padding-top:14px;border-top:1px solid var(--dd-border)}
.dd-jedit summary{cursor:pointer;font-size:13.5px;font-weight:var(--dd-fw-semibold);color:var(--dd-text-2);list-style:none}
.dd-jedit summary::-webkit-details-marker{display:none}
.dd-jedit summary:hover{color:var(--dd-primary)}

/* attach button in composer */
.dd-attachbtn{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px dashed var(--dd-border-strong);border-radius:11px;background:var(--dd-surface);color:var(--dd-text-2);font-size:13.5px;font-weight:var(--dd-fw-semibold);cursor:pointer;width:100%;box-sizing:border-box;justify-content:center}
.dd-attachbtn:hover{border-color:var(--dd-primary);color:var(--dd-primary)}
.dd-attachbtn input{display:none}

/* ═══ child avatar (photo or monogram) + children hub cards ═══ */
.dd-kidav{position:relative;width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:var(--dd-fw-bold);font-size:20px;overflow:visible}
.dd-kidav .ph{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.dd-kidav .mono{width:100%;height:100%;border-radius:50%;display:grid;place-items:center}
.dd-kidav--lg{width:78px;height:78px;font-size:29px}
.dd-kidav .cam{position:absolute;right:-2px;bottom:-2px;width:23px;height:23px;border-radius:50%;background:var(--dd-surface);border:1px solid var(--dd-border);display:grid;place-items:center;color:var(--dd-muted);box-shadow:var(--dd-shadow-xs)}
.dd-kidav--lg .cam{width:28px;height:28px;right:0;bottom:0}
.dd-kidav .cam svg{width:12px;height:12px}
.dd-kidav--lg .cam svg{width:14px;height:14px}
.dd-kidcard{display:flex;align-items:center;gap:15px;padding:16px;background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:16px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.dd-kidcard:hover{border-color:var(--dd-border-strong);box-shadow:var(--dd-shadow-sm)}
.dd-kidcard + .dd-kidcard{margin-top:12px}
.dd-kidcard .gr{flex:1;min-width:0}
.dd-kidcard .nm{font-size:16px;font-weight:var(--dd-fw-bold);letter-spacing:-.01em;color:var(--dd-text)}
.dd-kidcard .ag{color:var(--dd-muted);font-size:13px;margin-top:2px}
.dd-kidcard .st{margin-top:8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dd-kidcard .st .sub{color:var(--dd-muted);font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.dd-kidcard .st .sub .dd-ic{width:14px;height:14px;color:var(--dd-muted)}
.dd-kidcard .rr{flex:none;color:var(--dd-faint);display:flex;align-items:center}
.dd-kidcard .rr .dd-ic{width:18px;height:18px}
.dd-kidcard .dd-kidav{width:78px;height:78px;font-size:30px}
.dd-kidcard{gap:17px}
/* warm "where today" line — no pill chip, no swap icon (home name colored) */
.dd-kidwhere{margin-top:6px;font-size:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;line-height:1.4}
.dd-kidwhere .wh{font-weight:var(--dd-fw-bold)}
.dd-kidwhere .wh--1{color:var(--dd-primary)}
.dd-kidwhere .wh--2{color:var(--dd-secondary-dark)}
.dd-kidwhere .sep{color:var(--dd-faint)}
.dd-kidwhere .nx{color:var(--dd-muted)}
/* home-name colour (shared by home cards + calendar list) */
.wh{font-weight:var(--dd-fw-bold)}
.wh--1{color:var(--dd-primary)}
.wh--2{color:var(--dd-secondary-dark)}
/* calendar week/list day badge */
.dd-cal-daybadge{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;line-height:1;text-align:center}
.dd-cal-daybadge b{font-size:16px;font-weight:var(--dd-fw-bold);color:var(--dd-text)}
.dd-cal-daybadge i{font-size:10px;font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-muted);margin-top:3px}
.dd-cal-daybadge.d1{background:var(--dd-primary-soft)}
.dd-cal-daybadge.d2{background:var(--dd-secondary-soft)}

/* ═══ topbar child switcher (dropdown) ═══ */
.dd-childsel-wrap{position:relative;min-width:0;flex:0 1 auto}
.dd-childsel{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:1px solid var(--dd-border);background:var(--dd-surface);border-radius:var(--dd-radius-pill);padding:5px 10px 5px 5px;cursor:pointer;font:inherit;color:var(--dd-text)}
.dd-childsel .dd-avatar{width:24px;height:24px}
.dd-childsel:hover{border-color:var(--dd-border-strong)}
.dd-childsel .dd-avatar,.dd-childsel-chev{flex:none}
.dd-childsel-nm{font-weight:var(--dd-fw-semibold);font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-childsel-chev{color:var(--dd-muted);transition:transform .15s ease}
.dd-childsel[aria-expanded="true"] .dd-childsel-chev{transform:rotate(90deg)}
.dd-avatar--all{background:var(--dd-primary-soft);color:var(--dd-primary);font-size:13px}
.dd-childmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:214px;background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:14px;box-shadow:var(--dd-shadow-lg);padding:6px;z-index:60}
.dd-childmenu[hidden]{display:none}
.dd-childmenu-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--dd-text);font-weight:var(--dd-fw-semibold);font-size:14px}
.dd-childmenu-item:hover{background:var(--dd-surface-2)}
.dd-childmenu-item.on{background:var(--dd-primary-soft);color:var(--dd-primary-dark)}
.dd-csel--static{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:var(--dd-fw-semibold);font-size:14px}
.dd-csel--static>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dd-csel--static .dd-avatar{flex:none}

/* ═══ global quick-action FAB ═══ */
.dd-fab-wrap{position:fixed;right:16px;bottom:calc(var(--dd-bottomnav-h) + env(safe-area-inset-bottom,0px) + 16px);z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(min-width:992px){.dd-fab-wrap{bottom:26px}}
.dd-fab{width:58px;height:58px;border-radius:50%;background:var(--dd-primary);color:#fff;border:0;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(30,78,140,.6);cursor:pointer;transition:transform .18s ease,background .15s ease}
.dd-fab:hover{background:var(--dd-primary-dark)}
.dd-fab:active{transform:scale(.94)}
.dd-fab svg{width:26px;height:26px;transition:transform .22s ease}
.dd-fab[aria-expanded="true"] svg{transform:rotate(45deg)}
.dd-fab-menu{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.dd-fab-menu[hidden]{display:none}
.dd-fab-item{display:inline-flex;align-items:center;gap:12px;background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:var(--dd-radius-pill);padding:9px 18px 9px 11px;text-decoration:none;color:var(--dd-text);font-weight:var(--dd-fw-semibold);font-size:14.5px;box-shadow:var(--dd-shadow-md);animation:dd-fab-in .18s ease both}
.dd-fab-item:hover{border-color:var(--dd-border-strong)}
.dd-fab-item .ic{width:32px;height:32px;border-radius:10px;background:var(--dd-primary-soft);color:var(--dd-primary);display:grid;place-items:center;flex:none}
.dd-fab-item .ic svg{width:18px;height:18px}
@keyframes dd-fab-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ═══ interactive photo cropper ═══ */
.dd-crop{position:fixed;inset:0;z-index:200;background:rgba(18,22,28,.62);display:flex;align-items:center;justify-content:center;padding:20px}
.dd-crop[hidden]{display:none}
.dd-crop-box{background:var(--dd-surface);border-radius:20px;padding:20px;width:min(360px,92vw);box-shadow:var(--dd-shadow-lg)}
.dd-crop-head{font-weight:var(--dd-fw-bold);font-size:1.05rem;margin-bottom:14px;text-align:center}
.dd-crop-stage{position:relative;width:280px;height:280px;max-width:100%;margin:0 auto;border-radius:14px;overflow:hidden;background:#0b0d12;touch-action:none;cursor:grab}
.dd-crop-stage:active{cursor:grabbing}
.dd-crop-img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none}
.dd-crop-ring{position:absolute;inset:0;box-shadow:0 0 0 999px rgba(11,13,18,.5);border-radius:50%;pointer-events:none}
.dd-crop-zoom{width:100%;margin:16px 0 4px;accent-color:var(--dd-primary)}
.dd-crop-actions{display:flex;gap:10px;margin-top:12px}
.dd-crop-actions .dd-btn{flex:1}

/* ═══ standard back link - ONE component, used on every sub-page.
 *   The chevron is drawn in CSS (icon-independent) so it ALWAYS points left.
 *   No page carries an inline arrow glyph or an <svg> chevron for "back". ═══ */
.dd-back{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 12px;margin-bottom:14px;border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);background:var(--dd-surface);color:var(--dd-text-2);font-size:13.5px;font-weight:var(--dd-fw-semibold);line-height:1;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.dd-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none}
.dd-back:hover{border-color:var(--dd-primary);color:var(--dd-primary)}
.dd-back:active{transform:translateY(1px)}

/* ═══ events: quick add (natural language), repeat + reminder badges ═══
 *   The quick line PARSES into the fields below; it never saves on its own, so
 *   the read-back stays visible and correctable. ═══ */
.dd-quick-row{display:flex;gap:8px;align-items:stretch}
.dd-quick-row .form-control{flex:1;min-width:0}
.dd-quick-row .dd-btn{flex:none;white-space:nowrap}
.dd-quick-out{margin-top:10px;padding:10px 12px;border-radius:var(--dd-radius-md);background:var(--dd-primary-soft);
  color:var(--dd-primary-dark);font-size:13.5px;font-weight:var(--dd-fw-semibold);line-height:1.45}
.dd-quick-out[hidden]{display:none}
.dd-sep{height:1px;background:var(--dd-hair);margin:2px 0 18px}
.dd-hint{font-size:var(--dd-fs-xs);color:var(--dd-muted);margin:.45rem 0 0}
.dd-ic-14{width:14px;height:14px}
/* badges next to a list-row title (repeat / reminder). Scoped modifier so the
   plain .rt rows on other pages keep their single-line ellipsis behaviour. */
.dd-listrow .rt.dd-rt-badged{display:flex;align-items:center;gap:6px}
.dd-listrow .rt.dd-rt-badged .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-rowbadge{flex:none;color:var(--dd-muted)}
/* the Koledar agenda carries date + time + place + repeat: let that line WRAP
   instead of ellipsising the repeat away on a 390px screen. */
.dd-listrow .rs.dd-rs-wrap{white-space:normal;overflow:visible;text-overflow:clip}
/* a notification title is a SENTENCE, not a label: let it wrap instead of
   ellipsising the important half away on a phone. */
.dd-listrow .rt.dd-rt-wrap{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}

/* ═══ Koledar "Vsi otroci": one grid, one chip per child, coloured by the HOME
 *   that child is in that day. The cell background cannot carry the answer any
 *   more (children can be in different homes on the same day), so the cell goes
 *   neutral and the chips do the talking. ═══ */
/* "Vsi otroci": the grid keeps EXACTLY its ordinary look — a 46px cell can carry
   one fact, so it carries the one that matters: are the children together (one
   home tint, as in the single-child grid) or APART that day (both tints, split).
   Who exactly is where is a tap away, and spelled out in Teden / Seznam. */
/* "Vsi otroci" when the children are on DIFFERENT days: a 46px cell cannot say
   who is where, so it says nothing about residence and carries the event layer
   only. Painting two colours there was decoration, not information. */
.dd-cal--nores .dd-day--nores{background:var(--dd-surface);border:1px solid var(--dd-hair)}
.dd-cal-note--plain{background:var(--dd-surface);border:1px solid var(--dd-hair);color:var(--dd-text-2)}
.dd-cal-note--plain .dd-ic{color:var(--dd-muted)}
.dd-cal-note--plain a{color:var(--dd-primary);font-weight:var(--dd-fw-semibold)}
/* per-child rows in the week/list view */
.dd-daylist .drow .kidrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;flex:1}
.dd-kidtag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;border-radius:var(--dd-radius-pill);
  font-size:12px;font-weight:var(--dd-fw-semibold);background:var(--dd-surface-2);color:var(--dd-text-2)}
.dd-kidtag .b{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font-size:9.5px;font-weight:var(--dd-fw-bold);line-height:1}
.dd-kidtag .b.h1{background:#CBD6EC;color:var(--dd-primary-dark)}
.dd-kidtag .b.h2{background:#EADCB9;color:#7A5E1F}

/* ═══ Danes hero identity: the selected child's photo next to the date line.
 *   Sits ABOVE the sentence so the headline keeps the full width. ═══ */
.dd-heroid{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dd-heroid .dd-caps{margin:0}
.dd-heroav{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;display:block;
  background:var(--dd-surface-2);box-shadow:0 0 0 3px var(--dd-surface),0 0 0 4px var(--dd-hair)}
.dd-heroav img{width:100%;height:100%;object-fit:cover;display:block}
.dd-heroav .mono{width:100%;height:100%;display:grid;place-items:center;color:#fff;
  font-weight:var(--dd-fw-bold);font-size:21px;letter-spacing:.01em}

/* ═══ Stroški: the derived balance ("kdo komu dolguje"). Tinted by DIRECTION so
 *   the answer is readable before the number is. No edge stripe (design rule). ═══ */
.dd-balance-line{margin:0;font-size:19px;font-weight:var(--dd-fw-bold);line-height:1.35;letter-spacing:-.01em}
.dd-balance--they_owe_me{background:var(--dd-success-soft)}
.dd-balance--they_owe_me .dd-balance-line{color:#1F5A40}
.dd-balance--i_owe_them{background:var(--dd-secondary-soft,#F6EFDD)}
.dd-balance--i_owe_them .dd-balance-line{color:#7A5E1F}
.dd-balance--settled .dd-balance-line{color:var(--dd-text-2);font-weight:var(--dd-fw-semibold);font-size:17px}

/* a day row that opens the day view */
.dd-daylist .drow--link{text-decoration:none;color:inherit;cursor:pointer}
.dd-daylist .drow--link:hover{background:var(--dd-surface-2)}
/* key/value rows on a detail card */
.dd-kv{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--dd-hair)}
.dd-kv:first-child{border-top:0;padding-top:0}
.dd-kv .k{flex:none;width:104px;color:var(--dd-muted);font-size:13.5px}
.dd-kv .v{flex:1;min-width:0;font-size:14.5px;font-weight:var(--dd-fw-semibold);line-height:1.4}
.dd-daybtns{display:flex;flex-direction:column;gap:10px;margin-top:20px}

/* ═══ Predlagaj spremembo: the screen is a sentence, so the parts look like one.
 *   "Zdaj" is a quiet fact box; the choice is two real homes, not a <select>. ═══ */
.dd-propose-who{display:flex;align-items:center;gap:10px;font-size:15px}
.dd-nowbox{background:var(--dd-surface-2);border-radius:var(--dd-radius-md);padding:12px 14px;margin-bottom:14px}
.dd-nowbox .dd-caps{display:block;margin-bottom:4px}
.dd-nowbox-line{margin:0;font-size:15px;font-weight:var(--dd-fw-semibold);color:var(--dd-text);line-height:1.4}
.dd-choices{display:flex;flex-direction:column;gap:10px}
.dd-choice{display:block;cursor:pointer}
.dd-choice input{position:absolute;opacity:0;width:0;height:0}
.dd-choice-body{display:flex;align-items:center;gap:10px;padding:14px;border:1.5px solid var(--dd-border);
  border-radius:var(--dd-radius-md);background:var(--dd-surface);transition:border-color .12s ease,background .12s ease}
.dd-choice input:checked + .dd-choice-body{border-color:var(--dd-primary);background:var(--dd-primary-softer)}
.dd-choice input:focus-visible + .dd-choice-body{box-shadow:var(--dd-focus-ring)}
.dd-choice-sw{width:16px;height:16px;border-radius:5px;flex:none}
.dd-choice-sw.h1{background:var(--dd-primary)}.dd-choice-sw.h2{background:var(--dd-secondary)}
.dd-choice-nm{font-weight:var(--dd-fw-semibold);font-size:15.5px;flex:1}
.dd-choice-tag{font-size:12px;font-weight:var(--dd-fw-semibold);color:var(--dd-muted);
  background:var(--dd-surface-2);border-radius:var(--dd-radius-pill);padding:3px 9px}

/* a note that COLLAPSES rather than disappears: the state it explains persists */
.dd-cal-note--plain{position:relative;padding-right:42px}
/* `hidden` must actually hide: the base .dd-cal-note sets display:flex, which
   beats the UA's [hidden]{display:none}. Caught by a screenshot, not by the DOM. */
.dd-cal-note[hidden],.dd-cal-why[hidden]{display:none !important}
.dd-notex{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--dd-muted);cursor:pointer;border-radius:8px}
.dd-notex svg{transform:rotate(-90deg)}
.dd-notex:hover{background:var(--dd-surface-2);color:var(--dd-text)}
.dd-cal-why{display:inline-block;margin:0 0 12px;border:0;background:transparent;padding:2px 0;
  color:var(--dd-muted);font:inherit;font-size:13px;font-weight:var(--dd-fw-semibold);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dd-cal-why:hover{color:var(--dd-primary)}

/* an action that belongs to a panel's own layer, rendered as its last row */
.dd-listrow--action .rt{color:var(--dd-primary);font-weight:var(--dd-fw-semibold)}
.dd-listrow--action .ri{color:var(--dd-primary)}

/* ═══ a proposal, read as "from -> to" ═══ */
.dd-swap{display:flex;align-items:center;gap:10px}
.dd-swap-side{flex:1;min-width:0;background:var(--dd-surface-2);border-radius:var(--dd-radius-md);padding:11px 12px}
.dd-swap-side p{margin:3px 0 0;font-size:15px;font-weight:var(--dd-fw-semibold);line-height:1.35}
.dd-swap-side--new{background:var(--dd-primary-softer)}
.dd-swap-side--new p{color:var(--dd-primary-dark)}
.dd-swap-arrow{flex:none;color:var(--dd-muted);width:18px;height:18px}

/* ONE marker per day: "there is something here". Neutral, quiet, never competing
   with the day number or the residence colour. */
.dd-day-dot{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--dd-text-2);opacity:.55}
.dd-day--today .dd-day-dot{background:var(--dd-primary);opacity:1}
.dd-leg-dot{width:6px;height:6px;border-radius:50%;background:var(--dd-text-2);opacity:.55;flex:none}

/* who added an entry: one letter, in that parent's own colour. The convention a
   shared document uses — no badge, no stripe, no extra vocabulary. The author's
   OWN entries carry a filled mark, the other parent's an outlined one, so "mine"
   is legible at a glance without a word. */
/* holiday / event marks live in the tuned .dd-day-ev row (bottom-centre, 15px):
   holiday = the sun icon in red, event = one neutral dot, side by side. */
.dd-day-ev .ev-dot{width:6px;height:6px;border-radius:50%;background:var(--dd-text-2);opacity:.55;flex:none}
/* handover has no glyph — it is the boundary where the two home colours meet */
.dd-leg-swap{width:16px;height:14px;border-radius:4px;flex:none;
  background:linear-gradient(90deg,#E8EDF8 0 50%,#F6EFDD 50% 100%)}
/* holiday legend = the red top-edge stroke the grid draws */
.dd-leg-holi{width:16px;height:14px;border-radius:4px;flex:none;background:var(--dd-surface-2);
  box-shadow:inset 0 4px 0 0 #C0392B}

/* --- subscription strip -----------------------------------------------------
   App-level chrome, directly under the topbar. It is NOT a page card: it must
   never sit between a page's "Nazaj" pill and its <h1>, which is exactly what a
   card rendered before the page content did. Full-bleed, one line where it
   fits, wraps on narrow screens. Colour never carries the meaning alone — the
   sentence does; the icon and tint only reinforce it. */
.dd-billbar{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  padding:9px 16px;background:var(--dd-warning-soft);border-bottom:1px solid #E7D6AE;
  color:#7A5A15;font-size:var(--dd-fs-sm);line-height:1.45}
.dd-billbar .dd-ic{flex:none;margin-top:2px;color:#8A6414}
.dd-billbar span{flex:1 1 0%;min-width:0}   /* 0% basis: the text shares the icon's
  line instead of pushing itself onto the next one, which left the lock icon
  stranded alone on the first row. */
.dd-billbar strong{font-weight:var(--dd-fw-semibold)}
.dd-billbar a{color:#7A5A15;font-weight:var(--dd-fw-semibold);text-decoration:underline;white-space:nowrap}
.dd-billbar--stop{background:var(--dd-danger-soft);border-bottom-color:#E8CBC7;color:#8A342D}
.dd-billbar--stop .dd-ic{color:#8A342D}
.dd-billbar--stop a{color:#8A342D}