/**
 * Maria Admin — UI/UX enhancement layer (v2)
 * Loads after style.css + hirgal-erp-theme.css.
 * Additive overrides only — does not replace the core design system.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. REFINED DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --ad-content-padding-x: 1.25rem;
  --ad-content-padding-y: 1.25rem;
  --ad-content-padding-bottom: 2rem;
  --ad-section-gap: 1.25rem;
  --ad-stack-gap: 1.125rem;
  --ad-form-row-gap: 0.875rem;
  --ad-form-group-gap: 1rem;
  --ad-radius: 14px;
  --ad-radius-sm: 10px;
  --ad-input-radius: 10px;
  --ad-btn-radius: 10px;
  --ad-card-padding-x: 1.25rem;
  --ad-card-padding-y: 1.25rem;
  --ad-card-header-padding-x: 1.25rem;
  --ad-card-header-padding-y: 0.875rem;
  --ad-card-body-padding-x: 1.25rem;
  --ad-card-body-padding-y: 1.25rem;
  --ad-leading-base: 1.62;
  --ad-ui-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --ad-ui-transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --ad-surface-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
  --ad-surface-elevation-2: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --ad-surface-elevation-3: 0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
}

@media (min-width: 992px) {
  :root,
  [data-theme="light"] {
    --ad-content-padding-x: 1.5rem;
    --ad-content-padding-y: 1.5rem;
    --ad-content-padding-bottom: 2.25rem;
    --ad-section-gap: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY & READABILITY
   ═══════════════════════════════════════════════════════════════════ */
body.app {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.app h1,
body.app h2,
body.app h3,
body.app h4,
body.app h5,
body.app h6,
body.app .h1,
body.app .h2,
body.app .h3,
body.app .h4,
body.app .h5,
body.app .h6 {
  letter-spacing: var(--ad-tracking-tight);
  color: var(--ad-text-heading);
}

body.app p,
body.app li,
body.app td,
body.app th {
  line-height: var(--ad-leading-base);
}

body.app small,
body.app .small,
body.app .form-text {
  font-size: var(--ad-text-xs);
  line-height: var(--ad-leading-snug);
  color: var(--ad-text-muted);
}

body.app label,
body.app .form-label,
body.app .col-form-label {
  font-size: var(--ad-label-size);
  font-weight: var(--ad-label-weight);
  letter-spacing: 0.01em;
  color: var(--ad-text-secondary);
  margin-bottom: 0.35rem;
}

body.app .form-label.required::after,
body.app label.required::after {
  content: " *";
  color: var(--ad-danger);
  font-weight: var(--ad-weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════════
   3. APP CANVAS & LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
body.app {
  background-color: var(--ad-bg-app);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--brand-blue-rgb, 0, 123, 255), 0.07), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(var(--brand-navy-rgb, 11, 17, 32), 0.04), transparent),
    var(--ad-bg-app-mesh, none);
}

.app-sidebar__overlay + .app-sidebar__overlay {
  display: none !important;
}

.app-content {
  animation: adContentIn 0.35s ease-out;
}

.ad-page .app-content {
  max-width: 100%;
}

.app-content > .row + .row,
.app-content > .ad-reg-panel + .ad-reg-panel,
.app-content > .card + .card,
.app-content > .ad-page-header + .row,
.app-content > .ad-page-header + .ad-reg-panel,
.app-content > .ad-page-header + .card {
  margin-top: var(--ad-section-gap);
}

@keyframes adContentIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   4. HEADER & SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.app-header {
  box-shadow: var(--ad-surface-elevation-1);
}

[data-theme="dark"] .app-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.35);
}

.app-header__pos {
  transition: transform var(--ad-ui-transition-fast), background var(--ad-ui-transition), color var(--ad-ui-transition);
}

.app-header__pos:hover {
  transform: translateY(-1px);
}

.app-sidebar .treeview-item,
.app-sidebar .app-menu__item > a {
  transition: background var(--ad-ui-transition), color var(--ad-ui-transition), padding-left var(--ad-ui-transition);
}

