/* ===== Семейный таск-менеджер — стили (без Tailwind CDN) ===== */
:root{
  --ink:#0F1218; --accent:#00E5FF; --accent-50:#E8FCFF;
  --muted:#5B6573; --line:#F2F4F7; --white:#fff;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309;
  --emerald-100:#d1fae5; --emerald-600:#059669; --emerald-700:#047857;
  --sky-100:#e0f2fe; --sky-700:#0369a1;
  --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-600:#4b5563;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626; --red-700:#b91c1c;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--line)}

/* ---------- компоненты ---------- */
.field{width:100%;border:2px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:border .15s}
.field:focus{border-color:var(--accent)}
textarea.field{resize:vertical}

.btn-primary{background:var(--accent);color:var(--ink);padding:11px 20px;border-radius:8px;font-weight:700;border:none;cursor:pointer;transition:filter .15s;display:inline-block;text-align:center}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{filter:brightness(.94)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer}
.btn-ghost:hover{background:var(--line)}
.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700;border:none;cursor:pointer}
.btn-danger:hover{background:#fecaca}

.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);border:none;background:none;border-bottom:3px solid transparent;cursor:pointer;transition:.15s;font-family:inherit}
.navtab:hover{color:#fff}
.navtab.active{color:var(--accent);border-bottom-color:var(--accent)}

.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;color:#fff;user-select:none;flex-shrink:0;line-height:1}

.task{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:box-shadow .15s,border-color .15s}
.task:hover{box-shadow:0 6px 20px rgba(15,18,24,.07)}
.task.done{opacity:.6}
.task.done .t-title{text-decoration:line-through}
.task.cancelled{opacity:.5}
.task.cancelled .t-title{text-decoration:line-through}
.task.overdue:not(.done):not(.cancelled){border-color:#fca5a5;box-shadow:0 0 0 1px #fca5a5 inset}

.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em;display:inline-block}

.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer;transition:.15s;font-family:inherit;color:var(--ink)}
.iconbtn:hover{background:var(--line)}
.iconbtn.primary{background:var(--accent);border-color:var(--accent)}
.iconbtn:disabled{opacity:.5;cursor:not-allowed}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:6px 0}
.cal-day{min-height:96px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;overflow:hidden}
.cal-day.off{background:#fafbfc;color:#c2c8d2}
.cal-day.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-50) inset}
.cal-day.selected{outline:2px solid var(--accent);outline-offset:-2px}
.cal-day[data-day]{cursor:pointer}
.cal-dnum{font-size:12px;font-weight:700;margin-bottom:4px}
.cal-task{font-size:11px;font-weight:600;border-radius:5px;padding:2px 5px;margin-bottom:3px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty .big{font-size:48px;margin-bottom:8px}

.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}

/* сегмент-переключатель */
.seg{border:none;background:none;padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);border-radius:7px;cursor:pointer;font-family:inherit}
.seg.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* элементы расписания */
.dot{width:10px;height:10px;border-radius:999px;flex-shrink:0}
.time-badge{font-size:11px;font-weight:700;text-align:center;line-height:1.2;min-width:52px;padding:6px 4px;border-radius:8px;white-space:nowrap}
.time-badge span{display:block;font-size:10px;font-weight:600}
.day-row{transition:box-shadow .15s}
.day-row:hover{box-shadow:0 4px 14px rgba(15,18,24,.08)}
.day-row .done{text-decoration:line-through;opacity:.6}

.menu-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:.12s}
.menu-row:hover{background:var(--line)}
.menu-row.active{background:var(--accent-50)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d6dbe2;border-radius:10px}

/* ---------- утилиты (вместо Tailwind) ---------- */
.hidden{display:none!important}
.block{display:block}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.w-full{width:100%}.w-60{width:15rem}.w-8{width:2rem}.w-9{width:2.25rem}
.h-8{height:2rem}.h-9{height:2.25rem}
.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-xs{max-width:20rem}
.max-w-\[90px\]{max-width:90px}
.max-h-72{max-height:18rem}.max-h-\[92vh\]{max-height:92vh}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-auto{margin-left:auto}
.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-7{padding:1.75rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}
.pl-1{padding-left:.25rem}.pr-3{padding-right:.75rem}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.top-0{top:0}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.right-0{right:0}.left-1\/2{left:50%}
.inset-0{top:0;right:0;bottom:0;left:0}
.-translate-x-1\/2{transform:translateX(-50%)}
.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}
.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}
.rounded-t-2xl{border-radius:16px 16px 0 0}.rounded-full{border-radius:9999px}
.shadow-xl{box-shadow:0 10px 30px rgba(15,18,24,.12)}
.shadow-2xl{box-shadow:0 20px 50px rgba(15,18,24,.25)}
.border{border:1px solid var(--line)}.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-line{border-color:var(--line)}
.text-2xl{font-size:24px}.text-5xl{font-size:48px}.text-xl{font-size:20px}.text-lg{font-size:18px}
.text-base{font-size:16px}.text-sm{font-size:14px}.text-xs{font-size:12px}.text-\[11px\]{font-size:11px}
.font-sans{font-family:inherit}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-tight{line-height:1.1}.leading-none{line-height:1}
.text-center{text-align:center}.text-left{text-align:left}
.capitalize{text-transform:capitalize}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.underline{text-decoration:underline}
.opacity-60{opacity:.6}
.transition{transition:.15s}

/* цвета текста */
.text-ink{color:var(--ink)}.text-muted{color:var(--muted)}.text-white{color:#fff}
.text-amber-600{color:var(--amber-600)}.text-emerald-600{color:var(--emerald-600)}
.text-red-600{color:var(--red-600)}.text-gray-300{color:var(--gray-300)}.text-gray-600{color:var(--gray-600)}
.text-amber-700{color:var(--amber-700)}.text-emerald-700{color:var(--emerald-700)}.text-sky-700{color:var(--sky-700)}.text-red-700{color:var(--red-700)}
.text-white\/50{color:rgba(255,255,255,.5)}.text-white\/60{color:rgba(255,255,255,.6)}.text-white\/80{color:rgba(255,255,255,.8)}

/* цвета фона */
.bg-ink{background:var(--ink)}.bg-white{background:#fff}.bg-line{background:var(--line)}.bg-accent-50{background:var(--accent-50)}
.bg-black\/50{background:rgba(0,0,0,.5)}.bg-white\/10{background:rgba(255,255,255,.1)}.bg-white\/20{background:rgba(255,255,255,.2)}
.bg-amber-50{background:var(--amber-50)}.bg-amber-100{background:var(--amber-100)}
.bg-emerald-100{background:var(--emerald-100)}.bg-sky-100{background:var(--sky-100)}
.bg-gray-100{background:var(--gray-100)}.bg-gray-200{background:var(--gray-200)}
.bg-red-50{background:var(--red-50)}.bg-red-100{background:var(--red-100)}

/* hover */
.hover\:bg-line:hover{background:var(--line)}
.hover\:bg-white\/20:hover{background:rgba(255,255,255,.2)}
.hover\:text-ink:hover{color:var(--ink)}

/* important-override */
.\!w-auto{width:auto!important}
.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}

/* адаптив (sm: 640px+) */
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .sm\:hidden{display:none!important}
  .sm\:inline-flex{display:inline-flex}
  .sm\:items-center{align-items:center}
  .sm\:max-w-lg{max-width:32rem}
  .sm\:p-4{padding:1rem}
  .sm\:rounded-2xl{border-radius:16px}
}