/*
 * Design layer (loaded last, after the Hope UI template).
 *
 * Layout, proportions, typography, radii, shadows and component shapes follow the
 * reference design system. COLORS ARE NOT DEFINED HERE: every color comes from the
 * template's own variables (--bs-primary and its shades, --bs-gray-*, --bs-dark,
 * --bs-secondary, --bs-success/danger/warning...), so the project palette and the
 * built-in color customizer stay exactly as they are. Tints are derived by opacity.
 */

/* =========================================================
 * 1. Tokens
 * ========================================================= */
:root {
  --font-sans: 'Cairo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--font-sans);
  --bs-font-sans-serif: var(--font-sans);

  /* spacing (4px grid) */
  --space-4: .25rem; --space-6: .375rem; --space-8: .5rem; --space-12: .75rem; --space-16: 1rem;
  --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem;
  --space-64: 4rem; --space-80: 5rem;

  /* radii */
  --radius-xs: 8px;      /* items in an icon segmented control */
  --radius-base: 10px;   /* cards, panels */
  --radius-control: 14px;/* icon buttons, badges */
  --radius-field: 16px;  /* inputs, selects, large buttons, header corners */
  --radius-stat: 20px;   /* stat and step cards */
  --radius-sheet: 24px;  /* feature cards, dialogs, overlays */
  --radius-pill: 9999px;
  --bs-border-radius: var(--radius-base);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--radius-base);

  /* elevation (neutral shadows; soft/glow derived from existing colors) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
  --shadow-soft: 0 10px 40px rgba(var(--bs-dark-rgb), .05);
  --shadow-glow: 0 10px 15px -3px rgba(var(--bs-primary-rgb), .25), 0 4px 6px -4px rgba(var(--bs-primary-rgb), .25);

  /* roles mapped to existing template colors */
  --hairline: rgba(var(--bs-dark-rgb), .08);
  --neutral-fill: var(--bs-gray-100);
  --neutral-fill-2: var(--bs-gray-200);
  --muted-text: rgba(var(--bs-body-color-rgb), 1);
  --primary-15: rgba(var(--bs-primary-rgb), .15);
  --primary-10: rgba(var(--bs-primary-rgb), .10);

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-color: 200ms ease-out;
  --t-header: 300ms ease;
  --t-shadow: 500ms ease;
}

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

/* =========================================================
 * 2. Typography (Cairo; heavy headings, regular body)
 * ========================================================= */
body, button, input, select, textarea, .btn, .form-control, .select2-container, .dropdown-menu {
  font-family: var(--font-sans) !important;
}
body { font-size: 1rem; line-height: 1.5; }
h1, .h1 { font-size: 2.25rem; font-weight: 900; line-height: 1.25; }
h2, .h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.36; }
h3, .h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.33; }
h4, .h4, .card-title { font-size: 1.25rem; font-weight: 900; line-height: 1.4; } /* panel title */
h5, .h5 { font-size: 1rem; font-weight: 700; line-height: 1.5; }
small, .small { font-size: .875rem; }
.text-muted { font-weight: 500; }
/* Latin-only letter-spacing, Arabic stays joined */
html:not([dir=rtl]) .micro-label { letter-spacing: 1px; text-transform: uppercase; }
.micro-label { font-size: 10px; font-weight: 900; line-height: 15px; }

/* =========================================================
 * 3. Shell: top bar, sidebar, content
 * ========================================================= */
.content-inner, .conatiner-fluid.content-inner { padding: var(--space-24) var(--space-24) var(--space-32) !important; }
@media (min-width: 1280px) { .content-inner, .conatiner-fluid.content-inner { padding-inline: var(--space-32) !important; } }
.content-inner > .row + .row, .content-inner > .row > [class*=col-] > .card { margin-bottom: var(--space-24); }

