/* ============================================================================
   «Мой кабинет» — мини-приложение Домового. Стили.
   ----------------------------------------------------------------------------
   Палитра снята прямо со скриншотов шаблона владельца (LevelUp):
     шалфейный зелёный #A0B8A0 · пыльная роза #E0C0B0 · коричневый акцент #B07860
     кремовый фон #FAF7F1 · тёмный текст #33302B
   Но раскладка — МОБИЛЬНАЯ: у владельца таблица на широкий экран, а тут телефон.
   Поэтому: одна колонка, крупные касания, горизонтальные ленты вместо колонок.
   Без внешних библиотек и шрифтов.
   ========================================================================== */
:root {
  --paper: #faf7f1;
  --card: #ffffff;
  --line: #e7dfd3;
  --ink: #33302b;
  --muted: #8c8378;
  --sage: #a0b8a0;
  --sage-soft: #e8f1e8;
  --rose: #e0c0b0;
  --rose-soft: #f6ece6;
  --brown: #b07860;
  --amber: #d8a060;
  --ok: #7fa97f;
  --late: #c0857a;
  --blue: #9dbfd9;
  --violet: #bba6d4;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(70, 55, 40, .06), 0 4px 14px rgba(70, 55, 40, .05);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 78px;
}

.wrap { max-width: 620px; margin: 0 auto; padding: 14px 12px 10px; }

