:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-rgb: 37, 99, 235;
  --color-background: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-text: #172033;
  --color-muted: #64748b;
  --color-border: #dbe3ee;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-error: #b91c1c;
  --color-info: #0369a1;
  --color-focus: #60a5fa;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --control-height: 40px;
}

html[data-palette="indigo"] { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-primary-soft: #eef2ff; --color-primary-rgb: 79, 70, 229; --color-focus: #818cf8; }
html[data-palette="teal"] { --color-primary: #0f766e; --color-primary-hover: #115e59; --color-primary-soft: #f0fdfa; --color-primary-rgb: 15, 118, 110; --color-focus: #2dd4bf; }
html[data-palette="rose"] { --color-primary: #e11d48; --color-primary-hover: #be123c; --color-primary-soft: #fff1f2; --color-primary-rgb: 225, 29, 72; --color-focus: #fb7185; }

html { font-size: 16px; }
body {
  color: var(--color-text);
  background: var(--color-background);
  font-family: "Source Sans Pro", "Cairo", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }
a:hover, a:focus { color: var(--color-primary-hover); }
:focus-visible {
  outline: 3px solid rgba(96, 165, 250, .55) !important;
  outline-offset: 2px;
}

.content-wrapper { background: var(--color-background); }
.content { padding: var(--space-5); }
.content-header { padding: var(--space-5) var(--space-5) 0; }
.content-header > h1, .page-title {
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 600; }
.text-muted, small, .help-block { color: var(--color-muted) !important; }

.box, .card, .panel, .well {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.box { border-top: 0; margin-bottom: var(--space-5); }
.box-header, .card-header, .panel-heading {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-4) var(--space-5);
}
.box-header .box-title { font-size: 17px; font-weight: 700; }
.box-body, .card-body, .panel-body { padding: var(--space-5); }
.box-footer, .card-footer, .panel-footer {
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
}

.form-group { margin-bottom: var(--space-4); }
label, .control-label, .form-label {
  color: #334155;
  display: inline-block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="search"], input[type="tel"], select, textarea {
  background-color: var(--color-surface);
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  box-shadow: none;
  color: var(--color-text);
  min-height: var(--control-height);
  padding: 8px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control, textarea { min-height: 96px; resize: vertical; }
.form-control:hover, input:hover, select:hover, textarea:hover { border-color: #94a3b8; }
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .22);
  outline: 0;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,
input:disabled, select:disabled, textarea:disabled {
  background: #eef2f7;
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 1;
}
.has-error .form-control, .input-validation-error, [aria-invalid="true"] {
  border-color: var(--color-error) !important;
}
.has-error .help-block, .field-validation-error, .validation-summary-errors {
  color: var(--color-error) !important;
}
.input-group-addon {
  background: var(--color-surface-muted);
  border-color: #cbd5e1;
  color: var(--color-muted);
}
.select2-container .select2-selection--single { min-height: var(--control-height); border-color: #cbd5e1; }

.btn, input[type="submit"], input[type="button"] {
  align-items: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
  min-height: var(--control-height);
  padding: 8px 16px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-sm { min-height: 32px; padding: 5px 10px; }
.btn-xs { min-height: 28px; padding: 3px 8px; }
.btn-primary, input[type="submit"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, input[type="submit"]:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-default { background: var(--color-surface); border-color: #cbd5e1; color: #334155; }
.btn-default:hover, .btn-default:focus { background: var(--color-surface-muted); border-color: #94a3b8; color: var(--color-text); }
.btn-success { background: var(--color-success); border-color: var(--color-success); }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
.btn-danger { background: var(--color-error); border-color: var(--color-error); }
.btn[disabled], .btn.disabled { cursor: not-allowed; opacity: .58; }
.btn + .btn { margin-inline-start: var(--space-2); }

.table-responsive, .ds-table-scroll { border: 0; overflow-x: auto; width: 100%; }
.table { background: var(--color-surface); margin-bottom: 0; }
.table > thead > tr > th {
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
  padding: 12px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.table > tbody > tr > td { border-color: #edf1f6; padding: 12px; vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--color-primary-soft); }
.table .btn { margin: 2px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 34px; }
.pagination > li > a, .pagination > li > span { border-color: var(--color-border); color: var(--color-primary); }
.pagination > .active > a, .pagination > .active > span { background: var(--color-primary); border-color: var(--color-primary); }
/* Keep page-number buttons visually stable on hover. Some legacy DataTables
   themes otherwise apply a dark gradient that looks like a black popup. */
.naba-app .pagination > li:not(.active):not(.disabled) > a:hover,
.naba-app .pagination > li:not(.active):not(.disabled) > span:hover,
.naba-app .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
  background: #fff !important;
  background-image: none !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  transform: none !important;
}

.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); }
.modal-title { color: var(--color-text); font-size: 18px; font-weight: 700; }
.modal-body { padding: var(--space-5); }
.modal-footer { background: var(--color-surface-muted); border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); }
.modal-header .close { font-size: 26px; min-height: 32px; min-width: 32px; }

.alert, .callout { border: 1px solid transparent; border-radius: var(--radius-md); }
.alert-success, .callout-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-info, .callout-info { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.alert-warning, .callout-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger, .callout-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.label { border-radius: 999px; font-weight: 600; padding: 4px 8px; }

.main-header .logo, .main-header .navbar { background-color: #1e3a5f !important; }
.main-header .logo { font-weight: 700; letter-spacing: .02em; }
.main-sidebar { background: #172a46 !important; }
.sidebar-menu > li > a { border-left: 3px solid transparent; color: #dbe7f5 !important; }
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
  background: rgba(255,255,255,.08) !important;
  border-left-color: #60a5fa !important;
  color: #fff !important;
}
.sidebar-menu .treeview-menu { background: rgba(0,0,0,.12) !important; }
.sidebar-menu .treeview-menu > li > a { color: #c3d3e6 !important; padding-block: 8px; }
.main-footer { border-top-color: var(--color-border); color: var(--color-muted); min-height: 48px !important; height: auto !important; padding: 14px var(--space-5); }

.ds-empty-state, .ds-loading-state, .ds-error-state {
  color: var(--color-muted);
  padding: var(--space-6);
  text-align: center;
}
.ds-loading-state::before {
  animation: ds-spin .8s linear infinite;
  border: 3px solid #dbeafe;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 24px;
  margin-inline-end: var(--space-2);
  vertical-align: middle;
  width: 24px;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

[dir="rtl"] .sidebar-menu > li > a { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .sidebar-menu > li:hover > a, [dir="rtl"] .sidebar-menu > li.active > a { border-right-color: #60a5fa !important; }
[dir="rtl"] .table > thead > tr > th { text-align: right; }

@media (max-width: 767px) {
  .content, .content-header, .box-body, .card-body, .panel-body { padding: var(--space-4); }
  .content-header > h1, .page-title { font-size: 21px; }
  .form-control, input, select, textarea { font-size: 16px; max-width: none; width: 100%; }
  .btn { margin-bottom: var(--space-2); white-space: normal; }
  .btn + .btn { margin-inline-start: 0; }
  .modal-dialog { margin: var(--space-2); }
  .modal-body, .modal-header, .modal-footer { padding: var(--space-4); }
  .box-header, .card-header, .panel-heading { padding: var(--space-4); }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 10px 8px; }
}

/* Sidebar navigation --------------------------------------------------------- */
.naba-app .main-sidebar {
  background: linear-gradient(180deg, #172a46 0%, #13243d 100%) !important;
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 5px 0 24px rgba(15,23,42,.14);
  width: 230px;
}
.naba-app .main-sidebar .sidebar { padding: 14px 10px 24px; }
.naba-app .main-sidebar .user-panel {
  align-items: center;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  display: flex;
  margin: 0 0 18px;
  min-height: 74px;
  padding: 12px;
  width: 100%;
}
.naba-app .main-sidebar .user-panel::before,
.naba-app .main-sidebar .user-panel::after { display: none; }
.naba-app .main-sidebar .user-panel > .image { float: none !important; flex: 0 0 auto; }
.naba-app .main-sidebar .user-panel > .image > img {
  background: #fff;
  border: 2px solid rgba(147,197,253,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
  height: 45px;
  max-width: none;
  object-fit: cover;
  width: 45px;
}
.naba-app .main-sidebar .user-panel > .info {
  float: none !important;
  left: auto;
  line-height: 1.25;
  overflow: hidden;
  padding: 0 0 0 12px;
  position: static;
  width: auto;
}
.naba-app .main-sidebar .user-panel > .info > p {
  color: #f8fafc !important;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.naba-app .main-sidebar .user-panel > .info > a {
  align-items: center;
  color: #9fb2c9 !important;
  display: flex;
  font-size: 11px;
  gap: 5px;
}
.naba-app .main-sidebar .user-panel > .info > a .fa { color: #22c55e !important; font-size: 9px; }
.naba-app .sidebar-menu { white-space: normal; }
.naba-app .sidebar-menu > .header {
  background: transparent !important;
  color: #7891ad !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .115em;
  line-height: 1.45;
  overflow: hidden;
  padding: 12px 10px 9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.naba-app .sidebar-menu > li { margin-bottom: 4px; }
.naba-app .sidebar-menu > li > a {
  align-items: center;
  background: transparent !important;
  border: 1px solid transparent;
  border-left: 0 !important;
  border-radius: 9px;
  color: #c8d6e8 !important;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  min-height: 44px;
  padding: 7px 10px;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.naba-app .sidebar-menu > li > a > .fa,
.naba-app .sidebar-menu > li > a > .ion {
  align-items: center;
  background: rgba(96,165,250,.11);
  border-radius: 7px;
  color: #8fc0ff !important;
  display: inline-flex;
  flex: 0 0 31px;
  font-size: 15px;
  height: 31px;
  justify-content: center;
  margin-right: 10px;
  width: 31px;
}
.naba-app .sidebar-menu > li:hover > a,
.naba-app .sidebar-menu > li.menu-open > a,
.naba-app .sidebar-menu > li.active > a {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(147,197,253,.13);
  color: #fff !important;
}
.naba-app .sidebar-menu > li.active > a {
  background: linear-gradient(90deg, rgba(37,99,235,.28), rgba(37,99,235,.1)) !important;
  box-shadow: inset 3px 0 0 #60a5fa;
}
.naba-app .sidebar-menu > li.menu-open > a > .fa,
.naba-app .sidebar-menu > li.active > a > .fa { background: rgba(96,165,250,.2); color: #bfdbfe !important; }
.naba-app .sidebar-menu > li > a > span:not(.pull-right-container) {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.naba-app .sidebar-menu > li > a > .pull-right-container {
  align-items: center;
  display: flex;
  margin-left: 8px;
  position: static;
}
.naba-app .sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
  color: #7891ad;
  font-size: 13px;
  margin: 0;
  transition: transform .18s ease;
}
.naba-app .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); }
.naba-app .sidebar-menu .treeview-menu {
  background: rgba(4,12,24,.2) !important;
  border-left: 1px solid rgba(96,165,250,.18);
  border-radius: 0 0 8px 8px;
  margin: 2px 0 7px 25px;
  padding: 5px 0 5px 9px;
}
.naba-app .sidebar-menu .treeview-menu > li { margin: 2px 0; }
.naba-app .sidebar-menu .treeview-menu > li > a {
  align-items: center;
  border-radius: 6px;
  color: #9fb2c9 !important;
  display: flex;
  font-size: 12px;
  min-height: 34px;
  padding: 7px 9px;
}
.naba-app .sidebar-menu .treeview-menu > li > a > .fa {
  color: #6f89a8;
  font-size: 11px;
  margin-right: 8px;
  width: 15px;
}
.naba-app .sidebar-menu .treeview-menu > li:hover > a,
.naba-app .sidebar-menu .treeview-menu > li.active > a { background: rgba(255,255,255,.065); color: #fff !important; }
.naba-app .sidebar-menu .treeview-menu > li.active > a > .fa { color: #60a5fa; }

[dir="rtl"] .naba-app .main-sidebar { border-left: 1px solid rgba(255,255,255,.05); border-right: 0; }
[dir="rtl"] .naba-app .main-sidebar .user-panel > .info { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .naba-app .sidebar-menu > li > a > .fa,
[dir="rtl"] .naba-app .sidebar-menu > li > a > .ion { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .naba-app .sidebar-menu > li.active > a { box-shadow: inset -3px 0 0 #60a5fa; }
[dir="rtl"] .naba-app .sidebar-menu > li > a > .pull-right-container { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .naba-app .sidebar-menu .treeview-menu { border-left: 0; border-right: 1px solid rgba(96,165,250,.18); margin-left: 0; margin-right: 25px; padding-left: 0; padding-right: 9px; }
[dir="rtl"] .naba-app .sidebar-menu .treeview-menu > li > a > .fa { margin-left: 8px; margin-right: 0; }

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-sidebar { width: 50px; }
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar { padding-left: 5px; padding-right: 5px; }
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel { background: transparent; border: 0; justify-content: center; padding: 7px 0; }
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .image > img { height: 34px; width: 34px; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a { justify-content: center; padding: 6px 4px; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa,
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .ion { margin: 0; }
}

/* Top application navigation ------------------------------------------------ */
.naba-app .main-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 3px 14px rgba(15,23,42,.07);
  height: 64px;
  max-height: 64px;
}
.naba-app .main-header .logo {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0;
  color: #172033 !important;
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  text-align: left;
  width: 230px;
}
.naba-app .main-header .logo:hover { background: #f8fafc !important; }
.naba-app .main-header .logo-lg { align-items: center; direction: ltr; display: inline-flex; font-size: 15px; gap: 5px; letter-spacing: .04em; }
.naba-app .main-header .logo-lg strong { color: var(--color-primary); font-weight: 700; }
.naba-app .main-header .brand-mark {
  align-items: center;
  background: transparent;
  border-radius: 0;
  color: inherit;
  display: inline-flex;
  font-size: 15px;
  height: 40px;
  justify-content: center;
  letter-spacing: 0;
  margin-right: 8px;
  width: 40px;
}
.naba-app .main-header .brand-mark img {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.naba-app .main-header .logo-mini {
  align-items: center;
  background: transparent;
  border-radius: 0;
  color: inherit;
  height: 40px;
  justify-content: center;
  line-height: 40px;
  margin: 12px auto;
  width: 40px;
}
.naba-app .main-header .logo-mini img {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.naba-app .main-header .navbar {
  background: #ffffff !important;
  border: 0;
  height: 64px;
  margin-left: 230px;
  min-height: 64px;
}
.naba-app .main-header .sidebar-toggle {
  align-items: center;
  background: transparent !important;
  border: 0;
  border-radius: 8px;
  color: #64748b !important;
  display: flex;
  font-size: 17px;
  height: 44px;
  justify-content: center;
  margin: 10px 8px;
  min-height: 44px;
  padding: 0;
  width: 44px;
}
.naba-app .main-header .sidebar-toggle::before { display: none; }
.naba-app .main-header .sidebar-toggle:hover,
.naba-app .main-header .sidebar-toggle:focus { background: #f1f5f9 !important; color: var(--color-primary) !important; }
.naba-app .main-header .sidebar-toggle:active { background: #e2e8f0 !important; transform: translateY(1px); }
.naba-app .main-header .navbar-custom-menu { height: 64px; padding-right: 14px; }
.naba-app .main-header .navbar-nav { align-items: center; display: flex; height: 64px; }
.naba-app .main-header .navbar-nav > li { align-items: center; display: flex; height: 64px; }
.naba-app .main-header .navbar-nav > li > a {
  align-items: center;
  background: transparent !important;
  color: #475569 !important;
  display: flex;
  height: 40px;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
}
.naba-app .main-header .navbar-nav > li > a:hover,
.naba-app .main-header .navbar-nav > li > a:focus { color: var(--color-primary) !important; }
.naba-app .main-header .lang-switcher { height: 64px; padding: 0 10px; }
.naba-app .main-header .lang-switcher-container {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  gap: 2px;
  padding: 3px;
}
.naba-app .main-header .lang-btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  margin: 0 !important;
  min-width: 38px;
  padding: 0 9px !important;
}
.naba-app .main-header .lang-btn:hover { background: rgba(255,255,255,.7) !important; color: var(--color-primary) !important; }
.naba-app .main-header .lang-btn.active {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.12) !important;
  color: #1d4ed8 !important;
}
.naba-app .main-header .nav-icon-button {
  border-radius: 9px;
  font-size: 17px;
  margin: 0 2px;
  min-width: 40px;
  padding: 0 !important;
}
.naba-app .main-header .nav-icon-button:hover { background: #f1f5f9 !important; }
.naba-app .main-header .notifications-menu .label {
  background: #f97316 !important;
  border: 2px solid #fff;
  font-size: 9px;
  line-height: 14px;
  min-width: 18px;
  padding: 0 4px;
  right: 2px;
  top: 1px;
}
.naba-app .main-header .user-menu { border-left: 1px solid #e2e8f0; margin-left: 8px; padding-left: 8px; }
.naba-app .main-header .user-trigger { border-radius: 9px; gap: 9px; padding: 0 10px !important; }
.naba-app .main-header .user-trigger:hover { background: #f8fafc !important; }
.naba-app .main-header .user-menu .user-image {
  border: 2px solid #dbeafe;
  height: 32px;
  margin: 0;
  object-fit: cover;
  width: 32px;
}
.naba-app .main-header .user-trigger > span { color: #334155; font-size: 13px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naba-app .main-header .user-caret { color: #94a3b8; font-size: 12px; }
.naba-app .main-header .dropdown-menu {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(15,23,42,.16);
  margin-top: 6px;
  overflow: hidden;
}
.naba-app .main-header .navbar-custom-menu .dropdown-menu { left: auto; right: 0; }
[dir="rtl"] .naba-app .main-header .navbar-custom-menu .dropdown-menu { left: 0; right: auto; }
[dir="rtl"] .naba-app .main-header .notifications-menu > .dropdown-menu {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .naba-app .main-header .notifications-menu > .dropdown-menu > .header,
[dir="rtl"] .naba-app .main-header .notifications-menu > .dropdown-menu > .footer,
[dir="rtl"] .naba-app .main-header .notifications-menu .menu > li > a {
  text-align: right;
}
[dir="rtl"] .naba-app .main-header .notifications-menu .menu > li > a {
  align-items: flex-start;
  display: flex;
  direction: rtl;
  gap: 9px;
  justify-content: flex-start;
}
[dir="rtl"] .naba-app .main-header .notifications-menu .menu > li > a > .fa,
[dir="rtl"] .naba-app .main-header .notifications-menu .menu > li > a > .glyphicon,
[dir="rtl"] .naba-app .main-header .notifications-menu .menu > li > a > .ion {
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
}
.naba-app .main-header .notifications-menu > .dropdown-menu { width: 340px; }
.naba-app .main-header .notifications-menu > .dropdown-menu > .header { background: #f8fafc; border-bottom-color: #e2e8f0; color: #334155; font-weight: 700; padding: 13px 16px; }
.naba-app .main-header .notifications-menu .menu > li > a { color: #475569; line-height: 1.4; padding: 12px 16px; white-space: normal; }
.naba-app .main-header .user-menu > .dropdown-menu > .user-header { background: linear-gradient(135deg,#1e3a5f,#312e81); height: auto; padding: 20px; }
.naba-app .main-header .user-menu > .dropdown-menu > .user-footer { background: #f8fafc; padding: 12px; }
.naba-app .main-header .user-menu > .dropdown-menu > .user-footer .btn { min-height: 34px; padding: 6px 12px; }
.naba-app .main-header .user-menu > .account-dropdown { background: #fff; overflow: hidden; padding: 0; width: 300px; }
.naba-app .account-summary { align-items: center; background: linear-gradient(135deg,#1e3a5f,#312e81); display: flex; gap: 13px; min-height: 92px; padding: 17px; }
.naba-app .account-summary > img { border: 3px solid rgba(255,255,255,.8); flex: 0 0 54px; height: 54px; margin: 0; object-fit: cover; width: 54px; }
.naba-app .account-summary-copy { min-width: 0; }
.naba-app .account-name { color: #fff !important; font-size: 16px; font-weight: 750; line-height: 1.25; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naba-app .account-status { align-items: center; color: #dbeafe; display: flex; font-size: 11px; gap: 6px; }
.naba-app .account-status .fa { color: #4ade80; font-size: 8px; }
.naba-app .account-detail-row { align-items: center; background: #fff; display: flex; gap: 11px; min-height: 68px; padding: 13px 17px; }
.naba-app .account-detail-icon { align-items: center; background: #eff6ff; border-radius: 9px; color: #2563eb; display: inline-flex; flex: 0 0 38px; height: 38px; justify-content: center; }
.naba-app .account-detail-copy { display: flex; flex-direction: column; min-width: 0; }
.naba-app .account-detail-copy small { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.naba-app .account-detail-copy strong { color: #334155; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naba-app .account-actions { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 11px; }
.naba-app .account-signout { align-items: center; background: #fff !important; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626 !important; display: flex !important; font-size: 13px; font-weight: 700; gap: 8px; justify-content: center; min-height: 40px; padding: 8px 12px !important; }
.naba-app .account-signout:hover, .naba-app .account-signout:focus { background: #fef2f2 !important; border-color: #fca5a5; color: #b91c1c !important; text-decoration: none; }
.naba-app .main-sidebar { padding-top: 64px; }

/* Top navigation settings panel */
.naba-app .settings-panel {
  background: #fff !important;
  border-left: 1px solid #dbe3ee;
  bottom: 0;
  box-shadow: -16px 0 42px rgba(15,23,42,.18);
  color: #334155 !important;
  display: flex;
  flex-direction: column;
  height: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  right: -340px;
  top: 64px;
  width: 340px;
  z-index: 1200;
}
.naba-app .settings-panel.control-sidebar-open, .naba-app.control-sidebar-open .settings-panel { right: 0; }
.naba-app.control-sidebar-open .content-wrapper, .naba-app.control-sidebar-open .main-footer { margin-right: 0 !important; }
.naba-app .settings-panel-header { align-items: flex-start; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; padding: 18px; }
.naba-app .settings-panel-header > div { align-items: center; display: flex; gap: 11px; min-width: 0; }
.naba-app .settings-panel-icon { align-items: center; background: var(--color-primary-soft); border-radius: 10px; color: var(--color-primary); display: inline-flex; flex: 0 0 40px; font-size: 17px; height: 40px; justify-content: center; width: 40px; }
.naba-app .settings-panel-header h2 { color: #172033 !important; font-size: 17px; font-weight: 750; margin: 0 0 3px; }
.naba-app .settings-panel-header p { color: #64748b; font-size: 11px; line-height: 1.35; margin: 0; }
.naba-app .settings-panel-close { align-items: center; background: #f1f5f9; border: 0; border-radius: 50%; color: #64748b; display: inline-flex; flex: 0 0 32px; font-size: 21px; height: 32px; justify-content: center; line-height: 1; padding: 0; }
.naba-app .settings-panel-close:hover, .naba-app .settings-panel-close:focus { background: #e2e8f0; color: #1e293b; outline: 0; }
.naba-app .settings-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 17px; }
.naba-app .settings-panel-section { margin-bottom: 22px; }
.naba-app .settings-panel-section h3 { align-items: center; color: #475569 !important; display: flex; font-size: 12px; font-weight: 750; gap: 7px; letter-spacing: .035em; margin: 0 0 10px; text-transform: uppercase; }
.naba-app .settings-panel-section h3 i { color: var(--color-primary); }
.naba-app .settings-section-help { color: #64748b; font-size: 12px; margin: -4px 0 11px; }
.naba-app .settings-theme-options { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.naba-app .settings-theme-button { background: #fff !important; border: 1px solid #dbe3ee !important; border-radius: 9px !important; color: #475569 !important; min-width: 0; padding: 6px !important; }
.naba-app .settings-theme-button > span:last-child { align-items: center; display: flex; font-size: 11px; font-weight: 700; gap: 5px; justify-content: center; padding: 6px 1px 2px; }
.naba-app .settings-theme-button:hover, .naba-app .settings-theme-button:focus { background: #f8fafc !important; border-color: #93c5fd !important; outline: 0; }
.naba-app .settings-theme-button.is-active { background: var(--color-primary-soft) !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb),.13); color: var(--color-primary-hover) !important; }
.naba-app .settings-theme-button.is-active > span:last-child::after { color: var(--color-primary); content: "\f00c"; font-family: FontAwesome; }
.naba-app .theme-preview { background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 6px; display: block; height: 42px; overflow: hidden; position: relative; }
.naba-app .theme-preview::before { background: #1e3a5f; content: ""; height: 9px; left: 0; position: absolute; right: 0; top: 0; }
.naba-app .theme-preview::after { background: #172a46; bottom: 0; content: ""; left: 0; position: absolute; top: 9px; width: 13px; }
.naba-app .theme-preview i { background: #fff; border: 1px solid #e2e8f0; border-radius: 2px; bottom: 7px; left: 19px; position: absolute; right: 5px; top: 15px; }
.naba-app .theme-preview-dark { background: #111827; border-color: #334155; }
.naba-app .theme-preview-dark::before { background: #0f172a; }
.naba-app .theme-preview-dark::after { background: #111827; }
.naba-app .theme-preview-dark i { background: #1e293b; border-color: #475569; }
.naba-app .theme-preview-system { background: linear-gradient(90deg,#f8fafc 50%,#111827 50%); }
.naba-app .theme-preview-system i { background: linear-gradient(90deg,#fff 43%,#1e293b 43%); }
.naba-app .settings-language-options { background: #f1f5f9; border-radius: 9px; display: grid; gap: 5px; grid-template-columns: 1fr 1fr; padding: 5px; }
.naba-app .settings-language-button { background: transparent; border: 1px solid transparent; border-radius: 7px; color: #64748b !important; font-size: 13px; font-weight: 700; padding: 9px 10px; text-align: center; }
.naba-app .settings-language-button:hover, .naba-app .settings-language-button:focus { background: #fff; border-color: #dbe3ee; color: #1d4ed8 !important; text-decoration: none; }
.naba-app .settings-palette-options { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.naba-app .settings-palette-button { align-items: center; background: #fff !important; border: 1px solid #dbe3ee !important; border-radius: 9px !important; color: #475569 !important; display: flex; font-size: 12px; font-weight: 700; gap: 9px; min-height: 44px; padding: 7px 9px !important; text-align: start; }
.naba-app .settings-palette-button:hover, .naba-app .settings-palette-button:focus { background: #f8fafc !important; border-color: var(--color-focus) !important; outline: 0; }
.naba-app .settings-palette-button.is-active { background: var(--color-primary-soft) !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb),.12); color: var(--color-primary-hover) !important; }
.naba-app .settings-palette-button.is-active::after { content: "\f00c"; font-family: FontAwesome; margin-inline-start: auto; }
.naba-app .palette-swatch { border: 3px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,.16); display: inline-block; flex: 0 0 23px; height: 23px; width: 23px; }
.naba-app .palette-swatch-blue { background: #2563eb; }
.naba-app .palette-swatch-indigo { background: #4f46e5; }
.naba-app .palette-swatch-teal { background: #0f766e; }
.naba-app .palette-swatch-rose { background: #e11d48; }
.naba-app .settings-quick-links { display: grid; gap: 7px; }
.naba-app .settings-quick-links > a { align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; color: #475569 !important; display: flex; font-size: 13px; font-weight: 650; justify-content: space-between; min-height: 46px; padding: 10px 12px; }
.naba-app .settings-quick-links > a > span { align-items: center; display: flex; gap: 9px; }
.naba-app .settings-quick-links > a > span > i { color: var(--color-primary); text-align: center; width: 17px; }
.naba-app .settings-quick-links > a > .fa-angle-right { color: #94a3b8; }
.naba-app .settings-quick-links > a:hover, .naba-app .settings-quick-links > a:focus { background: var(--color-primary-soft); border-color: var(--color-focus); color: var(--color-primary-hover) !important; text-decoration: none; }
.naba-app .sidebar-menu > li.active > a { background: linear-gradient(90deg, rgba(var(--color-primary-rgb),.32), rgba(var(--color-primary-rgb),.1)) !important; box-shadow: inset 3px 0 0 var(--color-focus); }
.naba-app .sidebar-menu > li.menu-open > a > .fa,
.naba-app .sidebar-menu > li.active > a > .fa { background: rgba(var(--color-primary-rgb),.2); }
.naba-app .sidebar-menu .treeview-menu > li.active > a > .fa { color: var(--color-focus); }
[dir="rtl"] .naba-app .sidebar-menu > li.active > a { box-shadow: inset -3px 0 0 var(--color-focus); }
.naba-app .settings-panel-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 14px 17px; }
.naba-app .settings-signout { align-items: center; background: #fff; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626 !important; display: flex; font-size: 13px; font-weight: 700; gap: 8px; justify-content: center; min-height: 42px; }
.naba-app .settings-signout:hover, .naba-app .settings-signout:focus { background: #fef2f2; color: #b91c1c !important; text-decoration: none; }
[dir="rtl"] .naba-app .settings-panel { border-left: 0; border-right: 1px solid #dbe3ee; direction: rtl; left: -340px; right: auto; text-align: right; }
[dir="rtl"] .naba-app .settings-panel.control-sidebar-open, [dir="rtl"] .naba-app.control-sidebar-open .settings-panel { left: 0; right: auto; }
[dir="rtl"] .naba-app .settings-quick-links > a > .fa-angle-right { transform: rotate(180deg); }
@media (max-width: 767px) { .naba-app .settings-panel { max-width: calc(100vw - 16px); top: 56px; width: 340px; } }
@media (max-width: 767px) {
  .naba-app .main-header .navbar-custom-menu .dropdown-menu {
    max-width: calc(100vw - 12px);
  }
  .naba-app .main-header .notifications-menu > .dropdown-menu,
  .naba-app .main-header .user-menu > .account-dropdown {
    width: min(340px, calc(100vw - 12px));
  }
}

/* User-selected application themes */
html[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-soft: #172554;
  --color-background: #0f172a;
  --color-surface: #172033;
  --color-surface-muted: #1e293b;
  --color-text: #e5edf7;
  --color-muted: #9fb0c5;
  --color-border: #334155;
  color-scheme: dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper { background: var(--color-background) !important; color: var(--color-text); }
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .well,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .card-summary,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .modal-content { background: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text); }
html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-footer,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .dashboard-card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .dashboard-card-title,
html[data-theme="dark"] .summary-value,
html[data-theme="dark"] .modal-title { color: var(--color-text) !important; }
html[data-theme="dark"] .table { background: var(--color-surface); color: var(--color-text); }
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td { border-color: var(--color-border); }
html[data-theme="dark"] .table > thead > tr > th { background: var(--color-surface-muted); color: #cbd5e1; }
html[data-theme="dark"] .form-control { background: #111827; border-color: #475569; color: #e5edf7; }
html[data-theme="dark"] .form-control::placeholder { color: #7f91a8; }
html[data-theme="dark"] .naba-app .settings-panel { background: #172033 !important; border-color: #334155; color: #e5edf7 !important; }
html[data-theme="dark"] .naba-app .settings-panel-header,
html[data-theme="dark"] .naba-app .settings-panel-footer { background: #172033; border-color: #334155; }
html[data-theme="dark"] .naba-app .settings-panel-header h2 { color: #f1f5f9 !important; }
html[data-theme="dark"] .naba-app .settings-panel-header p,
html[data-theme="dark"] .naba-app .settings-section-help { color: #94a3b8; }
html[data-theme="dark"] .naba-app .settings-panel-section h3 { color: #cbd5e1 !important; }
html[data-theme="dark"] .naba-app .settings-theme-button,
html[data-theme="dark"] .naba-app .settings-palette-button,
html[data-theme="dark"] .naba-app .settings-quick-links > a { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
html[data-theme="dark"] .naba-app .settings-theme-button.is-active,
html[data-theme="dark"] .naba-app .settings-palette-button.is-active { background: rgba(var(--color-primary-rgb),.17) !important; border-color: var(--color-primary) !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .naba-app .settings-language-options { background: #0f172a; }
html[data-theme="dark"] .naba-app .settings-language-button { color: #cbd5e1 !important; }
html[data-theme="dark"] .naba-app .settings-panel-close { background: #1e293b; color: #cbd5e1; }
html[data-theme="dark"] .naba-app .main-header,
html[data-theme="dark"] .naba-app .main-header .logo,
html[data-theme="dark"] .naba-app .main-header .navbar { background: #0b1220 !important; border-color: #334155; }
html[data-theme="dark"] .naba-app .main-header .logo { color: #e5edf7 !important; }
html[data-theme="dark"] .naba-app .main-header .logo:hover,
html[data-theme="dark"] .naba-app .main-header .sidebar-toggle:hover,
html[data-theme="dark"] .naba-app .main-header .nav-icon-button:hover,
html[data-theme="dark"] .naba-app .main-header .user-trigger:hover { background: #172033 !important; }
html[data-theme="dark"] .naba-app .main-header .sidebar-toggle,
html[data-theme="dark"] .naba-app .main-header .navbar-nav > li > a,
html[data-theme="dark"] .naba-app .main-header .user-trigger > span { color: #cbd5e1 !important; }
html[data-theme="dark"] .naba-app .main-header .lang-switcher-container { background: #172033; border-color: #334155; }
html[data-theme="dark"] .naba-app .main-header .lang-btn { color: #9fb0c5 !important; }
html[data-theme="dark"] .naba-app .main-header .lang-btn.active { background: #263247 !important; color: #93c5fd !important; }
html[data-theme="dark"] .naba-app .main-header .user-menu { border-color: #334155; }
html[data-theme="dark"] .naba-app .main-header .dropdown-menu,
html[data-theme="dark"] .naba-app .main-header .notifications-menu > .dropdown-menu > .header,
html[data-theme="dark"] .naba-app .main-header .user-menu > .dropdown-menu > .user-footer { background: #172033; border-color: #334155; color: #e5edf7; }
html[data-theme="dark"] .naba-app .main-header .user-menu > .account-dropdown,
html[data-theme="dark"] .naba-app .account-detail-row,
html[data-theme="dark"] .naba-app .account-actions { background: #172033; border-color: #334155; }
html[data-theme="dark"] .naba-app .account-detail-icon { background: #1e3a5f; color: #93c5fd; }
html[data-theme="dark"] .naba-app .account-detail-copy strong { color: #e5edf7; }
html[data-theme="dark"] .naba-app .account-signout { background: #1e293b !important; }
[dir="rtl"] .naba-app .account-summary,
[dir="rtl"] .naba-app .account-detail-row { direction: rtl; text-align: right; }

[dir="rtl"] .naba-app .main-header .logo { border-left: 1px solid #e2e8f0; border-right: 0; text-align: right; }
[dir="rtl"] .naba-app .main-header .brand-mark { margin-left: 6px; margin-right: 0; }
[dir="rtl"] .naba-app .main-header .navbar { margin-left: 0; margin-right: 230px; }
[dir="rtl"] .naba-app .main-header .navbar-custom-menu { padding-left: 14px; padding-right: 0; }
[dir="rtl"] .naba-app .main-header .user-menu { border-left: 0; border-right: 1px solid #e2e8f0; margin-left: 0; margin-right: 8px; padding-left: 0; padding-right: 8px; }

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-header .logo { padding: 0 8px; width: 50px; }
  .sidebar-mini.sidebar-collapse .main-header .navbar { margin-left: 50px; }
  [dir="rtl"] .sidebar-mini.sidebar-collapse .main-header .navbar { margin-left: 0; margin-right: 50px; }
}

@media (max-width: 767px) {
  .naba-app .main-header { height: 56px; max-height: 56px; }
  .naba-app .main-header .logo { border: 0; height: 56px; line-height: 56px; padding: 0 14px; width: 100%; }
  .naba-app .main-header .brand-mark { height: 34px; width: 34px; }
  .naba-app .main-header .navbar { height: 56px; margin: 0; min-height: 56px; }
  .naba-app .main-header .sidebar-toggle { height: 40px; margin: 8px 5px; min-height: 40px; width: 40px; }
  .naba-app .main-header .navbar-custom-menu { height: 56px; padding-right: 6px; }
  .naba-app .main-header .navbar-nav, .naba-app .main-header .navbar-nav > li { height: 56px; }
  .naba-app .main-header .lang-switcher { height: 56px; padding: 0 4px; }
  .naba-app .main-header .lang-btn { min-width: 32px; padding: 0 6px !important; }
  .naba-app .main-header .user-menu { border: 0; margin-left: 2px; padding-left: 2px; }
  .naba-app .main-header .user-trigger { padding: 0 5px !important; }
  .naba-app .main-header .user-caret { display: none; }
  .naba-app .main-header .nav-icon-button { min-width: 36px; }
  .naba-app .main-header .navbar-nav > li:last-child { display: none; }
  .naba-app .main-sidebar { padding-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Standalone sign-in experience. */
.login-page { background: #0f172a; min-height: 100vh; padding: 0; }
.login-page .limiter { min-height: 100vh; width: 100%; }
.login-page .container-login100 {
  align-items: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(56, 189, 248, .28), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(129, 140, 248, .25), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172554 48%, #312e81 100%);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 40px 20px;
  position: relative;
}
.login-page .container-login100::before,
.login-page .container-login100::after {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
  height: 420px;
  pointer-events: none;
  position: absolute;
  width: 420px;
  z-index: 0;
}
.login-page .container-login100::before { left: -220px; top: -200px; }
.login-page .container-login100::after { bottom: -260px; right: -180px; }
.login-page .login-shell { max-width: 440px; position: relative; width: 100%; z-index: 1; }
.login-page .login-language-toggle {
  align-items: center;
  background: #f8faff;
  border: 2px solid #6366f1 !important;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(79,70,229,.12), inset 0 0 0 1px rgba(255,255,255,.65);
  color: #4f46e5;
  cursor: pointer;
  display: inline-flex;
  font-family: "Source Sans Pro", "Cairo", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
  height: 36px;
  inset-inline-end: 16px;
  padding: 0 11px;
  position: absolute;
  top: 16px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  z-index: 3;
}
.login-page .login-language-icon {
  display: block;
  fill: none;
  flex: 0 0 17px;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}
.login-page .login-language-toggle span { display: block; line-height: 1; }
.login-page .login-language-toggle:hover,
.login-page .login-language-toggle:focus {
  background: #eef2ff;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
  color: #4338ca;
  outline: 0;
  transform: translateY(-1px);
}
.login-page .login-language-toggle:active { box-shadow: none; transform: translateY(0); }
.login-page .login-brand {
  align-items: center;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  border: 4px solid rgba(255,255,255,.18);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15,23,42,.3);
  color: #fff;
  display: flex;
  font-size: 26px;
  font-weight: 700;
  height: 60px;
  justify-content: center;
  margin: 0 auto -30px;
  position: relative;
  width: 60px;
  z-index: 2;
}
.login-page .login-brand img {
  border-radius: 14px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.login-page .wrap-login100 {
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2,6,23,.34);
  overflow: hidden;
  padding: 54px 42px 40px;
  position: relative;
  width: 100%;
}
.login-page .login-heading { margin-bottom: 30px; text-align: center; }
.login-page .login100-form-title {
  color: #0f172a;
  display: block;
  font-family: "Source Sans Pro", "Cairo", Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  padding: 0;
  text-transform: none;
}
.login-page .login-heading p { color: #64748b; font-size: 14px; margin: 8px 0 0; }
.login-page .login100-form { background: transparent; padding: 0; width: 100%; }
.login-page .login-field { border: 0; margin-bottom: 20px; position: relative; width: 100%; }
.login-page .login-field label {
  color: #334155;
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}
.login-page .login-input-wrap { position: relative; }
.login-page .login-input-wrap > .fa {
  color: #94a3b8;
  font-size: 16px;
  left: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.login-page .input100 {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: none;
  color: #0f172a;
  font-family: "Source Sans Pro", "Cairo", Arial, sans-serif;
  font-size: 15px;
  height: 48px;
  min-height: 48px;
  max-width: none;
  padding: 0 16px 0 44px;
  width: 100%;
}
.login-page .input100::placeholder { color: #94a3b8; opacity: 1; }
.login-page .input100:hover { border-color: #94a3b8; }
.login-page .input100:focus {
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
  outline: 0;
}
.login-page .login-input-wrap:focus-within > .fa { color: #4f46e5; }
.login-page .login-field-error { color: #b91c1c; display: block; font-size: 12px; line-height: 1.4; margin-top: 6px; min-height: 0; }
.login-page .login-field-error:empty { display: none; }
.login-page .login-field.has-error .input100 { background: #fff7f7; border-color: #dc2626; }
.login-page .login-field.has-error .login-input-wrap > .fa { color: #dc2626; }
.login-page .focus-input100 { display: none !important; }
.login-page .container-login100-form-btn { margin-top: 8px; width: 100%; }
.login-page .login100-form-btn {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 10px 22px rgba(79,70,229,.24);
  color: #fff;
  font-family: "Source Sans Pro", "Cairo", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  height: 48px;
  min-height: 48px;
  text-transform: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  width: 100%;
}
.login-page .login100-form-btn:hover, .login-page .login100-form-btn:focus {
  box-shadow: 0 14px 28px rgba(79,70,229,.32);
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.login-page .login100-form-btn:active { box-shadow: 0 6px 14px rgba(79,70,229,.22); transform: translateY(0); }
.login-page .login100-form-btn.is-loading { cursor: wait; filter: saturate(.7); opacity: .82; pointer-events: none; transform: none; }
.login-page .login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b !important;
  display: block;
  font-size: 13px;
  margin-bottom: 18px;
  padding: 10px 12px;
}
.login-page .login-error:empty { display: none; }
.login-page .login-footer { color: rgba(255,255,255,.62); font-size: 12px; margin: 18px 0 0; text-align: center; }
.login-page[dir="rtl"], html[dir="rtl"] .login-page { direction: rtl; }
html[dir="rtl"] .login-page .login-field label,
html[dir="rtl"] .login-page .login-field-error,
html[dir="rtl"] .login-page .login-error { text-align: right; }
html[dir="rtl"] .login-page .login-input-wrap > .fa { left: auto; right: 16px; }
html[dir="rtl"] .login-page .input100 { padding: 0 44px 0 16px; text-align: right; }

@media (max-width: 520px) {
  .login-page .container-login100 { padding: 24px 14px; }
  .login-page .wrap-login100 { border-radius: 15px; padding: 50px 24px 30px; }
  .login-page .login100-form-title { font-size: 25px; }
  .login-page .login-heading { margin-bottom: 26px; }
  .login-page .login-language-toggle { inset-inline-end: 12px; top: 12px; }
}

/* Product-wide visual upgrade ------------------------------------------------ */
.activity-log-page { padding: 24px !important; }
.activity-log-page .activity-page-header { align-items: center; display: flex; gap: 14px; margin: 0 0 20px; }
.activity-log-page .activity-page-icon { align-items: center; border-radius: 12px; display: inline-flex; flex: 0 0 50px; font-size: 20px; height: 50px; justify-content: center; }
.activity-log-page .activity-page-icon.mouse { background: #eef2ff; color: #4f46e5; }
.activity-log-page .activity-page-icon.keyboard { background: #ecfeff; color: #0891b2; }
.activity-log-page .activity-page-header h1 { color: var(--color-text); font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 4px; }
.activity-log-page .activity-page-header p { color: var(--color-muted); font-size: 13px; margin: 0; }
.activity-log-page .activity-filter-card,
.activity-log-page .activity-table-card { background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 4px 16px rgba(15,23,42,.05); margin-bottom: 18px; }
.activity-log-page .activity-card-heading { align-items: center; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; min-height: 52px; padding: 12px 20px; }
.activity-log-page .activity-card-heading > span { align-items: center; color: #1e293b; display: flex; font-size: 14px; font-weight: 750; gap: 8px; }
.activity-log-page .activity-card-heading > span i { color: #2563eb; }
.activity-log-page .activity-card-heading small { color: #94a3b8; font-size: 11px; }
.activity-log-page .activity-filter-card .card-body { padding: 18px 20px; }
.activity-log-page .activity-filter-grid { align-items: end; display: grid; gap: 14px; grid-template-columns: minmax(210px, 1.25fr) minmax(170px, 1fr) minmax(210px, 1fr) minmax(125px, .65fr) auto; margin: 0; }
.activity-log-page .activity-filter-grid::before, .activity-log-page .activity-filter-grid::after,
.activity-log-page .activity-summary-grid::before, .activity-log-page .activity-summary-grid::after { content: none !important; display: none !important; }
.activity-log-page .activity-filter-field { padding: 0; width: auto; }
.activity-log-page .activity-filter-field label { color: #334155; display: block; font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.activity-log-page .activity-filter-field .form-control { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: none; color: #1e293b; height: 46px; padding: 10px 14px; width: 100%; }
.activity-log-page .activity-filter-field .form-control:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
.activity-log-page .activity-filter-submit { align-items: flex-end; display: flex; }
.activity-log-page .activity-search-button { align-items: center; background: #2563eb; border: 0; border-radius: 8px; box-shadow: 0 7px 16px rgba(37,99,235,.2); display: inline-flex; font-size: 14px; font-weight: 700; gap: 7px; min-height: 42px; padding: 0 18px; }
.activity-log-page .activity-search-button:hover, .activity-log-page .activity-search-button:focus { background: #1d4ed8; }
.activity-log-page .activity-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(250px, 1fr)); margin: 0 0 18px; max-width: 680px; }
.activity-log-page .activity-summary-grid > div { display: contents; }
.activity-log-page .activity-summary-item { align-items: center; background: #fff; border: 1px solid #dbe3ee; border-radius: 11px; box-shadow: 0 3px 12px rgba(15,23,42,.04); display: flex; gap: 12px; margin: 0; min-height: 76px; padding: 13px 15px; }
.activity-log-page .activity-summary-icon { align-items: center; border-radius: 10px; display: inline-flex; flex: 0 0 44px; font-size: 18px; height: 44px; justify-content: center; }
.activity-log-page .activity-summary-item.idle .activity-summary-icon { background: #fef2f2; color: #dc2626; }
.activity-log-page .activity-summary-item.sessions .activity-summary-icon { background: #eff6ff; color: #2563eb; }
.activity-log-page .activity-summary-content { align-items: center; display: flex; flex: 1 1 auto; flex-direction: row; gap: 12px; justify-content: space-between; min-width: 0; }
.activity-log-page .activity-summary-label { color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.3; }
.activity-log-page .activity-summary-value { color: #0f172a !important; flex: 0 0 auto; font-size: 21px; font-weight: 800; line-height: 1.2; margin: 0; }
.activity-log-page .activity-summary-item.idle .activity-summary-value { color: #b91c1c !important; }
.activity-log-page .activity-summary-item.sessions .activity-summary-value { color: #1d4ed8 !important; }
.activity-log-page .activity-table-card .card-body { padding: 18px; }
.activity-log-page .dataTables_wrapper { margin-top: 0 !important; }
.activity-log-page .dataTables_wrapper > .row:first-child { align-items: center; display: flex; margin: 0 0 14px; }
.activity-log-page .dataTables_wrapper > .row:first-child > div { float: none; width: 50%; }
.activity-log-page .dataTables_length, .activity-log-page .dataTables_filter { margin: 0; }
.activity-log-page .dataTables_filter { text-align: right; }
.activity-log-page .dataTables_filter input, .activity-log-page .dataTables_length select { border: 1px solid #cbd5e1; border-radius: 7px; height: 38px; margin: 0 6px; padding: 6px 10px; }
.activity-log-page #sessionTable { margin: 0 !important; }
.activity-log-page #sessionTable th { background: #f1f5f9; border-color: #dbe3ee; color: #334155; font-size: 13px; padding: 12px; }
.activity-log-page #sessionTable td { border-color: #e2e8f0; padding: 11px 12px; vertical-align: middle; }
.activity-log-page .dataTables_wrapper > .row:last-child { align-items: center; border-top: 1px solid #edf1f6; display: flex; margin: 12px 0 0; padding-top: 14px; }
.activity-log-page .dataTables_wrapper > .row:last-child > div { float: none; width: 50%; }
.activity-log-page .dataTables_info { color: #64748b; padding-top: 7px; }
.activity-log-page .dataTables_paginate { margin: 0; text-align: right; }
.activity-log-page .pagination { margin: 0; }
.activity-log-page .activity-chart-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr); margin-top: 20px; }
.activity-log-page .activity-chart-card { background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 4px 16px rgba(15,23,42,.05); margin: 0; min-width: 0; overflow: hidden; }
.activity-log-page .activity-chart-heading { align-items: center; background: #fff; border-bottom: 1px solid #e2e8f0; color: #1e293b; display: flex; font-size: 14px; font-weight: 750; gap: 8px; min-height: 52px; padding: 12px 18px; }
.activity-log-page .activity-chart-heading.primary i { color: #2563eb; }
.activity-log-page .activity-chart-heading.danger i { color: #dc2626; }
.activity-log-page .activity-chart-card .card-body { padding: 18px; }
.activity-log-page .activity-chart-stage { height: 330px; min-width: 0; overflow-x: auto; position: relative; }
.activity-log-page .activity-chart-stage.doughnut { margin: 0 auto; max-width: 330px; }
[dir="rtl"] .activity-log-page .activity-filter-actions { justify-content: flex-start; }
[dir="rtl"] .activity-log-page .activity-filter-actions > div { justify-content: flex-start; }
[dir="rtl"] .activity-log-page .dataTables_filter { text-align: left; }
[dir="rtl"] .activity-log-page .dataTables_wrapper { direction: rtl; }
[dir="rtl"] .activity-log-page .activity-page-header,
[dir="rtl"] .activity-log-page .activity-card-heading,
[dir="rtl"] .activity-log-page .activity-chart-heading { direction: rtl; text-align: right; }
[dir="rtl"] .activity-log-page .dataTables_paginate { text-align: left; }
html[data-theme="dark"] .activity-log-page .activity-filter-card,
html[data-theme="dark"] .activity-log-page .activity-table-card,
html[data-theme="dark"] .activity-log-page .activity-summary-item,
html[data-theme="dark"] .activity-log-page .activity-chart-card,
html[data-theme="dark"] .activity-log-page .activity-chart-heading { background: var(--color-surface); border-color: var(--color-border); }
html[data-theme="dark"] .activity-log-page .activity-card-heading { border-color: var(--color-border); }
html[data-theme="dark"] .activity-log-page .activity-card-heading > span,
html[data-theme="dark"] .activity-log-page .activity-chart-heading { color: var(--color-text); }
html[data-theme="dark"] .activity-log-page .activity-filter-field label { color: #cbd5e1; }
html[data-theme="dark"] .activity-log-page .activity-filter-field .form-control { background: #111827; border-color: #475569; color: #e5edf7; }
html[data-theme="dark"] .activity-log-page #sessionTable th { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .activity-log-page #sessionTable td { border-color: #334155; color: #e5edf7; }
@media (max-width: 1100px) { .activity-log-page .activity-chart-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 701px) { .activity-log-page .activity-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .activity-log-page .activity-filter-submit { grid-column: 2; justify-content: flex-end; } }
@media (max-width: 600px) { .activity-log-page { padding: 14px !important; } .activity-log-page .activity-page-header { align-items: flex-start; } .activity-log-page .activity-page-header h1 { font-size: 21px; } .activity-log-page .activity-card-heading { align-items: flex-start; flex-direction: column; gap: 3px; } .activity-log-page .activity-filter-grid, .activity-log-page .activity-summary-grid { grid-template-columns: 1fr; } .activity-log-page .activity-filter-submit { justify-content: stretch; } .activity-log-page .activity-search-button { justify-content: center; width: 100%; } .activity-log-page .dataTables_wrapper > .row:first-child, .activity-log-page .dataTables_wrapper > .row:last-child { align-items: stretch; flex-direction: column; gap: 12px; } .activity-log-page .dataTables_wrapper > .row:first-child > div, .activity-log-page .dataTables_wrapper > .row:last-child > div { width: 100%; } .activity-log-page .dataTables_filter, [dir="rtl"] .activity-log-page .dataTables_filter, .activity-log-page .dataTables_paginate, [dir="rtl"] .activity-log-page .dataTables_paginate { text-align: start; } .activity-log-page .activity-chart-stage { height: 280px; } }

/* Definitions management screens */
.definition-page { margin: 0 !important; max-width: none !important; padding: 22px !important; width: 100% !important; }
.definition-page-header { align-items: center; display: flex; gap: 12px; margin-bottom: 18px; }
.definition-page-icon { align-items: center; background: #dbeafe; border-radius: 12px; color: #2563eb; display: inline-flex; flex: 0 0 44px; font-size: 20px; height: 44px; justify-content: center; }
.definition-page-header h1 { color: #172033; font-size: 24px; font-weight: 750; margin: 0 0 3px; }
.definition-page-header p { color: #64748b; font-size: 13px; margin: 0; }
.definition-toolbar { align-items: center; background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 4px 16px rgba(15,23,42,.045); display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start !important; margin: 0 0 16px !important; padding: 15px; }
.definition-toolbar .form-control { flex: 1 1 240px; height: 42px; max-width: 420px; min-width: 180px; width: auto !important; }
.definition-toolbar select.form-control { flex: 0 1 260px; }
.definition-toolbar .btn { align-items: center; border-radius: 8px; display: inline-flex; font-weight: 650; gap: 7px; justify-content: center; min-height: 42px; padding: 8px 15px; }
.definition-toolbar .btn-success { margin-inline-start: auto; }
.definition-table-card, .definition-page > .card-box { background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; box-shadow: 0 4px 16px rgba(15,23,42,.045); margin-bottom: 18px; overflow: hidden; padding: 0; }
.definition-table-card .definition-table-header, .definition-page > .card-box > .card-header-blue { align-items: center; background: #fff !important; border-bottom: 1px solid #e8edf4; color: #24324a !important; display: flex; font-size: 16px; font-weight: 700; gap: 8px; padding: 15px 18px; }
.definition-table-card .definition-table-header i, .definition-page > .card-box > .card-header-blue i { color: #2563eb; }
.definition-table-card .table-responsive, .definition-page > .card-box > .card-body-custom { overflow-x: auto; padding: 16px; }
.definition-page .dataTables_wrapper { margin-top: 0 !important; }
.definition-page table { margin-bottom: 0 !important; width: 100% !important; }
.definition-page table > thead > tr > th { background: #f1f5f9 !important; border-color: #dbe3ee !important; color: #334155 !important; font-size: 12px; font-weight: 700; padding: 12px !important; white-space: nowrap; }
.definition-page table > tbody > tr > td { border-color: #e2e8f0 !important; color: #475569; padding: 11px 12px !important; vertical-align: middle !important; }
.definition-page table > tbody > tr:hover { background: #f8fbff; }
.definition-page .action-buttons, .definition-page td:last-child { white-space: nowrap; }
.definition-page .action-buttons .btn, .definition-page td:last-child .btn { border-radius: 7px; margin: 2px; min-height: 34px; min-width: 0; padding: 6px 10px !important; }
.definition-page .modal-content { border: 0; border-radius: 13px; box-shadow: 0 24px 65px rgba(15,23,42,.3); }
.definition-page .modal-header { background: #fff !important; border-bottom: 1px solid #e2e8f0; color: #1e293b !important; padding: 16px 18px; }
.definition-page .modal-header .modal-title { font-size: 17px; font-weight: 700; }
.definition-page .modal-header .close { color: #64748b !important; opacity: 1; text-shadow: none; }
.definition-page .modal-body { background: #f8fafc !important; padding: 18px; }
.definition-page .modal-body .card, .definition-page .modal-body .card-box { background: #fff; border: 1px solid #dbe3ee; border-radius: 10px; box-shadow: none; overflow: hidden; }
.definition-page .modal-body .card-header, .definition-page .modal-body [class^="card-header-"] { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0; color: #334155 !important; font-size: 14px; padding: 11px 13px; }
.definition-page .modal-body .form-control { border-radius: 7px; min-height: 40px; }
.definition-page .modal-footer { background: #fff !important; border-top: 1px solid #e2e8f0; padding: 13px 18px; }
.definition-modal .modal-content { border: 0; border-radius: 13px; box-shadow: 0 24px 65px rgba(15,23,42,.3); overflow: hidden; }
.definition-modal .modal-header { background: #fff !important; border-bottom: 1px solid #e2e8f0; color: #1e293b !important; padding: 16px 18px; }
.definition-modal .modal-header .modal-title { font-size: 17px; font-weight: 700; }
.definition-modal .modal-header .close { color: #64748b !important; opacity: 1; text-shadow: none; }
.definition-modal .modal-body { background: #f8fafc !important; padding: 18px; }
.definition-modal .modal-body .card { background: #fff; border: 1px solid #dbe3ee; border-radius: 10px; box-shadow: none; overflow: hidden; }
.definition-modal .modal-body .card-header { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0; color: #334155 !important; font-size: 14px; padding: 11px 13px; }
.definition-modal .modal-body .form-control { border-radius: 7px; min-height: 40px; }
.definition-modal .modal-footer { background: #fff !important; border-top: 1px solid #e2e8f0; padding: 13px 18px; }
[dir="rtl"] .definition-page { direction: rtl; }
[dir="rtl"] .definition-toolbar .btn-success { margin-left: 0; margin-right: auto; }
@media (max-width: 767px) { .definition-page { padding: 14px !important; } .definition-page-header h1 { font-size: 20px; } .definition-toolbar { align-items: stretch; flex-direction: column; } .definition-toolbar .form-control, .definition-toolbar select.form-control, .definition-toolbar .btn { flex: 0 0 auto; max-width: none; width: 100% !important; } .definition-toolbar .btn-success { margin-inline-start: 0; } .definition-table-card .table-responsive, .definition-page > .card-box > .card-body-custom { padding: 10px; } .definition-page .modal-dialog { margin: 10px; width: auto; } }

.naba-app .wrapper {
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible !important;
}
.naba-app .main-header { flex: 0 0 auto; width: 100%; }
.naba-app .content-wrapper { flex: 1 0 auto; min-height: 0 !important; z-index: auto; }
.naba-app .main-footer { flex: 0 0 auto; }
.naba-loading-feedback { align-items: center; display: flex; flex-direction: column; gap: 11px; justify-content: center; width: min(440px, 100%); }
.naba-loading-feedback .naba-loading-title { color: #334155; font-size: 14px; font-weight: 700; margin: 0; }
.naba-loading-progress { background: #e2e8f0; border-radius: 999px; height: 7px; overflow: hidden; width: 100%; }
.naba-loading-progress-bar { animation: naba-loading-slide 1.35s ease-in-out infinite; background: linear-gradient(90deg,#60a5fa,#2563eb); border-radius: inherit; height: 100%; width: 38%; }
.naba-loading-meta { color: #64748b; font-size: 12px; }
.naba-loading-cancel { background: #fff !important; border: 1px solid #cbd5e1 !important; border-radius: 7px !important; color: #475569 !important; min-height: 34px !important; padding: 6px 13px !important; }
.naba-loading-cancel:hover, .naba-loading-cancel:focus { background: #f8fafc !important; border-color: #94a3b8 !important; color: #1e293b !important; }
.naba-loading-cancel.naba-loading-stop { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.naba-loading-cancel.naba-loading-stop:hover, .naba-loading-cancel.naba-loading-stop:focus { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
@keyframes naba-loading-slide { 0% { transform: translateX(-105%); } 50% { transform: translateX(165%); } 100% { transform: translateX(-105%); } }
[dir="rtl"] .naba-loading-progress-bar { animation-name: naba-loading-slide-rtl; }
@keyframes naba-loading-slide-rtl { 0% { transform: translateX(105%); } 50% { transform: translateX(-165%); } 100% { transform: translateX(105%); } }
@media (prefers-reduced-motion: reduce) { .naba-loading-progress-bar { animation: none; margin-inline: auto; width: 55%; } }
.naba-app .content-wrapper > .container,
.naba-app .content-wrapper > .container-fluid,
.naba-app .content-wrapper > section,
.naba-app .content-wrapper > div:not(.modal):not(.overlay) {
  padding: var(--space-5);
}
.naba-app .content-wrapper > .content { padding: var(--space-5); }
.naba-app .content-wrapper > .content-header + .content { padding-top: var(--space-4); }
.naba-app .content-wrapper h1:first-child,
.naba-app .content-wrapper h2:first-child,
.naba-app .content-wrapper h3:first-child {
  letter-spacing: -.015em;
}

.main-header { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(15,23,42,.14); }
.main-header .logo, .main-header .navbar { min-height: 56px; }
.main-header .logo { height: 56px; line-height: 56px; }
.main-header .navbar { border: 0; }
.main-header .sidebar-toggle { min-height: 56px; padding: 18px 16px; }
.main-header .navbar-custom-menu > .navbar-nav > li > a { min-height: 56px; padding-block: 18px; }
.main-sidebar { box-shadow: 4px 0 20px rgba(15,23,42,.12); padding-top: 56px; }
.sidebar { padding-top: var(--space-3); }
.user-panel { border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: var(--space-3); padding: var(--space-4); }
.sidebar-menu .header { background: transparent !important; color: #8fa9c8 !important; font-size: 11px; font-weight: 700; letter-spacing: .09em; padding: 12px 16px 8px; text-transform: uppercase; }
.sidebar-menu > li > a { margin: 2px 10px; padding: 11px 12px; border-radius: 6px; }
.sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .ion { color: #8fc0ff; font-size: 16px; width: 22px; }
.sidebar-menu .treeview-menu { border-radius: 0 0 6px 6px; margin: 0 10px 6px; padding: 4px 0 8px; }
.sidebar-menu .treeview-menu > li > a { border-radius: 4px; margin: 1px 6px; }

/* Dashboard metrics */
.small-box, .info-box, .naba-app .stat-card, .naba-app .summary-card,
.naba-app .metric-card, .naba-app .card-shadow {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--color-text) !important;
  min-height: 112px;
  overflow: hidden;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.small-box:hover, .info-box:hover, .naba-app .stat-card:hover, .naba-app .summary-card:hover,
.naba-app .metric-card:hover, .naba-app .card-shadow:hover {
  border-color: #bfdbfe;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
.small-box > .inner { padding: 20px; }
.small-box h2, .small-box h3, .info-box-number, .naba-app .stat-card h3,
.naba-app .metric-card h3, .naba-app .card-shadow h3 {
  color: var(--color-text) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  margin: 4px 0;
}
.small-box p, .info-box-text, .naba-app .stat-card p, .naba-app .metric-card p,
.naba-app .card-shadow h5 {
  color: var(--color-muted) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.small-box .icon { color: var(--color-primary) !important; opacity: .12; top: 4px; }
.small-box .small-box-footer { background: var(--color-surface-muted); color: var(--color-primary); padding: 8px 16px; text-align: start; }
.info-box { padding: 14px; }
.info-box-icon { border-radius: var(--radius-md) !important; font-size: 34px; height: 82px; line-height: 82px; width: 82px; }
.bg-aqua, .bg-blue { background-color: #2563eb !important; }
.bg-green { background-color: #16a34a !important; }
.bg-yellow { background-color: #d97706 !important; }
.bg-red { background-color: #dc2626 !important; }

/* Filter/search toolbars */
.naba-app .filter-section, .naba-app .filters-card, .naba-app .filter-card,
.naba-app [class*="filter-panel"], .naba-app .search-panel {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: var(--space-5) !important;
  padding: var(--space-5) !important;
}
.naba-app .filter-section .row, .naba-app .filters-card .row,
.naba-app .filter-card .row { align-items: flex-end; display: flex; flex-wrap: wrap; }
.naba-app .input-group { width: 100%; }
.naba-app input[type="search"], .dataTables_filter input { background-image: linear-gradient(transparent, transparent); }
.naba-app .daterangepicker, .naba-app .datepicker { border-color: var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.daterangepicker td.active, .daterangepicker td.active:hover,
.datepicker table tr td.active, .datepicker table tr td.active:hover { background: var(--color-primary) !important; }

/* Charts, media, and live-monitoring surfaces */
.naba-app canvas, .naba-app svg { max-width: 100%; }
.naba-app [id^="chart_"], .naba-app [id*="Chart"], .naba-app .chart,
.naba-app .chart-container {
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.naba-app .thumbnail, .naba-app .card-img-top, .naba-app .screenshot-card img,
.naba-app img[data-toggle="modal"] {
  border-radius: var(--radius-md);
}
.naba-app .thumbnail, .naba-app .screenshot-card, .page-liveview .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.page-liveview .card { margin-bottom: var(--space-4); padding: var(--space-2); }

/* Dense management and reporting screens */
.page-add-branch .box, .page-add-computers .box,
.page-companies .box, .page-users .box { overflow: hidden; }
.page-add-invoice .content-wrapper table { min-width: 720px; }
.page-add-invoice .content-wrapper > div { background: var(--color-surface); border-radius: var(--radius-lg); }
.page-gridview-pop .page-title, .page-gridview-pop-new .page-title {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text) !important;
  font-size: 20px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}
.page-dailydevicesummary .nav-tabs, .page-activitydashboard4 .nav-tabs { border-bottom-color: var(--color-border); }
.naba-app .nav-tabs > li > a { border: 0; border-bottom: 3px solid transparent; color: var(--color-muted); font-weight: 600; }
.naba-app .nav-tabs > li.active > a, .naba-app .nav-tabs > li.active > a:hover {
  border: 0; border-bottom: 3px solid var(--color-primary); color: var(--color-primary);
}
.naba-app .tab-content { background: var(--color-surface); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-4); }

/* DataTables and GridView polish */
.naba-app .dataTables_wrapper { color: var(--color-muted); }
.naba-app .dataTables_wrapper .row:first-child,
.naba-app .dataTables_wrapper .row:last-child { align-items: center; display: flex; flex-wrap: wrap; padding-block: var(--space-3); }
.naba-app .dataTables_wrapper .dataTables_info { padding-top: 8px; }
.naba-app table.dataTable { border-collapse: separate !important; border-spacing: 0; }
.naba-app table.dataTable thead th { border-bottom: 1px solid var(--color-border) !important; }
.naba-app table img { max-height: 72px; max-width: 96px; object-fit: cover; }

/* Better dialog hierarchy */
.naba-app .modal-backdrop.in { opacity: .52; }
.naba-app .modal-dialog { margin-top: 5vh; }
.naba-app .modal-header .fa { color: var(--color-primary); margin-inline-end: var(--space-2); }
.swal2-popup { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important; }
.swal2-confirm { background: var(--color-primary) !important; border-radius: var(--radius-sm) !important; }

/* Page entry and loading are subtle, and disabled for reduced motion above. */
.design-system-ready .content-wrapper > * { animation: naba-enter .22s ease both; }
/* ASP.NET UpdatePanel wrappers must not retain a transform. A transformed
   ancestor creates a stacking context that can trap Bootstrap modals behind
   the backdrop after an asynchronous postback. */
.design-system-ready .content-wrapper > [id$="_upMain"],
.design-system-ready .content-wrapper > [id$="_UpdatePanel"] {
  animation: none !important;
  transform: none !important;
}
@keyframes naba-enter { from { opacity: .75; transform: translateY(3px); } to { opacity: 1; transform: none; } }

@media (max-width: 991px) {
  .naba-app .content-wrapper > .container,
  .naba-app .content-wrapper > .container-fluid,
  .naba-app .content-wrapper > section,
  .naba-app .content-wrapper > div:not(.modal):not(.overlay) { padding: var(--space-4); }
  .naba-app .filter-section .row, .naba-app .filters-card .row,
  .naba-app .filter-card .row { display: block; }
  .small-box, .info-box { margin-bottom: var(--space-4); }
}

@media (max-width: 767px) {
  .main-header .logo, .main-header .navbar { min-height: 50px; }
  .main-header .logo { height: 50px; line-height: 50px; }
  .main-header .sidebar-toggle { min-height: 50px; padding: 15px; }
  .main-sidebar { padding-top: 50px; }
  .naba-app .content-wrapper > .container,
  .naba-app .content-wrapper > .container-fluid,
  .naba-app .content-wrapper > section,
  .naba-app .content-wrapper > div:not(.modal):not(.overlay) { padding: var(--space-3); }
  .naba-app .filter-section, .naba-app .filters-card, .naba-app .filter-card,
  .naba-app [class*="filter-panel"], .naba-app .search-panel { padding: var(--space-4) !important; }
  .small-box h2, .small-box h3, .info-box-number { font-size: 24px !important; }
  .naba-app .dataTables_wrapper .row:first-child,
  .naba-app .dataTables_wrapper .row:last-child { display: block; }
  .naba-app .dataTables_filter, .naba-app .dataTables_length,
  .naba-app .dataTables_info, .naba-app .dataTables_paginate { float: none !important; text-align: start !important; width: 100%; }
}

/* Sidebar refinement v2: preserve AdminLTE tree/flyout behavior. */
.naba-app .main-sidebar {
  background: #182b47 !important;
  box-shadow: 4px 0 18px rgba(15, 23, 42, .12);
  overflow: visible !important;
}
.naba-app .main-sidebar .sidebar {
  overflow: visible !important;
  padding: 14px 10px 24px;
}
.naba-app .main-sidebar .user-panel {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  border-radius: 0;
  margin: 0 -10px 16px;
  min-height: 78px;
  padding: 12px 16px 16px;
}
.naba-app .main-sidebar .user-panel > .image > img {
  border: 2px solid rgba(255,255,255,.82);
  box-shadow: 0 0 0 3px rgba(96,165,250,.22);
  height: 42px;
  width: 42px;
}
.naba-app .main-sidebar .user-panel > .info > p {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
}
.naba-app .main-sidebar .user-panel > .info > a { color: #9fb2c9 !important; }
.naba-app .sidebar-menu > .header {
  color: #7891ad !important;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 12px 9px 8px;
}
.naba-app .sidebar-menu > li { position: relative; }
.naba-app .sidebar-menu > li > a {
  background: transparent !important;
  border: 0;
  border-radius: 7px;
  color: #c7d4e5 !important;
  font-size: 13px;
  min-height: 42px;
  padding: 10px 11px;
}
.naba-app .sidebar-menu > li > a > .fa,
.naba-app .sidebar-menu > li > a > .ion {
  background: transparent !important;
  border-radius: 0;
  color: #8db9ed !important;
  display: inline-block;
  flex: 0 0 23px;
  font-size: 15px;
  height: auto;
  line-height: 1;
  margin-right: 8px;
  text-align: center;
  width: 23px;
}
.naba-app .sidebar-menu > li:hover > a,
.naba-app .sidebar-menu > li.menu-open > a {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}
.naba-app .sidebar-menu > li:not(.active):hover > a > .fa,
.naba-app .sidebar-menu > li:not(.active):hover > a > .ion {
  background: transparent !important;
  color: #8db9ed !important;
}
.naba-app .sidebar-menu > li.active > a {
  background: #2563eb !important;
  box-shadow: 0 5px 14px rgba(37,99,235,.22);
  color: #fff !important;
}
.naba-app .sidebar-menu > li.active > a > .fa,
.naba-app .sidebar-menu > li.active > a > .ion { background: transparent !important; color: #fff !important; }
.naba-app .sidebar-menu > li.menu-open > a > .fa,
.naba-app .sidebar-menu > li.menu-open > a > .ion { background: transparent !important; }
.naba-app .sidebar-menu > li > a > .pull-right-container > .fa-angle-left { color: #849ab5; }
.naba-app .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left { color: #fff; }
.naba-app .sidebar-menu .treeview-menu {
  background: #12233a !important;
  border: 0;
  border-radius: 7px;
  margin: 4px 0 8px;
  overflow: visible !important;
  padding: 5px;
}
.naba-app .sidebar-menu .treeview:hover > .treeview-menu,
.naba-app .sidebar-menu .treeview.menu-open > .treeview-menu { display: block; }
.naba-app .sidebar-menu .treeview-menu > li > a {
  border-radius: 5px;
  color: #9fb2c9 !important;
  min-height: 34px;
  padding: 8px 9px 8px 14px;
}
.naba-app .sidebar-menu .treeview-menu > li > a > .fa {
  color: #6f89a8;
  font-size: 11px;
  margin-right: 7px;
}
.naba-app .sidebar-menu .treeview-menu > li:hover > a,
.naba-app .sidebar-menu .treeview-menu > li.active > a {
  background: rgba(96,165,250,.12);
  color: #fff !important;
}

@media (min-width: 768px) {
  .naba-app:not(.sidebar-collapse) .sidebar-menu .treeview:hover > .treeview-menu,
  .naba-app:not(.sidebar-collapse) .sidebar-menu .treeview.menu-open > .treeview-menu {
    display: block !important;
    height: auto !important;
    position: static !important;
    width: auto !important;
  }
  .naba-app.sidebar-collapse .sidebar-menu .treeview:not(:hover) > .treeview-menu {
    display: none !important;
  }
  .naba-app.sidebar-collapse .sidebar-menu > li:not(:hover) > a > span:not(.pull-right-container) {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-sidebar,
  .sidebar-mini.sidebar-collapse .main-sidebar .sidebar { overflow: visible !important; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li { position: relative; z-index: 1; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover { z-index: 3000; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a { border-radius: 7px; overflow: visible; }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container) {
    background: #203653 !important;
    border-radius: 0 8px 0 0;
    color: #fff !important;
    display: block !important;
    left: 40px;
    min-height: 42px;
    padding: 12px 14px;
    position: absolute;
    top: 0;
    width: 220px;
    z-index: 3001;
  }
  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    background: #182b47 !important;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 8px 12px 24px rgba(15,23,42,.24);
    display: block !important;
    left: 40px;
    margin: 0;
    max-height: calc(100vh - 120px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 6px;
    position: absolute;
    top: 42px;
    width: 220px;
    z-index: 3001;
  }
  [dir="rtl"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container),
  [dir="rtl"] .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    left: auto;
    right: 40px;
  }
}

[dir="rtl"] .naba-app .sidebar-menu > li > a > .fa,
[dir="rtl"] .naba-app .sidebar-menu > li > a > .ion { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .naba-app .sidebar-menu .treeview-menu { margin: 4px 0 8px; padding: 5px; }
[dir="rtl"] .naba-app .sidebar-menu .treeview-menu > li > a { padding: 8px 14px 8px 9px; }

@media (max-width: 767px) {
  .naba-app .main-sidebar { overflow-y: auto !important; width: 230px; }
  .naba-app .sidebar-menu .treeview-menu { position: static !important; width: auto !important; }
}