.app-sidebar .treeview.is-expanded > .treeview-menu,
.app-sidebar .dropdown-menu {
  border-radius: var(--ad-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   5. PAGE HEADER & PANELS
   ═══════════════════════════════════════════════════════════════════ */
.ad-page-header {
  transition: box-shadow var(--ad-ui-transition), border-color var(--ad-ui-transition);
}

.ad-page-header:hover {
  box-shadow: var(--ad-glass-shadow), var(--ad-surface-elevation-2);
}

.ad-page-header__title {
  font-weight: var(--ad-weight-bold);
}

.ad-page-header__subtitle {
  opacity: 0.92;
}

.ad-reg-panel,
.ad-astmt-filter-panel,
.ad-astmt-results-panel,
.ad-mprpt-filter-panel,
.ad-mprpt-results-panel,
.ad-astmt-statement-panel,
.ad-mprpt-statement-panel,
.ad-exp-statement-panel,
.card {
  transition: box-shadow var(--ad-ui-transition), transform var(--ad-ui-transition), border-color var(--ad-ui-transition);
}

.ad-reg-panel:hover,
.ad-astmt-filter-panel:hover,
.ad-astmt-results-panel:hover,
.ad-mprpt-filter-panel:hover,
.ad-mprpt-results-panel:hover {
  box-shadow: var(--ad-glass-shadow), var(--ad-surface-elevation-2);
}

.ad-reg-panel__head,
.card-header {
  min-height: 3rem;
}

.ad-reg-panel__title,
.card-header h5,
.card-header h6 {
  gap: 0.5rem;
}

.ad-reg-panel__title i,
.card-header i[class*="ti"] {
  color: var(--ad-panel-icon-fg);
  opacity: 0.92;
}

.ad-reg-panel__meta {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--ad-primary-softer);
  border: 1px solid var(--ad-border-subtle);
}

.ad-reg-panel__body,
.card-body {
  padding: var(--ad-card-body-padding-y) var(--ad-card-body-padding-x);
}

.ad-reg-empty {
  border-radius: var(--ad-radius-sm);
  border: 1px dashed var(--ad-border);
  background: var(--ad-bg-muted);
  padding: 2.75rem 1.75rem;
  text-align: center;
}

.ad-reg-empty i[class*="ti"] {
  font-size: 2rem;
  color: var(--ad-text-muted);
  opacity: 0.55;
  margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════
   6. FORMS
   ═══════════════════════════════════════════════════════════════════ */
.form-control:not([type="checkbox"]):not([type="radio"]):not(textarea),
.form-select {
  border-color: var(--ad-border);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.form-control:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--ad-border-strong);
}

.form-control:not([type="checkbox"]):not([type="radio"]):focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ad-primary) !important;
  box-shadow: 0 0 0 3px var(--ad-primary-soft), inset 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}

.form-control:not([type="checkbox"]):not([type="radio"])::placeholder {
  color: var(--ad-input-placeholder);
  opacity: 0.85;
}

.input-group-text {
  border-color: var(--ad-border);
  background: var(--ad-input-group-bg);
  font-weight: var(--ad-weight-medium);
  border-radius: var(--ad-input-radius);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
}

.input-group:not(.has-validation) > .form-control:focus,
.input-group:not(.has-validation) > .form-select:focus {
  z-index: 3;
}

.form-check-input {
  border-color: var(--ad-border-strong);
  transition: background-color var(--ad-ui-transition-fast), border-color var(--ad-ui-transition-fast), box-shadow var(--ad-ui-transition-fast);
}

.form-check-input:checked {
  background-color: var(--ad-primary);
  border-color: var(--ad-primary);
}

.form-check-input:focus {
  border-color: var(--ad-primary);
  box-shadow: 0 0 0 3px var(--ad-primary-soft);
}

.form-check-label {
  font-size: var(--ad-text-sm);
  color: var(--ad-text-primary);
  padding-top: 0.1rem;
}

.form-switch .form-check-input {
  cursor: pointer;
}

.valid-feedback,
.invalid-feedback {
  font-size: var(--ad-text-xs);
  font-weight: var(--ad-weight-medium);
  margin-top: 0.3rem;
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--ad-success);
  background-image: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--ad-danger);
  background-image: none;
}

fieldset {
  border: 1px solid var(--ad-fieldset-border);
  border-radius: var(--ad-fieldset-radius);
  background: var(--ad-fieldset-bg);
  padding: var(--ad-space-5) var(--ad-space-4) var(--ad-space-4);
  margin-bottom: var(--ad-space-4);
}

legend {
  font-size: var(--ad-text-sm);
  font-weight: var(--ad-weight-semibold);
  color: var(--ad-legend-text);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--ad-legend-bg);
  border: 1px solid var(--ad-legend-border);
  width: auto;
  float: none;
  margin-bottom: 0;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: calc(1.5em + 0.5rem + 2px);
  border-color: var(--ad-border) !important;
  border-radius: var(--ad-input-radius) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color var(--ad-ui-transition), box-shadow var(--ad-ui-transition);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.5em + 0.5rem);
  padding-left: 0.75rem;
  color: var(--ad-text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.4rem;
}

.select2-dropdown {
  border-color: var(--ad-s2-dropdown-border) !important;
  border-radius: var(--ad-s2-dropdown-radius) !important;
  box-shadow: var(--ad-s2-dropdown-shadow) !important;
  overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--ad-s2-option-hover) !important;
  color: var(--ad-text-heading) !important;
}

.select2-container--default .select2-results__option--selected {
  background: var(--ad-s2-option-selected) !important;
  color: var(--ad-primary) !important;
  font-weight: var(--ad-weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════════
   7. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  font-weight: var(--ad-btn-weight);
  letter-spacing: 0.01em;
  border-radius: var(--ad-btn-radius);
  transition:
    transform var(--ad-ui-transition-fast),
    box-shadow var(--ad-ui-transition),
    background-color var(--ad-ui-transition),
    border-color var(--ad-ui-transition),
    color var(--ad-ui-transition);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 0;
  box-shadow: var(--ad-focus-ring) !important;
}

.btn-primary,
.btn-success {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover,
.btn-success:hover {
  box-shadow: 0 4px 14px rgba(var(--brand-blue-rgb, 0, 123, 255), 0.28);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  background: var(--ad-bg-surface);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  transform: translateY(-1px);
}

.btn-sm {
  border-radius: calc(var(--ad-btn-radius) - 2px);
}

.btn i[class*="ti"],
.btn .fa {
  vertical-align: -0.12em;
}

.btn-group > .btn {
  border-radius: 0;
}

.btn-group > .btn:first-child {
  border-top-left-radius: var(--ad-btn-radius);
  border-bottom-left-radius: var(--ad-btn-radius);
}

.btn-group > .btn:last-child {
  border-top-right-radius: var(--ad-btn-radius);
  border-bottom-right-radius: var(--ad-btn-radius);
}

/* ═══════════════════════════════════════════════════════════════════
   8. ALERTS
   ═══════════════════════════════════════════════════════════════════ */
.alert {
  border: 1px solid transparent;
  border-radius: var(--ad-radius-sm);
  padding: 0.85rem 1rem 0.85rem 1.15rem;
  border-left-width: 4px;
  box-shadow: var(--ad-surface-elevation-1);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.alert-primary {
  border-left-color: var(--ad-primary);
  background: var(--ad-primary-softer);
  color: var(--ad-text-primary);
}

.alert-success {
  border-left-color: var(--ad-success);
  background: var(--ad-feedback-success-bg);
  color: var(--ad-text-primary);
}

.alert-danger {
  border-left-color: var(--ad-danger);
  background: var(--ad-feedback-danger-bg);
  color: var(--ad-text-primary);
}

.alert-warning {
  border-left-color: var(--ad-warning);
  background: var(--ad-badge-warning-bg);
  color: var(--ad-text-primary);
}

.alert-info {
  border-left-color: var(--ad-info);
  background: var(--ad-badge-info-bg);
  color: var(--ad-text-primary);
}

.alert .btn-close {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--ad-ui-transition-fast);
}

.alert .btn-close:hover {
  opacity: 1;
}

.alert-container .alert {
  margin-bottom: 0.65rem;
}

.alert-container .alert:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   9. TABS
   ═══════════════════════════════════════════════════════════════════ */
.nav-tabs {
  gap: 0.25rem;
  border-bottom: 1px solid var(--ad-border);
  padding-bottom: 0;
  margin-bottom: var(--ad-space-5);
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  padding: 0.55rem 1rem;
  border-radius: var(--ad-radius-sm) var(--ad-radius-sm) 0 0;
  transition: color var(--ad-ui-transition), background var(--ad-ui-transition), border-color var(--ad-ui-transition);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  background: var(--ad-primary-softer);
  border-color: var(--ad-border-subtle) var(--ad-border-subtle) transparent;
  color: var(--ad-text-heading);
}

.nav-tabs .nav-link.active {
  color: var(--ad-primary);
  font-weight: var(--ad-weight-semibold);
  background: var(--ad-tab-active-bg);
  border-color: var(--ad-border) var(--ad-border) var(--ad-tab-active-bg);
  box-shadow: 0 -2px 0 var(--ad-primary) inset;
}

.nav-tabs .nav-link i[class*="ti"] {
  margin-right: 0.35rem;
  vertical-align: -0.1em;
  opacity: 0.85;
}

.nav-tabs .nav-link.active i[class*="ti"] {
  opacity: 1;
}

.ad-reg-catalog-tabs .nav-tabs {
  background: var(--ad-bg-muted);
  border: 1px solid var(--ad-border-subtle);
  border-radius: var(--ad-radius-sm);
  padding: 0.3rem;
  gap: 0.2rem;
}

.ad-reg-catalog-tabs .nav-tabs .nav-link {
  border-radius: calc(var(--ad-radius-sm) - 2px);
  margin-bottom: 0;
  border: none;
}

.ad-reg-catalog-tabs .nav-tabs .nav-link.active {
  box-shadow: var(--ad-surface-elevation-1);
  border: 1px solid var(--ad-border-subtle);
}

/* Pills variant */
.nav-pills {
  gap: 0.35rem;
}

.nav-pills .nav-link {
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: var(--ad-text-sm);
  font-weight: var(--ad-weight-medium);
  color: var(--ad-text-secondary);
  transition: background var(--ad-ui-transition), color var(--ad-ui-transition);
}

.nav-pills .nav-link:hover {
  background: var(--ad-primary-softer);
  color: var(--ad-text-heading);
}

.nav-pills .nav-link.active {
  background: var(--ad-primary);
  color: #fff;
  font-weight: var(--ad-weight-semibold);
  box-shadow: 0 2px 8px rgba(var(--brand-blue-rgb, 0, 123, 255), 0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   10. ACCORDIONS
   ═══════════════════════════════════════════════════════════════════ */
.accordion {
  --bs-accordion-border-color: var(--ad-border);
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: 0.85rem;
  --bs-accordion-body-padding-x: 1rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--ad-primary);
  --bs-accordion-active-bg: var(--ad-primary-softer);
  --bs-accordion-btn-focus-box-shadow: var(--ad-focus-ring);
  gap: 0.5rem;
}

.accordion-item {
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius-sm) !important;
  overflow: hidden;
  background: var(--ad-bg-surface);
  box-shadow: var(--ad-surface-elevation-1);
}

.accordion-item + .accordion-item {
  margin-top: 0.5rem;
  border-top: 1px solid var(--ad-border);
}

.accordion-button {
  font-size: var(--ad-text-sm);
  font-weight: var(--ad-weight-semibold);
  color: var(--ad-text-heading);
  background: var(--ad-bg-muted);
  transition: background var(--ad-ui-transition), color var(--ad-ui-transition);
}

.accordion-button:not(.collapsed) {
  color: var(--ad-primary);
  background: linear-gradient(90deg, var(--ad-primary-softer), transparent);
  box-shadow: none;
}

.accordion-button::after {
  opacity: 0.65;
  transition: transform var(--ad-ui-transition), opacity var(--ad-ui-transition);
}

.accordion-button:not(.collapsed)::after {
  opacity: 1;
}

.accordion-body {
  font-size: var(--ad-text-sm);
  color: var(--ad-text-secondary);
  line-height: var(--ad-leading-base);
}

/* ═══════════════════════════════════════════════════════════════════
   11. TABLES & DATATABLES
   ═══════════════════════════════════════════════════════════════════ */
.table {
  --bs-table-hover-bg: var(--ad-primary-softer);
  border-color: var(--ad-border);
}

.table thead th {
  font-weight: var(--ad-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: var(--ad-table-font-sm);
  color: var(--ad-text-secondary);
  background: var(--ad-dt-head-bg);
  border-bottom-width: 1px;
  white-space: nowrap;
}

.table tbody td {
  font-size: var(--ad-table-font-md);
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--ad-primary-softer);
}

.table-hover tbody tr {
  transition: background-color var(--ad-ui-transition-fast);
}

.table-hover tbody tr:hover > * {
  background-color: var(--ad-primary-soft) !important;
}

.table-responsive:not(:has(.dataTables_wrapper)) {
  border-radius: var(--ad-static-table-radius);
  border: 1px solid var(--ad-static-table-border);
  box-shadow: var(--ad-static-table-shadow);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--ad-dt-control-r) !important;
  border-color: var(--ad-border) !important;
}

.dataTables_wrapper .pagination .page-link {
  border-radius: 8px !important;
  margin: 0 2px;
  border-color: var(--ad-border);
  color: var(--ad-text-secondary);
  font-size: var(--ad-text-sm);
  transition: background var(--ad-ui-transition-fast), color var(--ad-ui-transition-fast);
}

.dataTables_wrapper .pagination .page-item.active .page-link {
  background: var(--ad-primary) !important;
  border-color: var(--ad-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--brand-blue-rgb, 0, 123, 255), 0.25);
}

