/* Шрифт Nunito — как на сайте клиники amicus-vet.ru (файлы лежат в static/fonts, работает без интернета) */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(/fonts/nunito-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(/fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  /* фирменные цвета «Амикус Вет»: синий логотипа, коралловый, бирюзовый, горчичный */
  --brand: #005eb8;
  --coral: #e59c87;
  --cyan: #13bce0;
  --mustard: #d8ad37;
  --bg: #f3f6fa;
  --panel: #ffffff;
  --text: #1c2a3a;
  --muted: #687385;
  --line: #e1e7ef;
  --accent: #005eb8;
  --accent-dark: #004a93;
  --tint: #e7f0fa;     /* светло-синий фон выбранного */
  --tint2: #f2f7fd;    /* наведение */
  --bar: #9ccbf2;
  --blue: #3b82f6;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #ea8a0b;
  --off: #eceef2;
  --row: 22px;
  --radius: 12px;
  font-family: "Nunito", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); }

/* ---------- layout */
#app { display: flex; height: 100vh; height: 100dvh; }
#side { width: 236px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.brand { padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 2px; }
.brand img { width: 170px; height: auto; display: block; }
.brand .sub { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }

.nav { padding: 6px 8px; }
.nav button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 9px 10px; border-radius: 8px; text-align: left; }
.nav button:hover { background: var(--off); }
.nav button.active { background: var(--tint); color: var(--brand); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); }
.badge { background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; line-height: 18px; min-width: 18px; text-align: center; }
.badge.gray { background: #9aa1ad; }
.badge:empty { display: none; }

/* ---------- mini calendar */
.mini { padding: 8px 12px; user-select: none; }
.mini .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; }
.mini .head button { border: 0; background: none; font-size: 16px; padding: 2px 8px; border-radius: 6px; }
.mini .head button:hover { background: var(--off); }
.mini table { width: 100%; border-collapse: collapse; text-align: center; font-size: 12.5px; }
.mini th { color: var(--muted); font-weight: 400; padding: 3px 0; }
.mini td { padding: 3px 0; border-radius: 6px; cursor: pointer; }
.mini td:hover { background: var(--off); }
.mini td.other { color: #b9bec7; }
.mini td.today { text-decoration: underline; text-decoration-color: var(--accent-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
.mini td.sel { background: var(--accent); color: #fff; font-weight: 700; }
.mini td.weeksel { background: var(--tint); }

/* ---------- toolbar */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar h2 { font-size: 18px; font-weight: 800; margin: 0 8px 0 4px; color: #12324f; }
.toolbar .spacer { flex: 1; }
.btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.btn:hover { background: var(--off); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger { color: var(--red); border-color: #f2c4c4; }
.btn.danger:hover { background: #fdeaea; }
.btn.small { padding: 3px 9px; font-size: 13px; }
.btn.icon { padding: 6px 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #1f2430; color: #fff; border-radius: 16px; padding: 4px 10px; font-size: 13px; }
.chip button { border: 0; background: none; color: #fff; padding: 0 2px; }
select.inp, input.inp, textarea.inp { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: #fff; min-width: 0; }
textarea.inp { width: 100%; resize: vertical; }
.inp:focus { outline: 3px solid rgba(0,94,184,.18); border-color: var(--accent); }
.content { flex: 1; overflow: auto; padding: 14px; }

/* ---------- journal grid */
.jwrap { flex: 1; overflow: auto; position: relative; background: var(--panel); }
.jgrid { display: grid; position: relative; min-width: 100%; }
.jhead { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 8px; min-height: 52px; }
.jhead .nm { font-weight: 600; font-size: 13px; line-height: 1.2; }
.jhead .sp { color: var(--muted); font-size: 12px; }
.jhead .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.jhead.clickable { cursor: pointer; }
.jhead .nm { padding-right: 28px; }
.jhead .shbtn { position: absolute; right: 4px; top: 4px; width: 26px; height: 24px; padding: 0; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; font-size: 14px; color: var(--muted); }
.jhead .shbtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* свои стрелки дня у колонки врача (когда выбрано несколько врачей) */
.cnav { display: flex; align-items: center; gap: 4px; margin: 3px 0 1px; }
.cnav button { width: 24px; height: 22px; border: 1px solid var(--line); background: #fff; border-radius: 6px; font-size: 14px; line-height: 1; padding: 0; }
.cnav button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cnav .cdate { font-size: 12.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.cnav .cdate.shifted { background: var(--mustard); color: #fff; cursor: pointer; }
.jhead.clickable:hover .nm { text-decoration: underline; }
.jcorner { position: sticky; left: 0; top: 0; z-index: 6; background: var(--panel); border-bottom: 1px solid var(--line); }
.jtimes { position: sticky; left: 0; z-index: 4; background: var(--panel); border-right: 1px solid var(--line); }
.jtimes div { height: calc(var(--row) * 4); font-size: 12px; color: var(--muted); text-align: right; padding: 0 6px; transform: translateY(-8px); }
.jcol { position: relative; border-right: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - 1px), #f1f2f5 calc(var(--row) - 1px), #f1f2f5 var(--row)); background-color: var(--off); cursor: copy; }
.jcol .shift { position: absolute; left: 0; right: 0; background: #fff; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - 1px), #eef0f3 calc(var(--row) - 1px), #eef0f3 var(--row)); }
.jcol .shift .lbl { font-size: 11px; color: var(--muted); padding: 1px 4px; }
.jcol .hover-slot { position: absolute; left: 2px; right: 2px; height: var(--row); border: 1px dashed var(--accent-dark); border-radius: 4px; pointer-events: none; font-size: 11px; color: var(--brand); padding-left: 4px; display: none; }
.jcol:hover .hover-slot { display: block; }
.rec { position: absolute; left: 3px; right: 3px; border-radius: 6px; overflow: hidden; font-size: 12px; line-height: 1.25; cursor: pointer; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 2px rgba(0,0,0,.06); z-index: 2; }
.rec .top { padding: 1px 5px; color: #fff; font-weight: 600; display: flex; justify-content: space-between; gap: 4px; }
.rec .body { padding: 2px 5px; }
.rec .svc { color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jcol .rec.blocked { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 6px, #e5e7eb 6px, #e5e7eb 12px); }
.jcol .rec.blocked .top { background: #9ca3af; }
.jtimes div:first-child { transform: none; }
.rec.expected { background: #e8f0fe; } .rec.expected .top { background: var(--blue); }
.rec.confirmed { background: #e3f6ea; } .rec.confirmed .top { background: var(--green); }
.rec.arrived { background: #fff1db; } .rec.arrived .top { background: var(--orange); }
.rec.no_show { background: #fde8e8; } .rec.no_show .top { background: var(--red); }
.rec.no_answer { background: #eceff3; } .rec.no_answer .top { background: #6b7280; }
.multi-dot { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 8px; background: #9333ea; color: #fff;
  font-size: 10.5px; font-weight: 700; margin-right: 4px; padding: 0 4px; vertical-align: 1px; }
.jcol .rec.hl { outline: 3px solid #9333ea; outline-offset: 0; z-index: 4; filter: none; box-shadow: 0 0 0 6px rgba(147,51,234,.18); }
.ds-panel td { background: #fafbfc; padding: 8px 16px 14px 56px; }
.ds-cat { font-weight: 700; font-size: 12.5px; color: #4b5563; margin: 10px 0 4px; }
.ds-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 13px; color: var(--muted); }
.ds-row.on { color: var(--text); background: #fff; }
.exp { width: 28px; padding: 2px 0; }
.rec.unseen { outline: 3px solid var(--mustard); }
.bufzone { position: absolute; left: 3px; right: 3px; z-index: 1; pointer-events: none; border-radius: 0 0 6px 6px; font-size: 10.5px; color: #6b7280;
  padding-left: 5px; overflow: hidden; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 5px, #e5e7eb 5px, #e5e7eb 10px); }
.jnav { display: flex; align-items: center; justify-content: center; padding: 4px; }
.jnavR { position: sticky; right: 0; z-index: 6; border-left: 1px solid var(--line); }
.jendcol { background: var(--panel); border-left: 1px solid var(--line); position: sticky; right: 0; z-index: 3; }
.navbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 20px; line-height: 1; color: #374151; }
.navbtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.copy-btn { flex: none; font-size: 16px; padding: 4px 10px; }
.rec:hover { filter: brightness(.97); z-index: 3; }
.tag { display: inline-block; border-radius: 4px; padding: 0 4px; font-size: 10.5px; font-weight: 700; background: #fff; color: #1f2430; }
.tag.online { background: var(--mustard); color: #fff; }
.tag.new { background: #1e3a8a; color: #fff; }
.nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 4; pointer-events: none; }
.empty-day { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- cards & tables */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(16,42,80,.05); }
.card h3 { margin: 0 0 6px; font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
table.t { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
table.t th, table.t td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
table.t th { background: #fafbfc; font-weight: 600; color: #4b5563; font-size: 13px; position: sticky; top: 0; z-index: 1; }
table.t tr.click:hover td { background: var(--tint2); cursor: pointer; }
.pill { display: inline-block; border-radius: 12px; padding: 1px 9px; font-size: 12px; background: var(--off); }
.pill.open { background: #e8f0fe; color: #1d4ed8; }
.pill.booked { background: #e3f6ea; color: #15803d; }
.pill.expired { background: #fff1db; color: #b45309; }
.pill.closed { background: var(--off); color: var(--muted); }
.pill.st-expected { background: #e8f0fe; } .pill.st-confirmed { background: #e3f6ea; } .pill.st-arrived { background: #fff1db; } .pill.st-no_show { background: #fde8e8; } .pill.st-no_answer { background: #eceff3; }
.wcard { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; }
.wcard .actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* ---------- schedule */
.sched { border-collapse: collapse; background: var(--panel); }
.sched th, .sched td { border: 1px solid var(--line); padding: 0; text-align: center; font-size: 12px; }
.sched th { padding: 4px 2px; background: #fafbfc; position: sticky; top: 0; z-index: 2; min-width: 46px; }
.sched th.we { color: var(--red); }
.sched th.today { background: var(--tint); color: var(--brand); }
.sched td.name { text-align: left; padding: 6px 10px; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 220px; }
.sched td.cell { height: 42px; cursor: pointer; }
.sched td.cell:hover { background: var(--tint2); }
.sched td.cell.on { background: #dff3e4; color: #1e6b37; font-weight: 600; line-height: 1.15; }
.sched tr.sgroup td, table.t tr.sgroup td { background: var(--tint); color: var(--brand); font-weight: 800; font-size: 13px; text-align: left; padding: 6px 10px;
  position: sticky; left: 0; }
.sched td.name.editable { cursor: pointer; }
.sched td.name.editable:hover b { text-decoration: underline; }
.sched .snote { font-size: 10px; font-weight: 700; color: var(--brand); }
.sched-tools { background: var(--tint2); border-top: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; font-weight: 600; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--tint2); }
.seg button.on { background: var(--accent); color: #fff; }
.sched td.cell { user-select: none; }

/* ---------- график «Как в таблице» (как лист Excel / Google: разделы, часы, отметки, итог) */
.xsheet { border-collapse: collapse; background: #fff; font-family: Arial, "Segoe UI", sans-serif; font-size: 12px; color: #000; }
.xsheet td { border: 1px solid #c8cdd6; height: 22px; padding: 0 2px; text-align: center; white-space: nowrap; }
.xsheet td.xname { text-align: left; padding: 0 8px; min-width: 270px; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  position: sticky; left: 0; z-index: 2; font-size: 12.5px; background: #fff; }
.xsheet td.xname.editable { cursor: pointer; }
.xsheet td.xname.editable:hover { text-decoration: underline; }
.xsheet tr.xtitle td { background: #fff2cc; height: 30px; }
.xsheet tr.xtitle td.xname { background: #cfe2f3; color: #e00000; font-size: 17px; }
.xsheet tr.xsec td { background: #ffe599; font-weight: 700; font-size: 15px; height: 30px; }
.xsheet tr.xdays td { background: #d9d2e9; color: #1155cc; font-weight: 700; font-size: 12.5px; line-height: 1.05; padding: 2px 0; }
.xsheet tr.xdays td.we { background: #f4cccc; color: #c00; }
.xsheet tr.xdays td.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.xsheet .xwd { font-size: 9px; font-weight: 400; color: #666; }
.xsheet td.we { background: #f4cccc; }
.xsheet td.xh { min-width: 26px; border-right-color: #e3e6eb; font-size: 12px; }
.xsheet td.xn { min-width: 18px; font-size: 10px; color: #444; border-left: 0; }
.xsheet td.xtot { position: sticky; right: 0; z-index: 2; background: #f3f3f3; font-weight: 700; min-width: 52px; }
.xsheet tr.xsec td.xname, .xsheet tr.xsec td.xtot { background: #ffe599; }
.xsheet tr.xdays td.xname, .xsheet tr.xdays td.xtot { background: #d9d2e9; }
.xsheet td.cell { cursor: pointer; user-select: none; }
.xsheet td.cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.xsheet .xother { color: #9aa1ad; font-style: italic; }
.colors { display: flex; flex-wrap: wrap; gap: 6px; }
.csw { width: 28px; height: 24px; border: 1px solid #c8cdd6; border-radius: 6px; font-size: 12px; color: #888; padding: 0; }
.csw.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.sched td.cell.sel { outline: 2px solid var(--accent-dark); outline-offset: -2px; }

/* ---------- modal */
.overlay { position: fixed; inset: 0; background: rgba(20,24,33,.45); display: flex; align-items: flex-start; justify-content: center; z-index: 50; padding: 30px 12px; overflow-y: auto; }
.modal { transition: transform .15s ease; background: var(--panel); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: min(1040px, 100%); position: relative; }
.modal.narrow { width: min(560px, 100%); }
.modal.wide { width: min(1260px, 100%); }
.modal.wide .cols3 { grid-template-columns: 250px minmax(470px, 1fr) 320px; }
.modal.wide .statusbar { flex-wrap: nowrap; }
.modal.wide .statusbar button { white-space: nowrap; }
@media (max-width: 1100px) { .modal.wide .cols3 { grid-template-columns: 1fr; } .modal.wide .statusbar { flex-wrap: wrap; } }
.modal .mh { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal .mh h3 { margin: 0; font-size: 17px; flex: 1; }
.modal .mh .x { border: 0; background: none; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.modal .mh .x:hover { background: var(--off); }
.modal .mb { padding: 16px 18px; }
.modal .mf { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cols3 { display: grid; grid-template-columns: 250px 1fr 290px; gap: 16px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .cols3, .cols2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > label { font-size: 12.5px; color: var(--muted); }
.field .inp { width: 100%; }
.statusbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.statusbar button { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 4px 11px; font-size: 13px; }
.statusbar button.on.expected { background: var(--blue); color: #fff; border-color: var(--blue); }
.statusbar button.on.confirmed { background: var(--green); color: #fff; border-color: var(--green); }
.statusbar button.on.arrived { background: var(--orange); color: #fff; border-color: var(--orange); }
.statusbar button.on.no_answer { background: #6b7280; color: #fff; border-color: #6b7280; }
.statusbar button.on.no_show { background: var(--red); color: #fff; border-color: var(--red); }
.svc-list .it { display: grid; grid-template-columns: 1fr 90px 70px 26px; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.svc-list .it button { border: 0; background: none; color: var(--red); font-size: 18px; }
.total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; padding: 10px 0; }
.warn { background: #fff4e5; border: 1px solid #f6d29b; color: #8a4b00; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; font-size: 13px; }
.info { background: #eef5ff; border: 1px solid #c9dcfb; color: #1e3a8a; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; font-size: 13px; }
.suggest { position: absolute; top: 100%; left: 0; margin-top: 2px; z-index: 10; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; width: 100%; }
.suggest div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f2f3f5; }
.suggest div:hover { background: var(--tint2); }
.rel { position: relative; }
.suggest.beside { z-index: 60; border-color: var(--accent-dark); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.suggest.beside::before { content: "Найденные клиенты"; display: block; padding: 6px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--tint2); }
.pet-inp { background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
.stats b { display: block; font-size: 15px; }
.timebtns { display: flex; flex-wrap: wrap; gap: 6px; }
.timebtns button { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 9px; font-size: 13px; }
.timebtns button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- toast */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #1f2430; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 380px; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }

/* ---------- свёрнутые (незаконченные) записи */
#drafts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  z-index: 40; max-width: calc(100vw - 32px); }
.draft-chip { display: flex; flex-direction: column; position: relative; background: #fff; border: 2px solid var(--coral); border-radius: 10px;
  padding: 6px 30px 6px 12px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-width: 340px; }
.draft-chip:hover { background: #fdeee9; }
.draft-chip .dc-t { font-weight: 700; font-size: 13px; }
.draft-chip .dc-s { font-size: 12px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-chip .dc-x { position: absolute; top: 4px; right: 4px; border: 0; background: none; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; color: #6b7280; }
.draft-chip .dc-x:hover { background: var(--off); color: var(--red); }

/* ---------- «весь день врача» при переносе записи */
.daypeek { position: fixed; z-index: 70; background: #fff; border: 1px solid var(--accent-dark); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); overflow-y: auto; }
.dp-head { padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--tint2); position: sticky; top: 0; }
.dp-it { padding: 6px 12px; border-bottom: 1px solid #f1f2f5; font-size: 13px; }
.dp-new { background: var(--accent); color: #fff; font-size: 13.5px; }
.dp-moving { background: #f3f4f6; color: var(--muted); }

/* ---------- фильтр врачей с галочками */
.docfilter { position: relative; }
.docmenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 6px; min-width: 300px; max-height: 70vh; overflow-y: auto; }
.docmenu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.docmenu label:hover { background: var(--tint2); }
.docmenu .dm-all { border-bottom: 1px solid var(--line); margin-bottom: 4px; font-weight: 600; }
.docmenu .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.btn.dark { background: #1f2430; color: #fff; border-color: #1f2430; font-weight: 600; }

/* ---------- скрыть/показать левую панель (кнопка ☰ в начале каждой верхней строки) */
.side-btn { flex: none; width: 36px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 18px; line-height: 1; }
.side-btn:hover { background: var(--off); }
#app.side-hidden #side { display: none; }
#sideShade { display: none; }
@media (max-width: 800px) {
  /* на телефоне панель выезжает поверх журнала */
  #side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: min(280px, 85vw); box-shadow: 0 0 30px rgba(0,0,0,.25);
    transform: translateX(-105%); transition: transform .2s ease; }
  #app.side-hidden #side { display: flex; }
  #app.side-open #side { transform: none; }
  #app.side-open #sideShade { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(20,24,33,.4); }
  html, body { font-size: 15px; }
  .hide-phone { display: none; }
  .toolbar { padding: 8px; gap: 6px; }
  .toolbar h2 { font-size: 15px; margin: 0 4px; }
  .toolbar .spacer { display: none; }
  .toolbar > .rel { flex: 1 1 100%; order: 10; }
  .toolbar #jSearch { width: 100% !important; }
  .toolbar > .small.muted { flex-basis: 100%; }
  .jgrid { grid-template-columns: 44px repeat(var(--cols, 1), minmax(160px, 1fr)) 36px !important; }
  .jtimes div { font-size: 11px; padding: 0 3px; }
  .jhead { min-height: 46px; padding: 6px; }
  .navbtn { width: 30px; height: 30px; font-size: 18px; }
  .content { padding: 8px; }
  .overlay { padding: 8px 4px; }
  .modal .mb { padding: 12px; }
  .modal .mh { padding: 10px 12px; }
  .modal .mf { padding: 10px 12px; }
  .modal .mf .btn { flex: 1 1 auto; }
  .row { gap: 6px; }
  .wcard { grid-template-columns: 1fr; }
  .wcard .actions { flex-direction: row; flex-wrap: wrap; }
  .svc-list .it { grid-template-columns: 1fr 80px 18px 26px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .daypeek { display: none; }
  table.t th, table.t td { padding: 6px; }
  .docmenu { min-width: 260px; }
  input.inp, select.inp, textarea.inp { font-size: 16px; }   /* без автоувеличения страницы на iPhone */
}

/* ---------- филиал и пользователь в боковой панели */
.branchsel { padding: 2px 16px 4px; }
.branchsel select { width: 100%; font-weight: 700; background: var(--tint); border-color: #c4d9f0; color: var(--brand); }
.branchsel select:disabled { opacity: 1; }
.userbox { margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- вход */
#login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #dcebfb 0, transparent 60%), radial-gradient(900px 500px at 110% 110%, #fbe7e1 0, transparent 55%), var(--bg); }
.login-wrap { display: grid; grid-template-columns: 1fr 1fr; width: min(940px, 100%); background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(16,42,80,.16); }
.login-brand { position: relative; color: #fff; padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(150deg, #0a6fd0 0%, #005eb8 45%, #003f80 100%); overflow: hidden; }
.login-brand::after { content: ""; position: absolute; inset: 0; opacity: .09; pointer-events: none;   /* лапки на фоне */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='30' cy='38' rx='9' ry='8'/%3E%3Cellipse cx='19' cy='27' rx='3.6' ry='4.6'/%3E%3Cellipse cx='26' cy='21' rx='3.6' ry='4.6'/%3E%3Cellipse cx='34' cy='21' rx='3.6' ry='4.6'/%3E%3Cellipse cx='41' cy='27' rx='3.6' ry='4.6'/%3E%3Cellipse cx='70' cy='78' rx='7' ry='6'/%3E%3Cellipse cx='62' cy='70' rx='2.8' ry='3.6'/%3E%3Cellipse cx='67.5' cy='65' rx='2.8' ry='3.6'/%3E%3Cellipse cx='73.5' cy='65' rx='2.8' ry='3.6'/%3E%3Cellipse cx='79' cy='70' rx='2.8' ry='3.6'/%3E%3C/g%3E%3C/svg%3E"); }
.login-brand > * { position: relative; z-index: 1; }
.login-logo { background: #fff; border-radius: 14px; padding: 12px 16px; align-self: flex-start; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.login-logo img { width: 200px; height: auto; display: block; }
.login-brand h1 { margin: 10px 0 0; font-size: 28px; font-weight: 800; line-height: 1.15; }
.login-brand .lead { margin: 0; opacity: .9; font-size: 15px; }
.login-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.login-chips span { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.login-chips .c1 { background: var(--coral); border-color: var(--coral); }
.login-branches { margin-top: auto; display: grid; gap: 10px; }
.login-branches div { background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.login-branches b { font-size: 14px; }
.loginbox { padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; }
.loginbox h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #12324f; }
.loginbox .field .inp { padding: 10px 12px; border-radius: 10px; }
.loginbox .btn { width: 100%; margin-top: 6px; padding: 11px; border-radius: 10px; font-size: 15px; }
.loginbox .switch { text-align: center; margin-top: 16px; font-size: 13.5px; }
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr; border-radius: 18px; }
  .login-brand { padding: 22px 22px 20px; gap: 10px; }
  .login-brand h1 { font-size: 22px; margin-top: 4px; }
  .login-logo img { width: 160px; }
  .login-branches { display: none; }
  .loginbox { padding: 24px 22px 26px; }
}

.btn.online-new { background: #fbf3dc; border-color: var(--mustard); font-weight: 700; }
.btn.online-new:hover { background: var(--mustard); color: #fff; }
#bOnline { cursor: pointer; }

/* ---------- график: смена в другом филиале */
.sched td.cell.other { background: repeating-linear-gradient(45deg, #f6f7f9, #f6f7f9 5px, #eceef2 5px, #eceef2 10px); color: var(--muted); font-weight: 400; font-size: 11px; }

/* ---------- статистика */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 10px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.kpi b { display: block; font-size: 22px; margin-top: 2px; }
.bar { position: relative; height: 18px; background: var(--off); border-radius: 5px; min-width: 120px; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar); border-radius: 5px; }
.bar > span { position: relative; font-size: 12px; padding-left: 6px; line-height: 18px; font-weight: 600; }
.bar.red > i { background: #f3a5a5; }
td.st-ok { color: var(--green); font-weight: 700; }
td.st-bad { color: var(--red); font-weight: 700; }
td.st-cnc { color: var(--orange); font-weight: 700; }
tr.st-total td { font-weight: 800; background: #fafbfc; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tscroll { overflow-x: auto; }
table.st-doc .bar { min-width: 80px; }
table.st-doc th, table.st-doc td:first-child { white-space: nowrap; }
.st-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.kpi.st-link { text-decoration: none; }
.kpi.st-link:hover, td.st-link:hover { background: var(--tint2); }
table.st-list tr.click { cursor: pointer; }
table.st-list tr.click:hover td { background: var(--tint2); }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.cfg-grid label { display: block; }
@media (max-width: 800px) { .cfg-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------- телефон: нижняя панель, окна на весь экран, таблицы карточками, свёрнутые фильтры */
.only-phone { display: none; }
.pick-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.jtitle { cursor: pointer; }
.jtitle .jcal { font-size: 14px; opacity: .65; }
.hover-slot { white-space: nowrap; overflow: hidden; }
#tabbar { display: none; }
@media (max-width: 800px) {
  .only-phone { display: inline; }
  #tabbar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 42; background: #fff; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 14px rgba(16,42,80,.07); }
  #tabbar button { flex: 1; border: 0; background: none; padding: 6px 2px 5px; font-size: 11px; display: flex; flex-direction: column; align-items: center;
    gap: 1px; color: var(--muted); position: relative; min-height: 54px; }
  #tabbar button span { font-size: 19px; line-height: 1.15; }
  #tabbar button.on { color: var(--brand); font-weight: 800; }
  #tabbar .badge { position: absolute; top: 3px; left: 56%; font-style: normal; font-size: 10.5px; line-height: 16px; padding: 0 5px; min-width: 16px; }
  body.has-tabbar #app { height: calc(100vh - 56px); height: calc(100dvh - 56px - env(safe-area-inset-bottom)); }
  body.has-tabbar #toasts { bottom: 72px; }
  body.has-tabbar #drafts { bottom: 66px; }
  #toasts { left: 12px; right: 12px; }
  .toast { max-width: none; }

  /* фильтры раздела прячутся под кнопку «Фильтры ▾» */
  .toolbar.folded:not(.open) > *:not(.side-btn):not(h2):not(.fold-btn):not(.fold-keep) { display: none !important; }
  .toolbar .fold-keep:has(input), .toolbar input.fold-keep { flex: 1 1 100%; order: 5; }
  .toolbar .fold-keep input { width: 100% !important; }
  .toolbar .fold-btn { margin-left: auto; }
  .toolbar .jtitle { margin: 0 4px; }
  .toolbar .jtitle + .pick-hidden + .docfilter { flex: 1; }

  /* окна — на весь экран, заголовок и кнопки всегда видны */
  .overlay { padding: 0; }
  .modal, .modal.narrow, .modal.wide { width: 100%; min-height: 100%; border-radius: 0; display: flex; flex-direction: column; box-shadow: none; }
  .modal .mb { flex: 1; }
  .modal .mh { position: sticky; top: 0; background: var(--panel); z-index: 5; }
  .modal .mh .x { font-size: 26px; padding: 4px 12px; }
  .modal .mf { position: sticky; bottom: 0; background: var(--panel); z-index: 5; box-shadow: 0 -4px 12px rgba(16,42,80,.07); }
  .rec-cols > div:nth-child(3) { order: -1; }   /* в окне записи: клиент, потом статус и услуги, потом врач и время */
  .rec-cols > div:nth-child(1) { order: 1; }
  .statusbar button { padding: 6px 12px; font-size: 14px; }
  .btn { padding: 8px 12px; }
  .btn.small { padding: 5px 10px; }

  /* широкие таблицы — карточками: подпись столбца слева, значение справа */
  table.t.mcards, table.t.mcards tbody, table.t.mcards tr, table.t.mcards td { display: block; width: auto !important; }
  table.t.mcards { background: none; border-radius: 0; overflow: visible; }
  table.t.mcards tr:first-child { display: none; }
  table.t.mcards tr { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; padding: 6px 10px; }
  table.t.mcards td { border: 0; padding: 3px 0 3px 36%; position: relative; min-height: 22px; }
  table.t.mcards td:not([data-label]) { padding-left: 0; }
  table.t.mcards td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 33%; color: var(--muted); font-size: 12.5px; font-weight: 400; }
  table.t.mcards td:empty { display: none; }
  table.t.mcards tr.click:hover td { background: none; }
  table.t.mcards tr.sgroup { background: var(--tint); }
  .content .card { overflow-x: auto; }

  /* статистика: колонка врача закреплена слева, остальные листаются вбок */
  table.st-doc td:first-child, table.st-doc th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; white-space: normal;
    min-width: 110px; max-width: 130px; font-size: 12.5px; box-shadow: 1px 0 0 var(--line); }
  table.st-doc tr.st-total td:first-child { background: #fafbfc; }
  table.st-doc { overflow: visible; }

  /* график: узкая колонка ФИО, чтобы были видны дни */
  .xsheet td.xname { min-width: 120px; max-width: 130px; padding: 0 4px; font-size: 11px; }
  .xsheet tr.xtitle td.xname { font-size: 13px; }
  .xsheet td.xtot { min-width: 40px; }
  .sched td.name { min-width: 120px; max-width: 140px; white-space: normal; padding: 4px 6px; font-size: 12px; }
}

/* ---------- права пользователя */
.perm-list label { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.pill.sa { background: var(--brand); color: #fff; font-weight: 700; }
.outside-bar { background: #fff4e5; border-bottom: 1px solid #f6d29b; color: #8a4b00; padding: 6px 14px; font-size: 13px; }
.outside-bar a { color: #8a4b00; font-weight: 700; }
/* лист ожидания по дням */
.wdays { display: flex; align-items: center; gap: 4px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; }
.wday { flex: none; min-width: 50px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 3px 4px; display: flex; flex-direction: column;
  align-items: center; line-height: 1.15; }
.wday small { font-size: 11px; color: var(--muted); }
.wday b { font-size: 15px; }
.wday .wn { font-size: 12px; font-weight: 800; color: #fff; background: var(--coral); border-radius: 9px; padding: 0 7px; margin-top: 2px; }
.wday .wn.zero { background: none; color: #b8bfca; font-weight: 400; }
.wday.we small, .wday.we b { color: var(--red); }
.wday.today { border-color: var(--accent); }
.wday.all { min-width: 74px; font-weight: 700; align-self: stretch; justify-content: center; }
.wday:hover { background: var(--tint2); }
.wday.on { background: var(--accent); border-color: var(--accent); }
.wday.on small, .wday.on b { color: #fff; }
.wday.on .wn.zero { color: #cfe0f3; }
.wsec { margin: 4px 0 8px; font-size: 14px; color: var(--brand); font-weight: 800; }
.btn.wait-chip { background: #fdeee9; border-color: var(--coral); font-weight: 700; }
.btn.wait-chip:hover { background: var(--coral); color: #fff; }
.a-red { color: var(--red); font-weight: 700; }
.a-green { color: var(--green); font-weight: 700; }
.pet-ico { font-size: 16px; line-height: 1; }
.pet-chip { display: inline-block; background: var(--tint); border-radius: 12px; padding: 1px 9px; margin: 1px 0; font-size: 13px; white-space: nowrap; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.role-card .rName { font-weight: 800; font-size: 15px; }
.role-card.off { opacity: .6; }
.notice-card.unseen { border-color: var(--accent); background: var(--tint2); }