/* Мои дела — оформление каркаса (этап 2).
   Цвета, размеры и иконки — из утверждённых макетов: mockups/login/Login.html,
   mockups/dashboard-v2/project/Main.dc.html (компьютер) и Phone.dc.html (телефон).
   CSP default-src 'self': всё оформление только здесь, шрифты — свои файлы (OFL). */

/* ---------- Шрифты: Geologica 500–700, Golos Text 400–700; кириллица + латиница ---------- */
@font-face{font-family:"Geologica";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/geologica-cyrillic.b23d17dab853.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geologica";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/geologica-latin.429fc8a75e26.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/golos-text-cyrillic.2b8fbbb33a14.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/golos-text-latin.f57df9832ab8.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0c111b;
  --menu:#0f1522;
  --panel:#141b2a;
  --field:#0f1522;
  --line:#232d42;
  --line-soft:#1d2638;
  --active:#1b2436;
  --pressed:#2a3550;
  --pressed-line:#6b7893;
  --ink:#eef1f7;
  --ink-2:#aab3c5;
  --ink-3:#8b96ab;
  --work:#3987e5;
  --personal:#199e70;
  --family:#c98500;
  --error:#ee6a6e;
  --font:"Golos Text","Segoe UI",system-ui,sans-serif;
  --font-display:Geologica,"Golos Text","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}

/* ---------- Основа ---------- */
[hidden]{display:none}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.4}
h1,h2,p,dl,dd{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:#ffffff}
button,input{font-family:inherit}
button{cursor:pointer}
input::placeholder{color:var(--ink-3)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button:disabled,input:disabled{opacity:.6;cursor:not-allowed}
.icon{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dot{display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%}
.dot-work{background:var(--work)}
.dot-personal{background:var(--personal)}
.dot-family{background:var(--family)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px}

/* ---------- Светлая кнопка и шапка карточки входа ---------- */
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:20px;padding:0 18px;border:none;border-radius:10px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:#ffffff;color:var(--bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink)}
.brand{display:flex;align-items:center;gap:12px}
.title{font-family:var(--font-display);font-size:26px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.dots{display:flex;align-items:center;gap:6px}
.name{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
.lead{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--ink-2)}
.foot{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);text-align:center;font-size:12px;color:var(--ink-3)}

/* ---------- Вход (Login.html) и 404 ---------- */
.login,.center-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px}
.login-card,.notfound-card{width:100%;max-width:400px;padding:32px 28px 24px}
.login-form{margin:24px 0 0;display:flex;flex-direction:column}
.field{display:flex;flex-direction:column;gap:8px}
.field + .field{margin-top:16px}
.field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field input{width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font-size:15px}
.field input:focus{border-color:var(--ink)}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--field) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.msg{margin:14px 0 0;font-size:14px;line-height:20px;color:var(--error)}
.notfound-card h1.title{margin-top:20px;font-size:20px;line-height:28px}
.notfound-card .btn{margin-top:24px}

/* ---------- Рамка: левое меню (Main.dc.html) ---------- */
.app{display:flex;min-height:100vh}
.sidebar{flex-direction:column;gap:20px;margin:0;padding:24px 14px 18px;border:0;border-right:1px solid var(--line-soft);background:var(--menu);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.brand-block{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.brand-title{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
.brand-name{font-size:12.5px;color:var(--ink-3)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-caption{padding:0 10px 4px;font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3)}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;height:44px;margin:0;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font-size:14.5px;font-weight:500;line-height:1.4;text-align:left}
.nav-item:hover{color:#ffffff}
.nav-item[aria-current="page"]{background:var(--active);color:var(--ink);font-weight:600}
.nav-label{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-count{font-size:12.5px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nav-item[aria-current="page"] .nav-count{color:var(--ink-2)}
.dot-slot{width:18px;flex-shrink:0;display:flex;justify-content:center}
.dot-slot .dot{width:10px;height:10px}
.nav-item.client{padding-left:40px;font-size:14px;font-weight:400}
.nav-item.client[aria-current="page"]{font-weight:600}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.linear-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2)}
.linear-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.linear-title{font-size:13px;font-weight:500;color:var(--ink)}
.linear-sub{font-size:12px;color:var(--ink-3)}
.nav-form{margin:0}

/* ---------- Верхняя строка «Новое дело» (80px) ---------- */
.main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.topbar{height:80px;flex-shrink:0;padding:0 32px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line-soft)}
.quick-add{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;height:56px;margin:0;padding:0 6px 0 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.quick-add > .icon{color:var(--ink-2)}
.quick-add input{flex:1 1 auto;min-width:0;height:44px;padding:0;border:none;outline:none;background:transparent;color:var(--ink);font-size:15px}
.quick-spheres{display:flex;gap:2px;flex-shrink:0}
.chip{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:none;border-radius:10px;background:transparent;color:var(--ink-2);font-size:13.5px;font-weight:500}
.chip.is-active{background:var(--pressed);color:var(--ink)}
.btn-add{flex-shrink:0;height:44px;padding:0 18px;border:none;border-radius:10px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600}
.icon-btn{flex-shrink:0;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink-2)}
.hint-wrap{display:flex;flex-shrink:0}

/* ---------- Основная область ---------- */
.content{flex:1 1 auto;min-width:0;padding:28px 32px 40px;display:flex;flex-direction:column;gap:20px}
.page-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"title date filters" "note note filters";align-items:baseline;column-gap:14px;row-gap:6px}
.page-head > *{min-width:0}
.page-head h1{grid-area:title;font-family:var(--font-display);font-size:32px;line-height:38px;font-weight:600;letter-spacing:-0.02em}
.page-date{grid-area:date;font-size:16px;color:var(--ink-2)}
.page-note{grid-area:note;font-size:14px;line-height:20px;color:var(--ink-2)}
.page-actions{grid-area:actions;display:none}
.filters{grid-area:filters;align-self:end;justify-self:end;display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.filter{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:none;border-radius:10px;background:transparent;color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap}
.filter .dot{width:10px;height:10px}
.filter.is-active{background:var(--pressed);color:var(--ink)}
.empty-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:320px;padding:40px 24px;text-align:center}
.empty-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:6px;border-radius:14px;background:var(--active);color:var(--ink-2)}
.empty-title{font-size:18px;line-height:24px;font-weight:600}
.empty-text{max-width:440px;font-size:14px;line-height:20px;color:var(--ink-2)}

/* ---------- «Настройки»: карточка «Состояние службы» ---------- */
.status-card{max-width:640px;padding:4px 18px 18px}
.card-head{display:flex;align-items:center;height:48px}
.card-title{font-size:16px;font-weight:600}
.status-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:16px;padding:10px 0;border-top:1px solid var(--line-soft)}
.status-row dt{font-size:13.5px;line-height:20px;color:var(--ink-2)}
.status-row dd{font-size:14px;line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.status-card .btn{width:auto;margin-top:16px}

/* ---------- Компьютер (≥ 769px): меню — постоянная левая панель 248px ---------- */
@media (min-width:769px){
  .sidebar{display:flex;position:sticky;inset:auto;top:0;width:248px;height:100vh;height:100dvh;max-height:none;flex-shrink:0}
  .sidebar::backdrop{display:none}
  .drawer-close,.phone-bottom{display:none}
}
@media (min-width:769px) and (max-width:1180px){
  .page-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title date" "note note" "filters filters"}
  .filters{justify-self:start;margin-top:10px}
  .quick-spheres .chip{padding:0 10px}
}

/* ---------- Телефон (≤ 768px, Phone.dc.html): меню — выдвижное (popover: «≡», крестик, затемнение, Esc, «Назад») ---------- */
@media (max-width:768px){
  .app{display:block}
  .topbar{display:none}
  .sidebar{display:none}
  .sidebar:popover-open{display:flex;position:fixed;inset:0 auto 0 0;width:min(320px,calc(100vw - 48px));height:100%;max-height:100%;padding:20px 12px calc(18px + env(safe-area-inset-bottom))}
  .sidebar::backdrop{background:rgba(5,8,14,.64)}
  .drawer-close{display:flex;margin:-8px -4px 0 0;border:none;background:transparent}
  .content{padding:20px 16px calc(150px + env(safe-area-inset-bottom));gap:12px}
  .page-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "date date" "note note" "filters filters";align-items:center;column-gap:8px;row-gap:2px}
  .page-head h1{font-size:28px;line-height:44px}
  .page-date{font-size:14px;line-height:20px}
  .page-actions{display:flex;gap:4px;margin-right:-10px}
  .page-actions .icon-btn{border:none;background:transparent}
  .filters{justify-self:stretch;align-self:auto;margin:14px -16px 0;padding:0 16px;gap:8px;background:none;border:0;border-radius:0;overflow-x:auto;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex-shrink:0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
  .filter.is-active{background:var(--pressed);border-color:var(--pressed-line)}
  .empty-card{min-height:240px;padding:32px 20px}
  .phone-bottom{position:fixed;left:0;right:0;bottom:0;z-index:10}
  .phone-add{display:flex;align-items:center;gap:8px;margin:0;padding:10px 16px;border-top:1px solid var(--line-soft);background:var(--menu)}
  .phone-add input{flex:1 1 auto;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;outline:none;background:var(--panel);color:var(--ink);font-size:16px}
  .phone-add-btn{flex-shrink:0;width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:12px;background:var(--ink);color:var(--bg)}
  .phone-add-btn .icon{stroke-width:2.5}
  .tabbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:64px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line-soft);background:var(--menu)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;color:var(--ink-2);font-size:12px;font-weight:500}
  .tab.is-active{color:var(--ink);font-weight:600}
  .status-card{padding:4px 16px 16px}
  .status-row{grid-template-columns:minmax(0,1fr);row-gap:2px}
}
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  .sidebar:popover-open{animation:drawer-in .2s ease-out}
}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}}

/* ---------- Вход и 404 на телефоне (как в Login.html) ---------- */
@media (max-width:600px){
  .login,.center-page{min-height:0;padding:24px 16px 40px;justify-content:flex-start}
  .login-card,.notfound-card{padding:24px 20px 20px}
  .title{font-size:24px;line-height:30px}
  .field input{font-size:16px}
  .btn{font-size:15px}
}