/* Top bar: 72 high, bottom corners 16, sticky, glass once content scrolls under it */
.iq-navbar, nav.iq-navbar {
  min-height: 72px;
  border-radius: 0 0 var(--radius-field) var(--radius-field);
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  transition: box-shadow var(--t-header), background-color var(--t-header);
  position: sticky; top: 0; z-index: 900;
}
body:not(.dark) .iq-navbar {
  background-color: rgba(var(--bs-white-rgb), .92) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.iq-navbar.is-scrolled { box-shadow: var(--shadow-md) !important; }
.iq-navbar .navbar-inner { min-height: 72px; padding-block: var(--space-12); }

/* Header icon buttons: 48 x 48, radius 14, hairline, sm shadow */
.iq-navbar .navbar-list > .nav-item > .nav-link,
.iq-navbar .sidebar-toggle,
.iq-navbar .search-toggle {
  width: 48px; height: 48px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  margin-inline: var(--space-4);
  transition: transform var(--t-color), box-shadow var(--t-color);
}
.iq-navbar .navbar-list > .nav-item > .nav-link.py-0 { width: auto; padding-inline: var(--space-12) !important; gap: var(--space-8); }
.iq-navbar .navbar-list > .nav-item > .nav-link:active { transform: scale(.95); }
.iq-navbar .caption-title { font-size: 1.25rem; font-weight: 900; }

/* Sidebar: 280 wide on desktop, hairline on its inner edge */
.sidebar, .sidebar.sidebar-default { border-inline-end: 1px solid var(--hairline) !important; box-shadow: none !important; }
@media (min-width: 1200px) {
  .sidebar.sidebar-default:not(.sidebar-mini) { max-width: 17.5rem; width: 17.5rem; }
  .sidebar.sidebar-default:not(.sidebar-mini) + .main-content { margin-left: 17.5rem; }
  [dir=rtl] .sidebar.sidebar-default:not(.sidebar-mini) + .main-content { margin-left: auto; margin-right: 17.5rem; }
  .sidebar.sidebar-default:not(.sidebar-mini) + .main-content .iq-navbar.navs-sticky.menu-sticky { width: calc(100% - 17.5rem); }
}
.sidebar .sidebar-header { min-height: 72px; border-bottom: 1px solid var(--hairline) !important; }

/* Sidebar items: full-width nav pills, 44 high, 20 icon, 12 gap, 15/500 */
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link {
  min-height: 44px;
  margin: 2px var(--space-12);
  padding: 0 var(--space-12) !important;
  display: flex; align-items: center; gap: var(--space-12);
  border-radius: var(--radius-pill) !important;
  font-size: 15px; font-weight: 500;
  transition: background-color var(--t-color), color var(--t-color);
}
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link .icon svg { width: 20px; height: 20px; }
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link .item-name { margin: 0 !important; }
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link:not(.active):hover { background: var(--neutral-fill) !important; }
/* Active: primary at 15% fill, darker shade of primary for the text, weight 600 */
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link.active,
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link[aria-expanded=true] {
  background: var(--primary-15) !important;
  color: var(--bs-primary-shade-20) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link.active .icon,
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link.active svg { color: var(--bs-primary-shade-20) !important; }
.sidebar .sidebar-list .navbar-nav .sub-nav .nav-link { min-height: 40px; font-size: 14px; }
.sidebar .sidebar-list .navbar-nav .static-item .default-icon,
.sidebar .sidebar-list .navbar-nav .static-item { font-size: 10px; font-weight: 900; line-height: 15px; }

/* =========================================================
 * 4. Cards, panels, page headers
 * ========================================================= */
.card {
  border-radius: var(--radius-base) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  transition: box-shadow var(--t-shadow);
  margin-bottom: var(--space-24);
}
.card .card-header {
  border-bottom: 1px solid var(--hairline) !important;
  padding: var(--space-24) var(--space-24) var(--space-16) !important;
  background: transparent !important;
}
.card .card-body { padding: var(--space-24); }
@media (min-width: 1024px) { .card .card-body { padding: var(--space-24) var(--space-32); } }
.card .card-header .card-title { margin: 0; }
/* start-aligned section header: 60 x 4 accent bar in a soft tint above the title */
.card .card-header .header-title { position: relative; padding-top: var(--space-16); }
.card .card-header .header-title::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0;
  width: 60px; height: 4px; border-radius: 4px; background: var(--bs-primary-tint-60);
}
.card .card-header .card-action { display: flex; align-items: center; gap: var(--space-8); }
.card .card-header .card-action > a:not(.btn) { font-size: 14px; font-weight: 700; }

/* Stat cards (dashboard card-slide): radius 20, hairline, soft shadow, padding 24 */
.card-slide {
  border-radius: var(--radius-stat) !important;
  box-shadow: var(--shadow-soft) !important;
}
.card-slide .card-body { padding: var(--space-24) !important; }
.card-slide .rounded.p-3 {
  width: 56px; height: 56px; padding: 0 !important; flex: 0 0 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-field) !important;
}
.card-slide .dashboard-show-data p { font-size: 14px; font-weight: 700; line-height: 20px; opacity: .8; }
.card-slide .dashboard-show-data .counter, .card-slide h5.counter {
  font-size: 24px; font-weight: 900; line-height: 32px; margin: 2px 0 0; color: var(--bs-primary) !important;
}

/* Charts inside cards: 24 padding, keep chart colors */
.graph-header select.form-control { min-height: 40px; width: auto; border-radius: var(--radius-pill) !important; padding: 0 var(--space-20); }

/* =========================================================
 * 5. Buttons
 * ========================================================= */
.btn {
  font-weight: 700; font-size: 15px; line-height: 1.2;
  min-height: 40px; padding: 0 var(--space-20);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  transition: opacity var(--t-color), transform var(--t-color), background-color var(--t-color);
}
.btn:active { transform: scale(.95); }
.btn-primary:hover { opacity: .9; }
.btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.btn-sm { min-height: 32px; font-size: 13px; padding: 0 var(--space-12); }
.btn-lg, form .btn-md, form button[type=submit].btn-primary, form input[type=submit].btn-primary {
  min-height: 48px; padding: 0 var(--space-32); border-radius: var(--radius-field) !important;
  font-size: 14px; box-shadow: var(--shadow-sm) !important;
}
/* Quiet button (light neutral at 50%) */
.btn-light, .btn-soft, .btn-outline-secondary {
  background: rgba(var(--bs-light-rgb), .5) !important; border-color: transparent !important; color: var(--bs-gray-700) !important;
}
.btn-light:hover, .btn-soft:hover, .btn-outline-secondary:hover { background: rgba(var(--bs-light-rgb), 1) !important; }
/* Icon buttons: 36 x 36, radius 14, lightest neutral fill (status tint for actions) */
.btn-icon, .btn.btn-icon { width: 36px; height: 36px; min-height: 36px; padding: 0 !important; border-radius: var(--radius-control) !important; }
.btn-icon svg { width: 18px; height: 18px; }
.btn-success.btn-icon, .btn-info.btn-icon, .btn-primary.btn-icon { background: var(--primary-10) !important; border-color: transparent !important; color: var(--bs-primary) !important; }
.btn-danger.btn-icon { background: rgba(var(--bs-danger-rgb), .10) !important; border-color: transparent !important; color: var(--bs-danger) !important; }
.btn-warning.btn-icon { background: rgba(var(--bs-warning-rgb), .14) !important; border-color: transparent !important; color: var(--bs-warning) !important; }

/* =========================================================
 * 6. Forms
 * ========================================================= */
.form-group { margin-bottom: var(--space-24); }
.form-control-label, label.form-label, .form-group > label { font-size: 14px; font-weight: 700; margin-bottom: var(--space-12); display: inline-block; }
.form-control, .form-select {
  min-height: 52px; padding: 0 var(--space-16);
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-field) !important;
  box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--t-color), box-shadow var(--t-color);
}
textarea.form-control { min-height: 120px; padding: var(--space-12) var(--space-16); }
.form-select, select.form-control { min-height: 48px; padding-inline: var(--space-24); font-weight: 900; }
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25), var(--shadow-sm) !important;
}
.form-control::placeholder { font-weight: 500; opacity: .7; }
.form-check-input { border-radius: 6px; }
.form-check-input:checked { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 48px !important; display: flex; align-items: center;
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-field) !important;
  box-shadow: var(--shadow-sm); padding-inline: var(--space-12);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; inset-inline-end: 10px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary-10) !important; border: 0 !important; color: var(--bs-primary) !important;
  border-radius: var(--radius-pill) !important; font-weight: 700; padding: 2px 10px;
}
.select2-dropdown { border: 1px solid var(--hairline) !important; border-radius: var(--radius-field) !important; overflow: hidden; box-shadow: var(--shadow-xl); }
.select2-results__option { padding: var(--space-8) var(--space-16); }
.select2-results__option--highlighted { background: var(--bs-primary) !important; }
/* form actions: bottom end */
form .card-body > .btn.float-end, form .card-body > input.float-end { margin-top: var(--space-8); }

/* =========================================================
 * 7. Tables (DataTables)
 * ========================================================= */
.table-responsive { border-radius: var(--radius-base); }
.table { --bs-table-hover-bg: var(--neutral-fill); margin-bottom: 0; }
.table > :not(:first-child), .table > :not(caption) > * { border-top: 0 !important; }
.table > :not(caption) > * > * { border-bottom: 1px solid var(--hairline) !important; padding: var(--space-16) var(--space-16); vertical-align: middle; }
.table thead th, .table thead tr th {
  height: 48px; padding-block: 0 !important;
  background: var(--neutral-fill) !important;
  font-size: 12px; font-weight: 800; text-transform: none !important; letter-spacing: 0;
  color: var(--muted-text) !important; white-space: nowrap;
}
.table tbody td { height: 60px; font-size: 14px; font-weight: 500; }
.table tbody tr { transition: background-color var(--t-color); }
.table tbody tr:hover > * { background: var(--neutral-fill); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
.table img, .table .avatar-40 { border-radius: var(--radius-control) !important; }
/* toolbar */
.dataTables_wrapper .row:first-child { padding: var(--space-16) var(--space-24); margin: 0; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  min-height: 44px; padding: 0 var(--space-16);
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-field) !important; box-shadow: var(--shadow-sm);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--bs-primary) !important; outline: 0; }
.dataTables_wrapper .dataTables_info { font-size: 14px; font-weight: 700; color: var(--muted-text); padding: var(--space-16) var(--space-24) !important; }
.dataTables_wrapper .dataTables_paginate { padding: var(--space-12) var(--space-24) !important; }

/* Status badges: 28 high, padding 12, radius 14, 12/700, tint of the status color */
.badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-12);
  border-radius: var(--radius-control) !important; font-size: 12px; font-weight: 700;
}
.badge.bg-success, .badge.bg-soft-success { background: rgba(var(--bs-success-rgb), .12) !important; color: var(--bs-success) !important; }
.badge.bg-danger, .badge.bg-soft-danger { background: rgba(var(--bs-danger-rgb), .12) !important; color: var(--bs-danger) !important; }
.badge.bg-warning, .badge.bg-soft-warning { background: rgba(var(--bs-warning-rgb), .14) !important; color: var(--bs-warning) !important; }
.badge.bg-primary, .badge.bg-soft-primary { background: var(--primary-10) !important; color: var(--bs-primary) !important; }
.badge.bg-secondary, .badge.bg-info { background: rgba(var(--bs-secondary-rgb), .12) !important; color: var(--bs-secondary) !important; }

/* Pagination: 40 round buttons */
.pagination { gap: var(--space-8); flex-wrap: wrap; }
.page-link {
  min-width: 40px; height: 40px; padding: 0 var(--space-12);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--neutral-fill); font-weight: 700;
  transition: background-color var(--t-color);
}
.page-link:hover { background: var(--neutral-fill-2); }
.page-item.active .page-link { background-color: var(--bs-primary) !important; color: #fff !important; }
.page-item:first-child .page-link, .page-item:last-child .page-link { border-radius: var(--radius-pill) !important; }

/* =========================================================
 * 8. Tabs (text segmented control), dropdowns, dialogs, toasts
 * ========================================================= */
.nav-tabs, .nav-pills {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: var(--space-4);
  border: 0 !important; border-radius: var(--radius-pill); background: var(--neutral-fill);
}
.nav-tabs .nav-link, .nav-pills .nav-link {
  border: 0 !important; border-radius: var(--radius-pill) !important;
  padding: var(--space-8) var(--space-20); font-size: 15px; font-weight: 500;
  transition: background-color var(--t-color), color var(--t-color);
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: var(--bs-white) !important; color: var(--bs-primary) !important; box-shadow: var(--shadow-sm);
}
.dropdown-menu {
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-field) !important;
  box-shadow: var(--shadow-xl) !important; padding: var(--space-6);
}
.dropdown-item { border-radius: var(--radius-base); padding: var(--space-8) var(--space-12); font-weight: 500; }
.dropdown-item:active, .dropdown-item.active { background: var(--bs-primary) !important; color: #fff !important; }
.modal-dialog { max-width: 560px; }
.modal-lg { max-width: 800px; }
.modal-content { border: 0 !important; border-radius: var(--radius-sheet) !important; box-shadow: var(--shadow-xl); }
.modal-header, .modal-body, .modal-footer { padding: var(--space-24) var(--space-32); }
.modal-header { border-bottom: 1px solid var(--hairline) !important; }
.modal-footer { border-top: 1px solid var(--hairline) !important; gap: var(--space-8); }
.modal-backdrop.show { opacity: .6; }
.jconfirm .jconfirm-box { border-radius: var(--radius-sheet) !important; padding: var(--space-24) !important; box-shadow: var(--shadow-xl) !important; }
.jconfirm .jconfirm-box .jconfirm-title-c { font-size: 20px !important; font-weight: 900; }
.jconfirm .jconfirm-buttons button { border-radius: var(--radius-pill) !important; font-weight: 700; min-height: 40px; padding: 0 var(--space-20); }
.alert { border-radius: var(--radius-field) !important; border: 0; }
.toast, .swal2-popup.swal2-toast, .iziToast { border-radius: var(--radius-field) !important; box-shadow: var(--shadow-lg) !important; }
.swal2-popup { border-radius: var(--radius-sheet) !important; }

/* Empty states */
.dataTables_empty, td.dataTables_empty { padding: var(--space-48) var(--space-16) !important; font-weight: 700; color: var(--muted-text); }

/* Footer */
.footer { border-top: 1px solid var(--hairline); font-size: 14px; }

/* =========================================================
 * 9. Auth pages (login / register / forgot password)
 * ========================================================= */
.login-content .auth-card .card-body { padding: var(--space-32); }
.login-content .auth-card h2 { font-size: 1.75rem; font-weight: 800; }
.login-content .auth-card .btn-primary { width: 100%; min-height: 48px; border-radius: var(--radius-control) !important; box-shadow: var(--shadow-glow) !important; }
.login-content .auth-card .form-control { min-height: 52px; }
.login-content .bg-soft-warning, .login-content .bg-soft-primary {
  background: linear-gradient(180deg, var(--bs-primary-shade-40) 0%, var(--bs-primary) 100%) !important;
}
.login-content .bg-soft-warning img, .login-content .bg-soft-primary img { opacity: .35; mix-blend-mode: luminosity; }

/* =========================================================
 * 10. Responsive
 * ========================================================= */
@media (max-width: 767.98px) {
  .content-inner, .conatiner-fluid.content-inner { padding: var(--space-16) !important; }
  .card .card-header { padding: var(--space-16) !important; }
  .card .card-body { padding: var(--space-16); }
  .iq-navbar { min-height: 64px; }
  .iq-navbar .navbar-list > .nav-item > .nav-link { width: 44px; height: 44px; }
  .form-control { min-height: 48px; border-radius: var(--radius-control) !important; box-shadow: none; }
  .btn { min-height: 44px; }
  .modal-header, .modal-body, .modal-footer { padding: var(--space-16) var(--space-20); }
  .dataTables_wrapper .row:first-child { padding: var(--space-12) var(--space-16); }
}

/* =====================================================================
 * 11. Shell & dashboard redesign (site-style layout; project colors only)
 * ===================================================================== */

/* ---- Floating sidebar (desktop) / drawer (mobile) ---- */
@media (min-width: 1200px) {
  .sidebar.sidebar-default:not(.sidebar-mini) {
    top: 16px !important; bottom: 16px !important; height: auto !important;
    width: 272px !important; max-width: 272px !important;
    border-radius: var(--radius-sheet) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: var(--shadow-soft) !important;
    overflow: hidden;
  }
  html:not([dir=rtl]) .sidebar.sidebar-default:not(.sidebar-mini) { left: 16px !important; }
  [dir=rtl] .sidebar.sidebar-default:not(.sidebar-mini) { right: 16px !important; left: auto !important; }
  .sidebar.sidebar-default:not(.sidebar-mini) + .main-content { margin-left: 304px !important; }
  [dir=rtl] .sidebar.sidebar-default:not(.sidebar-mini) + .main-content { margin-left: 0 !important; margin-right: 304px !important; }
  .sk-menu-btn, .sk-topbar-logo { display: none !important; }
}
@media (max-width: 1199.98px) {
  .sidebar.sidebar-default { width: min(85vw, 300px) !important; max-width: 300px !important; box-shadow: var(--shadow-xl) !important; }
  html:not([dir=rtl]) .sidebar.sidebar-default { border-radius: 0 var(--radius-sheet) var(--radius-sheet) 0 !important; }
  [dir=rtl] .sidebar.sidebar-default { border-radius: var(--radius-sheet) 0 0 var(--radius-sheet) !important; }
  .sk-topbar-greeting { display: none !important; }
}
.sidebar .sidebar-header {
  min-height: 76px; padding: 0 var(--space-20) !important; border-bottom: 1px solid var(--hairline) !important;
  display: flex; align-items: center; justify-content: space-between !important;
}
.sidebar .sidebar-header .navbar-brand img { max-height: 34px; width: auto; }
.sidebar .sidebar-header .sidebar-toggle {
  position: static !important; transform: none !important;
  width: 36px; height: 36px; border-radius: var(--radius-control) !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutral-fill) !important; color: inherit !important; box-shadow: none !important;
}
.sidebar .sidebar-body { padding-top: var(--space-12) !important; }
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link { margin-inline: var(--space-12); }
.sidebar .sidebar-list .navbar-nav .nav-item .nav-link .item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .sidebar-list .navbar-nav .sub-nav { margin-inline-start: var(--space-24); border-inline-start: 1px dashed var(--hairline); }

/* ---- Floating glass top bar, one row on every size ---- */
.iq-navbar.sk-topbar {
  margin: 16px 16px 0 !important; width: auto !important;
  border-radius: var(--radius-stat) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-sm) !important;
  top: 16px !important; min-height: 76px;
}
.sk-topbar .sk-topbar-inner {
  display: flex !important; align-items: center; justify-content: space-between; flex-wrap: nowrap !important;
  gap: var(--space-12); min-height: 76px; padding: var(--space-12) var(--space-20) !important;
}
.sk-topbar-start, .sk-topbar-end { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.sk-topbar .navbar-brand { margin: 0 !important; display: inline-flex; align-items: center; }
.sk-topbar .navbar-brand img { max-height: 30px; width: auto; }
.sk-menu-btn {
  position: static !important; transform: none !important;
  width: 44px !important; height: 44px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-control) !important;
  background: transparent !important; box-shadow: var(--shadow-sm) !important; color: inherit !important;
}
.sk-topbar-greeting { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sk-topbar-date { font-size: 12px; font-weight: 700; color: var(--muted-text); }
.sk-topbar-title { font-size: 20px; font-weight: 900; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-topbar-actions { flex-direction: row !important; align-items: center; gap: var(--space-8); margin: 0 !important; }
.sk-topbar-actions > .nav-item > .nav-link,
.sk-topbar-actions .sit_color_theam {
  width: 44px !important; height: 44px !important; min-height: 44px; padding: 0 !important; margin: 0 !important;
  align-items: center; justify-content: center;
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-control) !important;
  box-shadow: var(--shadow-sm) !important; background: transparent;
}
.sk-topbar-actions > .nav-item > .nav-link { display: inline-flex !important; }
.sk-topbar-actions .sit_color_theam:not([style*="none"]) { display: inline-flex; }
.sk-topbar-actions .selected-lang { width: 22px; height: 22px; object-fit: cover; border-radius: 6px !important; }
.sk-topbar-actions > .nav-item:last-child > .nav-link {
  width: auto !important; padding: 3px 14px 3px 3px !important; gap: var(--space-8);
  border-radius: var(--radius-pill) !important;
}
[dir=rtl] .sk-topbar-actions > .nav-item:last-child > .nav-link { padding: 3px 3px 3px 14px !important; }
.sk-topbar-actions .avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
.sk-topbar-actions .caption-title { font-size: 14px !important; font-weight: 800 !important; margin: 0 !important; }
.sk-topbar-actions .caption { margin: 0 !important; }
@media (max-width: 575.98px) {
  .iq-navbar.sk-topbar { margin: 12px 12px 0 !important; top: 12px !important; }
  .sk-topbar .sk-topbar-inner { padding: var(--space-8) var(--space-12) !important; min-height: 64px; }
  .sk-topbar-actions { gap: 6px; }
  .sk-topbar-actions > .nav-item > .nav-link, .sk-topbar-actions .sit_color_theam { width: 40px !important; height: 40px !important; min-height: 40px; }
  .sk-topbar-actions > .nav-item:last-child > .nav-link { padding: 2px !important; }
}
.content-inner, .conatiner-fluid.content-inner { margin-top: 0 !important; padding-top: var(--space-24) !important; }

/* ---- Welcome hero ---- */
.sk-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap;
  margin-bottom: var(--space-24); padding: var(--space-32) var(--space-40);
  border-radius: var(--radius-sheet);
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-shade-20) 100%);
  color: #fff; box-shadow: var(--shadow-glow);
}
.sk-hero::before, .sk-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(var(--bs-white-rgb), .25);
}
.sk-hero::before { width: 320px; height: 320px; top: -140px; inset-inline-end: -80px; background: rgba(var(--bs-white-rgb), .08); }
.sk-hero::after { width: 180px; height: 180px; bottom: -90px; inset-inline-end: 220px; }
.sk-hero-text { max-width: 560px; }
.sk-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--radius-pill);
  background: rgba(var(--bs-white-rgb), .15); font-size: 12px; font-weight: 800;
}
.sk-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: skPulse 1.8s ease-in-out infinite; }
@keyframes skPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.sk-hero-title { color: #fff !important; font-size: 28px; font-weight: 900; line-height: 1.35; margin: var(--space-12) 0 var(--space-8); }
.sk-hero-lead { margin: 0; font-size: 16px; line-height: 1.8; opacity: .9; }
.sk-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sk-hero-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-20);
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; color: #fff !important;
  background: rgba(var(--bs-white-rgb), .14); border: 1px solid rgba(var(--bs-white-rgb), .3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color var(--t-color), transform var(--t-color);
}
.sk-hero-btn:hover { background: rgba(var(--bs-white-rgb), .24); }
.sk-hero-btn:active { transform: scale(.95); }
.sk-hero-btn-solid { background: #fff !important; color: var(--bs-primary) !important; border-color: #fff; }
@media (max-width: 767.98px) {
  .sk-hero { padding: var(--space-24); border-radius: var(--radius-field); }
  .sk-hero-title { font-size: 22px; }
  .sk-hero-lead { font-size: 14px; }
  .sk-hero-actions { width: 100%; }
  .sk-hero-btn { flex: 1 1 calc(50% - 8px); justify-content: center; min-height: 40px; padding: 0 var(--space-12); font-size: 13px; }
}

/* ---- Stat cards: light tile, primary icon, big number ---- */
.card.card-slide {
  border-radius: var(--radius-stat) !important; box-shadow: var(--shadow-soft) !important;
  transition: transform var(--t-shadow), box-shadow var(--t-shadow);
}
.card.card-slide:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg) !important; }
.card.card-slide .card-body { padding: var(--space-20) !important; }
.card.card-slide .rounded.p-3,
.card.card-slide .rounded {
  width: 52px !important; height: 52px !important; flex: 0 0 52px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: var(--radius-field) !important;
  background: var(--primary-10) !important; box-shadow: none !important;
}
.card.card-slide .rounded svg [stroke]:not([stroke=none]) { stroke: var(--bs-primary) !important; }
.card.card-slide .rounded svg[fill]:not([fill=none]), .card.card-slide .rounded svg [fill]:not([fill=none]) { fill: var(--bs-primary) !important; }
.card.card-slide .dashboard-show-data { text-align: start !important; min-width: 0; }
.card.card-slide .dashboard-show-data p { font-size: 13px !important; font-weight: 700 !important; color: var(--muted-text) !important; opacity: 1; margin-bottom: 2px !important; }
.card.card-slide .dashboard-show-data .counter {
  font-size: 26px !important; font-weight: 900 !important; line-height: 1.2 !important;
  color: var(--bs-heading-color, inherit) !important; margin: 0 !important;
}
@media (max-width: 767.98px) {
  .content-inner .row > .col-lg-3.col-md-6 { flex: 0 0 50%; max-width: 50%; padding-inline: 6px; }
  .content-inner .row:has(> .col-lg-3.col-md-6) { margin-inline: -6px; }
  .card.card-slide { margin-bottom: 12px !important; }
  .card.card-slide .card-body { padding: var(--space-16) !important; }
  .card.card-slide .d-flex.align-items-center { flex-direction: column; align-items: flex-start !important; gap: var(--space-12) !important; }
  .card.card-slide .rounded.p-3, .card.card-slide .rounded { width: 44px !important; height: 44px !important; flex-basis: 44px; border-radius: var(--radius-control) !important; }
  .card.card-slide .dashboard-show-data .counter { font-size: 22px !important; }
}

