/* ========== ТЕМА та БАЗА ========== */
:root{
  --erp-bg: #0b1020;
  --erp-panel: #111831;
  --erp-panel-2:#0f142a;
  --erp-text:#e9edf5;
  --erp-muted:#9aa3b2;
  --erp-accent:#6366f1; /* indigo-500 */
  --erp-accent-2:#22c55e; /* green-500 */
  --erp-danger:#ef4444;
  --erp-border: #233055;
  --erp-card-grad: linear-gradient(180deg, rgba(99,102,241,.18), rgba(99,102,241,0) 55%);
}
html[data-theme="light"]{
  --erp-bg: #f6f7fb;
  --erp-panel: #ffffff;
  --erp-panel-2:#ffffff;
  --erp-text:#0f172a;
  --erp-muted:#6b7280;
  --erp-accent:#4f46e5;
  --erp-accent-2:#16a34a;
  --erp-danger:#dc2626;
  --erp-border: #e5e7eb;
  --erp-card-grad: linear-gradient(180deg, rgba(79,70,229,.12), rgba(79,70,229,0) 55%);
}
*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--erp-text);
  background: var(--erp-bg);
}

/* ========== LAYOUT ========== */
.erp-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}
@media (max-width: 991.98px){
  .erp-layout{ grid-template-columns: 0 1fr; }
  .erp-sidebar{ transform: translateX(-100%); }
  .erp-sidebar.open{ transform: translateX(0); }
}

.erp-sidebar{
  position: sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 14px;
  background: var(--erp-panel);
  border-right: 1px solid var(--erp-border);
  transition: transform .2s ease;
  z-index: 1000;
}

.erp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color: var(--erp-text);
  padding:10px 12px;
  border-radius:14px;
  background: var(--erp-card-grad);
}

.erp-nav{
  display:flex; flex-direction: column; gap:6px;
  margin-top: 6px;
}
.erp-nav-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  color: var(--erp-text);
  text-decoration: none;
  border-radius: 10px;
  border:1px solid transparent;
}
.erp-nav-link:hover{ background: var(--erp-panel-2); border-color: var(--erp-border); }
.erp-sidebar-bottom{ margin-top:auto; }

.btn-theme{
  width:100%;
  color: var(--erp-text);
  background: var(--erp-panel-2);
  border:1px solid var(--erp-border);
}
.btn-theme:hover{ opacity:.9; }

.erp-topbar{
  position: sticky; top:0;
  z-index: 500;
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content: space-between;
  padding: 10px 16px;
  background: color-mix(in oklab, var(--erp-panel), transparent 30%);
  border-bottom: 1px solid var(--erp-border);
}
.erp-main{ display:flex; flex-direction: column; }
.erp-content{ padding: 20px; }

/* ========== КАРТИ ========== */
.card{
  border-radius: 16px !important;
  border:1px solid var(--erp-border) !important;
  background: var(--erp-panel) !important;
  color: var(--erp-text);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.card[data-elevated="1"]{
  background: var(--erp-panel);
}
.card[data-accent]{
  background-image: var(--erp-card-grad);
}

/* ========== ТАБЛИЦІ ========== */
.table{
  --bs-table-color: var(--erp-text);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: color-mix(in oklab, var(--erp-panel), white 1.5%);
  --bs-table-hover-bg: color-mix(in oklab, var(--erp-panel), white 3%);
  border-color: var(--erp-border);
}
.table thead th{
  font-weight:600;
  color: var(--erp-muted);
  border-bottom:1px solid var(--erp-border) !important;
}
.table td, .table th{
  border-color: var(--erp-border) !important;
}

/* ========== ФОРМИ ========== */
.form-control, .form-select{
  background: var(--erp-panel-2);
  border-color: var(--erp-border);
  color: var(--erp-text);
}
.form-control:focus, .form-select:focus{
  border-color: var(--erp-accent);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--erp-accent), transparent 75%);
}
.form-label{ font-weight:500; color: var(--erp-muted); }

/* ========== КНОПКИ ========== */
.btn-primary{
  background: var(--erp-accent);
  border-color: var(--erp-accent);
}
.btn-primary:hover{ filter: brightness(0.95); }
.btn-outline-primary{
  color: var(--erp-accent);
  border-color: var(--erp-accent);
}
.btn-outline-primary:hover{
  color:#fff; background: var(--erp-accent);
}

