/* VeraKid prototype component library. Depends on tokens.css. Every page: — proto.js injects shells. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh} img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0} h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:0;text-wrap:balance;letter-spacing:-.01em} h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} p{margin:0} .num{font-variant-numeric:tabular-nums} .muted{color:var(--ink-3)} .muted2{color:var(--ink-2)} .small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)} .eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .stack{display:flex;flex-direction:column;gap:12px} .stack-lg{display:flex;flex-direction:column;gap:20px} .row{display:flex;align-items:center;gap:8px} .row-between{display:flex;align-items:center;justify-content:space-between;gap:8px} .wrap{flex-wrap:wrap} .grow{flex:1;min-width:0} .center{text-align:center} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media (max-width:560px){.grid-2{grid-template-columns:minmax(0,1fr)}} .section{display:flex;flex-direction:column;gap:10px} .link{color:var(--primary);font-weight:700;font-size:var(--fs-sm)} .hidden{display:none!important} [data-lucide]{width:20px;height:20px;flex:none} .i-sm [data-lucide],[data-lucide].i-sm{width:16px;height:16px} /* ---------- Proto bar ---------- */ .proto-bar button[aria-pressed="true"]{background:#6FB08C;color:#0F1F17;border-color:transparent} /* ---------- Portal (phone) shell ---------- */ .phone{width:var(--phone-w);max-width:100%;background:var(--bg);border-radius:44px;box-shadow:0 0 0 10px #1a1a1d,0 0 0 12px #3a3a3f,var(--shadow-lg);position:relative;overflow:hidden;display:flex;flex-direction:column;height:var(--phone-h);max-height:calc(100vh - 100px)} .tabbar a[aria-current="page"]{color:var(--primary)} .tabbar a[aria-current="page"]::before{content:"";position:absolute;top:-7px;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--primary)} /* ---------- Backoffice shell ---------- */ .bo{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:calc(100vh - 38px)} /* brand mark: VeraKid house icon (assets/logo-mark.png); wordmark text stays CSS so it follows theme/school brand */ .nav-item[aria-current="page"]{background:var(--primary-soft);color:var(--primary-soft-ink)} @media (max-width:1024px){ .bo{grid-template-columns:minmax(0,1fr)} } .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:45;display:none} .scrim.show{display:block} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-md);font-weight:700;font-size:var(--fs-sm);border:1px solid transparent;transition:background .15s,transform .05s;white-space:nowrap;min-width:var(--touch)} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--primary);color:var(--primary-ink)} .btn-primary:hover{filter:brightness(1.05)} .btn-secondary{background:var(--bg-elev);border-color:var(--line-strong);color:var(--ink)} .btn-secondary:hover{background:var(--bg-hover)} .btn-soft{background:var(--primary-soft);color:var(--primary-soft-ink)} .btn-accent{background:var(--accent);color:var(--accent-ink)} .btn-ghost{color:var(--ink-2)} .btn-ghost:hover{background:var(--bg-hover)} .btn-sm{height:32px;padding:0 10px;font-size:var(--fs-xs);border-radius:var(--r-sm)} .btn-lg{height:52px;padding:0 22px;font-size:var(--fs-md);border-radius:var(--r-lg)} .btn-block{width:100%} .btn .lbl{display:none} @media (min-width:640px){.btn .lbl{display:inline}} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink-2);position:relative} .icon-btn:hover{background:var(--bg-hover)} .icon-btn .dot{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid var(--bg)} .btn[disabled],.btn:disabled{opacity:.5;pointer-events:none} /* ---------- Cards / surfaces ---------- */ .card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px} .card.pad-0{padding:0;overflow:hidden} .card-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);display:flex;align-items:center;gap:8px} .well{background:var(--bg-sunken);border-radius:var(--r-md);padding:10px 12px} .list{display:flex;flex-direction:column} .list>*+*{border-top:1px solid var(--line)} .list-row{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:var(--touch)} .card .list-row:first-child{padding-top:2px} .card .list-row:last-child{padding-bottom:2px} .list-row .body{flex:1;min-width:0} .list-row .body b{display:block;font-weight:700} .list-row .body span{display:block;color:var(--ink-3);font-size:var(--fs-sm)} .list-row.link:hover{background:var(--bg-hover);margin:0 -14px;padding-left:14px;padding-right:14px} .card.pad-0 .list-row{padding:12px 14px} /* ---------- Badges / chips ---------- */ .badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;background:var(--bg-sunken);color:var(--ink-2);white-space:nowrap} .badge.primary{background:var(--primary-soft);color:var(--primary-soft-ink)} .badge.accent{background:var(--accent-soft);color:var(--accent-soft-ink)} .badge.success{background:var(--success-soft);color:var(--success)} .badge.warning{background:var(--warning-soft);color:var(--warning-ink)} .badge.danger{background:var(--danger-soft);color:var(--danger)} .badge.info{background:var(--info-soft);color:var(--info)} .badge.outline{background:transparent;border:1px solid var(--line-strong)} .badge [data-lucide]{width:13px;height:13px} .chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--bg-elev);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);white-space:nowrap} .chip[aria-pressed="true"],.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-4)} .dot.success{background:var(--success)} .dot.warning{background:var(--warning)} .dot.danger{background:var(--danger)} .dot.info{background:var(--info)} .dot.primary{background:var(--primary)} .tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:var(--fs-xs);font-weight:700;background:var(--primary-soft);color:var(--primary-soft-ink)} .tag.meal{background:var(--r-meal-soft);color:var(--r-meal-ink)} .tag.nap{background:var(--r-nap-soft);color:var(--r-nap-ink)} .tag.toilet{background:var(--r-toilet-soft);color:var(--r-toilet-ink)} .tag.mood{background:var(--r-mood-soft);color:var(--accent-soft-ink)} .tag.health{background:var(--r-health-soft);color:var(--r-health)} .tag.activity{background:var(--r-activity-soft);color:var(--primary-soft-ink)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag.mood{color:var(--r-mood)}} .consent{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:var(--r-pill)} .consent.ok{background:var(--success-soft);color:var(--success)} .consent.no{background:var(--danger-soft);color:var(--danger)} .consent.partial{background:var(--warning-soft);color:var(--warning-ink)} .ai-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)} .ai-tag [data-lucide]{width:12px;height:12px;color:var(--accent)} /* ---------- Avatars ---------- */ .avatar{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:var(--ink-3);flex:none;position:relative;overflow:hidden;font-family:var(--font-display)} .avatar.sm{width:32px;height:32px;font-size:12px} .avatar.xs{width:24px;height:24px;font-size:10px} .avatar.papatya{background:var(--c-papatya);color:var(--accent-ink)} .avatar.gokkusagi{background:var(--c-gokkusagi)} .avatar.yildiz{background:var(--c-yildiz)} .avatar.staff{background:var(--primary);color:var(--primary-ink)} .avatar.parent{background:#6f6386} .avatar .st{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-elev)} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:6px} .field label,.label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)} .input,.select{width:100%;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:var(--r-md);min-height:44px;padding:10px 12px;font-size:var(--fs-base)} .input:focus,.select:focus{outline:2px solid var(--primary);outline-offset:0;border-color:transparent} .select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px} .switch{position:relative;width:46px;height:26px;border-radius:13px;background:var(--line-strong);flex:none;transition:.2s} .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:var(--shadow-sm)} .switch[aria-checked="true"]{background:var(--primary)} .switch[aria-checked="true"]::after{left:23px} .check{display:flex;align-items:center;gap:10px;min-height:var(--touch);font-size:var(--fs-base)} .check input{width:20px;height:20px;accent-color:var(--primary)} .segment{display:inline-flex;background:var(--bg-sunken);border-radius:var(--r-md);padding:3px;gap:2px;max-width:100%;overflow-x:auto} .segment button,.segment a{flex:1;height:34px;padding:0 12px;border-radius:9px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap} .segment [aria-pressed="true"],.segment [aria-current="page"]{background:var(--bg-elev);color:var(--ink);box-shadow:var(--shadow-sm)} .segment.block{display:flex;width:100%} .otp{display:flex;gap:8px;justify-content:center} .otp input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg-elev)} .value-seg button[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-soft-ink)} .steps{display:flex;gap:6px} .steps span{flex:1;height:4px;border-radius:2px;background:var(--line)} .steps span.done{background:var(--primary)} .steps span.now{background:var(--accent)} /* ---------- Tabs ---------- */ .tabs [aria-current="page"]{color:var(--primary);border-color:var(--primary)} /* ---------- Status strip / day tiles / timeline ---------- */ .status-strip{display:flex;align-items:center;gap:12px;background:var(--primary);color:var(--primary-ink);border-radius:var(--r-lg);padding:12px 14px} .status-strip .avatar{border:2px solid rgba(255,255,255,.5)} .status-strip b{font-family:var(--font-display);font-size:var(--fs-lg);display:block} .status-strip small{font-size:var(--fs-sm)} .status-strip .pill{margin-left:auto;background:rgba(0,0,0,.28);color:#fff;border-radius:var(--r-pill);padding:4px 10px;font-size:var(--fs-xs);font-weight:800;white-space:nowrap} .status-strip.home{background:var(--bg-sunken);color:var(--ink)} .day-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .tile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-height:82px} .tile .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center} .tile .ic [data-lucide]{width:18px;height:18px} .tile b{font-size:var(--fs-sm);line-height:1.15} .tile span{font-size:11px;color:var(--ink-3)} .tile.meal .ic{background:var(--r-meal-soft);color:var(--r-meal)} .tile.nap .ic{background:var(--r-nap-soft);color:var(--r-nap)} .tile.toilet .ic{background:var(--r-toilet-soft);color:var(--r-toilet)} .tile.mood .ic{background:var(--r-mood-soft);color:var(--accent-soft-ink)} .tile.activity .ic{background:var(--r-activity-soft);color:var(--primary)} .tile.photo .ic{background:var(--info-soft);color:var(--info)} .tile.health .ic{background:var(--r-health-soft);color:var(--r-health)} .timeline{display:flex;flex-direction:column;position:relative;padding-left:4px} .tl-item{display:grid;grid-template-columns:44px 1fr;gap:10px;position:relative;padding-bottom:16px} .tl-item::before{content:"";position:absolute;left:21px;top:36px;bottom:0;width:2px;background:var(--line)} .tl-item:last-child::before{display:none} .tl-item .tl-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg-sunken);color:var(--ink-2);margin:0 4px;border:3px solid var(--bg)} .tl-item .tl-ic [data-lucide]{width:17px;height:17px} .tl-ic.meal{background:var(--r-meal-soft);color:var(--r-meal)} .tl-ic.nap{background:var(--r-nap-soft);color:var(--r-nap)} .tl-ic.toilet{background:var(--r-toilet-soft);color:var(--r-toilet)} .tl-ic.mood{background:var(--r-mood-soft);color:var(--accent-soft-ink)} .tl-ic.activity{background:var(--r-activity-soft);color:var(--primary)} .tl-ic.photo{background:var(--info-soft);color:var(--info)} .tl-ic.health{background:var(--r-health-soft);color:var(--r-health)} .tl-ic.arrival{background:var(--r-arrival-soft);color:var(--r-arrival)} .tl-ic.growth{background:var(--accent-soft);color:var(--accent-soft-ink)} .tl-time{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums} .tl-body{display:flex;flex-direction:column;gap:6px;min-width:0} .tl-body b{font-weight:700} .tl-body .sub{color:var(--ink-2);font-size:var(--fs-sm)} .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .photo-grid .ph,.ph{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,var(--bg-sunken),var(--line));position:relative;overflow:hidden;display:grid;place-items:center;color:var(--ink-4)} .ph.wide{aspect-ratio:4/3} .ph .cap{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:2px 6px;border-radius:6px;font-weight:700} .ph .blur-badge{position:absolute;inset:auto 6px 6px auto;background:var(--warning);color:#2B1E06;font-size:10px;padding:2px 6px;border-radius:6px;font-weight:800} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ph svg[data-lucide]{width:28px;height:28px;opacity:.5} /* ---------- Reminder / alert ---------- */ .alert{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-md);background:var(--bg-sunken);border:1px solid var(--line)} .alert [data-lucide]{flex:none;margin-top:1px} .alert.info{background:var(--info-soft);border-color:transparent;color:var(--ink)} .alert.info [data-lucide]{color:var(--info)} .alert.warning{background:var(--warning-soft);border-color:transparent} .alert.warning [data-lucide]{color:var(--warning)} .alert.danger{background:var(--danger-soft);border-color:transparent} .alert.danger [data-lucide]{color:var(--danger)} .alert.success{background:var(--success-soft);border-color:transparent} .alert.success [data-lucide]{color:var(--success)} .alert .link,.alert a:not(.btn){color:inherit;text-decoration:underline;text-underline-offset:2px} .alert.accent{background:var(--accent-soft);border-color:transparent} .alert.accent [data-lucide]{color:var(--accent-soft-ink)} .alert>div{flex:1;min-width:0} .alert .btn{flex:none;align-self:center} .alert b{display:block} .alert p{font-size:var(--fs-sm);color:var(--ink-2)} .reminder{display:flex;gap:12px;align-items:center;background:var(--accent-soft);border-radius:var(--r-lg);padding:12px 14px} .reminder .ic{width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none} .reminder b{display:block} .reminder span{font-size:var(--fs-sm);color:var(--ink-2)} /* ---------- Attendance grid / bulk grid ---------- */ .att-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .bo .att-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} .child-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-elev);text-align:center;position:relative;min-height:104px} .child-chip b{font-size:var(--fs-sm)} .child-chip small{font-size:11px;color:var(--ink-3)} .child-chip.present{border-color:var(--success);background:var(--success-soft)} .child-chip.excused{background:var(--info-soft);border-color:transparent} .child-chip.out{background:var(--bg-sunken)} .child-chip .mark{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--success);color:#fff} .child-chip .mark [data-lucide]{width:12px;height:12px} .child-chip .mark.warn{background:var(--danger)} .child-chip .mark.info{background:var(--info)} .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- Bell buttons (kurum zili) ---------- */ .bell-btn{display:flex;align-items:center;gap:14px;width:100%;padding:18px;border-radius:var(--r-xl);border:2px solid var(--line);background:var(--bg-elev);text-align:left;min-height:96px} .bell-btn .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex:none} .bell-btn b{display:block;font-family:var(--font-display);font-size:var(--fs-lg)} .bell-btn span{font-size:var(--fs-sm);color:var(--ink-2)} .bell-btn.on-way .ic{background:var(--accent-soft);color:var(--accent-soft-ink)} .bell-btn.at-door .ic{background:var(--primary-soft);color:var(--primary)} .bell-btn.other .ic{background:var(--bg-sunken);color:var(--ink-2)} .bell-btn.active{border-color:var(--primary);background:var(--primary-soft)} .eta{display:flex;gap:8px} .eta button{flex:1;height:40px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--bg-elev);font-weight:800} .eta button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)} .live{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--primary)} .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);animation:pulse 1.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 50%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}} /* ---------- Messages ---------- */ .conv{display:flex;gap:12px;align-items:center;padding:12px 14px;min-height:64px} .conv .body{flex:1;min-width:0} .conv .body b{display:flex;align-items:center;gap:6px} .conv .body span{display:block;color:var(--ink-3);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--fs-xs);color:var(--ink-3)} .conv.unread .body b,.conv.unread .body span{color:var(--ink);font-weight:700} .unread-n{min-width:20px;height:20px;border-radius:10px;background:var(--primary);color:var(--primary-ink);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 6px} .thread{display:flex;flex-direction:column;gap:10px} .msg{max-width:82%;padding:10px 12px;border-radius:16px;font-size:var(--fs-base);position:relative;line-height:1.4} .msg.in{align-self:flex-start;background:var(--bg-elev);border:1px solid var(--line);border-bottom-left-radius:6px} .msg.out{align-self:flex-end;background:var(--primary);color:var(--primary-ink);border-bottom-right-radius:6px} .msg .mt{display:flex;gap:4px;align-items:center;justify-content:flex-end;font-size:10px;opacity:.9;margin-top:4px} .msg .mt [data-lucide]{width:12px;height:12px} .msg.sys{align-self:center;background:transparent;color:var(--ink-3);font-size:var(--fs-xs);font-weight:700;max-width:100%;text-align:center} .quiet{display:flex;gap:8px;align-items:center;background:var(--r-nap-soft);color:var(--ink);border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-sm)} .quiet [data-lucide]{color:var(--r-nap)} /* ---------- KPI / gauge / charts ---------- */ .kpi{display:flex;flex-direction:column;gap:6px;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px} .kpi .k-label{font-size:var(--fs-sm);color:var(--ink-3);font-weight:700;display:flex;align-items:center;gap:6px} .kpi .k-value{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05} .kpi .k-sub{font-size:var(--fs-sm);color:var(--ink-2);display:flex;align-items:center;gap:4px} .kpi .k-sub.up{color:var(--success)} .kpi .k-sub.down{color:var(--danger)} .kpi .k-sub a{color:var(--primary);font-weight:700} .progress{height:8px;border-radius:4px;background:var(--line);overflow:hidden} .progress i{display:block;height:100%;background:var(--primary);border-radius:4px} .progress i.accent{background:var(--accent)} .progress i.danger{background:var(--danger)} .progress i.info{background:var(--info)} .heat{display:grid;gap:4px} .heat .cell{aspect-ratio:1;border-radius:6px;background:var(--bg-sunken);display:grid;place-items:center;font-size:11px;font-weight:800} .heat .l1{background:color-mix(in srgb,var(--primary) 20%,var(--bg-elev))} .heat .l2{background:color-mix(in srgb,var(--primary) 45%,var(--bg-elev));color:var(--ink)} .heat .l3{background:var(--primary);color:var(--primary-ink)} .heat .l0{background:var(--danger-soft);color:var(--danger)} /* ---------- Approval / brief ---------- */ .approval{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-elev)} .approval .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--bg-sunken);color:var(--ink-2)} .approval .ic.media{background:var(--info-soft);color:var(--info)} .approval .ic.med{background:var(--r-health-soft);color:var(--r-health)} .approval .ic.absence{background:var(--r-nap-soft);color:var(--r-nap)} .approval .ic.form{background:var(--primary-soft);color:var(--primary)} .approval .body{flex:1;min-width:0} .approval .body b{display:block} .approval .body span{font-size:var(--fs-sm);color:var(--ink-3)} .approval .acts{display:flex;gap:6px;flex:none} .brief{display:flex;flex-direction:column;gap:8px} .brief-item{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--bg-elev);border:1px solid var(--line)} .brief-item .sev{width:12px;height:12px;border-radius:50%} .sev.red{background:var(--danger)} .sev.orange{background:var(--accent)} .sev.yellow{background:var(--warning)} .sev.green{background:var(--success)} .brief-item b{display:block} .brief-item span{font-size:var(--fs-sm);color:var(--ink-3)} .brief-item .go{color:var(--primary);font-weight:700;font-size:var(--fs-sm);white-space:nowrap} .ask{display:flex;gap:8px;align-items:center;background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 6px 6px 16px} .ask input{flex:1;border:0;background:transparent;min-width:0;font-size:var(--fs-base)} .ask input:focus{outline:none} .ask .btn{border-radius:var(--r-pill);height:36px} /* ---------- Tables ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-elev)} .table{width:100%;border-collapse:collapse;min-width:640px} .table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:var(--fs-sm);vertical-align:middle} .table th{font-size:var(--fs-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700;background:var(--bg-elev)} .table tbody tr:hover{background:var(--bg-hover)} .table tr:last-child td{border-bottom:0} .table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums} .pagination .pages button[aria-current="page"]{background:var(--ink);color:var(--bg)} /* ---------- Kanban ---------- */ .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px} .kcol{background:var(--bg-sunken);border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:200px} .kcol-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 6px;font-weight:800;font-size:var(--fs-sm)} .kcard{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm)} .kcard b{font-size:var(--fs-sm)} .kcard .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);color:var(--ink-3)} /* ---------- Calendar ---------- */ .date-strip [aria-current="date"]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)} .date-strip [aria-current="date"] small{color:inherit;opacity:.85} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .d{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700;font-size:var(--fs-sm);background:var(--bg-elev);border:1px solid var(--line);font-variant-numeric:tabular-nums} .cal .d.other{color:var(--ink-4);background:transparent} .cal .d.present{background:var(--success-soft);border-color:transparent} .cal .d.excused{background:var(--info-soft);border-color:transparent} .cal .d .ev{display:flex;gap:2px} .cal .d .ev i{width:5px;height:5px;border-radius:50%;background:var(--accent)} .legend{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink-2)} .legend span{display:inline-flex;align-items:center;gap:5px} .legend i{width:10px;height:10px;border-radius:3px} .slot{border-left:3px solid var(--primary);background:var(--bg-elev);border-radius:0 10px 10px 0;padding:8px 10px;display:flex;flex-direction:column;gap:2px} .slot.routine{border-color:var(--r-arrival)} .slot.lesson{border-color:var(--r-nap)} .slot.meal{border-color:var(--r-meal)} .slot.nap{border-color:var(--r-nap)} .slot.outdoor{border-color:var(--r-activity)} .slot.now{background:var(--primary-soft)} .slot b{font-size:var(--fs-sm)} .slot span{font-size:var(--fs-xs);color:var(--ink-3)} /* ---------- Skeleton / empty / toast ---------- */ .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-sm);z-index:100;transition:.25s;pointer-events:none;display:flex;gap:8px;align-items:center;max-width:90vw} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} [data-state-view]{display:none} [data-state-view].active{display:contents} /* ---------- Dialog / sheet ---------- */ /* ---------- Global search: ⌘K palette (search.js) + result highlight ---------- */ mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px} /* ---------- Misc domain ---------- */ .diff del{background:var(--danger-soft);color:var(--danger);text-decoration:line-through;padding:0 2px;border-radius:3px} .diff ins{background:var(--success-soft);color:var(--success);text-decoration:none;padding:0 2px;border-radius:3px} .skill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-md);border:1px dashed var(--primary);background:var(--primary-soft);color:var(--primary-soft-ink);font-size:var(--fs-sm);font-weight:700} .skill .add{width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center} .skill .add [data-lucide]{width:13px;height:13px} .mic{width:72px;height:72px;border-radius:50%;background:var(--danger);color:#fff;display:grid;place-items:center;margin:0 auto;box-shadow:0 0 0 10px var(--danger-soft)} .mic [data-lucide]{width:30px;height:30px} .price{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums} .aging{display:flex;height:14px;border-radius:7px;overflow:hidden} .aging i{display:block;height:100%} .aging .a0{background:var(--success)} .aging .a30{background:var(--warning)} .aging .a60{background:var(--accent)} .aging .a90{background:var(--danger)} .matrix{display:grid;gap:4px} .matrix .mc{height:36px;border-radius:8px;display:grid;place-items:center;background:var(--bg-sunken)} .matrix .mc.ok{background:var(--success-soft);color:var(--success)} .matrix .mc.no{background:var(--danger-soft);color:var(--danger)} .matrix .mc [data-lucide]{width:16px;height:16px} @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ---------- Mobile overrides (must stay last) ---------- */ @media (max-width:640px){.phone{border-radius:0;box-shadow:none;height:auto;max-height:none;overflow:visible}}