:root{--bg:#f6f7fb;--surface:#ffffff;--text:#111827;--muted:#6b7280;--primary:#2563eb;--primary-600:#1d4ed8;--accent:#60a5fa;--danger:#ef4444;--danger-600:#dc2626;--ring:rgba(37,99,235,.35);--shadow:0 2px 10px rgba(0,0,0,.06)}
body{font-family:system-ui,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:10px;width:auto;height:auto;background:var(--primary);color:#fff;padding:6px 10px;border-radius:6px;z-index:10000}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#1f2937;color:#fff;position:sticky;top:0;z-index:100}
.brand{display:none}
.nav-left{display:flex;gap:16px;align-items:center}
.nav-right{display:flex;gap:10px;align-items:center}
.nav-link{color:#fff;text-decoration:none;position:relative;padding:8px 10px;transition:color .15s ease}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#60a5fa;transform:scaleX(0);transition:transform .2s ease}
.nav-link:hover{color:#bfdbfe}
.nav-link:hover::after{transform:scaleX(1)}
.nav-user{margin-right:12px;color:#e5e7eb}
.btn-logout{background:var(--danger);color:#fff;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;margin-left:10px}
.btn-logout:hover{background:var(--danger-600)}
.container{max-width:1200px;margin:28px auto;padding:0 20px}
.container p{margin:0 0 12px}
h1{font-size:40px;line-height:1.2;margin:0 0 12px}
h2{font-size:28px;line-height:1.3;margin:20px 0 8px}
h3{font-size:22px;line-height:1.4;margin:16px 0 6px}
.card{background:var(--surface);border-radius:10px;box-shadow:var(--shadow);padding:18px}
table{width:100%;border-collapse:collapse;margin-top:12px}
thead th{font-weight:600;color:var(--muted)}
th,td{border-bottom:1px solid #e5e7eb;padding:10px 12px;text-align:left}
button{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:10px 14px;cursor:pointer;box-shadow:none;transition:background .15s ease, box-shadow .15s ease}
button:hover{background:var(--primary-600)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
input,select{padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:var(--surface);color:var(--text)}
input:focus,select:focus{outline:none;box-shadow:0 0 0 3px var(--ring);border-color:transparent}
.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:8px;border-radius:6px;margin-bottom:10px}
.card form button{margin-top:8px}
label{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.toast{position:fixed;right:16px;top:16px;background:#111827;color:#fff;border-radius:8px;padding:10px 12px;box-shadow:0 10px 20px rgba(0,0,0,.2);opacity:.95;z-index:2000;display:none}
.skeleton{background:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);background-size:200% 100%;animation:sk 1.2s infinite ease-in-out}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.filters{display:flex;gap:16px;align-items:flex-end}
.filters form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.calendar{margin-top:16px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calendar-header{font-weight:600;text-align:center}
.calendar-cell{background:var(--surface);border:1px solid #e5e7eb;border-radius:8px;min-height:92px;padding:8px;cursor:pointer;display:flex;flex-direction:column}
.calendar-cell.muted{background:#f3f4f6;color:#9ca3af}
.calendar-cell.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15) inset;animation:cellPulse .3s ease}
.calendar-cell:hover{transform:translateY(-1px);transition:transform .1s ease}
.calendar-cell .day{font-size:13px;color:#374151}
.calendar-cell .hours{font-size:16px;font-weight:600;color:#111827;margin-top:auto}
.button{display:inline-block;background:var(--primary);color:#fff;border-radius:6px;padding:6px 10px;text-decoration:none}
.button:hover{background:var(--primary-600)}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:12px}
.modal-content{background:var(--surface);border-radius:12px;min-width:420px;max-width:640px;width:auto;max-height:80%;overflow:auto;animation:fadeIn .15s ease;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.modal-header h3{margin:0;font-size:20px}
.modal-header button{background:#e5e7eb;color:#111827;border-radius:6px;padding:6px 10px}
.modal-header{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #e5e7eb}
.modal-body{padding:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2 .full{grid-column:1 / -1}
.context-menu{position:absolute;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);min-width:240px;max-width:320px;z-index:1000;padding:4px;display:none;font-size:13px}
.context-menu h4{margin:4px 8px;font-size:11px;color:#6b7280;text-transform:uppercase}
.context-menu .row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:4px}
.context-menu .row:hover{background:#f3f4f6}
.context-menu .actions{display:none;gap:6px}
.context-menu .row:hover .actions{display:flex}
.context-menu button{background:#e5e7eb;color:#111827;border:none;border-radius:4px;padding:3px 6px;cursor:pointer;font-size:12px}
.context-menu button:hover{background:#d1d5db}

/* burger & responsive */
.burger{display:none;background:transparent;border:none;cursor:pointer;margin-right:8px}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0;transition:transform .2s ease}
@media (max-width: 768px){
  .nav-left{display:none}
  .burger{display:block}
  .topbar{position:sticky}
  .topbar.open #navMenu{display:flex;flex-direction:column;gap:8px;position:absolute;left:0;right:0;top:56px;background:#1f2937;padding:10px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
}

/* removed theme toggle styles */

@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes cellPulse{from{box-shadow:0 0 0 0 rgba(37,99,235,.25) inset}to{box-shadow:0 0 0 2px rgba(37,99,235,.15) inset}}

/* ===== Mobile enhancements ===== */
@media (max-width: 768px){
  .container{padding:0 12px}
  h1{font-size:28px}
  h2{font-size:22px}
  h3{font-size:18px}
  .nav-user{display:none}
  .grid2{grid-template-columns:1fr}
  .modal-content{min-width:auto;max-width:560px;width:95vw}
  .calendar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .calendar-grid{min-width:560px}
  .calendar-cell{min-height:70px}
  .calendar-cell .hours{font-size:15px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  th,td{white-space:nowrap}
}

@media (max-width: 480px){
  h1{font-size:24px}
}

/* Модальный футер для редактирования записи */
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.modal-footer > div {
  display: flex;
  gap: 8px;
}
.modal-footer .btnClose {
  margin-left: auto;
}
.update-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
#editFormCreate {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#editFormCreate label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

/* Кнопка удаления */
button[style*="background:#d32f2f"] {
  background: var(--danger);
}
button[style*="background:#d32f2f"]:hover {
  background: var(--danger-600);
}