/* ── CSS Variables — Design System ── */
:root {
  --bg: #0d0d10; --bg2: #131317; --bg3: #1a1a20; --bg4: #222228; --bg5: #2a2a32;
  --b1: #252530; --b2: #32323e; --b3: #42424e;
  --tx: #eaeaf2; --tx2: #8888a0; --tx3: #50506a;
  --acc: #4f8ef7; --acc2: #2d6be0;
  --grn: #2ec98e; --amb: #f0a030; --red: #e85555; --pur: #9b8dff;
  --mat: #4f8ef7; --man: #2ec98e; --equ: #f0a030; --sub: #9b8dff;
  --r: 10px; --rs: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px;
  min-height: 100vh;
}

/* ── Base Form Elements ── */
input, select, textarea {
  background: var(--bg3);
  border: 1px solid var(--b1);
  border-radius: var(--rs);
  color: var(--tx);
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px;
  padding: 7px 10px;
  width: 100%;
  transition: border-color .15s;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acc);
}
input::placeholder, textarea::placeholder { color: var(--tx3); }
select option { background: var(--bg3); }
.form-control, .form-select { /* Bootstrap compatibility */ }

/* ── Bootstrap Dark Overrides ── */
.navbar {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--b1);
  min-height: 50px;
  padding: 0 20px;
}
.navbar-brand { color: var(--tx) !important; font-size: 13px; font-weight: 600; }
.nav-link { color: var(--tx2) !important; font-size: 12px; padding: 5px 13px !important; border-radius: var(--rs); }
.nav-link:hover, .nav-link.active { color: var(--tx) !important; background: var(--bg3); }
.navbar-text { color: var(--tx3) !important; font-size: 11px; }

.card {
  background: var(--bg2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r) !important;
  color: var(--tx) !important;
}
.card-header {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--b1) !important;
  color: var(--tx) !important;
}

.table { color: var(--tx) !important; font-size: 12px; }
.table > :not(caption) > * > * {
  background: transparent !important;
  color: var(--tx) !important;
  border-color: var(--b1) !important;
}
.table-hover tbody tr:hover > * { background: rgba(255,255,255,.015) !important; }
thead th {
  background: var(--bg3) !important;
  color: var(--tx3) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 9px 12px !important;
}

.form-control, .form-select {
  background: var(--bg3) !important;
  border: 1px solid var(--b1) !important;
  color: var(--tx) !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  border-radius: var(--rs) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 2px rgba(79,142,247,.15) !important;
  background: var(--bg3) !important;
  color: var(--tx) !important;
}
.form-control::placeholder { color: var(--tx3) !important; }
.form-label { color: var(--tx2); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

.btn-primary { background: var(--acc) !important; border-color: var(--acc) !important; }
.btn-primary:hover { background: var(--acc2) !important; border-color: var(--acc2) !important; }
.btn-outline-secondary {
  border-color: var(--b2) !important;
  color: var(--tx2) !important;
  background: var(--bg3) !important;
}
.btn-outline-secondary:hover { background: var(--bg4) !important; color: var(--tx) !important; border-color: var(--b3) !important; }

.modal-content { background: var(--bg2) !important; border: 1px solid var(--b1) !important; color: var(--tx) !important; }
.modal-header { border-bottom: 1px solid var(--b1) !important; }
.modal-footer { border-top: 1px solid var(--b1) !important; }
.btn-close { filter: invert(1) !important; }

.badge { font-size: 10px !important; font-weight: 500 !important; }

.dropdown-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--b2) !important;
}
.dropdown-item { color: var(--tx) !important; font-size: 12px; }
.dropdown-item:hover { background: var(--bg3) !important; }

.alert-success { background: rgba(46,201,142,.1) !important; border-color: rgba(46,201,142,.3) !important; color: var(--grn) !important; }
.alert-danger { background: rgba(232,85,85,.1) !important; border-color: rgba(232,85,85,.3) !important; color: var(--red) !important; }
.alert-warning { background: rgba(240,160,48,.1) !important; border-color: rgba(240,160,48,.3) !important; color: var(--amb) !important; }
.alert-info { background: rgba(79,142,247,.1) !important; border-color: rgba(79,142,247,.3) !important; color: var(--acc) !important; }

.pagination .page-link {
  background: var(--bg3) !important;
  border-color: var(--b1) !important;
  color: var(--tx2) !important;
}
.pagination .page-link:hover { background: var(--bg4) !important; color: var(--tx) !important; }
.pagination .page-item.active .page-link { background: var(--acc) !important; border-color: var(--acc) !important; color: #fff !important; }

/* ── Category badges ── */
.badge-mat { background: rgba(79,142,247,.18); color: var(--mat); }
.badge-man { background: rgba(46,201,142,.18); color: var(--man); }
.badge-equ { background: rgba(240,160,48,.18); color: var(--equ); }
.badge-sub { background: rgba(155,141,255,.18); color: var(--sub); }
.badge-ok  { background: rgba(46,201,142,.15); color: var(--grn); border: 1px solid rgba(46,201,142,.3); }
.badge-part { background: rgba(79,142,247,.15); color: var(--acc); border: 1px solid rgba(79,142,247,.3); }
.badge-new { background: rgba(240,160,48,.15); color: var(--amb); border: 1px solid rgba(240,160,48,.3); }
.badge-manual { background: rgba(155,141,255,.15); color: var(--pur); border: 1px solid rgba(155,141,255,.3); }

/* ── Status badges ── */
.badge-draft  { background: rgba(136,136,160,.15); color: var(--tx2); }
.badge-review { background: rgba(240,160,48,.15); color: var(--amb); }
.badge-final  { background: rgba(46,201,142,.15); color: var(--grn); }

/* ── RTL Bootstrap fixes ── */
html[dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto { margin-right: unset !important; margin-left: auto !important; }
html[dir="rtl"] .dropdown-menu { right: 0; left: auto; }
html[dir="rtl"] .modal-header .btn-close { margin: -.5rem auto -.5rem -.5rem; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }