/* Базовые цвета для структурных блоков (работают через классы, которые у тебя уже есть) */
body { transition: background-color .2s, color .2s; font-family: "Cuprum", sans-serif;}


/* всем столбцам ставим линию справа */
table.kpi-table th,
table.kpi-table td {
  border-right: 1px dashed rgba(255,255,255,0.08);
}

/* убираем линию у ПЕРВОГО столбца слева */
table.kpi-table th:first-child,
table.kpi-table td:first-child {
  border-left: none;   /* явно */
}

/* убираем линию у ПОСЛЕДНЕГО столбца справа */
table.kpi-table th:last-child,
table.kpi-table td:last-child {
  border-right: none;
}

header.site-navbar { transition: background-color .2s, border-color .2s }
.card { transition: background-color .2s, border-color .2s }
.muted { transition: color .2s }


/* ТЁМНАЯ (по умолчанию): ничего не трогаем — остаются текущие цвета */

span.badge {display: block;}
table.kpi-table th {width: 5%;}
.profile {
    background-color: rgba(255,255,255,.03);
    border: 1px dashed #223057;
    order-style: solid;
}
button,
  [type="button"],
  [type="submit"],
  [role="button"] {
    cursor: pointer;
}

.max-w-5xl { max-width: 64rem; }
.max-w-4xl { max-width: 56rem; } /* 896px */
.max-w-6xl { max-width: 72rem; } /* 1152px */
.max-w-7xl { max-width: 80rem; } /* 1280px */

/* СВЕТЛАЯ: принудительно перекрасим самые частые утилиты Tailwind,
чтобы ничего не «залипало» в тёмном */
html[data-theme="light"] body {
  background-color: rgb(224 224 224);       /* не чисто белый, мягкий серовато-голубой фон */
  color: #0e172a !important;
  background-image: url("/app/views/images/Sprinkle.svg"); /* путь к текстуре */
  background-repeat: repeat;                       /* повторяем по обеим осям */
  background-size: 400px;                          /* фиксированный размер паттерна */
  background-blend-mode: overlay;                  /* мягко смешивается с цветом */
}

html[data-theme="light"] .card {
  background: #ffffff !important;
  border-color: #d7dce5 !important;
}

html[data-theme="light"] .muted { color: #4b5563 !important; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #d7dce5 !important;
}


/* всем столбцам ставим линию справа */
html[data-theme="light"] table.kpi-table th,
html[data-theme="light"] table.kpi-table td {
  border-right: 1px dashed #e2e3e5;
}

/* убираем линию у ПЕРВОГО столбца слева */
html[data-theme="light"] table.kpi-table th:first-child,
html[data-theme="light"] table.kpi-table td:first-child {
  border-left: none;   /* явно */
}

/* убираем линию у ПОСЛЕДНЕГО столбца справа */
html[data-theme="light"] table.kpi-table th:last-child,
html[data-theme="light"] table.kpi-table td:last-child {
  border-right: none;
}

