/* Личный планер: Сакура / Ночная сакура. Мобильный интерфейс по умолчанию. */

:root,
[data-theme="light"] {
  --bg-page: #fdf0f5;
  --bg-surface: rgba(255, 250, 252, 0.9);
  --bg-elevated: rgba(253, 240, 246, 0.92);
  --bg-hover: rgba(249, 220, 233, 0.85);
  --bg-table-head: linear-gradient(135deg, #fce4ee 0%, #f8d4e3 100%);
  --bg-cell-empty: rgba(251, 235, 242, 0.58);
  --bg-month-start: rgba(214, 77, 126, 0.14);
  --bg-key-event: rgba(214, 77, 126, 0.12);
  --bg-urgent: rgba(225, 29, 72, 0.12);

  --text-main: #431c2b;
  --text-secondary: #7c445b;
  --text-muted: #ad7a8f;

  --border-color: #eec2d3;
  --border-strong: #dc9bb4;

  --accent: #d64d7e;
  --accent-hover: #be3868;
  --success: #c84678;
  --danger: #e11d48;
  --warning: #d97706;

  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 8px 28px rgba(168, 66, 104, 0.11);
}

[data-theme="dark"] {
  --bg-page: #1b1016;
  --bg-surface: rgba(36, 21, 29, 0.9);
  --bg-elevated: rgba(47, 27, 38, 0.92);
  --bg-hover: rgba(64, 36, 51, 0.9);
  --bg-table-head: linear-gradient(135deg, #351d2a 0%, #2c1722 100%);
  --bg-cell-empty: rgba(28, 16, 22, 0.7);
  --bg-month-start: rgba(232, 121, 160, 0.18);
  --bg-key-event: rgba(232, 121, 160, 0.15);
  --bg-urgent: rgba(244, 63, 94, 0.18);

  --text-main: #fceef3;
  --text-secondary: #d7a9bc;
  --text-muted: #96687b;

  --border-color: #4d2c3d;
  --border-strong: #6b3d54;

  --accent: #e879a0;
  --accent-hover: #f48fb1;
  --success: #e879a0;
  --danger: #fb7185;
  --warning: #fbbf24;

  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.42);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  background-color: var(--bg-page);
  background-image:
    url("/img/seigaiha-sakura.svg"),
    url("/img/japanese-sakura-bg.jpg");
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
  background-position: top left, center center;
  background-attachment: fixed, fixed;
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body {
  background-image:
    linear-gradient(rgba(24, 12, 19, 0.84), rgba(24, 12, 19, 0.88)),
    url("/img/seigaiha-sakura.svg"),
    url("/img/japanese-sakura-bg.jpg");
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: cover, 180px 180px, cover;
  background-attachment: fixed, fixed, fixed;
}

.hidden {
  display: none !important;
}

/* Navigation */
.doc-app-shell { min-height: 100dvh; }
.doc-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); background: var(--bg-surface); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.doc-brand { flex: 0 0 32px; display: flex; align-items: center; }
.brand-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.doc-week-nav { display: flex; align-items: center; justify-content: center; min-width: 0; }
.doc-week-current { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 0 7px; border-radius: 8px; background: var(--bg-elevated); cursor: pointer; }
.week-range-label { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-picker-chevron { color: var(--accent); font-size: 14px; }
.date-picker-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.date-picker-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; cursor: pointer; }
.doc-week-current:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.header-menu { position: relative; flex-shrink: 0; }
.header-menu summary { list-style: none; font-size: 26px; }
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu[open] summary { background: var(--bg-hover); }
.header-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 4px; width: 210px; padding: 8px; background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-card); }
.header-menu-panel .btn { justify-content: flex-start; border: 0; }

/* Controls */
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 550; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-icon, .btn-add { width: 44px; min-width: 44px; padding: 0; font-size: 25px; }
.btn-sm, .btn-xs { font-size: 13px; }
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-main); border-color: var(--border-color); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
.doc-topbar .btn-ghost { border-color: transparent; }
.btn-secondary:hover, .btn-ghost:hover { background: var(--bg-hover); }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inline-add-form { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.doc-inline-input, .form-input { width: 100%; min-width: 0; min-height: 44px; padding: 9px 11px; color: var(--text-main); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 16px; outline: none; }
.doc-inline-input { flex: 1; }
.doc-inline-input:focus, .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg-key-event); }
textarea.form-input { resize: vertical; line-height: 1.5; }
.input-time-short { flex: 0 0 72px; width: 72px; text-align: center; font-variant-numeric: tabular-nums; }

