/**
 * CMS — responsive Material 3 application layer.
 * Keeps existing Bootstrap-based screens functional while applying shared
 * Material roles, surfaces, interaction states, and adaptive layout rules.
 */
:root {
    --brand-primary: #0D6EFD;
    --brand-accent: #F5A623;
    --brand-background: #F8FAFC;
    --brand-card: #FFFFFF;
    --brand-sidebar: #0F172A;
    --brand-sidebar-text: #E2E8F0;
    --brand-success: #10B981;
    --brand-danger: #EF4444;
    --brand-warning: #F59E0B;
    --brand-gold-on: #302000;

    --md3-sidebar-width: 296px;
    --md3-content-max-width: 1680px;
    --md3-content-padding: clamp(16px, 2.4vw, 36px);
    --md3-grid-gutter: 20px;
    --md3-font-sans: 'Plus Jakarta Sans', 'Inter', 'Roboto', Arial, sans-serif;
    --md3-font-arabic: 'Estedad', 'Vazirmatn', 'Noto Sans Arabic', sans-serif;
    --md3-focus-ring: 0 0 0 3px color-mix(in srgb, var(--md3-primary) 26%, transparent);
    --md3-tertiary: var(--brand-accent);
    --md3-success: var(--brand-success);
    --md3-error: var(--brand-danger);
    --md3-error-foreground: #B91C1C;
    --md3-warning: var(--brand-warning);
    --md3-warning-foreground: #8A4B00;
    --md3-success-foreground: #047857;
    --md3-background: var(--brand-background);
    --md3-surface: var(--brand-card);
    --md3-shadow: rgba(15, 23, 42, 0.14);

    --ems-primary-hover: var(--md3-primary);
    --ems-accent-hover: var(--md3-tertiary);
    --ems-transition: color 180ms cubic-bezier(0.2, 0, 0, 1),
        background-color 180ms cubic-bezier(0.2, 0, 0, 1),
        border-color 180ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
        transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

* {
    scrollbar-color: var(--md3-outline-variant) transparent;
}

html {
    min-width: 320px;
    background: var(--md3-background);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body,
body.auth-body {
    min-height: 100vh;
    background: var(--md3-background);
    color: var(--md3-on-background);
    font-family: var(--md3-font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.rtl-mode,
body.rtl-mode input,
body.rtl-mode select,
body.rtl-mode textarea,
body.rtl-mode button {
    font-family: var(--md3-font-arabic);
    letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--md3-on-surface);
    font-family: inherit;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 650; }
h4 { font-size: clamp(1.125rem, 1.6vw, 1.4rem); font-weight: 650; }
h5 { font-size: 1.05rem; font-weight: 600; }
h6 { font-size: 0.95rem; font-weight: 600; }

::selection {
    color: var(--md3-on-primary-container);
    background: var(--md3-primary-container);
}

a {
    color: var(--md3-primary);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--md3-primary);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
    scroll-margin-block: 16px;
}

:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

.ems-wrapper {
    min-height: 100dvh;
    background: var(--md3-background);
}

.ems-sidebar {
    width: var(--md3-sidebar-width);
    background: var(--brand-sidebar);
    border-color: #1E293B;
    box-shadow: var(--md3-elevation-1);
    transition: width 240ms cubic-bezier(0.2, 0, 0, 1),
        transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.sidebar-header {
    min-height: var(--md3-header-height);
    border-color: var(--md3-outline-variant);
}

.brand-link,
.brand-title {
    color: var(--brand-sidebar-text);
}

.brand-title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.brand-badge {
    color: var(--brand-accent);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.sidebar-content {
    padding: 12px 10px;
    overscroll-behavior: contain;
}

.menu-heading {
    padding: 18px 14px 7px;
    color: #94A3B8;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.075em;
}

.menu-group {
    padding: 0;
}

.menu-group-toggle {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 4px;
    border: 0;
    background: transparent;
    color: var(--brand-sidebar-text);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.075em;
    text-align: start;
    text-transform: uppercase;
    cursor: pointer;
}

.menu-group-toggle::after {
    width: 7px;
    height: 7px;
    margin-inline-start: 12px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: '';
    transform: rotate(45deg) translateY(-2px);
    transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.menu-group-toggle[aria-expanded="true"]::after {
    transform: rotate(225deg) translate(-2px, -1px);
}

.menu-group-toggle:hover,
.menu-group-toggle:focus-visible {
    color: #FFFFFF;
}

.menu-sublist {
    overflow: hidden;
    padding: 0;
    margin: 0 0 6px;
    list-style: none;
}

.menu-sublist[hidden] {
    display: none;
}

.menu-sublist .menu-link {
    padding-inline-start: 16px;
}

.menu-sublist.is-floating[data-floating="true"] {
    position: fixed;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(260px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    margin: 0;
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-corner-large);
    background: var(--md3-surface-container);
    box-shadow: var(--md3-elevation-3);
    opacity: 1;
    transform: translateX(0) scale(1);
    transform-origin: top left;
    transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1),
        transform 160ms cubic-bezier(0.2, 0, 0, 1);
    overscroll-behavior: contain;
}

.menu-sublist.is-floating[data-floating="true"].is-entering {
    opacity: 0;
    transform: translateX(-8px) scale(0.98);
}

html[dir="rtl"] .menu-sublist.is-floating[data-floating="true"] {
    transform-origin: top right;
}

html[dir="rtl"] .menu-sublist.is-floating[data-floating="true"].is-entering {
    transform: translateX(8px) scale(0.98);
}

.menu-sublist.is-floating .menu-link {
    justify-content: flex-start;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--md3-shape-corner-medium);
    color: var(--md3-on-surface);
    font-weight: 550;
}

.menu-sublist.is-floating .menu-link i {
    color: currentColor;
}

.menu-sublist.is-floating .menu-link:hover,
.menu-sublist.is-floating .menu-link:focus-visible {
    background: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
}

.menu-sublist.is-floating .menu-item.active .menu-link,
.menu-sublist.is-floating .menu-item.active .menu-link:hover,
.menu-sublist.is-floating .menu-item.active .menu-link:focus-visible {
    background: var(--md3-primary);
    color: var(--md3-on-primary);
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--brand-accent);
}

.menu-sublist.is-floating .menu-item.active .menu-link i {
    color: var(--brand-accent);
}

.menu-sublist.is-floating .menu-link:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

.menu-sublist.is-floating .menu-link i {
    flex: 0 0 24px;
}

.menu-item {
    margin-block: 2px;
}

.menu-link {
    min-height: 48px;
    gap: 14px;
    padding: 0 14px;
    border-radius: var(--md3-shape-corner-full);
    color: var(--brand-sidebar-text);
    font-size: 0.875rem;
    font-weight: 550;
    transition: var(--ems-transition);
}

.menu-link i {
    flex: 0 0 24px;
    color: currentColor;
    font-size: 1.25rem;
    text-align: center;
}

.menu-link:hover {
    background: #1E293B;
    color: #FFFFFF;
    transform: none;
}

.menu-item.active .menu-link {
    background: var(--brand-primary);
    color: #FFFFFF;
    font-weight: 650;
    box-shadow: inset 3px 0 0 var(--brand-accent);
}

.menu-item.active .menu-link i {
    color: var(--brand-accent);
}

.sidebar-footer {
    background: var(--brand-sidebar);
    border-color: #1E293B;
}

.user-card-sm {
    min-height: 56px;
    gap: 10px;
    padding: 6px 8px;
    background: #1E293B;
    border-radius: var(--md3-shape-corner-large);
}

.user-profile-btn.md3-icon-btn {
    width: auto;
    min-width: 44px;
    padding-inline: 6px;
    border-radius: var(--md3-shape-corner-full);
}

.user-card-sm .md3-avatar {
    flex: 0 0 38px;
}

.user-role {
    display: block;
    overflow: hidden;
    color: #CBD5E1;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar {
    width: var(--md3-sidebar-collapsed-width);
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .brand-text,
.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-text,
.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-heading,
.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle,
.ems-wrapper.sidebar-collapsed .ems-sidebar .user-meta,
.ems-wrapper.sidebar-collapsed .ems-sidebar .btn-logout {
    display: none !important;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .sidebar-header {
    justify-content: center;
    padding-inline: 8px;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .brand-link {
    justify-content: center;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-link {
    justify-content: center;
    padding-inline: 8px;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-heading {
    display: block !important;
    padding: 0;
    margin: 0;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 2px auto;
    border-radius: var(--md3-shape-corner-large);
    color: var(--brand-sidebar-text);
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle::after,
.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-label {
    display: none;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-icon {
    margin: 0 !important;
    font-size: 1.3rem;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle:hover,
.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle[aria-expanded="true"] {
    background: var(--brand-primary);
    color: #FFFFFF;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group.has-active-item .menu-group-toggle {
    color: var(--brand-accent);
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group.has-active-item .menu-group-toggle:hover,
.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group.has-active-item .menu-group-toggle[aria-expanded="true"] {
    background: var(--brand-primary);
    color: #FFFFFF;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .menu-link i {
    flex-basis: auto;
    margin: 0 !important;
}

.ems-wrapper.sidebar-collapsed .ems-sidebar .user-card-sm {
    justify-content: center;
    padding: 6px;
}

.ems-wrapper.sidebar-collapsed .ems-main {
    margin-inline-start: var(--md3-sidebar-collapsed-width);
}

.drawer-scrim {
    display: none;
}

.ems-main {
    min-width: 0;
    margin-inline-start: var(--md3-sidebar-width);
    background: var(--md3-background);
}

.ems-header {
    min-height: var(--md3-header-height);
    height: auto;
    padding-inline: clamp(16px, 2vw, 32px);
    background: color-mix(in srgb, var(--md3-surface) 92%, transparent);
    border-color: var(--md3-outline-variant);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--md3-outline-variant) 45%, transparent);
    backdrop-filter: blur(18px);
}

.header-left,
.header-right {
    min-width: 0;
    gap: clamp(8px, 1vw, 14px);
}

.header-search {
    width: min(32vw, 420px);
}

.header-search .form-control {
    width: 100%;
    min-height: 44px;
    padding-inline-start: 42px;
    border: 1px solid transparent;
    border-radius: var(--md3-shape-corner-full);
    background: var(--md3-surface-container-high);
    color: var(--md3-on-surface);
}

.header-search .form-control:focus {
    width: 100%;
    border-color: var(--md3-primary);
    background: var(--md3-surface-container-low);
    box-shadow: var(--md3-focus-ring);
}

.header-search .search-icon {
    inset-inline-start: 15px;
    inset-inline-end: auto;
    z-index: 1;
    pointer-events: none;
}

.btn-icon,
.md3-icon-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md3-on-surface-variant);
}

.btn-icon:hover,
.md3-icon-btn:hover,
.user-profile-btn:hover {
    background: color-mix(in srgb, var(--md3-on-surface) 8%, transparent);
    color: var(--md3-on-surface);
}

.ems-content {
    width: min(100%, var(--md3-content-max-width));
    margin-inline: auto;
    padding: var(--md3-content-padding);
}

.ems-footer {
    padding: 18px var(--md3-content-padding);
    background: var(--md3-surface);
    border-color: var(--md3-outline-variant);
}

.ems-footer > .container-fluid {
    max-width: var(--md3-content-max-width);
    margin-inline: auto;
}

.card,
.card-elevated,
.card-kpi,
.md3-card,
.glass-card {
    overflow: hidden;
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-corner-large);
    background: var(--md3-surface-container-low);
    color: var(--md3-on-surface);
    box-shadow: var(--md3-elevation-1);
    transition: border-color 180ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
        transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.glass-card {
    border: 1px solid var(--md3-outline-variant) !important;
    border-radius: var(--md3-shape-corner-large) !important;
    background: var(--md3-surface-container-low) !important;
    box-shadow: var(--md3-elevation-1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.glass-card:hover {
    border-color: color-mix(in srgb, var(--md3-primary) 24%, var(--md3-outline-variant)) !important;
    box-shadow: var(--md3-elevation-2) !important;
    transform: none !important;
}

.badge-soft-primary { background: var(--md3-primary-container); color: var(--md3-on-primary-container); }
.badge-soft-success { background: var(--md3-success-container); color: var(--md3-on-success-container); }
.badge-soft-danger { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.badge-soft-warning { background: var(--md3-warning-container); color: var(--md3-on-warning-container); }
.badge-soft-info { background: var(--md3-info-container); color: var(--md3-on-info-container); }
.badge-soft-neutral { background: var(--md3-surface-container-high); color: var(--md3-on-surface-variant); }

.kpi-trend-pill.positive { background: var(--md3-success-container); color: var(--md3-on-success-container); }
.kpi-trend-pill.negative { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.kpi-trend-pill.neutral { background: var(--md3-surface-container-high); color: var(--md3-on-surface-variant); }

.card:hover,
.card-elevated:hover,
.card-kpi:hover,
.md3-card--elevated:hover {
    border-color: color-mix(in srgb, var(--md3-primary) 24%, var(--md3-outline-variant));
    box-shadow: var(--md3-elevation-2);
}

.card .card-header,
.card .card-footer {
    border-color: var(--md3-outline-variant);
    background: transparent;
}

.card .card-body {
    color: var(--md3-on-surface);
}

.card-kpi {
    height: 100%;
}

.card-kpi .card-body,
.md3-kpi-card {
    padding: clamp(18px, 2vw, 24px);
}

.kpi-label {
    color: var(--md3-on-surface-variant);
    font-size: 0.8125rem;
    font-weight: 550;
}

.kpi-value {
    color: var(--md3-on-surface);
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.kpi-icon-wrap,
.action-icon {
    border-radius: var(--md3-shape-corner-medium);
}

.bg-primary-gradient { background: var(--md3-primary); color: var(--md3-on-primary); }
.bg-accent-gradient { background: var(--brand-accent); color: var(--brand-gold-on); }
.bg-success-gradient { background: var(--md3-success); color: var(--md3-on-success); }
.bg-danger-gradient { background: var(--md3-error); color: var(--md3-on-error); }
.bg-warning-gradient { background: var(--md3-warning); color: var(--brand-gold-on); }
.bg-info-gradient { background: var(--md3-info); color: var(--md3-on-info); }

.bg-primary-gradient.text-white { color: var(--md3-on-primary) !important; }
.bg-accent-gradient.text-white,
.bg-warning-gradient.text-white { color: var(--brand-gold-on) !important; }
.bg-success-gradient.text-white { color: var(--md3-on-success) !important; }
.bg-danger-gradient.text-white { color: var(--md3-on-error) !important; }
.bg-info-gradient.text-white { color: var(--md3-on-info) !important; }

.text-success { color: var(--md3-success-foreground) !important; }
.text-danger { color: var(--md3-error-foreground) !important; }
.text-warning { color: var(--md3-warning-foreground) !important; }

.bg-primary {
    background-color: var(--brand-primary) !important;
    color: #FFFFFF;
}

.bg-success {
    background-color: var(--brand-success) !important;
    color: var(--md3-on-success);
}

.bg-danger {
    background-color: var(--brand-danger) !important;
    color: var(--md3-on-error);
}

.bg-warning {
    background-color: var(--brand-warning) !important;
    color: var(--brand-gold-on);
}

.bg-info {
    background-color: var(--brand-primary) !important;
    color: #FFFFFF;
}

.bg-success.text-white {
    color: var(--md3-on-success) !important;
}

.bg-warning.text-white {
    color: var(--brand-gold-on) !important;
}

.bg-danger.text-white {
    color: var(--md3-on-error) !important;
}

.btn {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: var(--md3-shape-corner-full);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: var(--ems-transition);
}

.btn::after {
    pointer-events: none;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    border-color: var(--md3-primary);
    background: var(--md3-primary);
    color: var(--md3-on-primary);
    box-shadow: var(--md3-elevation-1);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--md3-primary);
    background: var(--md3-primary);
    color: var(--md3-on-primary);
    box-shadow: var(--md3-elevation-2);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus {
    border-color: var(--brand-accent);
    background: var(--brand-accent);
    color: var(--brand-gold-on);
}

.header-right [data-bs-target="#quickActionsModal"] {
    border-color: var(--brand-accent);
    background: var(--brand-accent);
    color: var(--brand-gold-on);
}

.header-right [data-bs-target="#quickActionsModal"]:hover,
.header-right [data-bs-target="#quickActionsModal"]:focus-visible {
    border-color: var(--brand-accent);
    background: #E89A12;
    color: var(--brand-gold-on);
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--md3-outline);
    color: var(--md3-primary);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    border-color: var(--md3-outline);
    background: color-mix(in srgb, var(--md3-primary) 10%, transparent);
    color: var(--md3-primary);
}

.btn-success,
.btn-success:hover,
.btn-success:focus {
    border-color: var(--brand-success);
    background: var(--brand-success);
    color: var(--md3-on-success);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
    border-color: var(--brand-danger);
    background: var(--brand-danger);
    color: var(--md3-on-error);
}

.form-control,
.form-select,
.input-group-text {
    min-height: 44px;
    border-color: var(--md3-outline);
    border-radius: var(--md3-shape-corner-extra-small);
    background-color: var(--md3-surface-container-lowest);
    color: var(--md3-on-surface);
    font-family: inherit;
}

textarea.form-control {
    min-height: 112px;
}

.form-control::placeholder {
    color: var(--md3-on-surface-variant);
    opacity: 0.8;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--md3-primary);
    background-color: var(--md3-surface-container-lowest);
    color: var(--md3-on-surface);
    box-shadow: var(--md3-focus-ring);
}

.form-label,
.form-check-label {
    color: var(--md3-on-surface);
    font-weight: 550;
}

.form-text,
.text-muted {
    color: var(--md3-on-surface-variant) !important;
}

.invalid-feedback,
.text-danger {
    color: var(--md3-error) !important;
}

.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 56px;
}

.form-floating > label {
    color: var(--md3-on-surface-variant);
}

.form-check-input {
    border-color: var(--md3-outline);
    background-color: var(--md3-surface-container-lowest);
}

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

.form-check-input:focus {
    border-color: var(--md3-primary);
    box-shadow: var(--md3-focus-ring);
}

.form-switch .form-check-input {
    width: 52px;
    height: 32px;
    border-radius: var(--md3-shape-corner-full);
    background-color: var(--md3-surface-container-high);
    background-size: 24px 24px;
    cursor: pointer;
}

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

.form-switch .form-check-input:focus {
    background-image: var(--bs-form-switch-bg);
}

.table-responsive {
    max-height: min(72vh, 760px);
    border-radius: var(--md3-shape-corner-medium);
    scrollbar-width: thin;
}

.table {
    --bs-table-color: var(--md3-on-surface);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--md3-outline-variant);
    --bs-table-striped-bg: color-mix(in srgb, var(--md3-surface-container) 62%, transparent);
    --bs-table-striped-color: var(--md3-on-surface);
    --bs-table-hover-bg: color-mix(in srgb, var(--md3-primary) 8%, transparent);
    --bs-table-hover-color: var(--md3-on-surface);
    color: var(--md3-on-surface);
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 0.8rem 0.9rem;
    border-bottom-color: var(--md3-outline-variant);
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--md3-surface-container-high);
    color: var(--md3-on-surface-variant);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color 140ms ease;
}

.dropdown-menu {
    z-index: 1100;
    padding: 6px;
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-corner-medium);
    background: var(--md3-surface-container);
    box-shadow: var(--md3-elevation-3);
    color: var(--md3-on-surface);
}

.dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: var(--md3-shape-corner-small);
    color: var(--md3-on-surface);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: color-mix(in srgb, var(--md3-on-surface) 8%, transparent);
    color: var(--md3-on-surface);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
}

.modal-backdrop.show {
    opacity: 0.5;
    backdrop-filter: blur(3px);
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-corner-extra-large);
    background: var(--md3-surface-container);
    color: var(--md3-on-surface);
    box-shadow: var(--md3-elevation-3);
}

.modal-header,
.modal-footer {
    border-color: var(--md3-outline-variant);
}

.modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.98);
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.modal.show .modal-dialog {
    transform: none;
}

.nav-tabs {
    gap: 4px;
    border-color: var(--md3-outline-variant);
}

.nav-tabs .nav-link {
    min-height: 44px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--md3-shape-corner-small) var(--md3-shape-corner-small) 0 0;
    color: var(--md3-on-surface-variant);
}

.nav-tabs .nav-link.active {
    border-color: var(--md3-primary);
    background: transparent;
    color: var(--md3-primary);
}

.page-link {
    min-width: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    border-color: var(--md3-outline-variant);
    background: var(--md3-surface-container-low);
    color: var(--md3-primary);
}

.page-link:hover,
.page-item.active .page-link {
    border-color: var(--md3-primary);
    background: var(--md3-primary);
    color: var(--md3-on-primary);
}

.alert {
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-corner-medium);
    color: var(--md3-on-surface);
}

.quick-action-card {
    min-height: 112px;
    justify-content: center;
    border-radius: var(--md3-shape-corner-large);
    background: var(--md3-surface-container);
}

.quick-action-card:hover {
    background: var(--md3-surface-container-high);
    box-shadow: var(--md3-elevation-2);
    transform: translateY(-1px);
}

.auth-body {
    padding: clamp(16px, 5vw, 48px);
    background:
        radial-gradient(ellipse at 15% 10%, color-mix(in srgb, var(--md3-primary-container) 36%, transparent), transparent 38%),
        var(--md3-background);
}

.auth-card {
    padding: clamp(24px, 5vw, 40px);
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--md3-shape-corner-extra-large);
    background: var(--md3-surface-container-low);
    box-shadow: var(--md3-elevation-2);
    color: var(--md3-on-surface);
}

