/* ============================================================
   AFRILOC ENTERPRISE UI — Custom Admin Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:       #1e3a5f;
  --primary-light: #2563a8;
  --primary-dark:  #0f2340;
  --accent:        #3b82f6;
  --accent2:       #10b981;
  --danger:        #dc2626;
  --warning:       #d97706;
  --surface:       #ffffff;
  --surface2:      #f8fafc;
  --surface3:      #f1f5f9;
  --border:        #e2e8f0;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --text-light:    #94a3b8;
  --sidebar-bg:    #161d2e;
  --sidebar-text:  #7a8fa8;
  --sidebar-hover: #1c2538;
  --topbar-bg:     #ffffff;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:     0 10px 40px rgba(0,0,0,0.12);
  --radius:        10px;
  --radius-sm:     6px;
  --radius-lg:     16px;
  --transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base: apply Inter everywhere, never override FA icons ──── */
body,
p, span, a, li,
h1, h2, h3, h4, h5, h6,
td, th, label,
input, button, select, textarea,
.nav-link p, .brand-text, .nav-header,
.dropdown-item, .breadcrumb-item,
.paginator, .messagelist li, .main-footer {
  font-family: var(--font) !important;
  font-style:  normal !important;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', monospace !important;
  font-style:  normal !important;
}

/* Protect Font Awesome */
.fas, .far, .fab, .fa, .nav-icon,
.input-group-text span, .input-group-text i {
  font-family: "Font Awesome 5 Free" !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
}
.fas, .fa { font-weight: 900 !important; }
.far       { font-weight: 400 !important; }

body {
  background: var(--surface2) !important;
  color:      var(--text) !important;
  font-size:  16px !important;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.main-sidebar,
.main-sidebar .sidebar {
  background:   var(--sidebar-bg) !important;
  border-right: none !important;
  box-shadow:   4px 0 24px rgba(0,0,0,0.15) !important;
  overflow-x:   hidden !important;
}
.main-sidebar .sidebar { overflow-y: auto !important; }

.brand-link {
  background:    var(--primary-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding:       14px 20px !important;
  transition:    background var(--transition) !important;
}
.brand-link:hover { background: var(--primary) !important; }

.brand-text {
  font-size:      16px !important;
  font-weight:    700 !important;
  letter-spacing: 2px !important;
  color:          #ffffff !important;
  text-transform: uppercase !important;
}
.brand-image {
  border-radius: 8px !important;
  box-shadow:    0 2px 8px rgba(0,0,0,0.3) !important;
}

.user-panel {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding:       16px 20px !important;
  margin:        0 !important;
}
.user-panel .info a,
.user-panel .info span {
  color:       #c4d0de !important;
  font-weight: 500 !important;
  font-size:   14px !important;
}
.user-panel .fa-user-circle {
  font-size: 32px !important;
  color:     #4e7aad !important;
}

.nav-sidebar .nav-item { margin: 2px 10px !important; }

.nav-sidebar .nav-link {
  border-radius: var(--radius-sm) !important;
  padding:       10px 14px !important;
  color:         var(--sidebar-text) !important;
  font-size:     14px !important;
  font-weight:   500 !important;
  transition:    all var(--transition) !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
  overflow:      hidden !important;
  white-space:   nowrap !important;
  text-overflow: ellipsis !important;
}
.nav-sidebar .nav-link:hover {
  background: var(--sidebar-hover) !important;
  color:      #d0dae6 !important;
  transform:  translateX(2px) !important;
}
.nav-sidebar .nav-link.active {
  background: #1e3252 !important;
  color:      #c8d8ea !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.nav-sidebar .nav-icon {
  width:      18px !important;
  font-size:  14px !important;
  text-align: center !important;
  opacity:    0.8 !important;
}
.nav-sidebar .nav-link.active .nav-icon { opacity: 1 !important; }

.nav-sidebar .nav-header {
  font-size:      10px !important;
  font-weight:    700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color:          rgba(148,163,184,0.5) !important;
  padding:        16px 24px 6px !important;
  margin-top:     4px !important;
}
.nav-treeview { padding: 0 !important; }
.nav-treeview .nav-link {
  padding-left: 42px !important;
  font-size:    13px !important;
  opacity:      0.85 !important;
}
.nav-treeview .nav-link:hover { opacity: 1 !important; }

/* ── Top Navbar ────────────────────────────────────────────── */
.main-header.navbar {
  background:    var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow:    var(--shadow-sm) !important;
  min-height:    58px !important;
  padding:       0 20px !important;
}
.main-header .nav-link       { color: var(--text-muted) !important; transition: color var(--transition) !important; }
.main-header .nav-link:hover { color: var(--primary) !important; }

.navbar-nav .nav-link {
  font-size:     14px !important;
  font-weight:   500 !important;
  padding:       8px 14px !important;
  border-radius: var(--radius-sm) !important;
  color:         var(--text-muted) !important;
  transition:    all var(--transition) !important;
}
.navbar-nav .nav-link:hover {
  background: var(--surface3) !important;
  color:      var(--primary) !important;
}
[data-widget="pushmenu"] { color: var(--text-muted) !important; }

/* ── Content Wrapper ───────────────────────────────────────── */
.content-wrapper { background: var(--surface2) !important; }

.content.border-bottom {
  background:    var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding:       16px 24px !important;
  box-shadow:    var(--shadow-sm) !important;
}
.content.border-bottom h1 {
  font-size:   22px !important;
  font-weight: 700 !important;
  color:       var(--text) !important;
  font-style:  normal !important;
}

.breadcrumb {
  background: transparent !important;
  padding:    0 !important;
  margin:     0 !important;
  font-size:  13px !important;
}
.breadcrumb-item a          { color: var(--primary-light) !important; text-decoration: none !important; }
.breadcrumb-item.active     { color: var(--text-muted) !important; }

/* ── Cards & Modules ───────────────────────────────────────── */
.card, .module, #content-main .module {
  background:    var(--surface) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow:    var(--shadow-sm) !important;
  overflow:      hidden !important;
  transition:    box-shadow var(--transition) !important;
}
.card:hover { box-shadow: var(--shadow-md) !important; }

.card-header,
.module caption,
.module h2 {
  background:     var(--surface) !important;
  border-bottom:  1px solid var(--border) !important;
  font-size:      12px !important;
  font-weight:    700 !important;
  font-style:     normal !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color:          var(--text-muted) !important;
  padding:        14px 20px !important;
}

/* ── Dashboard: App List ───────────────────────────────────── */
#content-main { padding: 24px !important; }

.app-list .app-label {
  font-weight:    700 !important;
  font-size:      12px !important;
  font-style:     normal !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color:          var(--text-muted) !important;
  padding:        14px 20px 10px !important;
  border-bottom:  1px solid var(--border) !important;
}
.model-row td, tr.model-row td {
  padding:        13px 20px !important;
  border-bottom:  1px solid var(--border) !important;
  font-size:      15px !important;
  font-weight:    400 !important;
  font-style:     normal !important;
  vertical-align: middle !important;
}
.model-row:last-child td { border-bottom: none !important; }
.model-row td a {
  color:           var(--text) !important;
  font-weight:     500 !important;
  font-style:      normal !important;
  text-decoration: none !important;
  transition:      color var(--transition) !important;
}
.model-row td a:hover { color: var(--primary-light) !important; }

/* Dashboard model row buttons */
.model-row td:last-child { white-space: nowrap !important; }
.model-row .btn,
.model-row a.addlink,
.model-row a.changelink,
.model-row a.viewlink {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            5px !important;
  margin:         0 3px !important;
  padding:        6px 13px !important;
  font-size:      12px !important;
  font-weight:    600 !important;
  font-style:     normal !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  border-radius:  4px !important;
  border:         none !important;
  box-shadow:     0 1px 3px rgba(0,0,0,0.15) !important;
  transition:     all var(--transition) !important;
}
.model-row a.addlink                          { background: #10b981 !important; color: #fff !important; }
.model-row a.changelink, .model-row a.viewlink { background: #334155 !important; color: #e2e8f0 !important; }
.model-row a.addlink:hover,
.model-row a.changelink:hover,
.model-row a.viewlink:hover {
  opacity:    0.88 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  transform:  translateY(-1px) !important;
}

/* ── Dashboard: Recent Actions ─────────────────────────────── */
#recent-actions-module {
  background:    var(--surface) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow:      hidden !important;
}
#recent-actions-module h2,
#recent-actions-module h4 {
  font-family:    var(--font) !important;
  font-size:      12px !important;
  font-weight:    700 !important;
  font-style:     normal !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color:          var(--text-muted) !important;
  padding:        14px 20px !important;
  border-bottom:  1px solid var(--border) !important;
  margin:         0 !important;
}
#recent-actions-module p,
#recent-actions-module a,
#recent-actions-module span,
#recent-actions-module li,
#recent-actions-module .timeline-header,
#recent-actions-module .timeline-body,
#recent-actions-module .time,
#recent-actions-module * {
  font-family: var(--font) !important;
  font-style:  normal !important;
}
#recent-actions-module .timeline-header { font-size: 15px !important; font-weight: 500 !important; font-family: var(--font) !important; }
#recent-actions-module .time            { font-size: 13px !important; color: var(--text-muted) !important; font-family: var(--font) !important; }
#recent-actions-module .timeline-item   { font-size: 15px !important; font-family: var(--font) !important; }

