
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1117;--bg2:#161b27;--bg3:#1e2535;--bg4:#252d3d;
  --border:#2a3347;--border2:#3a4560;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;
  --accent:#3b82f6;--accent2:#1d4ed8;--accent-glow:rgba(59,130,246,0.15);
  --green:#10b981;--green-bg:rgba(16,185,129,0.12);--green-text:#34d399;
  --amber:#f59e0b;--amber-bg:rgba(245,158,11,0.12);--amber-text:#fbbf24;
  --red:#ef4444;--red-bg:rgba(239,68,68,0.12);--red-text:#f87171;
  --radius:6px;--radius-lg:10px;
  --font-mono:'JetBrains Mono',monospace;
  --font:'Noto Sans',sans-serif;
}

body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;overflow:hidden;}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
button{font-family:var(--font);cursor:pointer;}
input,select,textarea{font-family:var(--font);cursor:text;}

/* LAYOUT */
.app{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:200px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 20px;}

/* SIDEBAR */
.logo-block{padding:14px 14px 12px;border-bottom:1px solid var(--border);}
.logo-img{display:block;width:100%;max-width:170px;height:auto;border-radius:6px;}
/* Совместимость со свёрнутым сайдбаром */
.sidebar.collapsed .logo-img{max-width:38px;object-fit:cover;object-position:left;}

.nav{flex:1;padding:6px 0;overflow-y:auto;}
.nav-sect{font-size:9px;font-weight:600;color:var(--text3);padding:10px 14px 3px;text-transform:uppercase;letter-spacing:0.08em;}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;color:var(--text2);cursor:pointer;transition:all 0.12s;border-left:2px solid transparent;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--accent-glow);color:var(--accent);border-left-color:var(--accent);font-weight:500;}
.nav-item svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;}
.sidebar-bottom{padding:10px 14px;border-top:1px solid var(--border);cursor:pointer;position:relative;}
.sidebar-bottom:hover{background:var(--bg3);}
.av{width:28px;height:28px;border-radius:50%;background:var(--accent-glow);border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.u-name{font-size:11px;font-weight:500;}
.u-role{font-size:9px;color:var(--text3);}

/* TOPBAR */
.page-title{font-size:14px;font-weight:600;flex:1;}
.topbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;border-radius:var(--radius);font-size:11px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all 0.12s;height:32px;box-sizing:border-box;white-space:nowrap;}
.topbar-btn:hover{border-color:var(--accent);color:var(--accent);}
.topbar-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-accent:hover{background:var(--accent2);color:#fff;}

/* PANELS */
.panel{display:none;}
.panel.active{display:block;}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:14px;}
.card-hd{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.two-col > .card{min-width:0;overflow:hidden;}
.two-col > .card .arc-tbl-wrap,.two-col > .card .arc-tbl-scroller{overflow-x:auto;}

/* BADGE */
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;font-family:var(--font-mono);}
.b-blue{background:var(--accent-glow);color:#60a5fa;border:1px solid rgba(59,130,246,0.3);}
.b-green{background:var(--green-bg);color:var(--green-text);border:1px solid rgba(16,185,129,0.3);}
.b-amber{background:var(--amber-bg);color:var(--amber-text);border:1px solid rgba(245,158,11,0.3);}
.b-red{background:var(--red-bg);color:var(--red-text);border:1px solid rgba(239,68,68,0.3);}
.b-gray{background:var(--bg4);color:var(--text3);border:1px solid var(--border);}

/* TABLE */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
table{width:100%;border-collapse:collapse;font-size:12px;}
thead th{background:var(--bg3);padding:8px 10px;text-align:left;font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--bg3);}
.mono{font-family:var(--font-mono);font-size:11px;}

/* FORM */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;}
.form-field{margin-bottom:10px;}
.form-lbl{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:4px;}
.form-lbl.req::after{content:" *";color:var(--red-text);}
.form-inp{width:100%;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--radius);font-size:12px;background:var(--bg3);color:var(--text);transition:border-color 0.12s;}
.form-inp:focus{outline:none;border-color:var(--accent);background:var(--bg4);}
.form-inp::placeholder{color:var(--text3);}

/* STATUS MESSAGES */
.msg{padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:12px;display:none;}
.msg.show{display:block;}
.msg-err{background:var(--red-bg);border:1px solid rgba(239,68,68,0.3);color:var(--red-text);}
.msg-ok{background:var(--green-bg);border:1px solid rgba(16,185,129,0.3);color:var(--green-text);}
.msg-warn{background:var(--amber-bg);border:1px solid rgba(245,158,11,0.3);color:var(--amber-text);}