.auth-card h1,
.auth-card h2,
.auth-card h3,
.auth-card h4,
.auth-card h5 {
    color: var(--md3-on-surface);
}

.chart-container-card,
.chart-card,
[class*="chart-container"] {
    min-width: 0;
}

canvas {
    max-width: 100%;
}

[data-theme="dark"] body,
[data-theme="dark"] .ems-main,
[data-theme="dark"] .ems-content,
[data-theme="dark"] .ems-wrapper {
    background: var(--md3-background);
    color: var(--md3-on-background);
}

[data-theme="dark"] {
    --brand-primary: #1D4ED8;
    --brand-accent: #F5A623;
    --brand-background: #0B1220;
    --brand-card: #0F172A;
    --brand-sidebar: #0F172A;
    --brand-sidebar-text: #E2E8F0;
    --brand-success: #10B981;
    --brand-danger: #EF4444;
    --brand-warning: #F59E0B;
    --md3-tertiary: var(--brand-accent);
    --md3-success: var(--brand-success);
    --md3-error: var(--brand-danger);
    --md3-error-foreground: #FCA5A5;
    --md3-warning: var(--brand-warning);
    --md3-warning-foreground: #FBBF24;
    --md3-success-foreground: #6EE7B7;
    --md3-background: var(--brand-background);
    --md3-surface: var(--brand-card);
    --md3-shadow: rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .ems-header {
    background: color-mix(in srgb, var(--md3-surface-container) 92%, transparent);
}

[data-theme="dark"] .brand-title,
[data-theme="dark"] .text-dark,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--md3-on-surface);
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .table .bg-light,
[data-theme="dark"] .demo-accounts-box {
    border-color: var(--md3-outline-variant) !important;
    background-color: var(--md3-surface-container) !important;
    color: var(--md3-on-surface) !important;
}

