и соседа стилизовать нельзя: иначе логотип разъедется с содержимым страницы. */ body.wide .page { max-width: 1440px; } body.wide .header-inner { max-width: 1440px; } .hero { position: relative; margin-bottom: 30px; padding: 10px 0 6px; } .hero h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; line-height: 1.2; } .hero-sub { color: var(--text-muted); margin: 0; font-size: 14px; max-width: 600px; } .accent-word { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* --- Счётчики --- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: none; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; } .stat-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .stat-num { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; } .stat-label { font-size: 13px; color: var(--text-muted); } /* --- Карточки --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 32px; margin-bottom: 28px; } .card h2 { margin: 0 0 20px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } label { display: block; font-weight: 600; margin-bottom: 16px; font-size: 14px; } select, input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-control); font: inherit; background: #fff; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .btn { background: var(--accent-grad); color: #fff; border: 0; padding: 14px 32px; border-radius: var(--radius-control); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(194, 120, 84, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(194, 120, 84, 0.42); } .btn:active { transform: translateY(0); } .btn-ghost { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); text-decoration: none; display: inline-block; transition: border-color 0.15s ease, color 0.15s ease; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .alert { padding: 13px 16px; border-radius: var(--radius-control); margin-bottom: 20px; font-size: 14px; font-weight: 600; } .alert-error { background: #F7E5E3; color: var(--error); } .alert-ok { background: #EAF0E6; color: var(--success); } .empty { color: var(--text-muted); } .hint { color: var(--text-muted); font-size: 13px; margin: 2px 0 14px; } /* --- Календарь --- */ .calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .calendar-title { margin: 0; font-size: 18px; font-weight: 700; } .client-picker { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .client-picker label { margin-bottom: 0; flex: 1; min-width: 200px; } .legend { display: flex; gap: 18px; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .dot-free { background: #F1ECE5; border: 1px solid var(--border); } .dot-busy { background: var(--accent); } .week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; } .week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: var(--radius-control); text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--border); font-size: 12px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .week-day:hover { border-color: var(--accent); transform: translateY(-1px); } .week-day .wd-label { color: var(--text-muted); } .week-day .wd-num { font-weight: 700; font-size: 16px; } .week-day .wd-count { font-size: 11px; color: var(--accent); font-weight: 600; } .week-day.today .wd-num { color: var(--accent); font-weight: 800; } .week-day.today .wd-label { color: var(--accent); } .week-day.selected { background: var(--accent-grad); border-color: var(--accent); color: #fff; box-shadow: 0 6px 14px rgba(194, 120, 84, 0.35); } .week-day.selected .wd-label, .week-day.selected .wd-num, .week-day.selected .wd-count { color: #fff; } .grid-hint { display: none; } .grid-wrap { overflow: auto; max-height: 72vh; overscroll-behavior: contain; } .grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 420px; } .grid th { font-size: 13px; font-weight: 600; color: var(--text); padding: 8px 6px; text-align: left; } .grid .grid-time { white-space: nowrap; font-size: 12px; color: var(--text-muted); width: 56px; min-width: 56px; font-weight: 600; } .grid td { padding: 3px; } /* Закреплённые области (правки Брезгина): шапка аппаратов при скролле вниз, колонка времени при скролле вправо. border-collapse: separate обязателен — при collapse sticky-ячейки не держатся в браузерах. */ .grid thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); box-shadow: inset 0 -1px 0 var(--border); } .grid thead th:first-child { left: 0; z-index: 3; box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border); } .grid tbody th.grid-time { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: inset -1px 0 0 var(--border); } .grid thead th:not(:first-child), .grid td { min-width: 96px; } .slot { display: block; width: 100%; min-height: 40px; border-radius: 14px; border: 0; font: inherit; cursor: pointer; text-align: center; } .slot-free { background: #F1ECE5; color: transparent; font-weight: 700; border: 1px solid var(--border); border-radius: 14px; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .slot-free:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.03); box-shadow: 0 6px 16px rgba(194, 120, 84, 0.35); } .slot-busy { background: var(--accent-grad); color: #3D3A37; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 7px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); } .slot-owner { font-size: 12px; font-weight: 800; line-height: 1.15; word-break: break-word; } .slot-cancel { background: none; border: 0; color: rgba(61, 58, 55, 0.85); font: inherit; font-size: 10px; text-decoration: underline; cursor: pointer; padding: 0; opacity: 0.85; } .slot-cancel:hover { opacity: 1; } .slot-continuation { background: var(--accent); min-height: 40px; border-radius: 14px; opacity: 0.45; } .slot-time { font-size: 10px; font-weight: 600; opacity: 0.8; line-height: 1.1; } /* --- Сотрудники --- */ .staff-list { list-style: none; margin: 0; padding: 0; } .staff-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .staff-list li:last-child { border-bottom: 0; } .staff-dot { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } .staff-id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; } .staff-email { font-weight: 600; } .staff-role { font-size: 12px; color: var(--text-muted); } .staff-list .item-form { flex: 2; min-width: 260px; } .staff-list .pw-form { flex: 1 1 100%; } .w-role { width: 150px; flex: 0 0 auto; } .color-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .swatch { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.15s ease, border-color 0.15s ease; } .swatch:hover { transform: scale(1.12); border-color: var(--text); } .color-input { width: 44px; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: #fff; cursor: pointer; } .item-form .color-input { margin-top: 0; } /* --- Оборудование --- */ .equipment-list { list-style: none; margin: 0; padding: 0; } .equipment-list li { display: block; padding: 16px 0; border-bottom: 1px solid var(--border); } .equipment-list li:last-child { border-bottom: 0; } .eq-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; } .eq-name { font-weight: 600; } .eq-cat { font-size: 12px; color: var(--text-muted); } .eq-actions { display: flex; gap: 6px; } .eq-order { display: flex; gap: 4px; } .eq-order button { min-width: 40px; } .eq-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; } /* Подписи полей аппарата. Раньше пояснения жили в title и всплывали только при наведении мышью — на телефоне их не было видно вообще. */ .equipment-list .item-form { align-items: flex-end; } .equipment-list .item-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); } .equipment-list .item-form label input { margin-top: 0; width: 100%; } .badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: #EAF0E6; color: var(--success); } .badge.maintenance { background: #F5EBDD; color: #A96545; } .badge.retired { background: #EEE; color: var(--text-muted); } .badge.cancelled { background: #EEE; color: var(--text-muted); } /* --- Подвал --- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); } .footer-inner { max-width: 1040px; margin: 0 auto; padding: 22px 24px; color: var(--text-muted); font-size: 13px; } /* --- Страница входа --- */ .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: radial-gradient(900px 480px at 82% -10%, var(--bg-glow-1), transparent 60%), radial-gradient(800px 420px at -6% 112%, var(--bg-glow-2), transparent 55%), var(--bg); } .auth { width: 100%; max-width: 410px; } .brand-center { display: flex; justify-content: center; margin-bottom: 22px; } .auth-card { padding: 34px; margin-bottom: 0; border-radius: 20px; box-shadow: var(--shadow-lg); } .auth-card h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; } .auth-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 24px; } /* --- Акценты на карточках --- */ .card h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--accent-grad); } .stat-accent { background: var(--accent-grad); border-color: transparent; } .stat-accent .stat-num, .stat-accent .stat-label { color: #fff; } .stat-accent .stat-icon { background: rgba(255, 255, 255, 0.22); } /* --- Таблица (история) --- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); } .table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .table tr:last-child td { border-bottom: 0; } .nowrap { white-space: nowrap; } /* --- Кнопка удаления --- */ .btn-danger { background: #fff; border: 1px solid var(--error); color: var(--error); border-radius: var(--radius-control); padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .btn-danger:hover { background: #F7E5E3; } /* --- Инлайн-формы (правка) --- */ .item-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; } .item-form input { margin-top: 0; } .item-form .grow { flex: 1; min-width: 140px; } .item-form .w-num { width: 110px; flex: 0 0 auto; } /* Переход к произвольной дате в шапке календаря. */ .date-jump { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; } .date-jump label { font-size: 12px; color: var(--text-muted); } .date-jump input { margin-top: 0; } /* Быстрая запись: свёрнута, чтобы не занимать первый экран под расписанием. Дублирует клик по слоту, но Брезгин просил вернуть в неё выбор даты — значит ею пользуются, и убирать её нельзя. */ .quick-book summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; } .quick-book summary::-webkit-details-marker { display: none; } .quick-book summary h2 { margin: 0; } .quick-book summary::after { content: "развернуть"; font-size: 13px; color: var(--text-muted); font-weight: 400; } .quick-book[open] summary::after { content: "свернуть"; } .quick-book[open] summary { margin-bottom: 16px; } /* Выгрузка дня — под таблицей, отдельной строкой. */ .calendar-footer { display: flex; justify-content: flex-end; margin-top: 14px; } /* --- Поиск --- */ .search-bar { display: flex; gap: 10px; margin-bottom: 16px; } .search-bar input { margin-top: 0; flex: 1; } /* --- Экспорт в легенде --- */ .legend-export { margin-left: auto; font-size: 12px; } /* --- Модалка выбора врача --- */ .modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(61, 58, 55, 0.45); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-backdrop[hidden] { display: none; } .modal { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); padding: 28px; width: 100%; max-width: 420px; } .modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; } .modal-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; } /* --- Переключатель темы --- */ .theme-toggle { background: none; border: 0; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--accent); background: var(--accent-soft); } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* --- Тёмная тема (антрацит/графит, акцент — терракота) --- */ html[data-theme="dark"] { --bg: #161618; --surface: #2C2C2E; --accent: #E08B62; --accent-hover: #F0A17C; --accent-2: #C27854; --accent-soft: rgba(224, 139, 98, 0.16); --accent-grad: linear-gradient(135deg, #E08B62 0%, #C27854 100%); --glass: rgba(44, 44, 46, 0.72); --text: #F2F0ED; --text-muted: #A39B99; --success: #9DB895; --error: #E08A85; --border: #3A3A3C; --bg-glow-1: rgba(224, 139, 98, 0.10); --bg-glow-2: rgba(194, 120, 84, 0.08); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] select, html[data-theme="dark"] input { background: #1C1C1E; } html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .btn-danger, html[data-theme="dark"] .week-day { background: var(--surface); } html[data-theme="dark"] .btn-danger:hover { background: rgba(224, 138, 133, 0.16); } html[data-theme="dark"] .slot-free, html[data-theme="dark"] .dot-free { background: #2C2C2E; } html[data-theme="dark"] .badge { background: rgba(157, 184, 149, 0.16); } html[data-theme="dark"] .badge.maintenance { background: rgba(224, 139, 98, 0.16); color: var(--accent); } html[data-theme="dark"] .badge.retired, html[data-theme="dark"] .badge.cancelled { background: #3A3A3C; } html[data-theme="dark"] .alert-error { background: rgba(224, 138, 133, 0.16); } html[data-theme="dark"] .alert-ok { background: rgba(157, 184, 149, 0.16); } html[data-theme="dark"] .color-input { background: #1C1C1E; } html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .site-header { border-bottom-color: var(--border); } /* --- Адаптив --- */ @media (max-width: 640px) { .hero h1 { font-size: 30px; } .stats { grid-template-columns: 1fr 1fr; } .row { grid-template-columns: 1fr; } .header-user { display: none; } /* Шапка. Строка меню (Пациенты / Сотрудники / … / Выйти) длиннее экрана телефона: пункты не сжимаются, полосы прокрутки у неё не было, и она растягивала документ шире окна — вбок уезжала вся страница (жалоба владельца 10.09.2026: «строчка где пациенты… уводит всю страницу вбок», «Сотрудники» обрезано). Теперь прокручивается сама полоса меню, страница остаётся по экрану. */ .header-inner { flex-wrap: wrap; padding: 10px 14px; row-gap: 6px; } .header-nav { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .header-nav::-webkit-scrollbar { display: none; } .header-nav > * { flex: 0 0 auto; } .header-nav .btn-link { display: inline-flex; align-items: center; padding: 8px 12px; min-height: 40px; } /* Страховка от бокового уезда: если что-то ещё окажется шире экрана, оно прокручивается внутри себя, а не тащит за собой страницу. clip, а не hidden: hidden на html делает его скролл-контейнером и ломает залипающую шапку. Уточнение владельца 10.09 («поле даты вылезло за экран») — это ровно оно: пока страница уезжала вбок, правое поле выглядело вылезшим за край. */ html, body { overflow-x: clip; max-width: 100%; } /* Контролы формы — строго по ширине формы, без пиксельных ширин. */ select, input, textarea { max-width: 100%; box-sizing: border-box; } /* Поля страницы и карточки съедали пятую часть ширины телефона. */ .page { padding: 24px 14px 64px; } .card { padding: 18px 14px; } /* Пальцем в кнопку высотой 30 px не попасть. 44 px — принятый минимум для касания; на компьютере размеры остаются прежними. */ .btn-ghost { padding: 12px 16px; font-size: 14px; min-height: 44px; } .btn { padding: 14px 24px; width: 100%; } /* Строка аппарата: четыре поля в ряд на узком экране становились огрызками. */ .equipment-list .item-form label, .equipment-list .item-form .w-num { flex: 1 1 100%; width: 100%; } .equipment-list .item-form button { width: 100%; } .eq-order { width: 100%; } .eq-order button { flex: 1; } .eq-row { flex-wrap: wrap; } /* Список сотрудников и пациентов — теми же правилами. */ .staff-list .item-form, .staff-id { min-width: 100%; } /* Семь дней по 43 px нечитаемы: разворачиваем ленту с прокруткой. */ .week-strip { display: flex; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .week-day { flex: 0 0 62px; scroll-snap-align: center; } /* Поле даты. Родной контрол телефона рисуется своим шрифтом и своей высотой и выпадает из сетки соседних полей (замечание владельца 10.09.2026: «дата уехала»). Приводим его к общему виду контрола. */ input[type="date"] { font: inherit; min-height: 46px; } input[type="date"]::-webkit-date-and-time-value { text-align: left; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; } /* «Перейти к дате»: поле и кнопка в одной строке, пока помещаются. min-width на поле — гарантия, что «10.09.2026» видно целиком: при min-width: 0 кнопка дожимала поле, и год обрезался до «10.09.202» (замечание владельца по макету 10.09.2026). Если строка не сходится, переносится кнопка, а не обрезается дата: у .date-jump включён flex-wrap. */ .date-jump { width: 100%; } .date-jump label { flex: 1 1 100%; } .date-jump input { flex: 1 1 auto; min-width: 172px; } .date-jump button { flex: 0 0 auto; } /* Выгрузка дня на телефоне — во всю ширину, как остальные действия. */ .calendar-footer a { width: 100%; text-align: center; } .calendar-title { font-size: 16px; } .calendar-nav { gap: 8px; } /* Подсказка про боковую прокрутку таблицы. */ .grid-hint { display: block; margin: 0 0 8px; font-size: 12px; color: var(--text-muted); } .grid-wrap { max-height: 64vh; } .grid thead th:not(:first-child), .grid td { min-width: 88px; } }