/* ARCHIVE */
.arc-info{background:var(--accent-glow);border:1px solid rgba(59,130,246,0.25);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;}
.arc-info-title{font-size:11px;font-weight:600;color:var(--accent);margin-bottom:6px;display:flex;justify-content:space-between;}
.arc-info ul{margin-left:16px;font-size:11px;color:var(--text2);line-height:1.8;}
.arc-info li span{color:var(--accent);font-family:var(--font-mono);}
.arc-close{background:none;border:none;color:var(--text3);font-size:16px;cursor:pointer;}
.arc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.arc-meta-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;}
.arc-meta-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px;}
.arc-meta-val{font-size:12px;font-weight:600;color:var(--text);font-family:var(--font-mono);}
.arc-tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:600px;}
.arc-tbl thead th{background:var(--bg3);padding:8px 10px;text-align:left;font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:5;}
.arc-tbl thead th:last-child{border-right:none;}
.arc-tbl tbody td{padding:6px 8px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);}
.arc-tbl tbody td:last-child{border-right:none;}
.arc-tbl tbody tr:last-child td{border-bottom:none;}
.arc-tbl tbody tr:hover td{background:var(--bg3);}
.arc-tbl input,.arc-tbl select{width:100%;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 6px;font-size:11px;color:var(--text);font-family:var(--font);}
.arc-tbl input:focus,.arc-tbl select:focus{outline:none;border-color:var(--accent);background:var(--bg4);}
.arc-tbl select option{background:var(--bg3);}

