:root {
    --color-primary: #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-success: #198754;
    --color-warning: #f59f00;
    --color-danger: #dc3545;
    --color-info: #0dcaf0;
    --bs-success-bg-subtle: #20ed8f;
    --bs-warning-bg-subtle: #ffd03a;
    --bs-danger-bg-subtle: #ff4354;
    --feedback-success-bg: var(--bs-success-bg-subtle);
    --feedback-warning-bg: var(--bs-warning-bg-subtle);
    --feedback-danger-bg: var(--bs-danger-bg-subtle);
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-text-inverse: #ffffff;
    --color-background: #f5f7fb;
    --color-surface: #ffffff;
    --color-sidebar: #111827;
    --color-sidebar-hover: #1f2937;
    --color-sidebar-active: #25324d;
    --color-border: #e5e7eb;
    --color-focus: rgba(13, 110, 253, .25);
    --color-primary-rgb: 13, 110, 253;
    --color-primary-hover-rgb: 11, 94, 215;
    --color-success-rgb: 25, 135, 84;
    --color-warning-rgb: 245, 159, 0;
    --color-danger-rgb: 220, 53, 69;
    --color-info-rgb: 13, 202, 240;
    --color-white-rgb: 255, 255, 255;
    --color-text-rgb: 31, 41, 55;
    --font-family-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --button-radius: 8px;
    --button-padding-y: 10px;
    --button-padding-x: 18px;
    --bs-btn-font-size: 0.95rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.2;
    --card-radius: 12px;
    --card-padding: 16px;
    --input-radius: 8px;
    --input-height: 42px;
    --modal-radius: 12px;
    --table-header-bg: #f8fafc;
    --table-border-color: #e5e7eb;
    --table-cell-padding-x: 12px;
    --table-cell-padding-y: 12px;
    --sidebar-width: 264px;
    --header-height: 72px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --z-sidebar: 1040;
    --z-header: 1030;
    --z-backdrop: 1020;
}

