* { box-sizing: border-box; }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
:root {
  --bg: #14191C;              /* тёмно-серый/чёрный */
  --card: #1B2126;            /* тёмная карточка */
  --text: #ffffff;            /* белый */
  --muted: #C5CCD6;           /* светло-серый текст */
  --border: #2A333B;          /* границы */
  --line: #2A333B;            /* линии таблиц */
  --input-bg: #1A1F26;        /* фон инпутов */
  --primary: #F05018;         /* оранжевый основной */
  --primary-600: #d44414;
  --accent: #685BC7;          /* фиолетовый дополнительный */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(240, 80, 24, .18);
}
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; }
.container { color-scheme: dark; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { margin: 0 0 16px; font-size: 30px; letter-spacing: 0.02em; text-transform: uppercase; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow); }
.card h2 { margin-top: 0; font-size: 20px; }
form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
input, select, button { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); }
input::placeholder { color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--primary); border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(58,99,255,.15); }
button { background: var(--primary); border: 1px solid var(--primary-600); cursor: pointer; transition: .15s ease; color: #0d0d0d; font-weight: 600; }
button:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,184,255,.25); }
button:active { transform: translateY(0); }
.btn { display: inline-block; padding: 12px 16px; background: var(--primary); color: #0d0d0d; text-decoration: none; border-radius: 10px; border: 1px solid var(--primary-600); font-weight: 600; }
.btn:hover { filter: brightness(1.05); }
.row { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-weight: 600; }
td.actions { width: 1%; white-space: nowrap; }
.muted { color: var(--muted); }

/* декоративные элементы под стиль сайта */
.divider { height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); border: 0; margin: 12px 0; }
.headline { text-transform: uppercase; letter-spacing: 0.08em; }
.tag { display:inline-block; padding: 4px 10px; border-radius: 999px; border:1px solid var(--accent); color: var(--accent); background: rgba(104,91,199,.12); font-size: 12px; font-weight:600; }

/* акцентные элементы фиолетовым */
.btn.secondary { background: var(--accent); border-color: var(--accent); color: #0d0d0d; }
.tabs .tab-btn.active { background: var(--accent); border-color: var(--accent); color: #0d0d0d; }

/* Tabs */
.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-btn { padding: 8px 12px; border-radius: 10px; border:1px solid var(--border); background: var(--input-bg); color: var(--text); cursor: pointer; }
.tab-btn.active { background: var(--primary); color: #06101a; border-color: var(--primary-600); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Брендовая надпись в шапке — аккуратный размер и выравнивание */
header.card .tag {
  display: inline-block;
  border: none;
  background: none;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.15;
  padding: 0;
}
/* Кнопка в шапке не переносится и остаётся справа */
header.card a.btn { white-space: nowrap; }

/* Единый вид календарей и полей редактирования под дизайн */
input, select, textarea { 
  height: 44px; 
}
/* Включаем тёмную тему для нативных пикеров в поддерживаемых браузерах */
input[type="date"], input[type="time"], input[type="month"] { 
  color-scheme: dark; 
  accent-color: var(--primary);
}
input[type="date"], input[type="time"], input[type="month"], select { 
  appearance: none; 
  -webkit-appearance: none; /* Chrome/Edge/Safari */
  background-color: var(--input-bg); 
  border: 1px solid var(--border); 
  color: var(--text); 
  border-radius: 10px; 
  padding-right: 36px; /* место под правую иконку */
}
/* Для Firefox оставим нативный пикер у дат/времени, но кастомизируем select */
select { -moz-appearance: none; }
/* Декоративные иконки слева для даты/месяца/времени */
input[type="date"], input[type="month"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C5CCD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center; /* иконка справа */
}
input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C5CCD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center; /* иконка справа */
}
/* Состояния */
input[type="date"]:hover, input[type="month"]:hover, input[type="time"]:hover,
select:hover {
  border-color: var(--primary-600);
}
input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus {
  outline: 2px solid var(--primary);
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(240, 80, 24, .15);
}
/* стрелка у select */
select { 
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(1.05em), calc(100% - 12px) calc(1.05em), 100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat: no-repeat;
}
select:focus { 
  background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
}
/* иконка календаря/часов для WebKit-браузеров */
/* Скрываем стандартную правую иконку календаря/часов (зона клика остаётся) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: 0; /* иконка не видна, но зона клика остаётся */
  cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 0; }
/* Firefox: убираем спин-баттоны у time/number, под общий стиль */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Точная стилизация внутренних частей для WebKit (Chrome/Edge/Safari) */
input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  color: var(--text);
  padding: 0 2px;
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  background: transparent;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="month"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-text { color: var(--muted); }
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="month"]::-webkit-datetime-edit-year-field,
input[type="month"]::-webkit-datetime-edit-month-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--text);
}
input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button { display: none; }

/* Сообщение под формой (вместо системного alert) */
.form-msg {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--primary-600);
  background: rgba(240, 80, 24, .14);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

/* Правка записи прямо в строке таблицы: крупные поля под палец */
tr.editing > td.entry-editor {
  padding: 14px 12px;
  background: rgba(240, 80, 24, .07);
}
.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.editor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.editor-field input,
.editor-field select {
  width: 100%;
  height: 48px;
  font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */
}
.editor-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--primary-600);
  background: rgba(240, 80, 24, .16);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.editor-actions button {
  flex: 1 1 150px;
  max-width: 240px; /* на широком экране кнопки не растягиваются на всю строку */
  min-height: 48px;
  font-size: 16px;
}
.editor-actions button.secondary {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
.editor-actions button[disabled] { opacity: .6; cursor: default; transform: none; }
/* Кнопки в строке таблицы — тоже под палец */
td.actions button { min-height: 44px; }

@media (max-width: 640px) {
  td.actions { white-space: normal; }
  td.actions button { display: block; width: 100%; }
  td.actions button + button { margin-top: 8px; }
  th, td { padding: 10px 8px; }
  /* Дата — на всю ширину: в узкой колонке она обрезается */
  .editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-grid > .editor-field:first-child { grid-column: 1 / -1; }
  .editor-actions button { max-width: none; }
}