/* ============================================================
KinderHUB — drop-in dizayn qatlami (v1)
backend/static/index.html ichidagi blokini
BUTUNLAY shu fayl bilan almashtiring. HTML va JS o'zgarmaydi.
Saqlangan shartlar (buzmang):
- header balandligi 64px → #mainApp{padding-top:64px}, aside{top:64px}
- client-mode chegarasi → @media(max-width:768px) / (min-width:769px)
- barcha klass nomlari asl holida (.card .panel .table .warn …)
- qo'shimcha JS talab qilinmaydi; tun rejimi tizim sozlamasidan
avtomatik (prefers-color-scheme), xohlasangiz
============================================================ */
:root{
--h-head:64px;
--w-side:248px;
--bg:#F4F6FA;
--bg-sunken:#EDF1F7;
--surface:#FFFFFF;
--surface-2:#F8FAFC;
--line:#E2E8F0;
--line-strong:#CBD5E1;
--ink:#17233B;
--ink-2:#475569;
--ink-3:#7C8AA0;
--brand:#1769DF;
--brand-ink:#0F4EA8;
--brand-soft:#EAF1FE;
--brand-line:#BFD5F8;
--ok:#0E7C55; --ok-bg:#E8F7F0; --ok-line:#BCE6D3;
--warn:#8A5A00; --warn-bg:#FFF6E2; --warn-line:#F2DCAD;
--bad:#B42318; --bad-bg:#FEF1F0; --bad-line:#F5C9C4;
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
--sh-1:0 1px 2px rgba(15,32,66,.06);
--sh-2:0 2px 8px -2px rgba(15,32,66,.10), 0 1px 2px rgba(15,32,66,.05);
--sh-3:0 18px 40px -18px rgba(15,32,66,.35);
--focus:0 0 0 3px rgba(23,105,223,.24);
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0B1220; --bg-sunken:#070C16; --surface:#111A2B; --surface-2:#0D1524;
--line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
--ink:#E8EEF9; --ink-2:rgba(232,238,249,.68); --ink-3:rgba(232,238,249,.45);
--brand:#4C8DFF; --brand-ink:#8AB4FF; --brand-soft:rgba(76,141,255,.14); --brand-line:rgba(76,141,255,.32);
--ok:#3DD6A0; --ok-bg:rgba(61,214,160,.12); --ok-line:rgba(61,214,160,.28);
--warn:#E9B949; --warn-bg:rgba(233,185,73,.12); --warn-line:rgba(233,185,73,.28);
--bad:#FF8A73; --bad-bg:rgba(255,138,115,.11); --bad-line:rgba(255,138,115,.26);
--sh-1:none; --sh-2:0 2px 10px rgba(0,0,0,.35); --sh-3:0 20px 44px -18px rgba(0,0,0,.7);
}
}
:root[data-theme="dark"]{
--bg:#0B1220; --bg-sunken:#070C16; --surface:#111A2B; --surface-2:#0D1524;
--line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
--ink:#E8EEF9; --ink-2:rgba(232,238,249,.68); --ink-3:rgba(232,238,249,.45);
--brand:#4C8DFF; --brand-ink:#8AB4FF; --brand-soft:rgba(76,141,255,.14); --brand-line:rgba(76,141,255,.32);
--ok:#3DD6A0; --ok-bg:rgba(61,214,160,.12); --ok-line:rgba(61,214,160,.28);
--warn:#E9B949; --warn-bg:rgba(233,185,73,.12); --warn-line:rgba(233,185,73,.28);
--bad:#FF8A73; --bad-bg:rgba(255,138,115,.11); --bad-line:rgba(255,138,115,.26);
--sh-1:none; --sh-2:0 2px 10px rgba(0,0,0,.35); --sh-3:0 20px 44px -18px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
body{
margin:0; font-family:var(--font); font-size:14px; line-height:1.5;
background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
#mainApp{padding-top:var(--h-head)}
a{color:var(--brand)} a:hover{color:var(--brand-ink)}
/* ---------- Header ---------- */
header{
position:fixed; top:0; left:0; right:0; z-index:20; height:var(--h-head);
background:var(--surface); color:var(--ink);
border-bottom:1px solid var(--line); box-shadow:var(--sh-1);
display:flex; align-items:center; padding:0 18px; gap:14px;
}
header b{font-size:16px; font-weight:700; letter-spacing:-.2px; white-space:nowrap}
.lang{margin-left:auto; display:flex; gap:8px}
.lang select{
padding:8px 10px; border-radius:var(--r-sm);
border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
font:inherit; font-size:12.5px; max-width:150px;
}
.userbox{
margin-left:auto; display:flex; align-items:center; gap:10px;
font-size:13px; color:var(--ink-2); white-space:nowrap;
}
.userbox .role{
background:var(--brand-soft); color:var(--brand-ink);
border:1px solid var(--brand-line);
padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700;
}
.hamburger{
display:none; background:transparent; border:1px solid var(--line);
color:var(--ink); font-size:18px; cursor:pointer;
width:40px; height:40px; border-radius:var(--r-sm);
align-items:center; justify-content:center; padding:0; flex:none;
}
.hamburger:hover{background:var(--surface-2)}
.theme-btn{
background:transparent; border:1px solid var(--line);
color:var(--ink); font-size:17px; cursor:pointer;
width:40px; height:40px; border-radius:var(--r-sm);
display:flex; align-items:center; justify-content:center; padding:0; flex:none;
}
.theme-btn:hover{background:var(--surface-2)}
/* ---------- Sidebar ---------- */
aside{
position:fixed; top:var(--h-head); bottom:0; width:var(--w-side);
background:var(--surface); color:var(--ink);
border-right:1px solid var(--line);
padding:12px 10px; overflow:auto;
}
aside button{
width:100%; background:transparent; color:var(--ink-2); border:0;
text-align:left; padding:10px 12px; border-radius:10px; margin:1px 0;
cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
display:flex; align-items:center; gap:9px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
aside button:hover{background:var(--surface-2); color:var(--ink)}
aside button.active{
background:var(--brand-soft); color:var(--brand-ink);
box-shadow:inset 2px 0 0 var(--brand);
}
/* ---------- Main ---------- */
main{margin-left:var(--w-side); padding:22px 26px 40px; max-width:1560px}
h1{margin-top:0; font-size:22px; font-weight:800; letter-spacing:-.5px}
main h1{
position:sticky; top:var(--h-head); z-index:15;
background:var(--bg); margin:0 0 16px; padding:14px 0 12px;
border-bottom:1px solid var(--line);
}
.muted{color:var(--ink-3)}
code{word-break:break-all}
/* ---------- KPI grid / cards / panels ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px}
.card,.panel{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); padding:18px; margin-bottom:16px;
box-shadow:var(--sh-1);
}
.grid .card{margin-bottom:0}
.card{cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s}
.card:hover{border-color:var(--brand-line); box-shadow:var(--sh-2); transform:translateY(-1px)}
.num{
font-size:27px; font-weight:800; margin:8px 0 4px;
letter-spacing:-1px; font-variant-numeric:tabular-nums;
}
/* ---------- Toolbar & controls ---------- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center}
button.primary,button.secondary,.danger{
font:inherit; font-size:13px; font-weight:700; cursor:pointer;
border-radius:10px; padding:9px 14px; min-height:38px;
transition:filter .15s, background .15s, border-color .15s;
}
button.primary{background:var(--brand); color:#fff; border:1px solid transparent; box-shadow:var(--sh-1)}
button.primary:hover{filter:brightness(1.07)}
button.secondary{background:var(--surface-2); color:var(--ink); border:1px solid var(--line)}
button.secondary:hover{background:var(--surface); border-color:var(--line-strong)}
.danger{background:var(--bad); color:#fff; border:1px solid transparent}
.danger:hover{filter:brightness(1.07)}
button.primary:disabled,button.secondary:disabled,.danger:disabled{opacity:.5; cursor:not-allowed; filter:none}
input,select,textarea{
padding:9px 11px; border:1px solid var(--line-strong); border-radius:10px;
background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px;
min-height:38px; max-width:100%;
}
textarea{min-height:64px; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--brand); box-shadow:var(--focus)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=checkbox],input[type=radio]{min-height:0; width:16px; height:16px; accent-color:var(--brand)}
.linkbtn{
background:none; border:0; padding:0; cursor:pointer;
text-decoration:underline; text-underline-offset:2px; font:inherit; color:inherit;
}
.linkbtn:hover{opacity:.72}
/* ---------- Tables ---------- */
.tablewrap{
overflow:auto; background:var(--surface);
border:1px solid var(--line); border-radius:var(--r-md);
box-shadow:var(--sh-1); margin-bottom:16px;
}
.panel .tablewrap,.card .tablewrap{border:0; border-radius:0; box-shadow:none; background:transparent; margin-bottom:0}
.table{width:100%; border-collapse:collapse; min-width:850px}
.table th,.table td{
border-bottom:1px solid var(--line); padding:11px 12px;
text-align:left; font-size:13px; vertical-align:middle;
}
.table th{
background:var(--surface-2); color:var(--ink-3);
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.55px;
white-space:nowrap;
}
/* position:sticky ИЛГАРИ шу ерда бор эди — жадвалда БИТТАГИНА қатор
қолганда (мас. боғча филтр орқали танланганда) sticky сарлавҳа шу
ягона қаторни кўринмас қилиб қўяр эди (браузернинг рендер хатоси,
.table.boxed th учун аввалроқ тузатилган муаммонинг бошқа кўриниши,
пастга қаранг). Маълумот кўринмай қолиши scroll'да сарлавҳа
"ёпишқоқ" туришидан муҳимроқ, шунинг учун бутунлай ўчирилди. */
.table tbody tr:hover td{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table td:has(+ td:last-child),.table td:last-child{white-space:nowrap}
.table.boxed th,.table.boxed td{border:1px solid var(--line-strong)}
.table.boxed th{position:static}
/* ---------- Status blocks ---------- */
.ok,.err{padding:11px 13px; border-radius:10px; font-size:13px; font-weight:600}
.ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.err{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line)}
.warn{
padding:10px 12px; border-radius:10px; background:var(--warn-bg);
color:var(--warn); border:1px solid var(--warn-line);
font-size:12px; line-height:1.45;
}
/* ---------- Forms ---------- */
.form{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.form label{
display:flex; flex-direction:column; gap:6px;
font-size:11.5px; font-weight:700; color:var(--ink-3);
text-transform:uppercase; letter-spacing:.45px;
}
.form label input,.form label select,.form label textarea{
font-size:13.5px; font-weight:500; color:var(--ink);
text-transform:none; letter-spacing:0;
}
.full{grid-column:1/-1}
/* ---------- Login ---------- */
#loginScreen{
min-height:100vh; display:flex; align-items:center; justify-content:center;
padding:24px; background:
radial-gradient(900px 520px at 18% -8%, rgba(23,105,223,.22), transparent 62%),
radial-gradient(760px 480px at 96% 6%, rgba(14,124,85,.14), transparent 66%),
#0B1220;
}
.loginbox{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-xl); padding:30px 28px; width:360px; max-width:100%;
box-shadow:var(--sh-3);
}
.loginbox h2{margin:0 0 16px; text-align:center; font-size:19px; font-weight:800; letter-spacing:-.4px}
.loginbox label{display:block; margin:14px 0 6px; font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.45px}
.loginbox input,.loginbox textarea,.loginbox select{width:100%; font-weight:500; text-transform:none; letter-spacing:0}
.loginbox button.primary{width:100%; margin-top:18px; min-height:44px; font-size:14px}
.loginbox .muted{font-size:12px; line-height:1.5}
/* ---------- Mobile shells (client-mode) ---------- */
.bottom-nav{
display:none; position:fixed; left:0; right:0; bottom:0; z-index:25;
background:var(--surface); border-top:1px solid var(--line);
padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
justify-content:space-around; align-items:stretch;
box-shadow:0 -4px 18px -10px rgba(15,32,66,.28);
}
.bottom-nav button{
background:transparent; border:0; color:var(--ink-3);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
font:inherit; font-size:10.5px; font-weight:700; padding:6px 4px;
min-width:52px; min-height:48px; border-radius:12px; flex:1;
}
.bottom-nav button .ic{font-size:19px; line-height:1}
.bottom-nav button.active{color:var(--brand-ink); background:var(--brand-soft)}
.drawer{
position:fixed; top:0; left:0; bottom:0; width:84%; max-width:312px;
background:var(--surface); color:var(--ink); z-index:40;
border-right:1px solid var(--line); box-shadow:var(--sh-3);
transform:translateX(-100%); transition:transform .24s ease;
padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); overflow:auto;
}
.drawer.open{transform:translateX(0)}
.drawer .role{background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand-line); padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700}
.drawer .linkbtn{color:var(--ink-2)!important}
.drawer-overlay{
position:fixed; inset:0; background:rgba(9,16,32,.5); z-index:35; display:none;
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.drawer-overlay.open{display:block}
.more-sheet{
position:fixed; left:0; right:0; bottom:0; z-index:30;
background:var(--surface); color:var(--ink);
border-top:1px solid var(--line);
border-radius:var(--r-xl) var(--r-xl) 0 0;
padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));
max-height:72vh; overflow:auto;
box-shadow:0 -14px 40px -18px rgba(9,16,32,.5);
transform:translateY(100%); transition:transform .22s ease;
}
.more-sheet.open{transform:translateY(0)}
.more-sheet h4{margin:6px 0 10px; font-size:15px; font-weight:800}
.more-sheet button{font:inherit}
.more-sheet::before{
content:""; display:block; width:38px; height:4px; border-radius:3px;
background:var(--line-strong); margin:2px auto 8px;
}
.notif-sheet{max-height:86vh}
#clientMoreSheetOverlay,#clientNotifSheetOverlay{z-index:29}
.card-list{display:none}
.card-list .card{padding:14px; margin-bottom:10px; cursor:default}
.card-list .card:hover{border-color:var(--line); box-shadow:var(--sh-1); transform:none}
.card-row{
display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:7px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.card-row:last-child{border-bottom:0}
.card-row>span:first-child{color:var(--ink-3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; flex:none}
.card-row>span:last-child{text-align:right; min-width:0; overflow-wrap:anywhere}
.card-row select,.card-row input,.card-row textarea{max-width:100%}
.notif-bell{
display:none; position:relative; margin-left:auto;
background:transparent; border:1px solid var(--line); color:var(--ink);
font-size:17px; width:40px; height:40px; border-radius:var(--r-sm);
align-items:center; justify-content:center; padding:0; cursor:pointer; flex:none;
}
.offline-pill{
display:none; align-items:center; gap:5px; margin-left:8px;
height:32px; padding:0 12px; border-radius:999px; flex:none;
font-size:12px; font-weight:700; font:inherit; cursor:pointer; white-space:nowrap;
background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line);
}
.offline-pill:hover{filter:brightness(1.08)}
.offline-pill.syncing{background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-line)}
.offline-pill.syncing .offline-dot{display:inline-block; animation:offlineSpin 1s linear infinite}
@keyframes offlineSpin{to{transform:rotate(360deg)}}
.offline-queue-item{
padding:12px; border-radius:12px; background:var(--surface-2);
border:1px solid var(--line); margin-bottom:8px; font-size:13px;
}
.offline-queue-item .muted{font-size:11px; margin-top:3px}
.notif-badge{
position:absolute; top:-3px; right:-3px; background:var(--bad); color:#fff;
border:2px solid var(--surface); border-radius:999px;
font-size:10px; font-weight:800; min-width:18px; height:18px;
display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.notif-tabs{display:flex; gap:6px; margin:8px 0 12px}
.notif-tabs button{
flex:1; padding:9px 8px; border-radius:10px; border:1px solid var(--line);
background:var(--surface-2); color:var(--ink-2); font:inherit; font-weight:700; font-size:12px; cursor:pointer;
}
.notif-tabs button.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.notif-item{
padding:13px; border-radius:12px; background:var(--surface-2);
border:1px solid var(--line); margin-bottom:8px;
text-align:left; width:100%; cursor:pointer; font:inherit; color:var(--ink);
}
.notif-item:hover{border-color:var(--line-strong)}
.notif-item.unread{background:var(--brand-soft); border-color:var(--brand-line); box-shadow:inset 3px 0 0 var(--brand)}
.notif-item .muted{font-size:11px; margin-top:4px}
/* ---------- Responsive (asl chegaralar saqlangan) ---------- */
@media(max-width:900px){
:root{--w-side:214px}
main{padding:18px 18px 36px}
.form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
main{margin-left:0; padding:16px 14px 32px}
main h1{position:static}
.form{grid-template-columns:1fr}
header{padding:0 12px; gap:10px}
.lang select{max-width:112px}
}
@media(max-width:768px){
body.client-mode{overflow-x:hidden}
body.client-mode aside{display:none}
body.client-mode main{margin-left:0; padding:14px 12px 84px; overflow-x:hidden}
body.client-mode header .hamburger{display:flex}
body.client-mode header .back-btn{display:none}
body.client-mode header .back-btn.show{display:flex}
body.client-mode .lang{display:none}
body.client-mode .userbox{display:none}
body.client-mode .bottom-nav{display:flex}
body.client-mode .table{display:none}
body.client-mode .card-list{display:block}
/* E-31: tarbiyalanuvchilar/xodimlar ro'yxati — foydalanuvchi aniq jadval
ko'rinishini so'radi (karta emas), shuning uchun shu ikkita ro'yxat
yuqoridagi umumiy qoidadan MUSTASNO. */
body.client-mode .force-table .table{display:table}
body.client-mode .force-table .card-list{display:none}
body.client-mode .force-table .tablewrap{-webkit-overflow-scrolling:touch}
body.client-mode .form{grid-template-columns:1fr!important}
body.client-mode main h1{position:static; font-size:19px; padding:6px 0 10px}
body.client-mode .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
body.client-mode .grid .num{font-size:22px}
body.client-mode .notif-bell{display:flex}
body.client-mode .offline-pill.active{display:inline-flex}
body.client-mode .panel,body.client-mode .card{border-radius:14px; padding:15px}
body.client-mode button.primary,body.client-mode button.secondary,body.client-mode .danger{min-height:44px; padding:11px 15px}
body.client-mode input,body.client-mode select,body.client-mode textarea{min-height:44px; font-size:15px}
}
/* Админ/ходим роллари учун мобилда sidebar-меню (aside#nav) мижоздаги
каби ёнбошдан чиқувчи drawer сифатида ишлайди (client-mode'га тегмайди —
у ўзининг #clientDrawer'идан фойдаланади). */
@media(max-width:768px){
body:not(.client-mode) header .hamburger{display:flex}
body:not(.client-mode) aside{
position:fixed; top:0; left:0; bottom:0; width:84%; max-width:312px; z-index:40;
transform:translateX(-100%); transition:transform .24s ease;
box-shadow:var(--sh-3); border-right:1px solid var(--line);
padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));
}
body:not(.client-mode) aside.open{transform:translateX(0)}
body:not(.client-mode) main{margin-left:0; padding-bottom:84px; overflow-x:hidden}
body:not(.client-mode) #staffBottomNav{display:flex}
body:not(.client-mode) .table{display:none}
body:not(.client-mode) .card-list{display:block}
/* Календар/давомат матрица-жадваллари (tableBoxed()) card'га
айлантирилмайди — улар учун card-list мутлақо қурилмайди, шунинг
учун юқоридаги умумий .table{display:none}'дан мустасно. */
body:not(.client-mode) .table.boxed{display:table}
/* Client-mode'даги .force-table истиснosining ходим (админ) томони
учун такрори — фойдаланувчи Боғчалар/Боғча паспорти/Тарбияланувчилар/
Ходимлар рўйхатларини мобилда ҳам жадвал кўринишида (карта эмас)
кўришни аниқ сўради (2026-09-19). */
body:not(.client-mode) .force-table .table{display:table}
body:not(.client-mode) .force-table .card-list{display:none}
body:not(.client-mode) .force-table .tablewrap{-webkit-overflow-scrolling:touch}
/* Кўплаб форма/панеллар inline style орқали қатъий устун сонини
(масалан repeat(4,1fr) ёки repeat(2,200px)) белгилайди — бу мобилда
горизонтал ошиб кетишга (ва шунга боғлиқ fixed/sticky глитчларга)
сабаб бўлади. Client-mode'даги мавжуд ечим (!important) шу ерда
ҳам такрорланади. */
body:not(.client-mode) .form{grid-template-columns:1fr!important}
/* Узун матнли