#recent-actions-module .actionlist {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}
#recent-actions-module .actionlist li {
  padding:       10px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size:     15px !important;
  font-style:    normal !important;
  font-family:   var(--font) !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
  transition:    background var(--transition) !important;
}
#recent-actions-module .actionlist li:hover      { background: var(--surface2) !important; }
#recent-actions-module .actionlist li:last-child { border-bottom: none !important; }

/* ── Tables ────────────────────────────────────────────────── */
#result_list, .results table {
  width:           100% !important;
  border-collapse: collapse !important;
}
#result_list thead th,
.results table thead th {
  background:     var(--surface3) !important;
  color:          var(--text-muted) !important;
  font-size:      12px !important;
  font-weight:    700 !important;
  font-style:     normal !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding:        13px 16px !important;
  border-bottom:  1px solid var(--border) !important;
  white-space:    nowrap !important;
}
#result_list thead th a {
  color:           var(--text-muted) !important;
  text-decoration: none !important;
  font-style:      normal !important;
}
#result_list tbody tr             { border-bottom: 1px solid var(--border) !important; transition: background var(--transition) !important; }
#result_list tbody tr:hover       { background: var(--surface2) !important; }
#result_list tbody tr:nth-child(even) { background: rgba(248,250,252,0.6) !important; }
#result_list tbody td {
  padding:        14px 16px !important;
  color:          var(--text) !important;
  font-size:      15px !important;
  font-weight:    400 !important;
  font-style:     normal !important;
  vertical-align: middle !important;
}
#result_list tbody td a {
  color:           var(--primary-light) !important;
  text-decoration: none !important;
  font-weight:     500 !important;
  font-style:      normal !important;
}
#result_list tbody td input[type="checkbox"] {
  accent-color: var(--primary) !important;
  width: 15px !important; height: 15px !important;
}

/* History table */
#change-history thead th {
  font-size:      12px !important;
  font-weight:    700 !important;
  font-style:     normal !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  background:     var(--surface3) !important;
  color:          var(--text-muted) !important;
  padding:        12px 16px !important;
  border-bottom:  1px solid var(--border) !important;
}
#change-history tbody td {
  font-size:   14px !important;
  font-style:  normal !important;
  font-weight: 400 !important;
  padding:     12px 16px !important;
}

/* ── Search ────────────────────────────────────────────────── */
#toolbar {
  background:    var(--surface) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding:       12px 16px !important;
  margin-bottom: 16px !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           12px !important;
  box-shadow:    var(--shadow-sm) !important;
}
#searchbar,
input[name="q"] {
  background:    #ffffff !important;
  border:        1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding:       9px 14px !important;
  font-size:     14px !important;
  font-family:   var(--font) !important;
  font-style:    normal !important;
  color:         var(--text) !important;
  min-width:     280px !important;
  transition:    all var(--transition) !important;
  box-shadow:    0 1px 3px rgba(0,0,0,0.04) !important;
}
#searchbar::placeholder,
input[name="q"]::placeholder {
  color:      var(--text-light) !important;
  font-style: normal !important;
}
#searchbar:focus,
input[name="q"]:focus {
  outline:      none !important;
  border-color: var(--primary) !important;
  box-shadow:   0 0 0 3px rgba(30,58,95,0.1) !important;
  background:   #ffffff !important;
}