/* ========== БЕЙДЖІ ========== */
.badge-soft{
  display:inline-flex; align-items:center; gap:6px;
  padding: .35rem .55rem;
  border-radius: 999px;
  border:1px solid var(--erp-border);
  color: var(--erp-text);
  background: var(--erp-panel-2);
}
.badge-danger-soft{ border-color: color-mix(in oklab, var(--erp-danger), #000 20%); color: var(--erp-danger); }
.badge-success-soft{ border-color: color-mix(in oklab, var(--erp-accent-2), #000 20%); color: var(--erp-accent-2); }

/* ========== УТИЛІТИ ========== */
.text-muted, .text-body-secondary{ color: var(--erp-muted) !important; }
.navbar, .bg-dark{ background: var(--erp-panel) !important; }

/* Сумісність із старими сторінками */
.navbar-brand{ font-weight:600; }


/* ====== АДАПТИВ ====== */
@media (max-width: 991.98px){
  .erp-layout{
    grid-template-columns: 1fr; /* ховаємо колонку сайдбару */
  }
  .erp-main{ width: 100%; }
  .erp-content{ padding: 14px; }

  /* Сайдбар як офф-канвас */
  .erp-sidebar{
    position: fixed;
    left: 0; top: 0;
    width: min(84vw, 320px);
    max-width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  .erp-sidebar.open{ transform: translateX(0); }

  /* Бекдроп */
  .erp-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 900; /* нижче за sidebar (1000) */
  }
  .erp-backdrop.show{
    opacity: 1;
    pointer-events: auto;
  }

  /* Карти й таблиці щільніше на мобільних */
  .card{ border-radius: 14px !important; }
  .table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Кнопки — трошки більші тап-зони */
  .btn{ padding: .55rem .9rem; }

  /* Форма: кращі відступи між елементами */
  .form-label{ margin-bottom: .25rem; }
}

/* Маленькі екрани */
@media (max-width: 575.98px){
  .erp-topbar{ padding: 8px 12px; }
  .erp-content{ padding: 12px; }
  .erp-brand{ padding: 8px 10px; }
  .erp-nav-link{ padding: 9px 10px; }
}

/* Опційно: “стекова” таблиця для критично вузьких екранів.
   Додай клас .stack-table на <table> — і рядок стане карткою. */

/* Десктопний reset саме для .stack-table */
@media (min-width: 641px){
  table.stack-table { display: table !important; width: 100%; }
  table.stack-table thead { display: table-header-group !important; }
  table.stack-table tbody { display: table-row-group !important; }
  table.stack-table tr { display: table-row !important; }
  table.stack-table td, table.stack-table th { display: table-cell !important; padding: .5rem .75rem !important; }
  table.stack-table tbody td::before { content: none !important; }
}


/* ====== Фікс: на >=768px таблиці завжди класичні ====== */
@media (min-width: 768px){
  table, .table { display: table !important; }
  .table thead { display: table-header-group !important; }
  .table tbody { display: table-row-group !important; }
  .table tr { display: table-row !important; }
  .table td, .table th { display: table-cell !important; }
}

/* ====== Стек-режим ТІЛЬКИ на дуже вузьких екранах ====== */
@media (max-width: 640px){
  table.stack-table thead{ display: none !important; }
  table.stack-table tbody tr{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 10px;
    border-bottom: 1px solid var(--erp-border);
  }
  table.stack-table tbody td{
    display: flex !important;
    align-items: center;
    gap: 6px;
    border: none !important;
    padding: 4px 0 !important;
  }
  table.stack-table tbody td::before{
    content: attr(data-label);
    min-width: 44%;
    color: var(--erp-muted);
    font-weight: 500;
  }
}

/* --- ЖОРСТКИЙ RESET ДЛЯ ДЕСКТОПУ (>= 992px) --- */
@media (min-width: 992px){
  /* повертаємо класичні таблиці */
  table, .table { display: table !important; width: 100% !important; }
  .table thead { display: table-header-group !important; }
  .table tbody { display: table-row-group !important; }
  .table tr { display: table-row !important; }
  .table td, .table th { display: table-cell !important; }
  .table tbody td::before { content: none !important; }

  /* якщо десь стоїть .stack-table — теж повертаємо золоту класику */
  table.stack-table { display: table !important; }
  table.stack-table thead { display: table-header-group !important; }
  table.stack-table tbody { display: table-row-group !important; }
  table.stack-table tr { display: table-row !important; }
  table.stack-table td, table.stack-table th { display: table-cell !important; }
  table.stack-table tbody td::before { content: none !important; }

  /* .table-responsive на десктопі не обрізає контент */
  .table-responsive { overflow: visible !important; }

  /* офф-канвас тільки для мобіли; на десктопі — звичайний сайдбар */
  .erp-sidebar{
    position: sticky !important;
    transform: none !important;
    width: 260px !important;
    left: 0 !important; top: 0 !important;
    box-shadow: none !important;
  }
  .erp-backdrop{ display: none !important; }
}

/* --- СТЕК-РЕЖИМ ТІЛЬКИ ДЛЯ ВУЗЬКИХ ЕКРАНІВ (<= 640px) --- */
@media (max-width: 640px){
  table.stack-table thead{ display: none !important; }
  table.stack-table tbody tr{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 10px;
    border-bottom: 1px solid var(--erp-border);
  }
  table.stack-table tbody td{
    display: flex !important;
    align-items: center;
    gap: 6px;
    border: none !important;
    padding: 4px 0 !important;
  }
  table.stack-table tbody td::before{
    content: attr(data-label);
    min-width: 44%;
    color: var(--erp-muted);
    font-weight: 500;
  }
}