/* Page and sections */
.doc-canvas { padding: 14px max(12px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.doc-container { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1120px; margin: 0 auto; }
.doc-container > *, .doc-section > *, .day-schedule-card > * { min-width: 0; }
.doc-section { padding: 16px 14px; background: var(--bg-surface) url("/img/sakura-branch.svg") no-repeat right top / 180px auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.drag-handle { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; min-height: 28px; color: var(--text-secondary); font-size: 16px; font-weight: 800; letter-spacing: -3px; line-height: 1; user-select: none; cursor: grab; touch-action: none; }
.section-drag-handle { align-self: flex-start; margin-top: 2px; }
.drag-handle:active, .is-dragging { cursor: grabbing; }
.doc-section.is-dragging, .doc-check-row.is-dragging, tr.is-dragging { opacity: .65; }
.is-dragging-source { display: none !important; }
.drag-placeholder { height: 4px; min-height: 4px; margin: 4px 0; border: 0; border-radius: 999px; background: var(--accent); }
.section-placeholder { height: 6px; min-height: 6px; margin: 5px 0; }
.drag-preview { position: fixed; z-index: 1000; top: 0; left: 0; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: hidden; pointer-events: none; opacity: .94; box-shadow: 0 12px 30px rgb(0 0 0 / 20%); transform: translateZ(0); }
.drag-preview > .doc-section, .drag-preview > .doc-check-row { width: 100%; margin: 0; }
.drag-preview-table { display: table; width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; background: var(--bg-surface); }
.drag-preview-table tr { display: table-row; opacity: 1; }
.drag-preview-table td { display: table-cell; }
.item-drag-handle { margin-left: -4px; }
.doc-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.doc-h2 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.section-caption { color: var(--text-secondary); font-size: 12px; }
.aspiration-add-form { margin-top: 12px; }
.day-heading { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.empty-cell-hint { padding: 16px 10px; color: var(--text-secondary); font-size: 14px; text-align: center; }

/* Shared checklists */
.weekly-goals-box { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.doc-check-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-bottom: 1px solid var(--border-color); min-width: 0; }
.doc-check-row:last-child { border-bottom: 0; }
.doc-check-row.is-done .doc-check-text { text-decoration: line-through; color: var(--text-muted); }
.doc-check-row.is-urgent { background: var(--bg-urgent); }
.doc-checkbox { flex: 0 0 22px; width: 22px; height: 22px; accent-color: var(--accent); cursor: pointer; }
.checkbox-hit-area { display: flex; align-items: center; justify-content: center; align-self: stretch; flex: 0 0 44px; min-height: 44px; margin-left: -8px; cursor: pointer; }
.doc-check-text { flex: 1; min-width: 0; padding: 11px 2px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.editable-text { cursor: pointer; color: inherit; }
button.editable-text { border: 0; background: transparent; text-align: left; }
.editable-text:hover { color: var(--accent); }
.row-item-wrap { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.row-item-wrap .editable-text { flex: 1; min-width: 0; padding: 10px 0; overflow-wrap: anywhere; }
.row-del-btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: var(--text-secondary); background: transparent; font-size: 23px; cursor: pointer; }
.row-del-btn:hover { color: var(--danger); background: var(--bg-urgent); }

/* Habits stay a table on every screen; only this region scrolls horizontally. */
.table-scroll-hint { margin: -2px 0 8px; color: var(--text-secondary); font-size: 12px; text-align: right; }
.table-scroll-wrap { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color); border-radius: 10px; }
.doc-table { width: 100%; border-collapse: collapse; background: var(--bg-surface); }
.doc-table th, .doc-table td { padding: 8px; border: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.doc-table thead th { background: var(--bg-table-head); font-size: 13px; font-weight: 600; }
.routine-table { min-width: 628px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.routine-table th, .routine-table td { border: 0; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.routine-table tr:last-child td { border-bottom: 0; }
.routine-table th:last-child, .routine-table td:last-child { border-right: 0; }
.routine-table .col-habit-name { position: sticky; left: 0; z-index: 1; width: 180px; padding: 4px 4px 4px 10px; vertical-align: middle; background: var(--bg-page); box-shadow: 3px 0 6px rgba(100, 30, 60, .06); }
.routine-table thead .col-habit-name { z-index: 2; padding: 10px; background: var(--bg-table-head); }
.routine-table .col-weekday { width: 64px; padding: 12px 8px; text-align: center; vertical-align: middle; }
.routine-check-cell { height: 52px; cursor: pointer; }
.routine-check-cell:hover { background: var(--bg-hover); }
.routine-check-cell.is-checked { background: var(--bg-key-event); }
.th-subdate { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; font-weight: 400; }

/* Daily tasks and schedule */
.days-schedule-stack { display: flex; flex-direction: column; gap: 28px; }
.day-schedule-card { min-width: 0; }
.day-3col-table, .day-3col-table tbody, .day-3col-table tr, .day-3col-table td { display: block; width: 100%; }
.day-3col-table { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.day-3col-table thead { display: none; }
.day-3col-table td { padding: 0; border: 0; }
.day-3col-table td::before { content: attr(data-label); display: block; padding: 8px 10px; color: var(--text-secondary); background: var(--bg-table-head); font-size: 12px; font-weight: 600; }
.day-event-grid-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); border-bottom: 1px solid var(--border-color); }
.day-event-grid-row:last-child { border: 0; }
.day-time-cell { display: flex; align-items: center; justify-content: center; padding: 10px 4px; border-right: 1px solid var(--border-color); color: var(--text-secondary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.day-event-grid-row.is-done .day-time-cell { text-decoration: line-through; color: var(--text-muted); }
.day-event-cell { border-bottom: 0; padding-left: 8px; gap: 6px; }
.urgent-badge { color: var(--danger); font-size: 11px; font-weight: 600; }
.day-inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--bg-elevated); border-top: 1px solid var(--border-color); }
.day-inline-form:not(.day-event-add-form) > .doc-inline-input { flex-basis: 100%; }
.day-inline-form > .btn { margin-left: auto; min-width: 44px; }
.day-event-add-form { flex-wrap: nowrap; }
.urgent-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.urgent-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Calendar: month grids always fit their container; event text lives below. */
#section-key-calendar .doc-section-header { align-items: flex-start; }
.season-filter-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
.season-btn { min-width: 0; min-height: 44px; padding: 6px 2px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); background: var(--bg-elevated); font-size: 12px; cursor: pointer; }
.season-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.seasonal-calendars-stack { display: flex; flex-direction: column; gap: 24px; }
.season-heading { margin-bottom: 10px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.calendar-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.calendar-month { min-width: 0; padding: 12px 6px 6px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-elevated); }
.calendar-month-title { padding: 0 6px 10px; font-size: 16px; font-weight: 650; text-transform: capitalize; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; width: 100%; }
.calendar-weekday { padding: 4px 0; color: var(--text-secondary); text-align: center; font-size: 11px; }
.calendar-day { position: relative; min-width: 0; min-height: 44px; padding: 8px 0 12px; border: 1px solid transparent; border-radius: 9px; color: var(--text-main); background: transparent; font-size: 14px; cursor: pointer; }
.calendar-day:hover { background: var(--bg-hover); }
.calendar-day.is-today { border-color: var(--accent); font-weight: 700; }
.calendar-day.has-event { color: var(--accent); background: var(--bg-key-event); font-weight: 650; }
.calendar-day.has-event::after { content: ''; position: absolute; left: calc(50% - 2px); bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.calendar-agenda { display: flex; flex-direction: column; gap: 4px; margin: 10px 4px 4px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.calendar-agenda-item { display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--text-main); background: var(--bg-key-event); text-align: left; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; cursor: pointer; }
.calendar-agenda-date { color: var(--accent); font-size: 11px; font-weight: 650; }

/* Editors */
.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(25, 10, 18, .5); }
.modal-card { width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow-card); padding-bottom: env(safe-area-inset-bottom); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--border-color); }
.modal-header h3 { min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.modal-close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 8px; color: var(--text-secondary); background: transparent; font-size: 26px; cursor: pointer; }
.modal-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.form-label { color: var(--text-secondary); font-size: 13px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.toast-container { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { width: fit-content; max-width: 100%; margin-left: auto; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-main); background: var(--bg-page); box-shadow: var(--shadow-card); font-size: 14px; overflow-wrap: anywhere; }
.toast.error { border-left: 4px solid var(--danger); }

@media (min-width: 600px) {
  .doc-topbar { padding-left: 20px; padding-right: 20px; }
  .week-range-label { font-size: 15px; }
  .doc-canvas { padding: 24px 20px 48px; }
  .doc-section { padding: 22px; }
  .doc-container { gap: 24px; }
  .doc-section-header > .inline-add-form { width: auto; max-width: 60%; }
  .season-filter-bar { max-width: 400px; }
  .modal-overlay { align-items: center; }
}
@media (min-width: 960px) {
  .table-scroll-hint { display: none; }
  .day-3col-table { display: table; table-layout: fixed; border-radius: 0; }
  .day-3col-table tbody { display: table-row-group; }
  .day-3col-table tr { display: table-row; }
  .day-3col-table td { display: table-cell; width: auto; vertical-align: top; border: 1px solid var(--border-color); }
  .day-3col-table thead { display: table-header-group; }
  .day-3col-table td::before { display: none; }
  .day-3col-table .col-day-tasks { width: 50%; }
  .day-3col-table .col-day-time { width: 64px; text-align: center; }
  .day-3col-table .col-day-event { width: calc(50% - 64px); }
  .sort-indicator { color: var(--accent); }
  .sortable-th { cursor: pointer; }
  .calendar-months { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .toast-container { left: auto; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }