:root {
      --primary: #174d8f;
      --primary-dark: #123d72;
      --primary-soft: #e8f0fa;
      --primary-soft-2: #f2f6fb;
      --text: #101828;
      --muted: #667085;
      --border: #E5E7EB;
      --border-strong: #D9E1E7;
      --bg: #F6F8FA;
      --card: #FFFFFF;
      --sidebar-width: 280px;
      --sidebar-collapsed: 78px;
      --radius: 16px;
      --control-radius: 10px;
      --control-height: 36px;
      --control-font: .78rem;
      --shadow: 0 12px 30px rgba(16, 24, 40, .06);
    }

    * {
      box-sizing: border-box
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: .875rem;
    }

    a {
      text-decoration: none
    }

    .app-shell {
      min-height: 100vh;
      display: flex;
    }

    /* Sidebar */
    .sidebar {
      width: var(--sidebar-width);
      background: #fff;
      border-right: 1px solid var(--border);
      min-height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 1040;
      transition: width .22s ease, transform .22s ease;
      display: flex;
      flex-direction: column;
    }

    .sidebar-header {
      min-height: 72px;
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: 1rem 1rem;
      border-bottom: 1px solid var(--border);
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--primary), #2a6eb6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      letter-spacing: -.04em;
      flex: 0 0 42px;
      box-shadow: 0 10px 18px rgba(23, 77, 143, .18);
    }

    .brand-title {
      font-weight: 800;
      font-size: .95rem;
      line-height: 1.1;
      white-space: nowrap;
    }

    .brand-subtitle {
      font-size: .72rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .sidebar-scroll {
      padding: .75rem .8rem;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }

    .menu-section {
      margin: .9rem .6rem .35rem;
      font-size: .67rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #98A2B3;
      font-weight: 800;
    }

    .sidebar .nav-link,
    .sidebar .menu-toggle {
      border: 0;
      background: transparent;
      width: 100%;
      display: flex;
      align-items: center;
      gap: .72rem;
      color: #344054;
      padding: .52rem .65rem;
      min-height: var(--control-height);
      border-radius: var(--control-radius);
      font-size: .82rem;
      font-weight: 700;
      text-align: left;
      transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
      position: relative;
      box-shadow: none;
    }

    .sidebar .nav-link:hover,
    .sidebar .menu-toggle:hover {
      background: #F7FAF8;
      color: var(--primary-dark);
    }

    .sidebar .nav-link.active,
    .sidebar .menu-toggle.active {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 10px 18px rgba(23, 77, 143, .16);
    }

    .sidebar .nav-link.active .chevron,
    .sidebar .menu-toggle.active .chevron,
    .sidebar .nav-link.active .menu-icon,
    .sidebar .menu-toggle.active .menu-icon {
      color: #fff;
    }

    .sidebar .menu-icon {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: inherit;
      font-size: 1rem;
      flex: 0 0 20px;
    }

    .sidebar .menu-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar .chevron {
      margin-left: auto;
      font-size: .78rem;
      color: #98A2B3;
      transition: transform .2s ease, color .16s ease;
    }

    .sidebar .menu-toggle[aria-expanded="true"] .chevron {
      transform: rotate(180deg);
    }

    .submenu {
      padding: .28rem 0 .28rem 2.15rem;
    }

    .submenu .nav-link {
      min-height: 34px;
      padding: .42rem .55rem;
      font-size: .78rem;
      color: #667085;
      font-weight: 650;
    }

    .submenu .nav-link.active {
      background: var(--primary);
      color: #fff;
    }

    .submenu .nav-link:hover {
      background: var(--primary-soft-2);
    }

    .submenu .nav-link.active:hover {
      background: var(--primary-dark);
      color: #fff;
    }

    .sidebar-footer {
      margin-top: auto;
      padding: 1rem;
      border-top: 1px solid var(--border);
    }

    .account-mini {
      background: #F9FAFB;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: .7rem;
      display: flex;
      gap: .65rem;
      align-items: center;
    }

    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
    }

    .account-name {
      font-size: .8rem;
      font-weight: 800;
      line-height: 1.1;
      white-space: nowrap;
    }

    .account-role {
      font-size: .7rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .main {
      flex: 1;
      margin-left: var(--sidebar-width);
      min-width: 0;
      transition: margin-left .22s ease;
    }

    .topbar {
      height: 72px;
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 1020;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.4rem;
    }

    .topbar-title {
      color: var(--text);
      font-size: 1rem;
      font-weight: 850;
      letter-spacing: -.02em;
      white-space: nowrap;
    }

    .topbar-context {
      display: flex;
      flex-direction: column;
      gap: .1rem;
      min-width: 0;
      margin-left: 1rem;
    }

    .topbar-context .breadcrumb {
      margin: 0;
      white-space: nowrap;
    }

    .topbar-context .breadcrumb-item,
    .topbar-context .breadcrumb-item a {
      font-size: .68rem;
    }

    /* Unified controls */
    .btn,
    .form-control,
    .form-select {
      font-size: var(--control-font);
      border-radius: var(--control-radius);
    }

    .btn {
      min-height: var(--control-height);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      font-weight: 700;
      padding: .35rem .75rem;
      transition: all .16s ease;
    }

    .btn-sm {
      min-height: var(--control-height);
      padding: .35rem .75rem;
      font-size: var(--control-font);
      border-radius: var(--control-radius);
    }

    .btn-light {
      background: #fff;
      border-color: var(--border-strong);
      color: #344054;
    }

    .btn-light:hover {
      background: #F9FAFB;
      border-color: #CCD6DE;
      color: #101828;
    }

    .btn-primary {
      --bs-btn-bg: var(--primary);
      --bs-btn-border-color: var(--primary);
      --bs-btn-hover-bg: var(--primary-dark);
      --bs-btn-hover-border-color: var(--primary-dark);
      --bs-btn-active-bg: var(--primary-dark);
      --bs-btn-active-border-color: var(--primary-dark);
      box-shadow: 0 8px 18px rgba(23, 77, 143, .12);
    }

    .btn-outline-primary {
      --bs-btn-color: var(--primary);
      --bs-btn-border-color: #b8cce5;
      --bs-btn-hover-bg: var(--primary);
      --bs-btn-hover-border-color: var(--primary);
      --bs-btn-active-bg: var(--primary-dark);
      --bs-btn-active-border-color: var(--primary-dark);
      background: #fff;
    }

    .btn-icon-sm {
      width: var(--control-height);
      height: var(--control-height);
      min-height: var(--control-height);
      padding: 0;
      flex: 0 0 var(--control-height);
    }

    .user-dropdown .dropdown-toggle {
      min-height: var(--control-height);
      border: 1px solid var(--border-strong);
      background: #fff;
      color: #344054;
      border-radius: var(--control-radius);
      font-size: var(--control-font);
      font-weight: 800;
      padding: .35rem .75rem;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
    }

    .user-dropdown .dropdown-toggle:hover,
    .user-dropdown .dropdown-toggle:focus {
      background: #F9FAFB;
      border-color: #CCD6DE;
      color: #101828;
      box-shadow: none;
    }

    .user-dropdown .dropdown-toggle::after {
      margin-left: .25rem;
    }

    .user-avatar-sm {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .72rem;
      font-weight: 900;
    }

    .dropdown-menu-modern {
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 16px 38px rgba(16, 24, 40, .12);
      padding: .45rem;
      min-width: 190px;
    }

    .dropdown-menu-modern .dropdown-item {
      border-radius: 10px;
      font-size: .8rem;
      font-weight: 700;
      padding: .55rem .65rem;
      display: flex;
      align-items: center;
      gap: .55rem;
      color: #344054;
    }

    .dropdown-menu-modern .dropdown-item:hover {
      background: var(--primary-soft-2);
      color: var(--primary-dark);
    }

    .dropdown-menu-modern .dropdown-divider {
      margin: .4rem .25rem;
    }

    .sidebar-footer-btn {
      min-height: var(--control-height);
    }

    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
      min-height: var(--control-height);
      border: 1px solid #b8c5d6;
      color: #344054;
      font-weight: 600;
      box-shadow: none;
    }

    .form-control::placeholder {
      color: #7b8ba3;
      font-weight: 500;
    }

    .form-control:focus,
    .form-select:focus,
    .form-control-sm:focus,
    .form-select-sm:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 .2rem rgba(23, 77, 143, .14);
    }

    .content {
      padding: 1.35rem;
    }

    .breadcrumb {
      font-size: .78rem;
      margin-bottom: .55rem;
    }

    .breadcrumb a {
      color: var(--muted);
    }

    .breadcrumb .active {
      color: var(--primary);
      font-weight: 800;
    }

    .card-modern {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .stat-card {
      padding: 1rem;
      display: flex;
      align-items: center;
      gap: .8rem;
    }

    .stat-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
    }

    .stat-label {
      font-size: .72rem;
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .stat-value {
      font-weight: 850;
      font-size: 1.25rem;
      letter-spacing: -.03em;
      line-height: 1.1;
    }

    .toolbar {
      padding: 1rem;
    }

    .filter-panel {
      background: #fff;
      border-bottom: 1px solid var(--border);
    }

    .filter-label {
      display: block;
      font-size: .68rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .055em;
      color: #667085;
      margin: 0 0 .35rem;
    }

    .filter-control,
    .filter-control.form-control,
    .filter-control.form-select {
      height: var(--control-height);
      min-height: var(--control-height);
      border: 1px solid #b8c5d6;
      border-radius: var(--control-radius);
      background-color: #fff;
      color: #344054;
      font-size: var(--control-font);
      font-weight: 600;
      box-shadow: none;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

    .filter-control::placeholder {
      color: #7b8ba3;
      font-weight: 500;
    }

    .filter-control:focus,
    .filter-control.form-control:focus,
    .filter-control.form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 .2rem rgba(23, 77, 143, .14);
      background-color: #f8fbff;
    }

    .filter-search {
      position: relative;
    }

    .filter-search .filter-control {
      padding-left: 2.25rem;
    }

    .filter-search-icon {
      position: absolute;
      left: .78rem;
      top: 50%;
      transform: translateY(-50%);
      color: #6f819b;
      font-size: .86rem;
      z-index: 2;
    }

    .select2-container {
      width: 100% !important;
    }

    .select2-container--default .select2-selection--single,
    .select2-container--bootstrap-5 .select2-selection--single,
    .select2-container .select2-selection--single {
      height: var(--control-height) !important;
      min-height: var(--control-height) !important;
      border: 1px solid #b8c5d6 !important;
      border-radius: var(--control-radius) !important;
      background: #fff !important;
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      box-shadow: none !important;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .select2-container .select2-selection--single .select2-selection__rendered {
      line-height: calc(var(--control-height) - 2px) !important;
      padding-left: .75rem !important;
      padding-right: 2.25rem !important;
      color: #344054 !important;
      font-size: var(--control-font) !important;
      font-weight: 600 !important;
      display: block !important;
      width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder,
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
    .select2-container .select2-selection--single .select2-selection__placeholder {
      color: #7b8ba3 !important;
      font-weight: 500 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow,
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow,
    .select2-container .select2-selection--single .select2-selection__arrow {
      height: calc(var(--control-height) - 2px) !important;
      width: 28px !important;
      position: absolute !important;
      top: 1px !important;
      right: .35rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b,
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
      border-color: #6f819b transparent transparent transparent !important;
      border-style: solid !important;
      border-width: 5px 4px 0 4px !important;
      height: 0 !important;
      width: 0 !important;
      position: relative !important;
      top: auto !important;
      left: auto !important;
      margin: 0 !important;
    }

    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
    .select2-container--bootstrap-5.select2-container--open .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent #6f819b transparent !important;
      border-width: 0 4px 5px 4px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear,
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
    .select2-container .select2-selection--single .select2-selection__clear {
      position: absolute !important;
      top: 50% !important;
      right: 1.65rem !important;
      transform: translateY(-50%) !important;
      z-index: 3 !important;
      margin: 0 !important;
      color: #6f819b !important;
      font-size: 1.15rem !important;
      line-height: 1 !important;
      cursor: pointer !important;
      font-weight: 600 !important;
      transition: color .15s ease !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear:hover,
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
      color: #dc3545 !important;
    }

    .select2-container--default .select2-selection--multiple,
    .select2-container--bootstrap-5 .select2-selection--multiple,
    .select2-container .select2-selection--multiple {
      min-height: var(--control-height) !important;
      border: 1px solid #b8c5d6 !important;
      border-radius: var(--control-radius) !important;
      padding: .15rem .35rem !important;
      background: #fff !important;
      box-shadow: none !important;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
    }

    .select2-container--default.select2-container--focus .select2-selection--single,
    .select2-container--default.select2-container--open .select2-selection--single,
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--open .select2-selection--multiple,
    .select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
    .select2-container--bootstrap-5.select2-container--open .select2-selection--single,
    .select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple,
    .select2-container--bootstrap-5.select2-container--open .select2-selection--multiple,
    .select2-container.select2-container--focus .select2-selection,
    .select2-container.select2-container--open .select2-selection {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 .2rem rgba(23, 77, 143, .14) !important;
      background-color: #f8fbff !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
    .select2-container .select2-selection--multiple .select2-selection__choice {
      position: relative !important;
      margin: .12rem .2rem .12rem 0 !important;
      padding: .2rem 1.35rem .2rem .5rem !important;
      border: 0 !important;
      border-radius: 6px !important;
      background: var(--primary-soft) !important;
      color: var(--primary-dark) !important;
      font-size: .72rem !important;
      font-weight: 700 !important;
      line-height: 1.4 !important;
      display: inline-flex !important;
      align-items: center !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove,
    .select2-container .select2-selection--multiple .select2-selection__choice__remove {
      position: absolute !important;
      top: 50% !important;
      right: .3rem !important;
      left: auto !important;
      transform: translateY(-50%) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 14px !important;
      height: 14px !important;
      margin: 0 !important;
      padding: 0 !important;
      color: var(--primary-dark) !important;
      font-weight: 900 !important;
      font-size: 0 !important;
      line-height: 1 !important;
      border: none !important;
      background: transparent !important;
      float: none !important;
      cursor: pointer !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::after,
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove::after {
      content: "×" !important;
      font-size: .95rem !important;
      line-height: 1 !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #dc3545 !important;
      background: transparent !important;
    }

    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
    .select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field,
    .select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
      height: 26px !important;
      margin-top: .1rem !important;
      font-size: var(--control-font) !important;
      font-weight: 600 !important;
      color: #344054 !important;
    }

    .select2-container--default.select2-container--disabled .select2-selection--single,
    .select2-container--default.select2-container--disabled .select2-selection--multiple,
    .select2-container--bootstrap-5.select2-container--disabled .select2-selection--single,
    .select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple {
      background-color: #f1f5f9 !important;
      border-color: #cbd5e1 !important;
      cursor: not-allowed !important;
      opacity: .75 !important;
    }

    .is-invalid + .select2-container .select2-selection--single,
    .is-invalid + .select2-container .select2-selection--multiple {
      border-color: #dc3545 !important;
    }

    .is-invalid + .select2-container.select2-container--focus .select2-selection--single,
    .is-invalid + .select2-container.select2-container--focus .select2-selection--multiple,
    .is-invalid + .select2-container.select2-container--open .select2-selection--single,
    .is-invalid + .select2-container.select2-container--open .select2-selection--multiple {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2) !important;
    }

    .select2-dropdown {
      border: 1px solid #b8c5d6 !important;
      border-radius: var(--control-radius) !important;
      box-shadow: 0 10px 24px rgba(16, 24, 40, .12) !important;
      overflow: hidden !important;
      z-index: 1070 !important;
      background-color: #fff !important;
    }

    .select2-dropdown .select2-search--dropdown {
      padding: .45rem !important;
      background: #fff !important;
    }

    .select2-dropdown .select2-search--dropdown .select2-search__field {
      height: 32px !important;
      border: 1px solid #b8c5d6 !important;
      border-radius: 8px !important;
      color: #344054 !important;
      font-size: var(--control-font) !important;
      font-weight: 600 !important;
      padding: .35rem .55rem !important;
      outline: none !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 .16rem rgba(23, 77, 143, .12) !important;
    }

    .select2-results__option {
      color: #344054 !important;
      font-size: var(--control-font) !important;
      font-weight: 600 !important;
      padding: .5rem .75rem !important;
    }

    .select2-results__option--highlighted[aria-selected],
    .select2-container--bootstrap-5 .select2-results__option--highlighted {
      background-color: var(--primary) !important;
      color: #fff !important;
    }

    .select2-results__option[aria-selected="true"] {
      background-color: var(--primary-soft) !important;
      color: var(--primary-dark) !important;
    }

    .component-showcase .component-demo-title {
      margin-bottom: .75rem;
      color: #344054;
      font-size: .76rem;
      font-weight: 850;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .component-showcase .btn {
      border-radius: var(--control-radius);
      font-size: var(--control-font);
      font-weight: 750;
    }

    .component-showcase .btn-secondary {
      border-color: #667085;
      background: #667085;
      color: #fff;
    }

    .component-showcase .btn-success {
      border-color: #16834b;
      background: #16834b;
      color: #fff;
    }

    .component-showcase .btn-warning {
      border-color: #d98b05;
      background: #d98b05;
      color: #fff;
    }

    .component-showcase .btn-danger {
      border-color: #b42318;
      background: #b42318;
      color: #fff;
    }

    .component-showcase .btn-outline-success {
      border-color: #8bc9a9;
      color: #166534;
    }

    .component-showcase .btn-outline-danger {
      border-color: #e6aaa5;
      color: #b42318;
    }

    .component-showcase .badge.text-bg-primary {
      background: var(--primary) !important;
    }

    .component-showcase .badge.text-bg-success {
      background: #16834b !important;
    }

    .component-showcase .badge.text-bg-warning {
      background: #d98b05 !important;
      color: #fff !important;
    }

    .component-showcase .badge.text-bg-danger {
      background: #b42318 !important;
    }

    .component-showcase .badge.text-bg-secondary {
      background: #667085 !important;
    }

    .component-showcase .form-label {
      margin-bottom: .35rem;
      color: #667085;
      font-size: .68rem;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .component-showcase .form-control,
    .component-showcase .form-select {
      border-color: #b8c5d6;
      border-radius: var(--control-radius);
      color: #344054;
      font-size: var(--control-font);
      font-weight: 600;
    }

    .component-showcase .form-control:focus,
    .component-showcase .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 .2rem rgba(23, 77, 143, .14);
    }

    .component-showcase .flatpickr-input {
      background: #fff;
    }

    .flatpickr-calendar {
      width: 280px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 16px 38px rgba(16, 24, 40, .16);
      font-family: inherit;
      overflow: hidden;
      font-size: .72rem;
    }

    .flatpickr-calendar .flatpickr-months,
    .flatpickr-calendar .flatpickr-weekdays,
    .flatpickr-calendar .flatpickr-days,
    .flatpickr-calendar .dayContainer {
      width: 280px;
      min-width: 280px;
      max-width: 280px;
    }

    .flatpickr-calendar .flatpickr-months {
      height: 42px;
    }

    .flatpickr-calendar .flatpickr-weekdays {
      height: 26px;
    }

    .flatpickr-months,
    .flatpickr-weekdays {
      background: var(--primary);
      color: #fff;
    }

    .flatpickr-current-month,
    span.flatpickr-weekday {
      color: #fff;
      font-weight: 800;
      font-size: .68rem;
    }

    .flatpickr-current-month {
      font-size: .85rem;
      padding-top: .35rem;
    }

    .flatpickr-day {
      max-width: 34px;
      height: 28px;
      line-height: 28px;
      border-radius: 8px;
      color: #344054;
      font-weight: 650;
      font-size: .72rem;
    }

    .flatpickr-day:hover,
    .flatpickr-day.today {
      border-color: var(--primary);
      background: var(--primary-soft);
      color: var(--primary-dark);
    }

    .flatpickr-day.selected {
      border-color: var(--primary);
      background: var(--primary);
      color: #fff;
    }

    .flatpickr-time input,
    .flatpickr-time .flatpickr-am-pm {
      color: #344054;
      font-weight: 700;
    }

    .component-showcase .card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    #sampleModal .modal-content {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 20px 45px rgba(16, 24, 40, .16);
    }

    #sampleModal .modal-header,
    #sampleModal .modal-footer {
      border-color: var(--border);
    }

    .component-showcase .card-title {
      color: #344054;
      font-size: .95rem;
      font-weight: 800;
    }

    .component-showcase .list-group {
      border-radius: var(--control-radius);
    }

    .component-showcase .list-group-item {
      border-color: var(--border);
      color: #344054;
      font-size: var(--control-font);
      font-weight: 600;
    }

    .component-showcase .alert {
      border: 0;
      border-radius: var(--control-radius);
      font-size: var(--control-font);
      font-weight: 650;
    }

    .component-showcase .alert-primary {
      background: var(--primary-soft);
      color: var(--primary-dark);
    }

    .component-showcase .alert-success {
      background: #eaf7ef;
      color: #166534;
    }

    .component-showcase .progress {
      height: 9px;
      border-radius: 999px;
      background: var(--primary-soft);
    }

    .component-showcase .progress-bar {
      border-radius: 999px;
      background: var(--primary);
      font-size: .62rem;
      font-weight: 800;
    }

    .component-showcase .nav-tabs {
      border-bottom-color: var(--border);
    }

    .component-showcase .nav-tabs .nav-link {
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      color: #667085;
      font-size: var(--control-font);
      font-weight: 750;
    }

    .component-showcase .nav-tabs .nav-link:hover,
    .component-showcase .nav-tabs .nav-link.active {
      border-bottom-color: var(--primary);
      color: var(--primary);
      background: transparent;
    }

    .component-showcase .tab-content {
      border-color: var(--border) !important;
      color: #667085;
      font-size: var(--control-font);
    }

    .component-showcase .accordion {
      --bs-accordion-border-color: var(--border);
      --bs-accordion-btn-color: #344054;
      --bs-accordion-active-color: var(--primary-dark);
      --bs-accordion-active-bg: var(--primary-soft);
    }

    .component-showcase .accordion-button {
      font-size: var(--control-font);
      font-weight: 750;
    }

    .component-showcase .accordion-button:focus {
      box-shadow: 0 0 0 .2rem rgba(23, 77, 143, .14);
    }

    .component-showcase .pagination .page-link {
      border-color: var(--border-strong);
      border-radius: var(--control-radius) !important;
      color: #475467;
      font-size: var(--control-font);
      font-weight: 800;
      margin: 0 .15rem;
    }

    .component-showcase .pagination .page-item.active .page-link {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    .component-showcase .pagination .page-link:hover {
      background: var(--primary-soft-2);
      border-color: var(--primary);
      color: var(--primary-dark);
    }

    .component-showcase .dropdown-toggle {
      border: 1px solid var(--border-strong);
      background: #fff;
      color: #344054;
      font-weight: 750;
    }

    .component-showcase .dropdown-toggle:hover,
    .component-showcase .dropdown-toggle:focus {
      border-color: var(--primary);
      background: var(--primary-soft-2);
      color: var(--primary-dark);
      box-shadow: 0 0 0 .2rem rgba(23, 77, 143, .1);
    }

    .component-showcase .dropdown-menu {
      min-width: 190px;
      padding: .45rem;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 16px 38px rgba(16, 24, 40, .12);
    }

    .component-showcase .dropdown-item {
      border-radius: 9px;
      color: #344054;
      font-size: var(--control-font);
      font-weight: 650;
      padding: .5rem .65rem;
    }

    .component-showcase .dropdown-item:hover,
    .component-showcase .dropdown-item:focus {
      background: var(--primary-soft-2);
      color: var(--primary-dark);
    }

    .swal2-popup {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: inherit;
    }

    .swal2-title,
    .swal2-html-container {
      color: #344054;
    }

    .swal2-confirm {
      border-radius: var(--control-radius) !important;
      background: var(--primary) !important;
      box-shadow: none !important;
      font-size: var(--control-font) !important;
      font-weight: 800 !important;
    }

    .swal2-confirm:hover {
      background: var(--primary-dark) !important;
    }

    .swal2-cancel {
      border-radius: var(--control-radius) !important;
      background: #fff !important;
      color: #475467 !important;
      border: 1px solid var(--border-strong) !important;
      font-size: var(--control-font) !important;
      font-weight: 800 !important;
    }

    .swal2-toast {
      border-radius: var(--control-radius) !important;
    }

    .swal2-toast .swal2-title {
      font-size: .85rem !important;
    }

    .filter-actions {
      display: grid;
      grid-template-columns: repeat(4, 36px);
      gap: .45rem;
      align-items: center;
      justify-content: start;
    }

    .filter-actions .action-icon {
      width: 36px;
      height: 36px;
      min-height: 36px;
      flex: 0 0 36px;
      padding: 0;
    }

    .filter-actions .action-icon:nth-child(5) {
      grid-column: 1;
    }

    .btn-filter-primary,
    .btn-filter-light {
      height: var(--control-height);
      min-height: var(--control-height);
      border-radius: var(--control-radius);
      font-size: var(--control-font);
      font-weight: 800;
      padding: .35rem .8rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
    }

    .btn-filter-primary {
      background: var(--primary);
      border: 1px solid var(--primary);
      color: #fff;
      box-shadow: 0 8px 18px rgba(23, 77, 143, .12);
    }

    .btn-filter-primary:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      color: #fff;
    }

    .btn-filter-light {
      background: #fff;
      border: 1px solid var(--border-strong);
      color: #475467;
    }

    .btn-filter-light:hover {
      background: var(--primary-soft-2);
      border-color: #c4d5e9;
      color: var(--primary-dark);
    }

    .table-card {
      overflow: hidden;
    }

    .table-responsive {
      border-radius: 0 0 var(--radius) var(--radius);
      padding-bottom: 10px;
    }

    .table {
      margin: 0;
      min-width: 1780px;
    }

    .table thead th {
      background: #F9FAFB;
      color: #475467;
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .055em;
      font-weight: 850;
      padding: .72rem .78rem;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }

    .table tbody td {
      padding: .68rem .78rem;
      vertical-align: middle;
      color: #344054;
      border-bottom: 1px solid #EEF2F6;
      white-space: nowrap;
      font-size: .79rem;
    }

    .table tbody tr:hover td {
      background: #f8fbff;
    }

    .badge-soft-primary {
      background: #e8f0fa;
      color: #174d8f;
      border: 1px solid #c4d5e9;
      font-weight: 750;
    }

    .badge-soft-success {
      background: #edfcf2;
      color: #087443;
      border: 1px solid #aaf0c4;
      font-weight: 750;
    }

    .badge-soft-warning {
      background: #FFF6E6;
      color: #B54708;
      border: 1px solid #FEDF89;
      font-weight: 750;
    }

    .badge-soft-danger {
      background: #fef3f2;
      color: #b42318;
      border: 1px solid #fecdca;
      font-weight: 750;
    }

    .badge-soft-info {
      background: #f0f9ff;
      color: #026aa2;
      border: 1px solid #b9e6fe;
      font-weight: 750;
    }

    .badge-soft-muted,
    .badge-soft-secondary {
      background: #F2F4F7;
      color: #475467;
      border: 1px solid #EAECF0;
      font-weight: 750;
    }

    .sticky-action {
      position: sticky;
      right: 0;
      background: #fff;
      box-shadow: -10px 0 18px rgba(16, 24, 40, .04);
    }

    thead .sticky-action {
      background: #F9FAFB;
    }

    .sticky-action .btn-group .btn {
      width: 32px;
      height: 32px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px !important;
      font-size: .78rem;
    }

    .sticky-action .btn-group {
      gap: .35rem;
      padding-right: .35rem;
    }

    .sticky-action .btn-group .btn-light {
      border: 1px solid #b8c5d6;
      color: #526581;
      background: #fff;
    }

    .sticky-action .btn-group .btn-light:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-soft-2);
    }

    .sticky-action .btn-group .btn-outline-primary {
      color: #fff;
      border-color: var(--primary);
      background: var(--primary);
    }

    .sticky-action .btn-group .btn-outline-primary:hover {
      color: #fff;
      border-color: var(--primary-dark);
      background: var(--primary-dark);
    }

    .sticky-action .btn-group .btn-outline-danger {
      color: #b42318;
      border-color: #f0b7b2;
      background: #fff;
    }

    .sticky-action .btn-group .btn-outline-danger:hover {
      color: #fff;
      border-color: #b42318;
      background: #b42318;
    }

    .dataTables_wrapper .dt-layout-row,
    .dt-container .dt-layout-row {
      margin: .85rem 1rem;
      align-items: center;
    }

    .dataTables_wrapper .dt-info,
    .dt-container .dt-info {
      color: #667085;
      font-size: .78rem;
      padding-top: 0;
    }

    .dataTables_wrapper .dt-paging .pagination,
    .dt-container .dt-paging .pagination {
      margin: 0;
      padding: .1rem .2rem;
      gap: .45rem !important;
    }

    .dataTables_wrapper .dt-paging .page-item,
    .dt-container .dt-paging .page-item {
      margin: 0 !important;
    }

    .dataTables_wrapper .dt-paging .page-link,
    .dt-container .dt-paging .page-link {
      border: 1px solid var(--border-strong);
      color: #475467;
      border-radius: var(--control-radius) !important;
      font-size: var(--control-font);
      font-weight: 800;
    }

    .dataTables_wrapper .dt-paging .page-item.active .page-link,
    .dt-container .dt-paging .page-item.active .page-link {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    .dataTables_wrapper .dt-paging .page-link:hover,
    .dt-container .dt-paging .page-link:hover {
      background: var(--primary-soft-2);
      border-color: var(--primary);
      color: var(--primary-dark);
    }

    .dataTables_wrapper .dt-paging .page-item.disabled .page-link,
    .dt-container .dt-paging .page-item.disabled .page-link {
      color: #B7C0CC;
      background: #F9FAFB;
      border-color: #EEF2F6;
    }

    .table-card>.table-responsive {
      overflow: visible;
    }

    .table-card .dt-layout-table {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .table-card .dt-layout-table table {
      width: 100% !important;
      min-width: 100%;
    }

    /* Sticky Right Action Column (Frozen Action Column on Horizontal Scroll) */
    .table-card .dt-layout-table table.table-sticky-action th.col-sticky-action,
    .table-card .dt-layout-table table.table-sticky-action td.col-sticky-action,
    .table-sticky-action th:last-child,
    .table-sticky-action td:last-child,
    .table-sticky-action th.col-sticky-action,
    .table-sticky-action td.col-sticky-action {
      position: sticky !important;
      right: 0 !important;
      background-color: #ffffff;
      z-index: 5;
      box-shadow: none !important;
    }

    .table-card .dt-layout-table table.table-sticky-action thead th.col-sticky-action,
    .table-sticky-action thead th:last-child,
    .table-sticky-action thead th.col-sticky-action {
      background-color: #f8fafc !important;
      z-index: 6;
      box-shadow: none !important;
    }

    .table-card .dt-layout-table table.table-sticky-action tbody tr:hover td.col-sticky-action,
    .table-sticky-action tbody tr:hover td:last-child,
    .table-sticky-action tbody tr:hover td.col-sticky-action {
      background-color: #f1f5f9 !important;
      box-shadow: none !important;
    }

    .table-card .dt-layout-row {
      position: relative;
      z-index: 2;
      background: #fff;
    }

    body.sidebar-collapsed .sidebar {
      width: var(--sidebar-collapsed);
    }

    body.sidebar-collapsed .main {
      margin-left: var(--sidebar-collapsed);
    }

    body.sidebar-collapsed .brand-title,
    body.sidebar-collapsed .brand-subtitle,
    body.sidebar-collapsed .menu-section,
    body.sidebar-collapsed .menu-text,
    body.sidebar-collapsed .chevron,
    body.sidebar-collapsed .account-name,
    body.sidebar-collapsed .account-role {
      display: none;
    }

    body.sidebar-collapsed .sidebar-header {
      justify-content: center;
      padding-left: .7rem;
      padding-right: .7rem;
    }

    body.sidebar-collapsed .sidebar .nav-link,
    body.sidebar-collapsed .sidebar .menu-toggle {
      justify-content: center;
      padding: .55rem;
    }

    body.sidebar-collapsed .submenu {
      display: none !important;
    }

    body.sidebar-collapsed .account-mini {
      justify-content: center;
      padding: .55rem;
    }

    @media (min-width: 992px) {
      body.sidebar-collapsed.sidebar-hover-expanded .sidebar {
        width: var(--sidebar-width);
      }

      body.sidebar-collapsed.sidebar-hover-expanded .main {
        margin-left: var(--sidebar-width);
      }

      body.sidebar-collapsed.sidebar-hover-expanded .brand-title,
      body.sidebar-collapsed.sidebar-hover-expanded .brand-subtitle,
      body.sidebar-collapsed.sidebar-hover-expanded .menu-section,
      body.sidebar-collapsed.sidebar-hover-expanded .menu-text,
      body.sidebar-collapsed.sidebar-hover-expanded .chevron,
      body.sidebar-collapsed.sidebar-hover-expanded .account-name,
      body.sidebar-collapsed.sidebar-hover-expanded .account-role {
        display: initial;
      }

      body.sidebar-collapsed.sidebar-hover-expanded .sidebar-header {
        justify-content: flex-start;
        padding-left: 1rem;
        padding-right: 1rem;
      }

      body.sidebar-collapsed.sidebar-hover-expanded .sidebar .nav-link,
      body.sidebar-collapsed.sidebar-hover-expanded .sidebar .menu-toggle {
        justify-content: flex-start;
        padding: .52rem .65rem;
      }

      body.sidebar-collapsed.sidebar-hover-expanded .submenu.show {
        display: block !important;
      }

      body.sidebar-collapsed.sidebar-hover-expanded .account-mini {
        justify-content: flex-start;
        padding: .7rem;
      }
    }

    .mobile-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(16, 24, 40, .35);
      z-index: 1035;
    }

    body.mobile-sidebar-open .mobile-overlay {
      display: block;
    }

    @media (max-width: 991.98px) {
      .sidebar {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: 20px 0 40px rgba(16, 24, 40, .16);
      }

      body.mobile-sidebar-open .sidebar {
        transform: translateX(0);
      }

      .main {
        margin-left: 0 !important;
      }

      .topbar {
        padding: 0 1rem;
        height: 64px;
      }

      .topbar-context .breadcrumb {
        display: none;
      }

      .content {
        padding: 1rem;
      }

      .toolbar .row>[class*=col-] {
        margin-bottom: .55rem;
      }

      .filter-actions {
        display: grid;
        grid-template-columns: repeat(4, 36px);
        width: 100%;
      }

      .btn-filter-primary,
      .btn-filter-light {
        width: 100%;
      }
    }

    @media (max-width: 575.98px) {
      .stat-card {
        padding: .85rem;
      }

      .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }

      .topbar-actions .btn span {
        display: none;
      }

      .user-dropdown .dropdown-toggle {
        padding: .35rem .55rem;
      }

      .user-dropdown .dropdown-toggle span:not(.user-avatar-sm) {
        display: none;
      }

    }