/* ---------- шапка ---------- */
header.top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.lamp {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: radial-gradient(circle at 50% 45%, #fff6e2 0%, var(--amber) 46%, rgba(216,160,96,.18) 74%, transparent 80%);
  box-shadow: 0 0 18px 4px rgba(216, 160, 96, .18);
}
header.top h1 { font-size: 17px; font-weight: 600; }
header.top .sub { font-size: 11.5px; color: var(--muted); }

/* ---------- заголовок карточки как в шаблоне ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 11px;
  overflow: hidden;
}
.card > .hd {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 12px; color: #3d4a3d;
  background: var(--sage-soft);
  border-bottom: 1px solid var(--line);
}
.card > .hd.rose { background: var(--rose-soft); color: #6b4a3a; }
.card > .hd.ok { background: var(--sage-soft); color: #4f6b4f; }
/* маленький плюсик в заголовке блока — добавить дело вручную */
.card > .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card > .hd .plus {
  flex: 0 0 auto; width: 22px; height: 22px; line-height: 1; border-radius: 50%;
  border: 1px solid rgba(90, 110, 90, .35); background: rgba(255, 255, 255, .7);
  color: #5d7a5d; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0;
}
.card > .hd .plus:active { background: #fff; transform: scale(.94); }
/* быстрая форма добавления */
.quickadd { display: flex; gap: 7px; margin-top: 10px; }
.quickadd input[type=text] {
  flex: 1; min-width: 0; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 11px; font-size: 15px; font-family: inherit;
}
.quickadd input[type=time] {
  flex: 0 0 104px; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 8px; font-size: 15px; font-family: inherit;
}
.quickadd button {
  flex: 0 0 auto; background: var(--sage); color: #22301f; border: 0; border-radius: 11px;
  padding: 9px 13px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.top3row .a { display: flex; align-items: center; gap: 6px; }
.top3row .a .dot { flex: 0 0 8px; width: 8px; height: 8px; }
.card > .bd { padding: 11px 12px; }

/* ---------- день: дата ---------- */
.datecard { display: flex; align-items: stretch; gap: 0; margin-bottom: 11px; }
.datecard button {
  width: 42px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 18px; cursor: pointer;
}
.datecard button:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.datecard button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.datecard .mid {
  flex: 1; background: var(--rose); border: 1px solid var(--rose);
  padding: 8px 12px; text-align: center; color: #5b3a2c;
}
.datecard .mid .d { font-size: 15px; font-weight: 600; }
.datecard .mid .w { font-size: 11.5px; opacity: .8; }

/* ---------- топ-3 ---------- */
.top3row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.top3row:last-child { border-bottom: 0; }
.top3row .num {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--rose-soft);
  color: var(--brown); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.top3row .tx { flex: 1; min-width: 0; }
.top3row .tx .a { font-size: 14.5px; word-break: break-word; }
.top3row .tx .b { font-size: 11.5px; color: var(--muted); }
.top3row.empty { opacity: .45; }

/* ---------- план по времени ---------- */
.hours { display: flex; flex-direction: column; }
.hour { display: flex; gap: 9px; padding: 3px 0; border-top: 1px solid var(--line); }
.hour:first-child { border-top: 0; }
.hour .h {
  flex: 0 0 74px; font-size: 11.5px; color: var(--muted); padding-top: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hour .items { flex: 1; min-width: 0; }
.hour .free { font-size: 12px; color: #cfc7bb; padding-top: 3px; }
.hour.now .h { color: var(--brown); font-weight: 700; }
.hour.now { background: #fdf8f3; border-radius: 8px; }
.hour.gap { min-height: 26px; opacity: .75; }
.slot {
  background: var(--sage-soft); border-left: 3px solid var(--sage);
  border-radius: 7px; padding: 5px 8px; margin: 2px 0; font-size: 14px; word-break: break-word;
  display: flex; align-items: flex-start; gap: 6px;
}
.slot .slotmain { flex: 1; min-width: 0; }
.slot .star { flex: 0 0 22px; text-align: center; font-size: 17px; line-height: 20px; color: #c3bcae; cursor: pointer; }
.slot .star.on { color: #e0a83c; text-shadow: 0 0 8px rgba(224, 168, 60, .3); }
.slot .m { font-size: 11px; color: var(--muted); }
.slot.late { background: var(--rose-soft); border-left-color: var(--late); }
.slot.rep { background: #eef2fa; border-left-color: var(--blue); }
/* выполненное дело в ленте дня: зелёная полоса и зачёркнутый текст */
.slot.done { background: #f2f6f0; border-left-color: var(--ok); color: var(--muted); text-decoration: line-through; }
.slot.done .m { text-decoration: none; }

/* ---------- список дел ---------- */
.task { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.tick {
  width: 21px; height: 21px; flex: 0 0 21px; margin-top: 1px; cursor: pointer;
  border: 1.5px solid #cfc7bb; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent;
}
.task.done .tick { border-color: var(--ok); color: var(--ok); background: var(--sage-soft); }
/* пока запрос в пути — не даём нажать второй раз */
.task.busy { opacity: .55; pointer-events: none; }
/* звёздочка «важно» — справа от дела; нажатие ставит и снимает */
.task .star {
  flex: 0 0 30px; text-align: center; font-size: 19px; line-height: 22px;
  color: #cfc7bb; cursor: pointer; user-select: none;
}
.task .star.on { color: #e0a83c; text-shadow: 0 0 8px rgba(224, 168, 60, .35); }
.task.done .star { opacity: .35; }
.top3row.star .a { font-weight: 600; color: #8a6528; }
.top3row .num.star { background: #fbeccd; color: #a97c22; }
/* записи дневника: «крестик» вместо галочки — их убирают, а не «выполняют» */
.task.diaryrow .tick { border-style: dashed; color: #c0b6a8; font-size: 13px; line-height: 1; }
.task.diaryrow .tick:active { border-color: var(--late); color: var(--late); }
.task .body { flex: 1; min-width: 0; }
.task .text { font-size: 14.5px; word-break: break-word; }
.task.done .text { color: var(--muted); text-decoration: line-through; }
.task .meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: #f2ede5; color: #7b7266; }
.tag.date { background: var(--rose-soft); color: #6b4a3a; font-weight: 600; }
.tag.late { background: #f7e6e2; color: #a4655a; }
.tag.rep { background: #eaf0f8; color: #5c7a99; }
.tag.ok { background: var(--sage-soft); color: #5d7a5d; }

/* ---------- канбан (горизонтальная лента — мобильная адаптация) ---------- */
.board { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.col {
  flex: 0 0 76%; max-width: 76%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.col > .hd {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border-bottom: 1px solid var(--line);
}
.col.wait > .hd { background: #e7eff7; color: #4f6d88; }
.col.work > .hd { background: #fdf1dc; color: #8a6528; }
.col.done > .hd { background: var(--sage-soft); color: #4f6b4f; }
.col.late > .hd { background: #f7e6e2; color: #96564b; }
.col > .bd { padding: 9px 10px; min-height: 60px; }
.col .mini { font-size: 13px; padding: 6px 8px; border-radius: 8px; background: #f7f4ee; margin-bottom: 5px; }
.col .mini .m { font-size: 11px; color: var(--muted); }

/* ---------- календарь месяца ---------- */
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.month .wd { font-size: 10px; color: var(--muted); text-align: center; padding-bottom: 3px; }
.month .day {
  min-height: 46px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 4px;
  font-size: 11px; position: relative; cursor: pointer; background: #fff;
}
.month .day.blank { border: 0; background: transparent; }
.month .day.today { border-color: var(--brown); box-shadow: inset 0 0 0 1px var(--rose); }
.month .day .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.month .day .dots { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 3px; }
/* Цвет точки = состояние дела в этот день (см. dotClass в app.js).
   ⚠️ Цвета заданы ОТДЕЛЬНЫМИ правилами на `.dot.*` без background у контейнера:
   иначе более точный селектор `.month .day .dot` перебивал бы цвет и все точки становились
   серыми (я на этом уже споткнулся 25.09.2026). Так цвета работают и в календаре, и в легенде. */
.dot { background: #cfc7bb; border-radius: 50%; }   /* круглая везде: и в календаре, и в топ-3, и в легенде */
.dot.ok { background: #6f9e6f; }        /* сделано */
.dot.today { background: #d8a060; }     /* сегодня, в работе */
.dot.late { background: #c0857a; }      /* просрочено */
.dot.more { background: #a89e92; }      /* «и ещё» */
.month .day .dot { width: 7px; height: 7px; border-radius: 50%; }
.month .day .one { font-size: 9.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dotslegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; font-size: 11px; color: var(--muted); }
.dotslegend span { display: inline-flex; align-items: center; gap: 5px; }
.dotslegend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.monthnav { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.monthnav .m { flex: 1; text-align: center; font-weight: 600; color: #5b3a2c; background: var(--rose); border-radius: 10px; padding: 6px; }
.monthnav button { width: 38px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 10px; color: var(--muted); font-size: 16px; }

/* ---------- сводка ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ringbox { text-align: center; }
.ringbox .cap { font-size: 11px; color: var(--muted); margin-top: 2px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.stat { background: #f9f6f0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; color: var(--muted); }
.stat.late .v { color: var(--late); }
.stat.ok .v { color: var(--ok); }
.chart { margin-top: 4px; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 3px; }

/* ---------- нижнее меню ---------- */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; background: rgba(250, 247, 241, .97);
  border-top: 1px solid var(--line);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
}
nav.tabs button {
  flex: 1; background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 10.5px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
nav.tabs button .ic { font-size: 18px; line-height: 1; }
nav.tabs button.on { color: var(--brown); font-weight: 600; }

/* ---------- формы, служебное ---------- */
.add { display: flex; gap: 7px; margin-top: 10px; }
.add input {
  flex: 1; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px; font-size: 15px; font-family: inherit;
}
.add button {
  background: var(--sage); color: #22301f; border: 0; border-radius: 11px;
  padding: 10px 15px; font-weight: 700; font-size: 16px; cursor: pointer;
}
.note { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.hello { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; gap: 13px; }
.hello .lamp { width: 78px; height: 78px; flex: 0 0 78px; }
.hello h1 { font-size: 22px; }
.hello p { color: var(--muted); max-width: 330px; font-size: 14px; }
.err { color: var(--late); font-size: 12.5px; }
.hidden { display: none !important; }
.spin { color: var(--muted); font-size: 12.5px; padding: 8px 0; }
.switch { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.switch input { accent-color: var(--sage); }