/* =========================================================
   VAUVISION — дашборд сотрудников.
   Тёмная тема, токены и шрифт из брендбука сайта (docs/site-style.css).
   Рабочий инструмент: плотность выше лендинга, декора меньше — бренд тот же.
   ========================================================= */

@font-face{font-family:'Liberation Sans';src:url('fonts/LiberationSans-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Liberation Sans';src:url('fonts/LiberationSans-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --black:#131313; --white:#dddddd; --beige:#e4dfd8; --vinous:#ab1115; --yellow:#e2b63f;

  --bg:      var(--black);
  --bg-2:    color-mix(in srgb, var(--beige) 6%, var(--black));    /* поверхность карточки/таблицы */
  --bg-3:    color-mix(in srgb, var(--beige) 10%, var(--black));   /* шапки таблиц, hover */
  --line:    color-mix(in srgb, var(--beige) 18%, transparent);
  --ink:     var(--beige);
  --ink-2:   color-mix(in srgb, var(--beige) 60%, transparent);
  --accent:  var(--yellow);
  --plate:   var(--vinous);
  --plate-in:var(--beige);

  --font:'Liberation Sans', Arial, Helvetica, sans-serif;
  --r-card:4px; --r-btn:2px; --r-in:2px;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-weight:400; font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

h1,h2{font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1; margin:0 0 12px}
h1{font-size:22px} h2{font-size:15px; color:var(--ink-2); letter-spacing:.04em}

.muted{color:var(--ink-2); font-size:12px}

/* ---------- шапка ---------- */
header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 20px; background:color-mix(in srgb, var(--black) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
header a{color:var(--ink-2); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
header a:hover{color:var(--ink); text-decoration:none}
header .brand{color:var(--ink); font-weight:700; font-size:14px; letter-spacing:.28em; margin-right:6px}
header .spacer{flex:1}

main{max-width:1100px; margin:22px auto; padding:0 16px}

/* ---------- карточки ---------- */
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px; margin-bottom:14px;
}

/* ---------- таблицы ---------- */
table{width:100%; border-collapse:collapse; background:transparent}
th,td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); font-size:13px}
th{background:var(--bg-3); color:var(--ink-2); font-weight:700; text-transform:uppercase;
   letter-spacing:.05em; font-size:11px}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb, var(--beige) 4%, transparent)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-block; font-family:var(--font); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em;
  padding:7px 13px; border-radius:var(--r-btn); cursor:pointer; text-decoration:none;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn.primary{background:var(--plate); color:var(--plate-in); border-color:var(--plate)}
.btn.primary:hover{background:color-mix(in srgb, var(--vinous) 84%, var(--beige)); color:var(--plate-in); border-color:transparent}
.btn.danger{background:var(--plate); color:var(--plate-in); border:1px solid color-mix(in srgb, var(--beige) 55%, transparent)}
.btn.danger:hover{background:color-mix(in srgb, var(--vinous) 84%, var(--beige)); color:var(--plate-in)}
.btn.warn{background:transparent; color:var(--accent); border-color:color-mix(in srgb, var(--yellow) 55%, transparent)}
.btn.warn:hover{border-color:var(--accent); background:color-mix(in srgb, var(--yellow) 12%, transparent)}

/* ---------- формы ---------- */
input,select,textarea{
  padding:7px 9px; border:1px solid var(--line); border-radius:var(--r-in);
  background:var(--bg); color:var(--ink); font-size:13px; font-family:inherit;
}
input::placeholder,textarea::placeholder{color:var(--ink-2)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
label{display:block; font-size:12px; color:var(--ink-2); margin:10px 0 4px}
form.inline{display:inline}

/* ---------- бейджи статусов ---------- */
.badge{display:inline-block; padding:2px 8px; border-radius:var(--r-btn);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border:1px solid transparent}
/* подтверждена/новая — нейтральный */
.badge.confirmed,.badge.new{color:var(--ink); background:color-mix(in srgb, var(--beige) 8%, transparent); border-color:var(--line)}
/* выполнена — акцент (золото) */
.badge.done{color:var(--accent); background:color-mix(in srgb, var(--yellow) 14%, transparent); border-color:color-mix(in srgb, var(--yellow) 40%, transparent)}
/* в работе — акцент, обводкой */
.badge.in_work{color:var(--accent); background:transparent; border-color:color-mix(in srgb, var(--yellow) 45%, transparent)}
/* отменена — приглушённо */
.badge.cancelled{color:var(--ink-2); background:transparent; border-color:var(--line)}
/* не пришёл — плашка */
.badge.no_show{color:var(--plate-in); background:var(--plate); border-color:var(--plate)}

/* ---------- флеши ---------- */
.flash{padding:9px 13px; border-radius:var(--r-in); margin-bottom:12px; font-size:13px; border:1px solid transparent}
.flash.ok{color:var(--accent); background:color-mix(in srgb, var(--yellow) 10%, transparent); border-color:color-mix(in srgb, var(--yellow) 35%, transparent)}
.flash.err{color:var(--plate-in); background:color-mix(in srgb, var(--vinous) 22%, transparent); border-color:var(--plate)}

/* ---------- фильтры ---------- */
.filters a{margin-right:8px; font-size:12px; color:var(--ink-2)}
.filters a:hover{color:var(--ink); text-decoration:none}
.filters a.active{color:var(--accent); font-weight:700; text-decoration:none}
.actions form,.actions a{margin-right:6px}

/* ---------- сетка расписания ---------- */
.grid{display:grid; grid-template-columns:56px repeat(7,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.grid > div{background:var(--bg-2); padding:4px 5px; font-size:11px; min-height:22px}
.grid .hh{background:var(--bg-3); color:var(--ink-2); text-align:right}
.grid .busy{background:color-mix(in srgb, var(--vinous) 42%, var(--black))}
.grid .block{background:color-mix(in srgb, var(--beige) 16%, var(--black))}