:root{
  --bg:#070a12;
  --card1: rgba(12,18,33,.86);
  --card2: rgba(10,14,26,.86);
  --text:#eaf0ff;
  --muted:#9aa8c7;
  --line: rgba(150,170,210,.18);
  --line2: rgba(150,170,210,.10);
  --accent:#7dd3fc;
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:14px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(255,70,70,.18), transparent 58%),
    radial-gradient(1100px 650px at 15% 65%, rgba(125,211,252,.12), transparent 62%),
    radial-gradient(1000px 600px at 95% 70%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, #05060c, #070a12 35%, #070a12);
}

/* ── Light theme ── */
body.light {
  --bg: #f0f4f8;
  --card1: rgba(255,255,255,.98);
  --card2: rgba(245,248,252,.98);
  --text: #1e2a42;
  --muted: #5a6a8a;
  --line: rgba(80,100,140,.20);
  --line2: rgba(80,100,140,.12);
  --accent: #0284c7;
  --good: #16a34a;
  --bad: #dc2626;
  --warn: #d97706;
  --shadow: 0 8px 30px rgba(0,0,0,.10);
  background: linear-gradient(180deg, #e4ecf7 0%, #f0f4fa 40%, #eaf0f8);
}

body.light input, body.light select {
  background: rgba(255,255,255,.92);
  color: var(--text);
  border-color: rgba(80,100,140,.28);
}

body.light .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,255,.96));
}

body.light .card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,253,.98));
}

body.light .table-wrap {
  background: rgba(255,255,255,.55);
}

body.light tbody tr td { background: rgba(240,244,252,.8); }
body.light tbody tr:nth-child(even) td { background: rgba(228,236,250,.8); }
body.light tbody tr:hover td { background: rgba(7,130,199,.06) !important; }

body.light th {
  background: rgba(80,100,140,.07);
  color: var(--muted);
  border-bottom-color: rgba(80,100,140,.18);
}

body.light td { color: #2a3a5a; }
body.light td b { color: #1a2840; }

body.light th, body.light td {
  border-bottom-color: rgba(80,100,140,.12);
  border-right-color: rgba(80,100,140,.08);
}

body.light .mini-input {
  background: rgba(255,255,255,.92);
  color: var(--text);
}

/* issue page: operator dropdown in light mode */
body.light .op-display {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(80,100,140,.28) !important;
  color: var(--text) !important;
}
body.light .op-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
body.light .op-item {
  color: var(--text) !important;
}
body.light .op-search {
  color: var(--text) !important;
}

/* ── Excel modal ── */
.xl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.xl-overlay.open-flex { display: flex; }

.xl-modal {
  background: var(--card1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  min-width: 320px;
  max-width: 480px;
  width: 90%;
  color: var(--text);
  box-shadow: var(--shadow);
}

.xl-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.xl-close:hover { color: var(--text); }

.xl-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(150,170,210,.05);
}
body.light .xl-check-row {
  background: rgba(80,100,140,.06);
}

.xl-check-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #7dd3fc;
  flex-shrink: 0;
}

body.light .icon-btn {
  background: rgba(80,100,140,.10);
  border-color: rgba(80,100,140,.20);
}
body.light .icon-btn:hover { background: rgba(80,100,140,.20); }
body.light .icon-btn.danger { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.30); }
body.light .icon-btn.warn   { background: rgba(217,119,6,.10);  border-color: rgba(217,119,6,.30); }

body.light .badge { border-color: rgba(80,100,140,.20); }
body.light .b-good { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); }
body.light .b-bad  { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.10); }

body.light .pill {
  background: rgba(80,100,140,.08);
  border-color: rgba(80,100,140,.20);
}

body.light .btn {
  background: rgba(2,132,199,.12);
  border-color: rgba(2,132,199,.30);
}
body.light .btn:hover { background: rgba(2,132,199,.20); }
body.light .btn-ghost {
  background: rgba(80,100,140,.08);
  border-color: rgba(80,100,140,.20);
}
body.light .btn-ghost:hover { background: rgba(80,100,140,.16); }

body.light .nav a:hover {
  background: rgba(80,100,140,.10);
  border-color: rgba(80,100,140,.20);
}

/* ── Layout ── */
.wrap{max-width:1200px; margin:0 auto; padding:22px;}

.topbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background: linear-gradient(180deg, rgba(12,18,33,.78), rgba(10,14,26,.78));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:10px 12px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900;
  padding:6px 10px;
  border-right:1px solid var(--line2);
}
.brand img{
  width:28px; height:28px;
  border-radius:999px;
}
.nav a{
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
}
.nav a:hover{border-color:var(--line); background:rgba(150,170,210,.06);}

.spacer{flex:1;}

.btn{
  background: rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.28);
  color:var(--text);
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:900;
}
.btn:hover{background: rgba(125,211,252,.18);}
.btn-ghost{background: rgba(150,170,210,.08); border:1px solid var(--line);}

.card{
  background: linear-gradient(180deg, var(--card1), var(--card2));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:16px;
  margin:16px 0;
}

.h{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.muted{color:var(--muted); font-size:13px;}

input, select{
  background: rgba(6,10,18,.55);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:9px 12px;
}

.table-wrap{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(6,10,18,.35);
}

table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

th, td{
  padding:13px 12px;
  border-bottom:1px solid rgba(150,170,210,.12);
  border-right:1px solid rgba(150,170,210,.07);
  vertical-align:middle;
  text-align:left;
  font-size:14px;
  color: #ccd8f0;
}

th:last-child, td:last-child{border-right:none;}
tbody tr:last-child td{border-bottom:none;}

th{
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.07em;
  background: rgba(150,170,210,.07);
  border-bottom: 1px solid rgba(150,170,210,.18);
}

tbody tr td { background: rgba(18,26,48,.6); }
tbody tr:nth-child(even) td { background: rgba(24,34,60,.6); }
tbody tr:hover td { background: rgba(125,211,252,.07) !important; transition: background .12s; }

/* дозволяємо перенос тексту в клітинках */
.table-wrap td {
  white-space: normal;
  word-break: break-word;
}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:900;
  font-size:12px;
}
.b-good{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10);}
.b-bad{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10);}

.row{display:flex; gap:12px; flex-wrap:wrap;}
.row > *{flex:1;}

.pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(150,170,210,.06);
  font-weight:900;
}

.small{font-size:12px; color:var(--muted);}
.right{display:flex; gap:10px; align-items:center;}

/* ===== КОЛОНКА ДІЇ ===== */

.actions-cell {
  text-align: center;
  vertical-align: middle;
}

.actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Форми всередині .actions — такі ж inline-flex */
.actions form {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(150,170,210,.08);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  text-decoration: none;
}

.icon-btn:hover {
  background: rgba(150,170,210,.18);
}

.icon-btn.danger {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
}

.icon-btn.warn {
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
}

.mini-input {
  width: 52px;
  height: 36px;
  text-align: center;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(6,10,18,.55);
  color: var(--text);
  flex-shrink: 0;
  /* прибираємо спінери — вони з'їдали ~15px і ховали кнопку ⚠️ */
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mini-input::-webkit-inner-spin-button,
.mini-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Кнопка відновлення ── */
.icon-btn.restore-btn {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
}
.icon-btn.restore-btn:hover {
  background: rgba(34,197,94,.22);
}

/* ── Theme toggle button ── */
#themeBtn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}