html[data-theme="light"] header.site-navbar { background:rgba(255,255,255,.85) !important; border-color:#e5e7eb !important; }
html[data-theme="light"] .peer:checked ~ .peer-checked\:bg-green-600 {--tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)) !important;}
html[data-theme="light"] p.text-slate-400.mb-6  { color:#020304 !important; }
html[data-theme="light"] .text-green-300 { color: rgb(255 255 255) !important;}
html[data-theme="light"] .bg-green-900\/60 { background-color: rgb(28 112 62 / 88%) !important;}
html[data-theme="light"] .text-red-300 {color: rgb(255 255 255) !important;}
html[data-theme="light"] .bg-red-900\/60 { background-color: rgb(127 29 29 / 85%) !important;}
html[data-theme="light"] .text-yellow-300 { color: rgb(255 255 255) !important;}
html[data-theme="light"] .bg-yellow-900\/60 {background-color: rgb(199 115 40) !important;}
html[data-theme="light"] .bg-sky-600\/20 { background-color: rgb(83 158 241) !important;}
html[data-theme="light"] .text-red-200 { color: rgb(255 43 43) !important;}
html[data-theme="light"] .kpi-pop {
    max-width: 320px !important;
    background: #fffffff5 !important;
    color: #e8eef6 !important;
    border: 1px solid #000000 !important;
}

html[data-theme="light"] .kpi-pop h4 {color: #000000 !important;}
html[data-theme="light"] .text-green-200 {color: rgb(0 0 0) !important;}

html[data-theme="light"] .profile {border: 1px dashed rgb(2 132 199 / var(--tw-bg-opacity, 1)) !important}

 /* Таблицы */
html[data-theme="light"] table th { background:rgba(0,0,0,.035) !important; }
html[data-theme="light"] table th, 
html[data-theme="light"] table td { border-bottom-color:#e5e7eb !important; color:#1e2226 !important;  }
html[data-theme="light"] tbody tr:hover {background: #e5e7eb;}

/* Пилюли/лейблы статусов (если используешь .pill.on/.off) */
html[data-theme="light"] .pill.on  { background:#16a34a !important; color:#e7ffe9 !important; }
html[data-theme="light"] .pill.off { background:#e5e7eb !important; color:#334155 !important; }

/* Инпуты/селекты/текстовые поля — мягкая светлая тема */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background:#ffffff !important; color:#0f172a !important; border-color:#e5e7eb !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color:#9aa7b6; }

/* --- Перекраска часто встречающихся TAILWIND-утилит (жёстким правилом) --- */
/* Фоны */
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-800\/40 { background-color:#ffffff !important; }
html[data-theme="light"] .bg-slate-700  { background-color:rgb(133 42 42) !important;}

/* Бордеры */
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-600 { border-color: #bbc0cb !important; color: #000000 !important;}

/* Текст */
html[data-theme="light"] .text-slate-200 { color:#0f172a !important; }
html[data-theme="light"] .text-slate-300 { color:#1f2937 !important; }
html[data-theme="light"] .text-slate-400 { color:#000000 !important }

/* Ховеры из тёмной темы → сделать светлыми */
html[data-theme="light"] .hover\:bg-slate-700\/60:hover { background-color:rgba(0,0,0,.06) !important; }
html[data-theme="light"] .hover\:bg-slate-800\/70:hover { background-color:rgba(0,0,0,.06) !important; }
:root {
  --bg: #12172b;      /* мягче, чем #11162b — чуть теплее и ровнее */
  --card: #1c2342;    /* плавный контраст с фоном, без резкого перехода */
  --muted: #9caec2;   /* чуть светлее — лучше читается на новом фоне */
  --accent: #5aa6ff;  /* оставляем, отличный акцент */
  --br: #2a3158;      /* бордер немного теплее и менее заметный */
}
@media (hover: hover) {
    @supports (color:color-mix(in lab, red, red)) {
        .hover\:bg-slate-700\/50:hover {
            background-color: 
 color-mix(in oklab, oklch(0.37 0.04 257.29 / 0.54) 50%, transparent);
        }
    }
}
@media (hover: hover) {
    .hover\:bg-slate-800:hover {
            background-color: 
 color-mix(in oklab, oklch(0.37 0.04 257.29 / 0.54) 50%, transparent);
        }
}
body{
  background:var(--bg);
  background-image: url("/app/views/images/Sprinkle.svg"); /* путь к текстуре */
  background-repeat: repeat;                       /* повторяем по обеим осям */
  background-size: 400px;                          /* фиксированный размер паттерна */
  background-blend-mode: overlay;                  /* мягко смешивается с цветом */
  color:#e8eef6;
}
.kpi-pop {
  position:absolute; /* было fixed */
  z-index:1000;
  max-width:320px;
  background:#0f1530;
  color:#e8eef6;
  border:1px solid #2a3a6a;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.kpi-pop h4{
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  color:#c7d6ea;
}
.kpi-pop table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.kpi-pop td{
  padding:4px 6px;
  border-bottom:1px dashed #243055;
}
.kpi-pop tr:last-child td{
  border-bottom:0;
}
.kpi-pop .key{
  color:#9fb1c6;
}
/* сетки */
.grid{display:grid; gap:16px;}
.grid.cards{grid-template-columns: repeat(1, minmax(0,1fr));}
@media (min-width:640px){ .grid.cards{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (min-width:1024px){ .grid.cards{grid-template-columns: repeat(5, minmax(0,1fr));} }

/* карточки */
.card{background:var(--card); border: 1px solid #1e2647db; border-radius: 6px; padding: 12px; box-shadow: 0 0 0 0 var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, .2)), 0 0 0 0 var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)), 0 0 0 0 var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, .12));}
.muted{color:var(--muted)}
.kpi{font-size:28px; font-weight:700; margin-top:6px}

/* таблицы */
table{width:100%; border-collapse:collapse}
thead th{font-weight:600; text-align:left; font-size:14px; color:#b7c5d6; border-bottom:1px solid #263056; padding:10px 8px; background: rgba(255,255,255,.03);}
tbody td{border-bottom:1px dashed #223057; padding:10px 8px}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* бейджи статусов */
.pill{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid #2a3a6a}
.pill.pending{background:#2a2f48; color:#f0d16a; border-color:#5b4a19}
.pill.approved{background:#143826; color:#7bf0a6; border-color:#1f6b48}
.pill.rejected{background:#3a1a1a; color:#ff9f9f; border-color:#6b1f1f}
.pill.on{background: #065f46; color: #d1fae5;}
.pill.off{background:#374151; color:#cbd5e1}

.settings-menu { position:relative; display:inline-block; }
.settings-menu button { background:none; border:0; cursor:pointer; color:#bbb; }
.settings-menu button:hover { color:#fff; }
.settings-dropdown {
position:absolute; right:0; top:100%; margin-top:4px;
background:#111827; border:1px solid #334155;
border-radius:0.5rem; display:none; min-width:180px; z-index:50;
}
.settings-dropdown a {
display:block; padding:8px 12px; color:#e2e8f0; text-decoration:none;
}
.settings-dropdown a:hover { background:#1e293b; }
.settings-menu:hover .settings-dropdown { display:block; }

.menu-sep{display:inline-block;width:1px;height:24px;background:#334155;margin:0 4px;}
.submenu{display:inline-flex;gap:8px}
@media (max-width: 640px){ .submenu,.menu-sep{display:none}

.ac-menu{position:fixed; z-index:1000; max-height:260px; overflow:auto;
background:rgba(15,23,42,.98); border:1px solid rgba(148,163,184,.25);
border-radius:.6rem; box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-theme="light"] .ac-menu{background:#fff; border-color:#e5e7eb}
.ac-item{padding:.5rem .75rem; cursor:pointer; display:flex; gap:.5rem; align-items:center}
.ac-item:hover,.ac-item[aria-selected="true"]{background:rgba(148,163,184,.15)}
html[data-theme="light"] .ac-item:hover, html[data-theme="light"] .ac-item[aria-selected="true"]{background:rgba(0,0,0,.06)}
.ac-muted{opacity:.65; font-size:.85em}
.ac-hidden{display:none}
div#settingsDrop {width: 110px;}