:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#1a2033;
  --muted:#6b7385;

  --accent:#6a5cff;      /* яркий фиолетовый */
  --accent-2:#00d4ff;    /* неоновый голубой */
  --accent-3:#ff5c93;    /* ярко-розовый */
  --ok:#14c38e;
  --warn:#ffb020;
  --danger:#ff5563;

  --radius:18px;
  --shadow: 0 10px 30px rgba(26,32,51,0.12);

  /* ПЛАНЕР: базовая высота одного часа (меняется медиаправилами) */
  --hourPx: 80px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}

.page-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:420px;background:linear-gradient(180deg,#fff, #f3f5ff);border-radius:24px;padding:28px 24px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.brand .logo-dot{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.brand h1{margin:0;font-size:24px;letter-spacing:.3px}
.form .form-group{margin:14px 0}
.form label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.form input, .form textarea, .form select{
  width:100%;border:1px solid #e5e7f0;background:#fff;border-radius:14px;padding:12px 14px;outline:none;
  transition:.2s;border-bottom:2px solid transparent;
}
.form input:focus, .form textarea:focus{
  box-shadow:0 0 0 4px rgba(106,92,255,.12); border-bottom-color: var(--accent);
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:10px 14px;cursor:pointer;font-weight:600;box-shadow:var(--shadow);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.btn-primary{background:linear-gradient(135deg,#ff8a00, var(--accent-3));color:#fff}
.btn-ghost{background:#fff}
.icon-btn{border:none;background:transparent;font-size:18px;cursor:pointer}

.flash{margin-top:12px}
.flash-item{padding:10px 12px;border-radius:12px;background:#fff;box-shadow:var(--shadow);font-size:14px}
.flash-item.danger{border-left:4px solid var(--danger)}

.demo-hint{margin-top:14px;color:var(--muted);font-size:13px}

.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#ffffff,#eef0ff);padding:18px;box-shadow:var(--shadow);position:sticky;top:0;height:100vh}
.profile{text-align:center;background:linear-gradient(180deg,#fff,#f6f7ff);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.profile img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.profile .name{margin-top:10px;font-weight:700}
.profile .meta{color:var(--muted);font-size:13px}

.menu{margin:18px 0}
.menu-item{display:block;padding:12px 14px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:600}
.menu-item.active{background:linear-gradient(135deg,#f7f3ff,#e8f9ff);border:1px solid #eceffd}

.logout-wrap{margin-top:auto;text-align:center}

.content{padding:24px}
.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;transition:.2s}
.card:hover{transform:translateY(-2px)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-title{font-size:18px;font-weight:800;margin:8px 0}
.card-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.card-actions{margin-top:12px;display:flex;gap:10px}

.status{padding:6px 10px;border-radius:999px;font-size:12px;color:#fff;font-weight:800;letter-spacing:.3px}
.status.inprogress{background:linear-gradient(135deg,#ff8a00,#ff5e62)}
.status.approved{background:linear-gradient(135deg,#00b09b,#96c93d)}
.status.overdue{background:linear-gradient(135deg,#fe0000,#fe3535)}
.status.finished{background: linear-gradient(135deg, #3a7bd5, #00d2ff);}
.date{color:var(--muted);font-size:12px}

.empty{opacity:.7;padding:24px}

.modal{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;z-index:40}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,14,25,.45);backdrop-filter:blur(3px)}
.modal-card{position:relative;margin-top:40px;width:min(840px,92vw);background:#fff;border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f1f2f8;background:linear-gradient(135deg,#ffffff,#f6f7ff)}
.modal-body{padding:16px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #f1f2f8;background:#fff}

.slide-down{animation:slideDown .34s ease-out}
@keyframes slideDown{
  from{transform:translateY(-28px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#eef0ff;border-radius:999px;padding:6px 10px;font-size:12px;color:#3c42a6}

.modal-list{max-height:60vh;overflow:auto}
.person{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:#fff;border:1px solid #eef0f6;margin-bottom:8px;cursor:pointer}
.person:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.person img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.person-info{flex:1}
.person-name{font-weight:700}
.person-meta{font-size:12px;color:var(--muted)}
.person-select{font-weight:800;color:#5f53ff}

.toast{position:fixed;right:18px;bottom:18px;background:#12152a;color:#fff;padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.25s;z-index:60}
.toast.show{opacity:1;transform:translateY(0)}
.modal-card {
  border-radius: 20px;
  background: linear-gradient(180deg,#ffffff,#f9faff);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  overflow: hidden;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal-body .form-group {
  margin-bottom: 16px;
}

.modal-body label {
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  display:block;
}

.modal-body input, 
.modal-body textarea, 
.modal-body select {
  width: 100%;
  border: 1px solid #e2e4ef;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  transition: .2s;
}

.modal-body input:focus,
.modal-body textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(106,92,255,.12);
}

/* ========== FILE CARDS ========== */
.file-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}

.file-card{
  display:flex; align-items:center; gap:12px;
  padding:12px; border:1px solid #e9ecf6; border-radius:16px;
  background:linear-gradient(180deg,#fff,#f9fbff);
  box-shadow:0 6px 16px rgba(26,32,51,.06);
  transition:.18s;
}
.file-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(26,32,51,.10); }

.file-icon{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#eef1ff; font-weight:800; font-size:12px; color:#3c42a6;
}
.file-icon._img{ background:#fff0f5; color:#d94888; }
.file-icon._pdf{ background:#fff3f0; color:#e3573f; }
.file-icon._doc{ background:#eef7ff; color:#2b6bff; }
.file-icon._xls{ background:#e9fbf2; color:#1e9e66; }
.file-icon._zip{ background:#f7efff; color:#7d4be2; }
.file-icon._vid{ background:#eaf7ff; color:#0c84d1; }

.file-info{ flex:1; min-width:0; }
.file-name{
  font-weight:700; font-size:13px; color:#1a2033;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-meta{ font-size:12px; color:#6b7385; }

.file-open{
  text-decoration:none; font-size:12px; font-weight:800;
  padding:8px 10px; border-radius:12px; background:#fff; border:1px solid #e9ecf6;
}
.file-open:hover{ background:#f7f8ff; }

/* --- Avatar upload button fix --- */
.profile .avatar-form { margin-top: 12px; }
.profile .upload-btn { display:inline-flex !important; align-items:center; justify-content:center; width:auto; white-space:nowrap; padding:10px 16px; text-align:center; }
.profile .upload-btn input[type="file"]{ display:none; }

/* ====== Бургер скрыть на десктопе ====== */
.mobile-menu-btn {
  display: none;
  font-size: 22px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

/* ====== Мобильная шторка сайдбара ====== */
.sidebar-backdrop{
  position: fixed; inset: 0;
  background: rgba(10,14,25,.45);
  backdrop-filter: blur(2px);
  z-index: 45;
}

/* ====== Точки перелома ====== */
@media (max-width: 1200px){
  .cards{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
}

@media (max-width: 992px){
  .layout{ grid-template-columns: 1fr; }
  .mobile-menu-btn{ display: inline-flex; }

  .sidebar{
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(88vw, 320px);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 100;             /* поверх контента */
  }
  .sidebar.show{ transform: translateX(0); }
  .logout-wrap{ margin-top: 16px; }

  .content{ padding: 18px; }
  .content-header{ gap: 12px; }

  .cards{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }

  .modal-card{
    width: 96vw;
    margin-top: 20px;
    border-radius: 18px;
  }
  .modal-actions{ flex-direction: column; }
  .modal-actions .btn{ width: 100%; }

  .person{ padding: 12px; }
}

@media (max-width: 560px){
  .profile img{ width: 72px; height: 72px; }
  .file-grid{ grid-template-columns: 1fr; }
  .card-actions{ flex-direction: column; }
  .card-actions .btn{ width: 100%; }
}

/* ====== косметика ====== */
.card-title, .file-name{ word-break: break-word; }
.profile .upload-btn{ display:inline-flex !important; width:auto; white-space:nowrap; }
.modal-card{ max-width: 100%; }

/* =========================
   =======  PLANNER  =======
   ========================= */

/* ====== ПЛАНЕР (изолировано) ====== */
.planner {
  --hourPx: 80px;     /* высота часа */
  --timeCol: 33px;    /* НОВОЕ: ширина колонки времени на десктопе */
}
/* шапка планера */
.planner .planner-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.planner-header{
  align-items: center;
}
.planner .planner-header h2{ margin: 0; }
.planner .week-controls{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* подпись недели: два режима */
.planner .week-label{
  font-weight: 800;
  display: inline-flex; gap: 8px; align-items: center;
}
.planner .week-label .compact{ display: none; }

/* вкладки дней (пилюли) */
.planner .day-tabs{
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.planner .day-pill{
  border: 1px solid #eceffd;
  background: #fff;
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: .18s;
}
.planner .day-pill .wd{ font-size: 12px; color: var(--muted); text-transform: lowercase; }
.planner .day-pill .dm{ font-weight: 800; }
.planner .day-pill:hover{ transform: translateY(-1px); }
.planner .day-pill.active{
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: #fff; border-color: transparent;
}
.planner .day-pill.active .wd{ color:#fff; opacity:.9; }

/* трек */
.planner .day-track{
  position: relative;
  display: grid;
  grid-template-columns: var(--timeCol) 1fr;   /* было 100px 1fr */
  gap: 12px;
}
.planner .time-rail{
  position: relative;
  border-right: 1px dashed #e4e7f3;
}
.planner .time-row{
  position: relative;
  height: calc(var(--hourPx) / 2);
  border-bottom: 1px solid #f0f2fb;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 2px;
  padding-right: 6px;              /* было 8px */
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .2px;            /* компактнее вид */
}
.planner .time-row.half{
  height: calc(var(--hourPx) / 2);
  border-bottom: 1px dashed #f3f4fb;
}
.planner .time-row span{ position: sticky; top: 8px; }

.planner .plans-rail{
  position: relative;
  background: linear-gradient(180deg,#ffffff,#fbfcff);
  border: 1px solid #eef0f6;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: cell;
}

/* карточки плана */
.planner .plan-card{
  position: absolute;
  background: linear-gradient(135deg,#6a5cff,#00d2ff);
  color:#fff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(26,32,51,.18);
  border:1px solid rgba(255,255,255,.35);
  padding:8px 10px; cursor:pointer;
  display:flex; flex-direction:column; gap:4px;
  overflow:hidden;
}
.planner .plan-card .plan-title{ font-weight:800; line-height:1.2; }
.planner .plan-card .plan-note{ font-size:12px; opacity:.95; }
.planner .plan-card .plan-time{ font-size:12px; font-weight:700; opacity:.95; }

.planner .plan-card._alt1{ filter: hue-rotate(10deg) saturate(1.05); }
.planner .plan-card._alt2{ filter: hue-rotate(25deg) saturate(1.08); }
.planner .plan-card._alt3{ filter: hue-rotate(-12deg) saturate(1.06); }

/* короткие слоты */
.planner .plan-card{ min-height: 22px; line-height: 1.1; }
.planner .plan-card.one-line{
  flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
}
.planner .plan-card.one-line .plan-title{
  font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.planner .plan-card.one-line .plan-note{ display:none; }
.planner .plan-card.tiny{
  display:flex; align-items:center; justify-content:center;
  padding: 4px 8px; border-radius:999px;
}
.planner .plan-card.tiny .plan-time{ font-size:12px; font-weight:800; }
.planner .plan-card.tiny .plan-title,
.planner .plan-card.tiny .plan-note{ display:none; }

/* ===== планшеты и ниже ===== */
@media (max-width: 992px){
  .planner { --hourPx: 64px; --timeCol: 72px; }                    /* 1 час = 64px */
  .planner .planner-header{
    position: sticky; top: 0; z-index: 60; background: var(--bg);
    grid-template-columns: 1fr; gap: 8px; padding-block: 6px;
  }
  .mobile-menu-btn{ display:inline-flex; }         /* показать бургер */
  .planner .week-label .full{ display: none; }     /* на мобилке — компактная подпись */
  .planner .week-label .compact{ display: inline; }

  .planner .day-tabs{
    position: sticky; top: 56px; z-index: 55;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg,#f7f8fb 70%, rgba(247,248,251,0));
    padding: 6px 0 8px;
  }
  .planner .day-pill{ flex: 0 0 auto; min-width: 84px; padding: 6px 10px; }
}
@media (min-width: 993px){
  .planner .planner-controls{
    margin-left: auto;             /* уводим блок кнопок к правому краю */
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .planner .planner-weeklabel{
    font-weight: 800;
    min-width: 260px;
    text-align: center;
  }
  /* плашки дней стартуют там же, где и белая область plans-rail:
     ширина шкалы времени + зазор сетки */
  .planner .day-tabs{
    padding-left: calc(var(--timeCol, 100px) + 12px);
  }
}
/* ===== телефоны ===== */
@media (max-width: 768px){
  .planner { --hourPx: 56px; --timeCol: 40px; }   /* раньше колонка была 64px — стала уже */
  .planner .day-track{ grid-template-columns: var(--timeCol) 1fr; gap: 8px; }
  .planner .time-row{ font-size: 11px; padding-right: 4px; }
  .planner .plan-card{ padding:6px 8px; border-radius:10px; }
  .planner .plan-time{ font-size:11px; }
  .planner .plan-title{ font-size:13px; }
  .planner .plan-note{ font-size:11px; }
  .planner .plan-card.one-line{ padding:6px 8px; gap:6px; }
  .planner .day-pill{ min-width: 78px; }
}

/* ===== очень маленькие телефоны ===== */
@media (max-width: 420px){
  .planner { --hourPx: 48px; --timeCol: 50px; }
  .planner .day-track{ grid-template-columns: var(--timeCol) 1fr; }
  .planner .time-row{ font-size: 10px; }
  .planner .plan-title{ font-size: 12px; }
}


/* === Таблица сотрудников (lead_users) === */
.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 15px;
  color: #222;
}

.table thead {
  background: #f8f9fc;
}

.table th {
  font-weight: 600;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid #e7e9ef;
  color: #1a1a1a;
  white-space: nowrap;
}

.table td {
  padding: 12px 18px;
  border-bottom: 1px solid #f0f1f5;
  vertical-align: middle;
}

.table tbody tr:hover {
  background: #f5f8ff;
  transition: 0.15s;
}

.table .text-end {
  text-align: right;
}

.table .btn {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
  transition: background 0.2s, transform 0.1s;
}

.table .btn:hover {
  transform: translateY(-1px);
}

.table .btn-outline-primary {
  border: 1px solid #2b6ef2;
  color: #2b6ef2;
  background: #fff;
}

.table .btn-outline-primary:hover {
  background: #2b6ef2;
  color: #fff;
}

.table .btn-outline-danger {
  border: 1px solid #f23b3b;
  color: #f23b3b;
  background: #fff;
}

.table .btn-outline-danger:hover {
  background: #f23b3b;
  color: #fff;
}



/* адаптив для мобил */
@media (max-width: 768px) {
  .table th, .table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}