/* ---- Section cards on the dashboard ---- */
.content-inner .card:not(.card-slide) { border-radius: var(--radius-stat) !important; box-shadow: var(--shadow-soft) !important; }
.content-inner .card:not(.card-slide) .card-header { padding: var(--space-20) var(--space-24) var(--space-16) !important; align-items: center; }
.content-inner .card:not(.card-slide) .card-header .card-title { font-size: 18px; font-weight: 800; }
.card .card-header .header-title::before { width: 40px; background: var(--bs-primary); opacity: .35; }
.card .card-header .card-action > a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--primary-10); color: var(--bs-primary) !important;
  font-size: 13px; font-weight: 700; transition: background-color var(--t-color);
}
.card .card-header .card-action > a:not(.btn):hover { background: var(--primary-15); }
.dashboard_table_list { margin-top: 0 !important; }
.dashboard_table_list .table thead th { border-radius: 0 !important; }

/* ---- Dark mode for the new shell (template supplies the colors) ---- */
.dark .iq-navbar.sk-topbar { background-color: rgba(var(--bs-dark-rgb), .6) !important; }
.dark .sk-topbar-actions > .nav-item > .nav-link, .dark .sk-menu-btn, .dark .sk-topbar-actions .sit_color_theam { border-color: rgba(var(--bs-white-rgb), .1) !important; }
/* empty template spacer under the top bar */
.main-content .iq-navbar-header { display: none !important; }
/* the off-canvas sidebar must not create sideways scrolling */
html, body { overflow-x: clip; }