.dataTables_wrapper .pagination .page-link:hover {
  background: var(--ad-primary-softer);
  color: var(--ad-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   12. BADGES, BREADCRUMBS, LIST GROUPS
   ═══════════════════════════════════════════════════════════════════ */
.badge {
  letter-spacing: 0.02em;
}

.breadcrumb {
  font-size: var(--ad-text-sm);
  padding: 0.5rem 0.85rem;
  border-radius: var(--ad-radius-sm);
  background: var(--ad-bg-muted);
  border: 1px solid var(--ad-border-subtle);
  margin-bottom: var(--ad-space-4);
}

.breadcrumb-item + .breadcrumb-item::before {
  opacity: 0.45;
}

.breadcrumb-item.active {
  color: var(--ad-text-heading);
  font-weight: var(--ad-weight-medium);
}

.list-group-item {
  border-color: var(--ad-border);
  padding: 0.75rem 1rem;
  transition: background var(--ad-ui-transition-fast);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--ad-primary-softer);
  color: var(--ad-text-heading);
}

.list-group-item.active {
  background: var(--ad-primary);
  border-color: var(--ad-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   13. DROPDOWNS, MODALS, OVERLAYS
   ═══════════════════════════════════════════════════════════════════ */
.dropdown-menu,
.profile-menu,
.theme-menu {
  border-radius: var(--ad-radius-sm) !important;
  border: 1px solid var(--ad-border) !important;
  padding: 0.35rem;
  box-shadow: var(--ad-surface-elevation-3) !important;
}

[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .profile-menu,
[data-theme="dark"] .theme-menu {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.dropdown-item {
  border-radius: calc(var(--ad-radius-sm) - 2px);
  padding: 0.45rem 0.75rem;
  font-size: var(--ad-text-sm);
  transition: background var(--ad-ui-transition-fast), color var(--ad-ui-transition-fast);
}

.dropdown-item i[class*="ti"] {
  margin-right: 0.45rem;
  opacity: 0.75;
  vertical-align: -0.1em;
}

.dropdown-divider {
  margin: 0.35rem 0;
}

.modal-content {
  border-radius: var(--ad-radius) !important;
  overflow: hidden;
  border: 1px solid var(--ad-border);
  box-shadow: var(--ad-surface-elevation-3) !important;
}

.modal-header {
  padding: 1rem 1.25rem;
  background: var(--ad-card-header-bg);
  border-bottom: 1px solid var(--ad-border);
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  padding: 0.85rem 1.25rem;
  background: var(--ad-card-footer-bg);
  border-top: 1px solid var(--ad-border);
  gap: 0.5rem;
}

.tooltip-inner,
.popover {
  box-shadow: var(--ad-overlay-shadow);
}

.popover-header {
  font-weight: var(--ad-weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════════
   14. DASHBOARD WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
.widget-small {
  border-radius: var(--ad-radius);
  overflow: hidden;
  box-shadow: var(--ad-surface-elevation-1);
  transition: transform var(--ad-ui-transition), box-shadow var(--ad-ui-transition);
}

.widget-small:hover {
  transform: translateY(-2px);
  box-shadow: var(--ad-surface-elevation-2);
}

.chart-panel {
  border-radius: var(--ad-radius);
}

.ad-dash-section__head {
  margin-bottom: var(--ad-space-4);
}

/* ═══════════════════════════════════════════════════════════════════
   15. MODULE LAYOUT SPACING
   ═══════════════════════════════════════════════════════════════════ */
/* Module split layouts — use Bootstrap gutters (g-*, gx-*, gy-*); do NOT set gap on .row
   or col-md-* columns wrap to a second line (25% + gap + 75% > 100%). */
.ad-mpdep-layout,
.ad-mpwdr-layout,
.ad-mpprf-layout {
  align-items: stretch;
}

.ad-reg-layout,
.ad-reg-rp-layout {
  align-items: flex-start;
}

.app-content form > .row {
  --bs-gutter-y: var(--ad-form-row-gap);
}

.app-content .form-group,
.card-body .form-group {
  margin-bottom: var(--ad-form-group-gap);
}

/* ═══════════════════════════════════════════════════════════════════
   16. SCROLLBARS & SELECTION
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-navy-rgb, 11, 17, 32), 0.18);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-navy-rgb, 11, 17, 32), 0.28);
    background-clip: padding-box;
  }

  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    background-clip: padding-box;
  }

  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
    background-clip: padding-box;
  }
}

::selection {
  background: var(--ad-primary-soft);
  color: var(--ad-text-heading);
}

/* ═══════════════════════════════════════════════════════════════════
   17. FOCUS & ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   18. DARK MODE
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .ad-reg-panel:hover,
[data-theme="dark"] .ad-astmt-filter-panel:hover,
[data-theme="dark"] .ad-astmt-results-panel:hover,
[data-theme="dark"] .ad-mprpt-filter-panel:hover,
[data-theme="dark"] .ad-mprpt-results-panel:hover {
  box-shadow: var(--ad-glass-shadow), 0 12px 40px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .alert {
  box-shadow: none;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  background: rgba(var(--brand-blue-rgb, 0, 123, 255), 0.12);
}

[data-theme="dark"] .accordion-button {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .form-control:not([type="checkbox"]):not([type="radio"]):not(textarea),
[data-theme="dark"] .form-select {
  box-shadow: none;
}

[data-theme="dark"] .ad-reg-panel__meta {
  background: rgba(var(--brand-blue-rgb, 0, 123, 255), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   19. REDUCED MOTION & MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .app-content,
  .btn,
  .ad-reg-panel,
  .ad-page-header,
  .widget-small,
  .card,
  .accordion-button::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 767.98px) {
  :root,
  [data-theme="light"] {
    --ad-content-padding-x: 1rem;
    --ad-content-padding-y: 1rem;
    --ad-section-gap: 1rem;
  }

  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ad-page-header {
    padding: 0.85rem 1rem;
  }

  .modal-body {
    padding: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   20. LOGIN / AUTH PAGE
   ═══════════════════════════════════════════════════════════════════ */
body.admin-auth-page .admin-auth-panel {
  box-shadow: var(--ad-surface-elevation-3);
  border-radius: var(--ad-radius);
}

body.admin-auth-page .admin-auth-input .form-control:not([type="checkbox"]):not([type="radio"]) {
  border-radius: var(--ad-input-radius);
}

body.admin-auth-page .btn-primary {
  border-radius: var(--ad-btn-radius);
  min-height: 2.75rem;
  font-size: var(--ad-text-base);
}

/* ═══════════════════════════════════════════════════════════════════
   21. PROGRESS, PAGINATION, OFFCANVAS
   ═══════════════════════════════════════════════════════════════════ */
.progress {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--ad-bg-muted);
  overflow: hidden;
}

.progress-bar {
  border-radius: 999px;
}

.pagination {
  gap: 0.25rem;
}

.page-link {
  border-radius: 8px !important;
  margin: 0 1px;
  border-color: var(--ad-border);
  color: var(--ad-text-secondary);
  font-size: var(--ad-text-sm);
  transition: background var(--ad-ui-transition-fast), color var(--ad-ui-transition-fast);
}

.page-item.active .page-link {
  background: var(--ad-primary);
  border-color: var(--ad-primary);
  box-shadow: 0 2px 6px rgba(var(--brand-blue-rgb, 0, 123, 255), 0.25);
}

.page-link:hover {
  background: var(--ad-primary-softer);
  color: var(--ad-primary);
  border-color: var(--ad-border);
}

.offcanvas {
  border-left: 1px solid var(--ad-border);
  box-shadow: var(--ad-surface-elevation-3);
}

.offcanvas-header {
  background: var(--ad-card-header-bg);
  border-bottom: 1px solid var(--ad-border);
}