[data-theme="dark"] .bg-primary-subtle {
    background-color: var(--md3-primary-container) !important;
    color: var(--md3-on-primary-container) !important;
}

[data-theme="dark"] .bg-secondary-subtle {
    background-color: var(--md3-secondary-container) !important;
    color: var(--md3-on-secondary-container) !important;
}

[data-theme="dark"] .bg-success-subtle {
    background-color: var(--md3-success-container) !important;
    color: var(--md3-on-success-container) !important;
}

[data-theme="dark"] .bg-danger-subtle {
    background-color: var(--md3-error-container) !important;
    color: var(--md3-on-error-container) !important;
}

[data-theme="dark"] .bg-warning-subtle {
    background-color: var(--md3-warning-container) !important;
    color: var(--md3-on-warning-container) !important;
}

[data-theme="dark"] .bg-info-subtle {
    background-color: var(--md3-info-container) !important;
    color: var(--md3-on-info-container) !important;
}

[data-theme="dark"] .text-primary {
    color: var(--md3-primary) !important;
}

[data-theme="dark"] .text-success {
    color: var(--md3-success) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--md3-warning) !important;
}

[data-theme="dark"] .text-info {
    color: var(--md3-info) !important;
}

[data-theme="dark"] .ems-sidebar,
[data-theme="dark"] .sidebar-footer {
    background: var(--brand-sidebar);
    border-color: #1E293B;
}

[data-theme="dark"] .menu-link,
[data-theme="dark"] .menu-group-toggle {
    color: var(--brand-sidebar-text);
}

[data-theme="dark"] .menu-link:hover {
    background: #1E293B;
    color: #FFFFFF;
}

[data-theme="dark"] .menu-item.active .menu-link {
    background: var(--brand-primary);
    color: #FFFFFF;
    box-shadow: inset 3px 0 0 var(--brand-accent);
}

[data-theme="dark"] .menu-item.active .menu-link i {
    color: var(--brand-accent);
}

[data-theme="dark"] .menu-group.has-active-item .menu-group-toggle {
    color: var(--brand-accent);
}

[data-theme="dark"] .menu-group-toggle[aria-expanded="true"],
[data-theme="dark"] .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle:hover,
[data-theme="dark"] .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle[aria-expanded="true"] {
    background: var(--brand-primary);
    color: #FFFFFF;
}

[data-theme="dark"] .header-right [data-bs-target="#quickActionsModal"]:hover,
[data-theme="dark"] .header-right [data-bs-target="#quickActionsModal"]:focus-visible {
    background: #E89A12;
    color: var(--brand-gold-on);
}

[data-theme="dark"] .bg-primary-subtle {
    background: var(--md3-primary-container) !important;
    color: var(--md3-on-primary-container) !important;
}

[data-theme="dark"] .bg-success {
    color: var(--md3-on-success);
}

[data-theme="dark"] .bg-danger {
    color: var(--md3-on-error);
}

[data-theme="dark"] .bg-warning {
    color: var(--brand-gold-on);
}

@media (min-width: 1600px) {
    :root {
        --md3-grid-gutter: 24px;
    }
}

@media (max-width: 991.98px) {
    .ems-sidebar {
        width: min(var(--md3-sidebar-width), calc(100vw - 56px));
        inset-inline-start: 0;
        inset-inline-end: auto;
        transform: translateX(-105%);
        box-shadow: var(--md3-elevation-4);
    }

    .ems-sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .ems-sidebar {
        transform: translateX(105%);
    }

    html[dir="rtl"] .ems-sidebar.show {
        transform: translateX(0);
    }

    .ems-main,
    .ems-wrapper.sidebar-collapsed .ems-main {
        margin-inline-start: 0 !important;
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar {
        width: min(var(--md3-sidebar-width), calc(100vw - 56px));
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar .brand-text,
    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-text,
    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-heading,
    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle,
    .ems-wrapper.sidebar-collapsed .ems-sidebar .user-meta,
    .ems-wrapper.sidebar-collapsed .ems-sidebar .btn-logout {
        display: initial !important;
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-link {
        justify-content: flex-start;
        padding-inline: 14px;
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        justify-content: space-between;
        padding: 8px 14px 4px;
        margin: 0;
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-toggle::after,
    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-label {
        display: initial;
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-group-icon {
        display: none;
    }

    .ems-wrapper.sidebar-collapsed .ems-sidebar .menu-link i {
        flex-basis: 24px;
    }

    .drawer-scrim.is-visible {
        position: fixed;
        inset: 0;
        z-index: 1035;
        display: block;
        border: 0;
        background: rgba(20, 18, 24, 0.48);
        backdrop-filter: blur(2px);
    }

    .ems-header {
        padding-inline: 14px;
    }

    .header-search {
        width: min(42vw, 360px);
    }
}

@media (max-width: 575.98px) {
    .ems-header {
        min-height: 60px;
        gap: 8px;
    }

    .header-left,
    .header-right {
        gap: 4px;
    }

    .btn-icon,
    .md3-icon-btn {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .ems-content {
        padding: 16px;
    }

    .ems-footer {
        padding: 16px;
    }

    .auth-container {
        max-width: 440px;
    }

    .table > :not(caption) > * > * {
        padding: 0.65rem;
    }

    .modal-dialog {
        margin: 12px;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 24px);
    }
}

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

@media print {
    .table-responsive {
        max-height: none;
        overflow: visible;
    }
}

/* Shared responsive polish for existing Bootstrap-based screens. */
html[lang="ps-AF"] body.rtl-mode,
html[lang="ps-AF"] body.rtl-mode input,
html[lang="ps-AF"] body.rtl-mode select,
html[lang="ps-AF"] body.rtl-mode textarea,
html[lang="ps-AF"] body.rtl-mode button {
    font-family: 'Noto Sans Arabic', 'Vazirmatn', sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.ems-content > *,
.ems-content .row,
.ems-content .card,
.ems-content .modal-content,
.ems-content .table-responsive,
.ems-content .chart-container,
.ems-content [class*="chart-container"] {
    min-width: 0;
}

.ems-content img,
.ems-content canvas,
.ems-content svg,
.ems-content video {
    max-width: 100%;
}

.card,
.card-elevated,
.card-kpi,
.md3-card,
.glass-card,
.panel-card,
.metric-card,
.finance-summary-card {
    border-radius: 16px;
}

.card,
.card-elevated,
.card-kpi,
.md3-card,
.glass-card,
.panel-card,
.metric-card,
.finance-summary-card,
.quick-action-card {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.045);
}

.card:hover,
.card-elevated:hover,
.card-kpi:hover,
.md3-card--elevated:hover,
.panel-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.075);
}

.btn:focus-visible,
.btn-icon:focus-visible,
.md3-icon-btn:focus-visible,
.menu-link:focus-visible,
.menu-group-toggle:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--md3-primary) 58%, white);
    outline-offset: 2px;
    box-shadow: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--md3-surface-container);
    color: var(--md3-on-surface-variant);
    opacity: 0.78;
}

.dropdown-menu,
.modal-content,
.alert,
.form-control,
.form-select,
.input-group-text {
    border-radius: 12px;
}

.table-responsive {
    overscroll-behavior-inline: contain;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-elevated,
[data-theme="dark"] .card-kpi,
[data-theme="dark"] .md3-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .finance-summary-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767.98px) {
    .ems-header {
        align-items: center;
        flex-wrap: wrap;
        gap: 2px 8px;
        padding-block: 6px;
    }

    .header-left {
        flex: 1 1 100%;
        min-width: 0;
    }

    .header-search {
        display: flex !important;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .header-right {
        flex: 1 1 100%;
        justify-content: flex-end;
        min-width: 0;
    }

    .header-right [data-bs-target="#quickActionsModal"] {
        min-height: 42px;
        padding-inline: 12px;
    }

    .ems-content {
        padding: 14px clamp(12px, 3.5vw, 20px);
    }

    .ems-content .row {
        --bs-gutter-x: 1rem;
    }

    .ems-content .btn-group,
    .ems-content .d-flex.flex-wrap {
        max-width: 100%;
    }

    .ems-content .form-control,
    .ems-content .form-select,
    .ems-content .input-group {
        max-width: 100%;
    }

    .table-responsive {
        max-height: none;
        overflow: visible;
    }

    .table-responsive > table[data-mobile-cards="true"] {
        display: block;
        width: 100%;
    }

    .table-responsive > table[data-mobile-cards="true"] > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody {
        display: grid;
        gap: 10px;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--md3-outline-variant);
        border-radius: 14px;
        background: var(--md3-surface-container-low);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(84px, 38%) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--md3-outline-variant);
        overflow-wrap: anywhere;
        text-align: start;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td::before {
        content: attr(data-label);
        color: var(--md3-on-surface-variant);
        font-size: 0.72rem;
        font-weight: 650;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td[data-label=""]::before {
        display: none;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td[colspan] {
        display: block;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td .btn-group,
    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td .btn {
        max-width: 100%;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td .btn-group {
        flex-wrap: wrap;
    }

    .ems-content .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }

    .ems-content .pagination .page-link {
        min-width: 36px;
        min-height: 36px;
    }

    .ems-footer > .container-fluid > div:last-child {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 359.98px) {
    .header-right {
        gap: 2px;
    }

    .header-right .btn-icon,
    .header-right .md3-icon-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .header-right [data-bs-target="#quickActionsModal"] {
        width: 38px;
        min-width: 38px;
        padding-inline: 8px;
        overflow: hidden;
    }

    .table-responsive > table[data-mobile-cards="true"] > tbody > tr > td {
        grid-template-columns: minmax(72px, 34%) minmax(0, 1fr);
        gap: 7px;
        padding-inline: 9px;
    }
}