/* ---- Header v2: grouped tools pill + account pill ---- */
.sk-topbar-actions { gap: 0 !important; }
.sk-topbar-actions > .sk-tool { background: var(--neutral-fill); padding: 4px; }
.sk-topbar-actions > .sk-tool:first-child { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); padding-inline-end: 2px; }
.sk-topbar-actions > .sk-tool + .sk-tool { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); padding-inline-start: 2px; }
.sk-topbar-actions > .sk-tool > .nav-link,
.sk-topbar-actions > .sk-tool .sit_color_theam {
  width: 40px !important; height: 40px !important; min-height: 40px;
  border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
  background: transparent !important; color: var(--muted-text) !important;
  transition: background-color var(--t-color), box-shadow var(--t-color), color var(--t-color);
}
.sk-topbar-actions > .sk-tool > .nav-link:hover,
.sk-topbar-actions > .sk-tool .sit_color_theam:hover,
.sk-topbar-actions > .sk-tool > .nav-link[aria-expanded=true] {
  background: var(--bs-white) !important; box-shadow: var(--shadow-sm) !important; color: var(--bs-primary) !important;
}
.sk-lang-code { font-size: 14px; font-weight: 900; line-height: 1; }
.sk-topbar-actions > .sk-user { margin-inline-start: var(--space-12); }
.sk-topbar-actions > .sk-user > .nav-link {
  width: auto !important; height: 48px !important; gap: var(--space-8);
  padding-block: 4px !important; padding-inline: 4px 12px !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-sm) !important; background: transparent;
}
.sk-topbar-actions > .sk-user .avatar { width: 38px !important; height: 38px !important; object-fit: cover; }
.sk-topbar-actions > .sk-user .caption { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.sk-topbar-actions > .sk-user .caption-title { font-size: 14px !important; font-weight: 800 !important; }
.sk-user-role { font-size: 11px; font-weight: 700; color: var(--muted-text); }
.sk-user-chevron { color: var(--muted-text); }
.sk-lang-item { display: flex !important; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-12) !important; min-width: 180px; }
.sk-lang-badge {
  width: 32px; height: 32px; border-radius: var(--radius-base); display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutral-fill); font-size: 13px; font-weight: 900;
}
.sk-lang-item.active { background: var(--primary-10) !important; color: var(--bs-primary) !important; }
.sk-lang-item.active .sk-lang-badge { background: var(--bs-primary); color: #fff; }
.language-menu .card { box-shadow: none !important; border: 0 !important; margin: 0; }
.language-menu .list-group-item { border: 0; padding: 2px; background: transparent; }
.sk-topbar .dropdown-menu { margin-top: 10px !important; }
@media (max-width: 575.98px) {
  .sk-topbar-actions > .sk-tool > .nav-link, .sk-topbar-actions > .sk-tool .sit_color_theam { width: 36px !important; height: 36px !important; min-height: 36px; }
  .sk-topbar-actions > .sk-user { margin-inline-start: var(--space-8); }
  .sk-topbar-actions > .sk-user > .nav-link { height: 44px !important; padding: 3px !important; }
  .sk-topbar-actions > .sk-user .avatar { width: 36px !important; height: 36px !important; }
  .sk-topbar .navbar-brand img { max-height: 26px; }
}
.dark .sk-topbar-actions > .sk-tool { background: rgba(var(--bs-white-rgb), .06); }
/* striped rows keep the normal text color */
.table-striped > tbody > tr:nth-of-type(odd) > *, .table > tbody > tr > * { color: inherit !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(var(--bs-dark-rgb), .015); }
/* side-by-side dashboard cards share the row height */
.content-inner .row > [class*=col-] > .card:not(.card-slide) { height: calc(100% - var(--space-24)); display: flex; flex-direction: column; }
.content-inner .row > [class*=col-] > .card:not(.card-slide) > .card-body { flex: 1 1 auto; }


/* ---------------------------------------------------------------------------
 * File inputs (partials/dashboard/_i18n_script): translated button + file name.
 * The native input stays in the form (hidden visually) so uploads keep working.
 * ------------------------------------------------------------------------- */
.sk-file { display: flex; align-items: center; gap: var(--space-12); min-height: 48px; padding: var(--space-6); border: 1px solid var(--bs-border-color, #e6e6e6); border-radius: var(--radius-control); background: var(--bs-white, #fff); }
.sk-file .sk-file-input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.sk-file .sk-file-btn { flex: none; border: 0; border-radius: var(--radius-pill, 999px); padding: var(--space-8) var(--space-16); background: var(--bs-primary-bg-subtle, rgba(0,0,0,.05)); color: var(--bs-primary); font-weight: 700; font-size: 14px; cursor: pointer; }
.sk-file .sk-file-btn:hover { filter: brightness(.96); }
.sk-file .sk-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-secondary-color, #8a8a8a); font-size: 14px; }
.sk-file.has-file .sk-file-name { color: var(--bs-body-color); }
.dark .sk-file, [data-bs-theme=dark] .sk-file { background: var(--bs-gray-900, #1b1f24); border-color: var(--bs-gray-700, #3a3f45); }
/* select2 multi-select chips: readable text on the light tint */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--bs-primary) !important; }