/* ── Filters ───────────────────────────────────────────────── */
#changelist-filter {
  background:    var(--surface) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding:       16px !important;
  box-shadow:    var(--shadow-sm) !important;
}
#changelist-filter h2 {
  font-size:      11px !important;
  font-weight:    700 !important;
  font-style:     normal !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color:          var(--text-muted) !important;
  margin-bottom:  12px !important;
  padding-bottom: 8px !important;
  border-bottom:  1px solid var(--border) !important;
}
#changelist-filter h3    { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; margin: 14px 0 6px !important; }
#changelist-filter ul    { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#changelist-filter li a  { font-size: 13px !important; color: var(--text-muted) !important; text-decoration: none !important; display: block !important; padding: 5px 0 !important; transition: color var(--transition) !important; }
#changelist-filter li a:hover,
#changelist-filter li.selected a { color: var(--primary-light) !important; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group label, .field-box label, .form-row label {
  font-size:      13px !important;
  font-weight:    600 !important;
  font-style:     normal !important;
  color:          var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom:  6px !important;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
  border:        1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding:       9px 13px !important;
  font-size:     15px !important;
  font-family:   var(--font) !important;
  font-style:    normal !important;
  background:    var(--surface) !important;
  color:         var(--text) !important;
  transition:    all var(--transition) !important;
  width:         100% !important;
}
input:focus, select:focus, textarea:focus {
  outline:      none !important;
  border-color: var(--primary) !important;
  box-shadow:   0 0 0 3px rgba(30,58,95,0.08) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn, a.addlink, a.changelink, a.viewlink, input[type="submit"] {
  border-radius:  var(--radius-sm) !important;
  font-size:      13px !important;
  font-weight:    600 !important;
  font-style:     normal !important;
  letter-spacing: 0.3px !important;
  padding:        7px 16px !important;
  transition:     all var(--transition) !important;
  border:         none !important;
  cursor:         pointer !important;
}
.btn-primary, input[type="submit"], .btn-info {
  background: var(--primary) !important;
  color:      #fff !important;
  box-shadow: 0 2px 6px rgba(30,58,95,0.3) !important;
}
.btn-primary:hover, input[type="submit"]:hover {
  background: var(--primary-light) !important;
  box-shadow: 0 4px 12px rgba(30,58,95,0.4) !important;
  transform:  translateY(-1px) !important;
}
.btn-success, a.addlink { background: var(--accent2) !important; color: #fff !important; }
.btn-danger, .deletelink { background: var(--danger) !important; color: #fff !important; }
a.changelink, a.viewlink { background: var(--surface3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
a.changelink:hover, a.viewlink:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* ── Submit Row ────────────────────────────────────────────── */
.submit-row {
  display:       flex !important;
  gap:           8px !important;
  align-items:   center !important;
  flex-wrap:     wrap !important;
  padding:       16px 20px !important;
  background:    var(--surface) !important;
  border-top:    1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
.submit-row input[type="submit"], .submit-row button {
  flex:          0 0 auto !important;
  width:         auto !important;
  min-width:     120px !important;
  padding:       10px 20px !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  font-style:    normal !important;
  border-radius: var(--radius-sm) !important;
  border:        none !important;
  cursor:        pointer !important;
  transition:    all var(--transition) !important;
}
.submit-row input[name="_save"]       { background: #1e3a5f !important; color: #c8d8ec !important; }
.submit-row input[name="_addanother"] { background: #1a4d3a !important; color: #a7d4be !important; }
.submit-row input[name="_continue"]   { background: #2d3f55 !important; color: #a8bdd4 !important; }
.submit-row .deletelink-box a,
.submit-row a.deletelink {
  background:      #7f1d1d !important;
  color:           #fca5a5 !important;
  padding:         10px 20px !important;
  border-radius:   var(--radius-sm) !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  display:         inline-block !important;
}
.submit-row input:hover, .submit-row a.deletelink:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }

/* ── Changelist Container ──────────────────────────────────── */
#changelist {
  background:    var(--surface) !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow:      hidden !important;
  box-shadow:    var(--shadow-sm) !important;
}
#changelist .results           { box-shadow: none !important; border: none !important; border-radius: 0 !important; }
#changelist #result_list       { width: 100% !important; margin: 0 !important; }
#changelist-form .actions {
  padding:       10px 16px !important;
  background:    var(--surface3) !important;
  border-bottom: 1px solid var(--border) !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
}

/* ── Pagination ────────────────────────────────────────────── */
.paginator, p.paginator, #changelist .paginator {
  background:  transparent !important;
  box-shadow:  none !important;
  border:      none !important;
  border-top:  1px solid var(--border) !important;
  padding:     12px 16px !important;
  margin:      0 !important;
  font-size:   13px !important;
  color:       var(--text-muted) !important;
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
}
.paginator a, .paginator span.this-page {
  padding:         6px 12px !important;
  border-radius:   var(--radius-sm) !important;
  text-decoration: none !important;
  font-weight:     500 !important;
  font-size:       13px !important;
  border:          1px solid var(--border) !important;
  transition:      all var(--transition) !important;
}
.paginator a              { color: var(--text-muted) !important; }
.paginator a:hover        { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
.paginator span.this-page { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* ── Messages ──────────────────────────────────────────────── */
.messagelist { list-style: none !important; padding: 0 16px !important; margin: 0 !important; }
.messagelist li {
  padding:       12px 18px !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 8px !important;
  font-size:     14px !important;
  font-weight:   500 !important;
  font-style:    normal !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           10px !important;
}
.messagelist .success { background: rgba(16,185,129,0.1) !important; color: #047857 !important; border-left: 3px solid var(--accent2) !important; }
.messagelist .error   { background: rgba(220,38,38,0.08) !important; color: var(--danger) !important;  border-left: 3px solid var(--danger) !important; }
.messagelist .warning { background: rgba(217,119,6,0.1)  !important; color: #92400e !important;         border-left: 3px solid var(--warning) !important; }

/* ── Dropdowns ─────────────────────────────────────────────── */
.dropdown-menu {
  border:        1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow:    var(--shadow-lg) !important;
  padding:       6px !important;
  background:    var(--surface) !important;
}
.dropdown-item {
  border-radius: var(--radius-sm) !important;
  font-size:     14px !important;
  font-style:    normal !important;
  padding:       9px 12px !important;
  color:         var(--text) !important;
  transition:    all var(--transition) !important;
}
.dropdown-item:hover  { background: var(--surface3) !important; color: var(--primary) !important; }
.dropdown-header {
  font-size:      10px !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color:          var(--text-light) !important;
  padding:        8px 12px 4px !important;
}

/* ── Footer ────────────────────────────────────────────────── */
.main-footer {
  background:  var(--surface) !important;
  border-top:  1px solid var(--border) !important;
  color:       var(--text-muted) !important;
  font-size:   12px !important;
  font-style:  normal !important;
  padding:     12px 24px !important;
}

/* ── Login ─────────────────────────────────────────────────── */
.login-page, body.login {
  background:      var(--surface2) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  min-height:      100vh !important;
}
.login-box, .login-card-body {
  background:    var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-lg) !important;
  padding:       40px !important;
  width:         100% !important;
  max-width:     420px !important;
}
.login-box-msg, .login-logo { text-align: center !important; margin-bottom: 24px !important; }
.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100% !important; padding: 10px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important;
  background: #ffffff !important;
  color: var(--text) !important;
  margin-bottom: 0 !important;
}
.login-box .input-group-text, .login-box .input-group-append .btn {
  background: var(--surface3) !important; border: 1px solid var(--border) !important;
  border-left: none !important; color: var(--text-muted) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 10px 14px !important; font-size: 13px !important;
  display: flex !important; align-items: center !important; min-width: 42px !important;
}
.login-box .input-group        { display: flex !important; align-items: stretch !important; margin-bottom: 16px !important; }
.login-box .input-group input  { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; border-right: none !important; flex: 1 !important; }
.login-box input[type="submit"],
.login-box button[type="submit"] {
  width: 100% !important; padding: 12px !important;
  background: var(--primary) !important; color: #fff !important;
  border: none !important; border-radius: var(--radius-sm) !important;
  font-size: 15px !important; font-weight: 600 !important;
  margin-top: 8px !important; transition: all var(--transition) !important;
  box-shadow: 0 2px 8px rgba(30,58,95,0.3) !important;
}
.login-box input[type="submit"]:hover { background: var(--primary-light) !important; transform: translateY(-1px) !important; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-wrapper > * { animation: fadeInUp 0.25s ease forwards; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #content-main         { padding: 16px !important; }
  .main-header.navbar   { padding: 0 12px !important; }
}

/* ── Sidebar — larger text ─────────────────────────────────── */
.nav-sidebar .nav-link        { font-size: 16px !important; padding: 11px 14px !important; }
.nav-treeview .nav-link       { font-size: 15px !important; }
.nav-sidebar .nav-icon        { font-size: 16px !important; }
.nav-sidebar .nav-header      { font-size: 11px !important; }
.brand-text                   { font-size: 17px !important; }
.user-panel .info a,
.user-panel .info span        { font-size: 15px !important; }

/* ── Search input — matches filter selects ─────────────────── */
#toolbar input[type="search"],
#toolbar input[type="text"],
#searchbar,
input#searchbar,
input[name="q"],
.change-list input[name="q"],
#changelist-search input {
  background:    #ffffff !important;
  border:        1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding:       9px 14px !important;
  font-size:     14px !important;
  color:         var(--text) !important;
  min-width:     260px !important;
  box-shadow:    0 1px 3px rgba(0,0,0,0.04) !important;
  transition:    all var(--transition) !important;
}
#toolbar input[type="search"]:hover,
#toolbar input[type="text"]:hover,
input[name="q"]:hover {
  border-color: #94a3b8 !important;
}
#toolbar input[type="search"]:focus,
#toolbar input[type="text"]:focus,
#searchbar:focus,
input#searchbar:focus,
input[name="q"]:focus {
  border-color: var(--primary) !important;
  box-shadow:   0 0 0 3px rgba(30,58,95,0.10) !important;
  outline:      none !important;
}

/* ── JSON Bool Toggle Widget ───────────────────────────────── */
.jtw-wrap {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  margin-bottom: 4px;
  background:    var(--surface);
}
.jtw-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     9px 14px;
  cursor:      pointer;
  background:  var(--surface3);
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-muted);
  user-select: none;
  transition:  background 0.15s;
}
.jtw-header:hover { background: #dde3ea; }
.jtw-arrow { font-size: 10px; transition: transform 0.18s; flex-shrink: 0; }
.jtw-arrow.jtw-open { transform: rotate(90deg); }
.jtw-badge {
  margin-left:   auto;
  background:    var(--border);
  color:         var(--text-muted);
  font-size:     11px;
  font-weight:   600;
  padding:       1px 7px;
  border-radius: 10px;
}
.jtw-body {
  display:    none;
  max-height: 420px;
  overflow-y: auto;
}
.jtw-actions {
  display:       flex;
  gap:           8px;
  padding:       8px 14px;
  border-bottom: 1px solid var(--border);
  background:    var(--surface2);
}
.jtw-bulk {
  font-size:     11px;
  font-weight:   600;
  padding:       3px 10px;
  border:        1px solid var(--border);
  border-radius: 4px;
  background:    var(--surface);
  color:         var(--text-muted);
  cursor:        pointer;
  transition:    all 0.15s;
}
.jtw-bulk:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.jtw-row {
  display:       flex;
  align-items:   center;
  padding:       7px 14px;
  border-bottom: 1px solid rgba(226,232,240,0.6);
  gap:           10px;
}
.jtw-row:last-child { border-bottom: none; }
.jtw-label {
  flex:      1;
  font-size: 13px;
  color:     var(--text);
}
.jtw-key {
  font-size:   10px;
  color:       var(--text-light);
  font-family: 'JetBrains Mono', monospace;
  min-width:   230px;
  text-align:  right;
}
/* iOS-style toggle switch */
.jtw-switch {
  position:     relative;
  display:      inline-block;
  width:        38px;
  height:       22px;
  flex-shrink:  0;
}
.jtw-switch input { opacity: 0; width: 0; height: 0; }
.jtw-slider {
  position:      absolute;
  cursor:        pointer;
  inset:         0;
  background:    #cbd5e1;
  border-radius: 22px;
  transition:    background 0.2s;
}
.jtw-slider::before {
  content:       '';
  position:      absolute;
  height:        16px;
  width:         16px;
  left:          3px;
  bottom:        3px;
  background:    #ffffff;
  border-radius: 50%;
  box-shadow:    0 1px 3px rgba(0,0,0,0.2);
  transition:    transform 0.2s;
}
.jtw-switch input:checked + .jtw-slider          { background: #1e3a5f; }
.jtw-switch input:checked + .jtw-slider::before  { transform: translateX(16px); }
.jtw-row:hover { background: var(--surface2); }
/* delete button per row */
.jtw-del {
  background:    none;
  border:        none;
  color:         #94a3b8;
  cursor:        pointer;
  padding:       2px 4px;
  border-radius: 4px;
  font-size:     11px;
  flex-shrink:   0;
  transition:    color 0.15s, background 0.15s;
}
.jtw-del:hover { color: #e53e3e; background: #fee2e2; }
/* add-key row */
.jtw-add-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 14px;
  border-top:    1px dashed var(--border);
  background:    var(--surface2);
}
.jtw-add-key {
  flex:          1;
  font-size:     12px;
  font-family:   'JetBrains Mono', monospace;
  padding:       4px 8px;
  border:        1px solid var(--border);
  border-radius: 4px;
  background:    var(--surface);
  color:         var(--text);
  outline:       none;
}
.jtw-add-key:focus { border-color: var(--primary); }
.jtw-add-toggle { margin: 0; }
.jtw-add-btn {
  font-size:     11px;
  font-weight:   600;
  padding:       4px 10px;
  border:        1px solid var(--primary);
  border-radius: 4px;
  background:    var(--surface);
  color:         var(--primary);
  cursor:        pointer;
  transition:    all 0.15s;
  white-space:   nowrap;
}
.jtw-add-btn:hover { background: var(--primary); color: #fff; }

/* ── Permission / Group Checkbox Widgets ────────────────────────────────────── */
.pcw-wrap, .gcw-wrap {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  background:    var(--surface);
  overflow:      hidden;
}
/* toolbar */
.pcw-toolbar, .gcw-toolbar {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        10px 14px;
  background:     var(--surface3);
  border-bottom:  1px solid var(--border);
  flex-wrap:      wrap;
}
.pcw-search-wrap {
  position:    relative;
  flex:        1;
  min-width:   200px;
}
.pcw-search-icon {
  position:       absolute;
  left:           11px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      11px;
  color:          var(--text-light);
  pointer-events: none;
}
.pcw-search {
  width:         100%;
  padding:       5px 10px 5px 34px;
  font-size:     13px;
  border:        1px solid var(--border);
  border-radius: 5px;
  background:    var(--surface);
  color:         var(--text);
  outline:       none;
  box-sizing:    border-box;
}
.pcw-search:focus { border-color: var(--primary); }
.pcw-total {
  font-size:   12px;
  color:       var(--text-muted);
  white-space: nowrap;
}
.pcw-global-btns, .pcw-group-btns { display: flex; gap: 5px; }
.pcw-btn {
  font-size:     11px;
  font-weight:   600;
  padding:       3px 9px;
  border:        1px solid var(--border);
  border-radius: 4px;
  background:    var(--surface);
  color:         var(--text-muted);
  cursor:        pointer;
  transition:    all 0.15s;
  white-space:   nowrap;
}
.pcw-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* scrollable groups container */
.pcw-groups {
  max-height: 540px;
  overflow-y: auto;
}
/* individual group */
.pcw-group-hdr {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 14px;
  cursor:        pointer;
  background:    var(--surface2);
  border-bottom: 1px solid var(--border);
  user-select:   none;
  transition:    background 0.12s;
}
.pcw-group-hdr:hover { background: #dde3ea; }
.pcw-arrow { font-size: 10px; transition: transform 0.18s; flex-shrink: 0; color: var(--text-light); }
.pcw-arrow.pcw-open { transform: rotate(90deg); }
.pcw-group-label {
  flex:        1;
  font-size:   12px;
  font-weight: 600;
  color:       var(--text);
}
.pcw-group-count {
  font-size:   11px;
  color:       var(--text-muted);
  font-weight: 500;
  min-width:   40px;
  text-align:  right;
}
/* permission rows */
.pcw-group-body {
  background: var(--surface);
}
.pcw-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       6px 14px 6px 28px;
  border-bottom: 1px solid rgba(226,232,240,0.5);
  cursor:        pointer;
  transition:    background 0.1s;
}
.pcw-row:last-child { border-bottom: none; }
.pcw-row:hover { background: var(--surface2); }
.pcw-row input[type="checkbox"] {
  width:  15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.pcw-perm-name {
  flex:      1;
  font-size: 13px;
  color:     var(--text);
}
.pcw-perm-code {
  font-size:   10px;
  color:       var(--text-light);
  font-family: 'JetBrains Mono', monospace;
  background:  var(--surface3);
  padding:     1px 5px;
  border-radius: 3px;
}
/* group checkbox widget */
.gcw-rows {
  max-height: 300px;
  overflow-y: auto;
  padding:    6px 0;
}
.gcw-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     7px 14px;
  cursor:      pointer;
  font-size:   13px;
  transition:  background 0.1s;
}
.gcw-row:hover { background: var(--surface2); }
.gcw-row input[type="checkbox"] {
  width:  15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary);
}