/* KIM Panel — «екселевский» стиль по new_design/personalplaner_mockup.html
   (финальное решение заказчика 2026-07-10): Calibri, синие шапки, сетка, radius 0. */
:root {
  --ink: #1F4E78;         /* тёмно-синий: titlebar, заголовки, акценты */
  --hd: #D9EAF7;          /* голубая шапка таблиц */
  --hd2: #5B9BD5;
  --amber: #FFC000; --amber-bg: #FFF7E6; --amber-bd: #C99A12;
  --grid: #C9CED6;        /* линия сетки */
  --grid-strong: #9AA3AD;
  --green: #00B050;       /* галка «anwesend», активная вкладка */
  --band: #F3F5F8; --sel: #D7E9FB;
  --neg: #C0392B; --pos: #2E7D32;
  --bg: #E9EBEE; --card: #FFFFFF;
  --text: #1A1A1A; --muted: #666666; --faint: #8A9099;
  /* легаси-алиасы для локальных стилей модулей */
  --border: #C9CED6; --border-soft: #DDE1E7;
  --green-600: #00B050; --green-700: #008A3E; --green-100: #EAFFEA; --green-50: #F2FBF2;
  --amber-ink: #8A6D00; --red-600: #C0392B; --red-bg: #FDEEEC;
  --orange-600: #C99A12; --orange-700: #8A6D00; --orange-100: #FFF2CC; --orange-50: #FFF7E6;
  --r-sm: 0; --r-md: 0; --r-lg: 0; --shadow: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Calibri, "Segoe UI", "Segoe UI Variable", system-ui, Arial, sans-serif;
  font-size: 12px; color: var(--text); background: var(--bg);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
h1 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 4px 0 10px; }
h2 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 2px 0 8px; }
a { color: var(--ink); }
.muted { color: var(--muted); }
.ms {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: 15px; line-height: 1; display: inline-block; vertical-align: -3px;
  font-variation-settings: "FILL" 0;
}

/* ── titlebar ── */
.titlebar {
  background: var(--ink); color: #fff; display: flex; align-items: center;
  gap: 14px; padding: 0 12px; height: 38px; flex: 0 0 auto;
}
.titlebar .brand { font-weight: 700; letter-spacing: .2px; font-size: 14px; color: #fff; text-decoration: none; }
.titlebar .brand small { font-weight: 400; opacity: .8; font-size: 12px; margin-left: 6px; }
.titlebar .spacer { flex: 1; }
.titlebar form { margin: 0; }
.langs { display: flex; }
.langs a {
  color: #cfe0f1; padding: 3px 8px; border: 1px solid #2f6199; border-left: none;
  text-decoration: none; font-weight: 600; font-size: 11px; line-height: 1;
}
.langs a:first-child { border-left: 1px solid #2f6199; }
.langs a.on { background: #fff; color: var(--ink); }
.titlebar .btn { border-color: #2f6199; background: #fff; color: var(--ink); font-weight: 600; }
.titlebar .btn:hover { background: #eaf2fb; }

/* ── рабочая область ── */
.wrap { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 14px; max-width: none; margin: 0; }

/* ── вкладки-«листы» внизу ── */
.tabs {
  display: flex; align-items: stretch; background: #dfe3e8;
  border-top: 1px solid var(--grid-strong); flex: 0 0 auto; height: 30px;
  padding-left: 6px; gap: 2px;
}
.tab {
  display: flex; align-items: center; gap: 5px; padding: 0 14px; font-size: 12px;
  cursor: pointer; border: 1px solid var(--grid-strong); border-bottom: none;
  background: #eceff3; color: #445; position: relative; top: 2px; text-decoration: none;
}
.tab:hover { background: #f4f6f9; }
.tab.on { background: #fff; color: var(--ink); font-weight: 700; top: 0; border-top: 2px solid var(--green); }

/* ── панели (карточки → плоские блоки) ── */
.card {
  background: var(--card); border: 1px solid var(--grid); border-radius: 0;
  box-shadow: none; padding: 8px 10px; margin-bottom: 10px;
}
.cards-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.card.stat { display: block; min-width: 118px; padding: 5px 12px; margin-bottom: 0; color: var(--text); text-decoration: none; }
.card.stat:hover { border-color: var(--ink); }
.card.stat .big-ico { display: none; }
.card.stat .num { display: block; font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.card.stat span { color: var(--muted); font-size: 11px; }

/* ── кнопки ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px; height: 24px;
  border: 1px solid var(--grid-strong); background: #fff; color: var(--text);
  padding: 0 10px; font: inherit; font-size: 12px; cursor: pointer;
  border-radius: 0; text-decoration: none;
}
.btn:hover { background: #eef3f9; border-color: var(--ink); }
.btn.primary, .btn.confirm { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.btn.primary:hover, .btn.confirm:hover { background: #2b5c93; }
.btn.accent { background: var(--amber-bg); border-color: var(--amber-bd); color: #7a5c00; font-weight: 600; }
.btn.danger { color: var(--neg); border-color: #d9aca5; }
.btn.danger:hover { background: #fdeeec; border-color: var(--neg); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: #eef3f9; color: var(--ink); }
.btn.big { height: 28px; width: 100%; justify-content: center; font-weight: 700; }
.btn.icon { padding: 0 6px; }

/* ── формы ── */
label { display: block; font-weight: 700; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 3px; height: 24px; padding: 2px 6px;
  border: 1px solid var(--grid-strong); border-radius: 0;
  font: inherit; font-size: 12px; color: var(--text); background: #fff;
}
textarea { height: auto; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--hd2); border-color: var(--hd2); }
.stack label { margin-bottom: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.form-actions { display: flex; gap: 8px; margin-top: 6px; }
.inline-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.inline-form label { margin-bottom: 0; }
.inline-form .btn { height: 24px; }

/* ── таблицы «как в Excel» ── */
.tbl { border-collapse: collapse; background: #fff; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { border: 1px solid var(--grid); padding: 2px 8px; height: 22px; text-align: left; font-size: 12px; vertical-align: middle; }
.tbl thead th { background: var(--hd); color: var(--ink); font-weight: 700; text-transform: none; letter-spacing: 0; }
.tbl tr:hover td { background: #eef6ff; }
.num-cell { font-variant-numeric: tabular-nums; font-family: inherit; }

/* ── бейджи (квадратные, с бордером) ── */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 7px;
  border: 1px solid var(--grid); border-radius: 0; font-size: 10.5px;
  line-height: 16px; font-weight: 600; background: #fff; color: var(--muted);
}
.chip .ms { font-size: 13px; }
.chip.ok { color: #1b6b2b; border-color: #8fce9c; background: #eefaef; }
.chip.warn { color: #8a6d00; border-color: #e2c874; background: #fff7e0; }
.chip.err { color: var(--neg); border-color: #e3b1ab; background: #fdeeec; }
.chip.lead { color: var(--ink); border-color: #a9c6e4; background: var(--hd); }
.chip.st-present { color: #1b6b2b; border-color: #8fce9c; background: #eefaef; }
.chip.st-Urlaub { color: #7a5c00; border-color: #d9b400; background: #fff2cc; }
.chip.st-Krank { color: var(--neg); border-color: #e3b1ab; background: #fdeeec; }
.chip.st-frei { color: var(--muted); border-color: var(--grid); background: #f0f2ef; }
.code-chip {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--grid);
  border-radius: 0; font-weight: 700; font-size: 11px;
}

/* ── сообщения ── */
.flash {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid; border-radius: 0; font-weight: 600; font-size: 12px; margin-bottom: 8px;
}
.flash.ok { background: #eefaef; border-color: #8fce9c; color: #1b6b2b; }
.flash.err { background: #fdeeec; border-color: #e3b1ab; color: var(--neg); }

/* ── логин ── */
.login-box { max-width: 340px; margin: 10vh auto; text-align: center; padding: 22px 20px; }
/* переключатель языка на логине: .langs из titlebar перекрашен под светлую карточку */
.login-box .langs { justify-content: center; margin-top: 14px; }
.login-box .langs a { color: var(--muted); border-color: var(--grid); }
.login-box .langs a:first-child { border-left-color: var(--grid); }
.login-box .langs a.on { background: var(--ink); color: #fff; }
.login-logo { height: 44px; margin-bottom: 8px; }
.login-box h1 { margin: 0 0 2px; font-size: 16px; }
.login-box p { margin-top: 0; }
.login-box form { text-align: left; margin-top: 14px; }

/* ── прочее ── */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.page-head h1 { margin: 0; }
.empty { padding: 14px 0; text-align: center; }
.map { height: 300px; border: 1px solid var(--grid-strong); border-radius: 0; }
.qr-box { display: flex; gap: 18px; align-items: center; }
.qr-box img { width: 170px; height: 170px; border: 1px solid var(--grid); border-radius: 0; }
.big-code { font-size: 30px; font-weight: 700; letter-spacing: .12em; color: var(--ink); font-variant-numeric: tabular-nums; }