/* Цвета строк по уровням */
.arc-row-0 td{background:rgba(16,185,129,0.12);border-left:3px solid #10b981}
.arc-row-1 td{background:rgba(245,158,11,0.10);border-left:3px solid #f59e0b}
.arc-row-2 td{background:rgba(59,130,246,0.08);border-left:3px solid #3b82f6}
.arc-row-3 td{background:rgba(139,92,246,0.07);border-left:3px solid #8b5cf6}
.arc-row-4 td{background:rgba(236,72,153,0.06);border-left:3px solid #ec4899}

/* Бейджи уровней */
.lvl-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:700;font-family:monospace}
.lvl-0{background:#10b981;color:#fff}
.lvl-1{background:#f59e0b;color:#fff}
.lvl-2{background:#3b82f6;color:#fff}
.lvl-3{background:#8b5cf6;color:#fff}
.lvl-4{background:#ec4899;color:#fff}
.arc-del-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text3);padding:3px 7px;font-size:12px;transition:all 0.12s;}
.arc-del-btn:hover{background:var(--red-bg);border-color:var(--red);color:var(--red-text);}
.arc-del-btn:disabled{opacity:0.3;cursor:not-allowed;}
.arc-actions{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.arc-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;border-radius:var(--radius);font-size:11px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all 0.12s;height:32px;box-sizing:border-box;white-space:nowrap;}
.arc-btn:hover{background:var(--bg4);color:var(--text);}
.arc-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.arc-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.arc-btn.primary:hover{background:var(--accent2);}
.arc-btn.danger{background:var(--red-bg);color:var(--red-text);border-color:rgba(239,68,68,0.3);}
/* .arc-tbl-scroller{overflow-x:auto;max-height:380px;overflow-y:auto;} */
.arc-tbl-scroller{overflow-x:auto;overflow-y:auto;}
.selected-row td{outline:2px solid var(--accent);outline-offset:-1px;}

/* TECH OPS TABLE */
.ops-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);}
.ops-table{width:100%;border-collapse:collapse;font-size:11px;min-width:1000px;}
.ops-table th{background:var(--bg3);padding:7px 8px;text-align:left;font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;position:sticky;top:0;}
.ops-table th:last-child{border-right:none;}
.ops-table td{padding:5px 6px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:middle;}
.ops-table td:last-child{border-right:none;}
.ops-table tr:last-child td{border-bottom:none;}
.ops-table tr:hover td{background:var(--bg3);}
.ops-table tr.final-op td{background:rgba(16,185,129,0.05);}
.ops-table input[type=text],.ops-table input[type=number],.ops-table select{width:100%;background:transparent;border:1px solid transparent;border-radius:3px;padding:4px 5px;font-size:11px;color:var(--text);font-family:var(--font);}
.ops-table input:focus,.ops-table select:focus{outline:none;border-color:var(--accent);background:var(--bg4);}
.ops-table select option{background:var(--bg3);}
.ops-table input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;}
.ops-table .del-btn{background:none;border:1px solid var(--border);border-radius:3px;color:var(--text3);padding:2px 6px;font-size:11px;cursor:pointer;}
.ops-table .del-btn:hover{background:var(--red-bg);border-color:var(--red);color:var(--red-text);}
.ops-table input[readonly]{color:var(--amber-text);font-family:var(--font-mono);}

/* COMBOBOX */
.combo-wrap{position:relative;}
.combo-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);z-index:100;max-height:180px;overflow-y:auto;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
.combo-dropdown.show{display:block;}
.combo-item{padding:7px 10px;font-size:12px;cursor:pointer;color:var(--text2);}
.combo-item:hover{background:var(--accent-glow);color:var(--accent);}

/* AUTH */
.auth-screen{display:none;position:fixed;inset:0;z-index:500;background:var(--bg);align-items:center;justify-content:center;}
.auth-screen.show{display:flex;}
.auth-bg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;opacity:0.35;}
.auth-wrap{position:relative;z-index:1;width:100%;max-width:400px;padding:20px;}
.auth-logo{text-align:center;margin-bottom:24px;}
.auth-logo-name{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent);}
.auth-logo-sub{font-size:11px;color:var(--text3);margin-top:3px;}
.auth-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:24px;box-shadow:0 25px 60px rgba(0,0,0,0.5);}
.auth-tabs{display:flex;margin-bottom:20px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.auth-tab{flex:1;padding:8px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:var(--text3);border:none;transition:all 0.15s;}
.auth-tab.active{background:var(--accent-glow);color:var(--accent);}
.auth-form{display:none;}
.auth-form.active{display:block;}
.auth-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em;display:block;margin-bottom:4px;}
.auth-inp{width:100%;padding:9px 11px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;background:var(--bg3);color:var(--text);margin-bottom:12px;transition:border-color 0.12s;}
.auth-inp:focus{outline:none;border-color:var(--accent);}
.auth-inp::placeholder{color:var(--text3);}
.auth-btn{width:100%;padding:10px;border-radius:var(--radius);font-size:13px;font-weight:600;border:none;background:var(--accent);color:#fff;cursor:pointer;transition:all 0.15s;}
.auth-btn:hover{background:var(--accent2);}
.auth-err{font-size:11px;color:var(--red-text);background:var(--red-bg);border:1px solid rgba(239,68,68,0.2);border-radius:var(--radius);padding:8px 10px;margin-bottom:12px;display:none;}
.auth-err.show{display:block;}
.auth-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
.auth-role-btn{padding:8px 6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg3);color:var(--text2);cursor:pointer;text-align:center;transition:all 0.12s;font-family:var(--font);}
.auth-role-btn.sel{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}
.auth-role-name{font-size:11px;font-weight:600;}
.auth-footer{text-align:center;margin-top:12px;font-size:10px;color:var(--text3);}

/* USER MENU */
.user-menu{position:absolute;bottom:52px;left:0;right:0;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:5px;box-shadow:0 8px 30px rgba(0,0,0,0.4);display:none;z-index:50;margin:0 4px;}
.user-menu.show{display:block;}
.user-menu-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius);font-size:12px;color:var(--text2);cursor:pointer;}
.user-menu-item:hover{background:var(--bg4);color:var(--text);}
.user-menu-item svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.user-menu-item.danger{color:var(--red-text);}
.user-menu-item.danger:hover{background:var(--red-bg);}
.user-menu-sep{height:1px;background:var(--border);margin:3px 0;}

/* TOAST */
.toast{display:none;position:fixed;bottom:20px;right:20px;background:var(--bg3);border:1px solid var(--green);color:var(--green-text);border-radius:var(--radius-lg);padding:10px 16px;font-size:12px;z-index:200;gap:8px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,0.4);}
.toast.show{display:flex;}

.combo-dd{position:absolute;top:100%;left:0;right:0;background:#1e2535;border:1px solid #3a4560;border-radius:6px;z-index:9999;max-height:200px;overflow-y:auto;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.combo-dd.show{display:block}


/* ====================== ЛИЧНЫЙ КАБИНЕТ ====================== */
#personal-cabinet {
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100vw ;
    height: 100vh ;
    background: rgba(0, 0, 0, 0.85) ;
    display: none ;
    align-items: center ;
    justify-content: center ;
    z-index: 10000 ;
    opacity: 1 ;
}