* { box-sizing: border-box; }
html { font-size: var(--font-size-base); }
body { margin: 0; font-family: var(--font-family-base); color: var(--color-text); background: var(--color-background); line-height: var(--line-height-base); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--z-sidebar); width: var(--sidebar-width); background: var(--color-sidebar); color: #fff; display: flex; flex-direction: column; transition: width .2s ease, transform .2s ease; }
.sidebar-brand { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--spacing-md); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-link { display: flex; align-items: center; gap: 12px; color: #fff; min-width: 0; }
.brand-link:hover { color: #fff; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 18px; line-height: 1.2; }
.brand-copy small { color: rgba(255,255,255,.62); font-size: 13px; margin-top: 3px; }
.sidebar-close { display: none !important; }
.sidebar-nav { padding: var(--spacing-md) var(--spacing-sm); overflow-y: auto; }
.nav-section-title { padding: 12px 10px 7px; color: #94a3b8; font-size: 12px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .06em; }
.nav-item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 8px; color: #dbe4f0; background: transparent; font-weight: var(--font-weight-medium); text-align: left; margin-bottom: 3px; }
a.nav-item:hover, button.nav-item:hover { color: #fff; background: var(--color-sidebar-hover); }
.nav-item.is-active { color: #fff; background: var(--color-sidebar-active); }
.nav-item > i:first-child, .nav-item > span > i:first-child { width: 20px; text-align: center; }
.nav-item-toggle { justify-content: space-between; cursor: pointer; }
.nav-item-toggle > span { display: flex; align-items: center; gap: 12px; }
.nav-chevron { transition: transform .2s ease; }
.nav-item-toggle[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
.nav-children { padding: 4px 0 6px 18px; overflow: hidden; }
.nav-children:not(.is-open) { display: none; }
.nav-item-child { min-height: 40px; font-size: 14px; padding-left: 28px; }
.nav-item-toggle { width: 100%; border: 0; color: inherit; text-align: left; background: transparent; }

.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.app-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: 0 var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-left, .header-right { display: flex; align-items: center; gap: var(--spacing-md); min-width: 0; }
.icon-button { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.icon-button:hover { background: #f3f4f6; color: var(--color-text); }
.page-heading h1 { font-size: 20px; margin: 0; font-weight: var(--font-weight-semibold); }
.page-heading .breadcrumb { font-size: 13px; margin-top: 2px; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger); }
.user-menu { position: relative; }
.user-menu-button { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 7px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); background: #eaf2ff; }
.user-copy { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.user-copy strong { font-size: 14px; }
.user-copy small { color: var(--color-text-muted); font-size: 12px; margin-top: 3px; }
.user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 200px; padding: 6px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: var(--shadow-md); }
.user-dropdown[hidden] { display: none; }
.user-dropdown a, .user-dropdown button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text); text-align: left; }
.user-dropdown a:hover, .user-dropdown button:hover { background: #f3f4f6; }

.app-content { padding: 16px; max-width: 1800px; margin: 0 auto; }
.page-section { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.page-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); }
.eyebrow { display: block; color: var(--color-primary); font-size: 12px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.page-title { margin: 0; font-size: 32px; line-height: 1.2; font-weight: var(--font-weight-bold); }
.page-description { color: var(--color-text-muted); margin: 8px 0 0; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--spacing-sm); margin-left: auto; }
.section-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); padding: var(--card-padding); }
.section-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.section-card-header h3 { margin: 0; font-size: 18px; font-weight: var(--font-weight-semibold); }
.section-card-header p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 14px; }
.component-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
.stack-md { display: flex; flex-direction: column; gap: var(--spacing-md); }
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); }
.form-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.required-mark { color: var(--color-danger); }
.form-control, .form-select { min-height: var(--input-height); border-radius: var(--input-radius); }
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem var(--color-focus); }
.btn { border-radius: var(--button-radius); padding: var(--button-padding-y) var(--button-padding-x); font-size: var(--bs-btn-font-size); font-weight: var(--bs-btn-font-weight); line-height: var(--bs-btn-line-height); }
.select2-container .select2-selection--single { position: relative; height: var(--input-height); border: 1px solid #dee2e6; border-radius: var(--input-radius); }
.select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; top: 50%; right: 28px; width: 18px; height: 18px; margin: 0; padding: 0; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; float: none; font-size: 16px; line-height: 18px; color: var(--color-text-muted); }
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--color-danger); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: var(--input-height); padding-left: 12px; padding-right: 54px; color: var(--color-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--input-height); right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem var(--color-focus); }
.table-responsive-core { width: 100%; overflow-x: auto; padding-bottom: 10px; }
.table { margin-bottom: 0; --bs-table-border-color: var(--table-border-color); border-collapse: collapse; }
.table > :not(caption) > * > * { border: 1px solid var(--table-border-color); }
.table thead th { border-bottom-width: 1px; }
.table thead th { background: var(--table-header-bg); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.table td, .table th { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); vertical-align: middle; }
#datatable-ui-playground th:first-child,
#datatable-ui-playground td:first-child,
#datatable-ui-playground th:last-child,
#datatable-ui-playground td:last-child { text-align: center; }
.table-action { width: 34px; height: 34px; }
.status-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: var(--font-weight-semibold); }
.status-success { color: #146c43; background: #d1e7dd; }
.status-warning { color: #664d03; background: #fff3cd; }
.status-danger { color: #842029; background: #f8d7da; }
.summary-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--card-radius); background: #fbfdff; }
.summary-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--color-primary); background: #eaf2ff; font-size: 20px; }
.summary-card span, .summary-card small { display: block; color: var(--color-text-muted); font-size: 13px; }
.summary-card strong { display: block; font-size: 26px; line-height: 1.2; margin: 2px 0; }
.empty-state { min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 24px; color: var(--color-text-muted); text-align: center; border: 1px dashed #cbd5e1; border-radius: var(--card-radius); background: #fafbfc; }
.empty-icon { font-size: 30px; color: #94a3b8; margin-bottom: 4px; }
.loading-state { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--color-text-muted); border-radius: 8px; background: #f8fafc; }
.responsive-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); }
.responsive-demo > div { padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; background: #fafbfc; }
.responsive-demo strong, .responsive-demo span { display: block; }
.responsive-demo span { color: var(--color-text-muted); font-size: 14px; margin-top: 4px; }
.modal-content { border: 0; border-radius: var(--modal-radius); box-shadow: var(--shadow-md); }
.modal-header, .modal-footer { padding: 18px; }
.modal-body { padding: var(--spacing-lg); }
.toast-container { position: fixed; z-index: 1100; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.core-toast { --toast-duration: 3500ms; position: relative; min-width: 280px; max-width: 380px; padding: 13px 16px 16px 18px; border: 1px solid var(--color-border); border-left: 5px solid var(--color-primary); border-radius: 10px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); overflow: hidden; }
.core-toast::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 10px 0 0 10px; background: var(--color-primary); }
.core-toast::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left center; background: var(--color-primary); animation: toast-countdown var(--toast-duration) linear forwards; }
@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.core-toast.toast-success::after { background: #0a8f52; }
.core-toast.toast-warning::after { background: #9a7200; }
.core-toast.toast-danger::after { background: #b51d2a; }
@media (prefers-reduced-motion: reduce) { .core-toast::after { animation-duration: 0ms; } }
.core-toast.toast-success { border-color: color-mix(in srgb, var(--feedback-success-bg) 55%, var(--color-border)); background: var(--feedback-success-bg); border-left-color: #0a8f52; }
.core-toast.toast-success::before { background: #0a8f52; }
.core-toast.toast-warning { border-color: color-mix(in srgb, var(--feedback-warning-bg) 55%, var(--color-border)); background: var(--feedback-warning-bg); border-left-color: #9a7200; }
.core-toast.toast-warning::before { background: #9a7200; }
.core-toast.toast-danger { border-color: color-mix(in srgb, var(--feedback-danger-bg) 55%, var(--color-border)); background: var(--feedback-danger-bg); border-left-color: #b51d2a; }
.core-toast.toast-danger::before { background: #b51d2a; }
.core-toast.toast-info { border-left-color: var(--color-primary); }
.core-toast-title { display: flex; align-items: center; gap: 8px; font-weight: var(--font-weight-bold); margin-bottom: 3px; }
.core-toast-message { font-size: 14px; }


/* Desktop sidebar collapse: keep the icon rail visible. */
.app-shell.sidebar-collapsed .app-sidebar { width: 76px; }
.app-shell.sidebar-collapsed .app-main { margin-left: 76px; }
.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .nav-section-title,
.app-shell.sidebar-collapsed .nav-item > span,
.app-shell.sidebar-collapsed .nav-item-toggle > span > span,
.app-shell.sidebar-collapsed .nav-chevron { display: none; }
.app-shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 8px; }
.app-shell.sidebar-collapsed .brand-link { justify-content: center; }
.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 8px; }
.app-shell.sidebar-collapsed .nav-children { display: none !important; }

/* One compact scrollbar style shared by page, sidebar and scrollable tables. */
html { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #64748b; }

@media (max-width: 1199.98px) {
    /* DataTable header action moves to its own line and stays right-aligned on tablet. */
    .data-table-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .data-table-card-header > .btn {
        justify-self: end;
        margin-top: 4px;
    }
    .app-sidebar { width: 76px; }
    .app-main { margin-left: 76px; }
    .brand-copy, .nav-section-title, .nav-item > span, .nav-item-toggle > span > span, .nav-chevron { display: none; }
    .nav-item { justify-content: center; }
    .nav-children { display: none !important; }
    .component-grid { grid-template-columns: 1fr; }
    .responsive-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .app-sidebar { width: var(--sidebar-width); transform: translateX(-100%); }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-sidebar.is-open .brand-copy, .app-sidebar.is-open .nav-section-title, .app-sidebar.is-open .nav-item > span, .app-sidebar.is-open .nav-item-toggle > span > span, .app-sidebar.is-open .nav-chevron { display: initial; }
    .app-sidebar.is-open .nav-item { justify-content: flex-start; }
    .app-sidebar.is-open .nav-item-toggle > span { display: flex; align-items: center; gap: 12px; }
    .app-sidebar.is-open .nav-children { padding-left: 26px; }
    .app-sidebar.is-open .nav-children.is-open { display: block !important; }
    .app-sidebar.is-open .nav-item-child { display: flex !important; }
    .sidebar-close { display: inline-grid !important; color: #fff; }
    .app-main { margin-left: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(15,23,42,.45); display: none; }
    .sidebar-backdrop.is-visible { display: block; }
    .app-header { height: var(--header-height); min-height: var(--header-height); padding: 12px var(--spacing-md); flex-wrap: nowrap; align-items: center; row-gap: 0; }
    .header-left, .header-right { width: auto; }
    .header-right { margin-left: auto; justify-content: flex-end; }
    .page-heading { min-width: 0; }
    .page-heading h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-copy, .user-menu-button > .fa-chevron-down { display: none; }
    .page-title-row { flex-direction: column; }
    .page-actions { width: 100%; justify-content: flex-end; }
    .page-title { font-size: 28px; }
    .component-grid { grid-template-columns: 1fr; }
    .responsive-demo { grid-template-columns: 1fr; }
    .table-responsive-core { overflow-x: auto; }
}

@media (max-width: 395px) {
    .app-header { height: auto; min-height: var(--header-height); flex-wrap: wrap; row-gap: 8px; }
    .header-left { width: 100%; }
    .header-right { width: 100%; margin-left: 0; justify-content: flex-end; }
}

@media (min-width: 1200px) {
    .sidebar-backdrop { display: none !important; }
}

.sidebar-hover-tooltip {
    position: fixed;
    z-index: 1200;
    transform: translateY(-50%);
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    background: #0f172a;
    color: #fff;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
}

.app-content > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}