/* ===== БАЗА ===== */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
:root{
  --card-max: 360px;
  --gap: 8px;
  --radius: 12px;
  --border: #e2e6f0;
  --shadow: 0 6px 24px rgba(23,29,77,.06);
  --ink: #222;
  --muted: #667085;
  --brand: #357dcb;
  --ok: #48bf27;
  --bg-soft: #f6f8fc;

  --off-bg: #eef1f5;
  --off-ink: #9aa3b2;
  --weekbar-bg: #eceff3;
  --weekend-bg: #e9edf6;
  --weekend-ink: #2f3a57;
}
body{
  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
/* скрытый, но доступный текст/элементы */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.svg-sprite{ display:none; }

/* ===== Карточки-секции ===== */
.calendar3, .write, .mobile_sec, .date_select{
  width: min(100vw, var(--card-max));
  margin: 18px auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}

/* ===== Календарь ===== */
#calendar3{
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px 8px;
  table-layout: fixed;
}
#calendar3 thead td{ border: 0; }

#calendar3 thead tr:first-child td{
  padding: 8px 4px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
#calendar3 thead tr:first-child td:first-child{ text-align: left; }
#calendar3 thead tr:first-child td:last-child { text-align: right; }

#mounth_select, #year_select{
  background: #fff;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  height: 40px;
  padding: 0 14px;
  font-size: 15px;
  line-height: 40px;
  color: #1f2937;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 1px 2px rgba(16,24,40,.05);
  transition: border-color .15s, box-shadow .15s, background .15s;
  display: inline-block;
  vertical-align: middle;
}
#mounth_select{ min-width: 160px; max-width: 220px; width: auto; }
#year_select { width: 86px; text-align: center; }

select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
select:hover{ border-color: #b8c2d8; }
select:focus, #year_select:focus{
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53,125,203,.15);
}

#calendar3 thead tr:nth-child(2) td{
  color: #3a3f55;
  background: var(--weekbar-bg);
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  letter-spacing: .08em;
}
#calendar3 thead tr:nth-child(2) td:first-child{ border-top-left-radius: 10px; }
#calendar3 thead tr:nth-child(2) td:last-child { border-top-right-radius: 10px; }
.day_ned{ background: transparent !important; }

#calendar3 thead tr:nth-child(2) td:nth-child(7),
#calendar3 thead tr:nth-child(2) td:nth-child(8){
  background: var(--weekend-bg);
  color: var(--weekend-ink);
}

#calendar3 tbody td{
  width: 38px; height: 38px;
  text-align: center; vertical-align: middle; border: none;
}
.ir, .le, .today_ir, .today_le{
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(31,41,55,.06);
  font-size: 15px;
  transition: box-shadow .15s, transform .06s, background .15s, color .15s;
}
.ir, .today_ir{ background: var(--ok); color: #fff; }
.le, .today_le{ background: #fff; color: #111827; }
.today_ir, .today_le{ outline: 2px solid #ff2828; outline-offset: 0; }

#calendar3 tbody td:hover.ir,
#calendar3 tbody td:hover.le,
#calendar3 tbody td:hover.today_ir,
#calendar3 tbody td:hover.today_le{
  box-shadow: 0 6px 14px rgba(40,54,130,.12);
  transform: translateY(-1px);
}

/* дни из соседних месяцев (если помечаете классами) */
.off, .shadow, .offmonth{
  background: var(--off-bg) !important;
  color: var(--off-ink) !important;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  filter: saturate(.75);
}

/* ===== Форма записи ===== */
.write{ padding: 16px 14px 14px; }
.write p{
  margin: 0 0 12px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #3b4a8a;
}

form#form .form-control,
form#form select,
form#form input[type="tel"],
form#form input[type="number"],
form#form input[type="date"],
#zapisss, #time, #uvedomlen{
  width: 100%; height: 44px;
  background: #fff; border: 1px solid #cfd6e4; border-radius: 10px;
  padding: 0 12px; font-size: 15px; color: #1f2937;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 1px 2px rgba(16,24,40,.05);
  transition: border-color .15s, box-shadow .15s, background .15s;
  margin: 0 0 var(--gap) 0;
}
form#form .form-control:focus,
form#form select:focus,
#zapisss:focus, #time:focus, #uvedomlen:focus,
form#form input[type="tel"]:focus,
form#form input[type="number"]:focus,
form#form input[type="date"]:focus{
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53,125,203,.15);
}

/* Часы + минуты в одну строку со своими подписями */
.form-row{
  display: flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.form-row .col{ flex: 1 1 0; }
.form-row label{
  display: block;
  font-size: 13px;
  color: #475569;
  margin: 0 0 4px 2px;
}
#zapisss[multiple]{ height: 64px; padding-top: 6px; padding-bottom: 6px; }

/* Кнопки */
.panel-body{
  display: flex; gap: var(--gap); margin-top: 2px;
}
#save, #reset{
  flex: 1 1 0;
  height: 44px; border: none; border-radius: 10px;
  font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .2s ease;
}
#save{
  background: var(--brand); color:#fff;
  box-shadow: 0 6px 16px rgba(53,125,203,.22);
}
#save:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(53,125,203,.28); }
#reset{ background:#eef1f7; color:#3a3f55; }
#reset:hover{ background:#ffdfe0; }

/* Список записей */
.mobile_sec{ padding-top: 6px; min-height: 80px; }
.mobile_div{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f9fbff;
  box-shadow: 0 2px 10px rgba(17,24,39,.05);
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 15px;
}
.text_bold{ font-weight: 700; }
.text_bold2{ font-style: italic; margin-left: 5px; color: var(--muted); }
.del2, .edit2{
  display: inline-block;
  padding: 6px 10px; margin: 8px 6px 2px 0;
  border-radius: 8px; border: 1px solid var(--border);
  background: #fff; font-size: 13px; cursor: pointer;
  transition: background .2s, border-color .2s, transform .06s;
}

/* Дата просмотра */
.date_select{ background: var(--bg-soft); text-align: center; }
#mounth2{
  height: 38px; display:flex; align-items:center; justify-content:center;
  width: 92%; margin: 8px auto;
  font-weight: 800; color:#3553c7; background:#eef2ff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 1px 2px rgba(16,24,40,.05);
}

/* Кнопка «наверх» */
.to-up{
  position: fixed; right: 18px; bottom: 28px;
  width: 44px; height: 44px; display: none; z-index: 22; cursor: pointer;
  background: #ede7e1; border-radius: 50%;
  box-shadow: 0 8px 22px rgba(23,29,77,.18);
}
.btn-up-icon{ width: 44px; height: 44px; fill: #516af4; }

/* Мобила */
@media (max-width: 420px){
  :root{ --card-max: 100vw; }
  #mounth_select{ min-width: 0; }
  #year_select{ width: 90px; }
  #calendar3 tbody td{ width: 40px; height: 40px; }
}