#personal-cabinet.modal-visible {
    display: flex ;
}

.modal-content {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg, 12px);
    padding: 28px ;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) ;
}

/* Панели архива — фиксированная высота, скроллинг внутри */
#panel-nomenclature .two-col{align-items:start}
#panel-nomenclature .two-col > .card{
  height:calc(100vh - 190px);
  overflow:hidden;
  min-width:0;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
}
#panel-nomenclature .two-col > .card .card-hd,
#panel-nomenclature .two-col > .card .arc-actions,
#panel-nomenclature .two-col > .card .form-inp,
#panel-nomenclature .two-col > .card > div:last-child{
  flex-shrink:0;
}
#panel-nomenclature .two-col > .card .arc-tbl-scroller{
  flex:1;
  min-height:0;
  overflow-x:auto;
  overflow-y:auto;
}


.chrome-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;padding:0 4px}
.chrome-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;position:relative;top:2px;transition:all 0.15s}
.chrome-tab:hover{color:var(--text);background:var(--bg3)}
.chrome-tab.active{color:var(--accent);background:var(--bg2);border-color:var(--border);border-bottom:2px solid var(--bg2)}
.chrome-tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}


/* ==================== COLLAPSIBLE SIDEBAR ==================== */
.sidebar {
  width: 260px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 68px;
}

/* ==================== COLLAPSIBLE SIDEBAR ==================== */
.sidebar {
  width: 260px ;           /* увеличиваем ширину по умолчанию */
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 68px ;
}

/* Кнопка сворачивания */
.toggle-sidebar-btn {
  position: absolute;
  top: 20px;
  right: -16px;
  width: 34px;
  height: 34px;
  background: var(--bg3);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.sidebar.collapsed .toggle-sidebar-btn {
  right: 8px;
}

/* Текст при сворачивании */
.menu-text {
  transition: all 0.3s ease;
  white-space: nowrap;
}

.sidebar.collapsed .menu-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Секции */
.nav-sect {
  transition: all 0.3s ease;
}

.sidebar.collapsed .nav-sect {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* .sidebar.collapsed .logo-line2 {
  display: none;
} */

/* ==================== COLLAPSIBLE SIDEBAR ==================== */
/* Единый размер кнопок */
.arc-btn[style*="font-size"]{font-size:11px}
.arc-btn[style*="padding"]{padding:7px 14px}
button.arc-btn,button.topbar-btn{line-height:1}

/* ==================== КАТАЛОГ НОМЕНКЛАТУРЫ ==================== */
.two-col1-2{display:grid;grid-template-columns:0.5fr 1.5fr;gap:14px;overflow:hidden;}

.nomNav{height:100%;overflow:auto;width:auto;padding-left:20px;margin-left:-6px;color:var(--text2);max-height: 730px;}

.childUl{padding-left:20px;}

.childLi span:hover,
.parentLi span:hover{text-decoration:underline;}

.childLi span.selected,
.parentLi span.selected{outline-style:solid;outline-color:var(--text2);}

.cat-tbl-scroller{
  max-height: 690px;
  overflow-y:auto;
  overflow-x:auto;
}

.nomNavList li.hasChildren{list-style-type:disclosure-closed;}
.nomNavList li.hasChildren[open]{list-style-type:disclosure-open;}


/* ==================== Стили модалок ==================== */
.del-column, .update-column{
  width: 20px;
}

.del-btn, .update-btn{
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text3);
  padding: 2px 5px;
  font-size: 11px;
  cursor: pointer;
}

.update-btn {
  padding: 2px 4px;
}

.del-btn:hover{
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red-text);
}

.update-btn:hover{
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green-text);

}

.table-container{
     overflow-x: auto; 
     border: 1px solid var(--border); 
     border-radius: var(--radius-lg, 12px); 
     max-height: 80vh;
}

table thead{
  position: sticky;
  top: 0;
}

.btn-accent{
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
}

.toolbar{
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.topbar-btn{
  padding: 12px 22px;
  font-size: 14px;
}

.cancel-btn {
  margin-left: auto;
}


.modal-footer {
    display: flex;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.form-row:has(.form-inp[name='id'])  {
  display: none;
}

.modal{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  
}


table tr > :not(:first-child):not(:last-child){

  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}