:root {
    --cbd-primary: #183a40;
    --cbd-primary-dark: #102c31;
    --cbd-accent: #11b866;
    --cbd-text: #1f3340;
    --cbd-muted: #64748b;
    --cbd-border: #dce5e7;
    --cbd-surface: #fafbf8;
    --cbd-danger: #c83b32;
    --cbd-warning: #a86b00;
    --cbd-radius: 12px;
    --cbd-shadow: 0 4px 18px rgba(31, 51, 64, .07);
    --cbd-shadow-raised: 0 12px 30px rgba(31, 51, 64, .11);
    --cbd-topbar-height: 72px;
}

html { scroll-padding-top: calc(var(--cbd-topbar-height) + 20px); }
body { background: radial-gradient(circle at 58% 10%, rgba(123,87,245,.045), transparent 24%), #fafbf8; color: var(--cbd-text); }
.main-content { min-height: 100vh; }
.container-fluid { max-width: 1680px; }
#page_topbar { background: rgba(255,255,255,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(220,229,231,.76); box-shadow: 0 2px 14px rgba(31,51,64,.035); }
#page_topbar .navbar-header { min-height: var(--cbd-topbar-height); }
#vertical-menu-btn { border-radius: 8px; color: var(--cbd-primary); min-width: 42px; }
#vertical-menu-btn:hover { background: #edf6f3; color: var(--cbd-accent); }
.header-profile-user { border: 2px solid #e4eeeb; object-fit: cover; }
#page-header-user-dropdown { border-radius: 10px; color: var(--cbd-text); padding: 6px 9px; }
#page-header-user-dropdown:hover, #page-header-user-dropdown[aria-expanded="true"] { background: #f0f6f4; }
.vertical-menu { background: rgba(255,255,255,.92); border-right: 1px solid rgba(220,229,231,.8); box-shadow: 4px 0 20px rgba(31,51,64,.035); }
#sidebar-menu .menu-title { color: #829399; font-size: .7rem; letter-spacing: .08em; padding-top: 22px; text-transform: uppercase; }
#sidebar-menu ul li a { border-radius: 9px; color: #51636a; margin: 2px 10px; min-height: 42px; padding: 11px 14px; transition: background-color .16s ease, color .16s ease; }
#sidebar-menu ul li a i { color: #829399; }
#sidebar-menu ul li a:hover { background: #edf6f3; color: var(--cbd-primary); }
#sidebar-menu ul li a:hover i { color: var(--cbd-accent); }
#sidebar-menu ul li a.ux-current-page { background: #e8f6f0; color: var(--cbd-primary); font-weight: 700; position: relative; }
#sidebar-menu ul li a.ux-current-page::before { background: var(--cbd-accent); border-radius: 0 4px 4px 0; content: ''; height: 24px; left: -10px; position: absolute; top: 9px; width: 4px; }
#sidebar-menu ul li a.ux-current-page i { color: var(--cbd-accent); }
.page-title-box { align-items: center; column-gap: 18px; margin-bottom: 18px; padding: 4px 0 8px; row-gap: 12px; }
.page-title-box > * { min-width: 0; }
.page-title-box .btn, .page-title-box .btn-group { flex: 0 0 auto; }
.page-title-box h4 { color: var(--cbd-primary); font-size: 1.45rem; font-weight: 750; letter-spacing: -.015em; }
.breadcrumb { background: transparent; margin: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--cbd-muted); }
.breadcrumb-item.active { color: var(--cbd-primary); font-weight: 600; }
.ux-skip-link { background: var(--cbd-primary); border-radius: 0 0 8px 8px; color: #fff; font-weight: 700; left: 16px; padding: 10px 14px; position: fixed; top: -80px; z-index: 100000; }
.ux-skip-link:focus { color: #fff; top: 0; }
a, button, input, select, textarea { outline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(42, 181, 125, .45) !important;
}
.btn { align-items: center; border-radius: 9px; display: inline-flex; font-weight: 650; gap: 5px; justify-content: center; min-height: 40px; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-sm { min-height: 34px; }
.btn-primary { background: var(--cbd-primary); border-color: var(--cbd-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--cbd-primary-dark); border-color: var(--cbd-primary-dark); }
.btn-success { background: var(--cbd-accent); border-color: var(--cbd-accent); }
.btn-outline-primary { border-color: #9eb7bd; color: var(--cbd-primary); }
.btn-outline-primary:hover { background: var(--cbd-primary); border-color: var(--cbd-primary); }
.btn-light { background: #f5f8f8; border-color: var(--cbd-border); color: var(--cbd-primary); }
.btn.ux-loading { cursor: wait; opacity: .78; pointer-events: none; }
.btn.ux-loading::before { animation: ux-spin .7s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ''; height: 14px; width: 14px; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
.form-control, .form-select, .select2-container .select2-selection { border-color: var(--cbd-border); border-radius: 9px; min-height: 42px; }
.form-control:hover, .form-select:hover { border-color: #afc1c5; }
.form-control:focus, .form-select:focus { border-color: var(--cbd-accent); box-shadow: 0 0 0 .2rem rgba(42,181,125,.13); }
.input-group-text { background: #f5f8f8; border-color: var(--cbd-border); color: var(--cbd-muted); }
.form-label { color: var(--cbd-text); font-weight: 600; }
.form-control:invalid:focus, .form-select:invalid:focus, [aria-invalid="true"] { border-color: var(--cbd-danger); box-shadow: 0 0 0 .2rem rgba(200, 59, 50, .14); }
.ux-validation-summary { margin-bottom: 18px; }
.text-muted, .text-body-tertiary { color: var(--cbd-muted) !important; }
.btn:disabled, .form-control:disabled, .form-select:disabled { cursor: not-allowed; opacity: .65; }
.card, .panel { background: #fff; border: 1px solid var(--cbd-border); border-radius: var(--cbd-radius); box-shadow: var(--cbd-shadow); }
.card-header { background: transparent; border-bottom-color: var(--cbd-border); padding: 18px 20px; }
.card-header h3, .card-header h4, .card-header .card-title { color: var(--cbd-primary); font-weight: 750; }
.card-body { padding: 20px; }
.card-body > .text-muted:first-child + h3 { color: var(--cbd-primary); font-size: 1.65rem; margin-top: 6px; }
.alert { border: 0; border-left: 4px solid currentColor; border-radius: 9px; }
.alert-success { background: #eaf8f2; color: #146a4a; }
.alert-warning { background: #fff5df; color: #7b5407; }
.alert-danger { background: #fdecea; color: #9b3029; }
.alert-info { background: #eaf4f6; color: #245764; }
.badge { border-radius: 999px; font-weight: 700; padding: .42em .68em; }
.dropdown-menu { border: 1px solid var(--cbd-border); border-radius: 11px; box-shadow: var(--cbd-shadow-raised); padding: 7px; }
.dropdown-item { border-radius: 7px; padding: 9px 11px; }
.dropdown-item:hover, .dropdown-item:focus { background: #edf6f3; color: var(--cbd-primary); }
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(20,54,61,.22); overflow: hidden; }
.modal-header { border-bottom-color: var(--cbd-border); padding: 18px 20px; }
.modal-title { color: var(--cbd-primary); font-weight: 750; }
.modal-footer { background: #f8faf9; border-top-color: var(--cbd-border); padding: 14px 20px; }
.table-responsive pre { max-height: 240px; max-width: 520px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table { color: var(--cbd-text); }
.table thead th { border-bottom-width: 1px; color: #50656c; font-size: .78rem; letter-spacing: .025em; text-transform: uppercase; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: #f7fbfa; }
.pagination { gap: 4px; }
.page-link { border-color: transparent; border-radius: 8px !important; color: var(--cbd-primary); min-width: 36px; text-align: center; }
.page-item.active .page-link { background: var(--cbd-primary); border-color: var(--cbd-primary); }
.page-item.disabled .page-link { background: transparent; color: #9aa8ad; }

.ux-page-header { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 22px; }
.ux-page-eyebrow { color: var(--cbd-muted); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ux-page-title { color: var(--cbd-primary); font-size: 1.65rem; font-weight: 700; margin: 3px 0; }
.ux-page-description { color: var(--cbd-muted); margin: 0; max-width: 720px; }
.ux-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.ux-toolbar { align-items: center; background: #fff; border: 1px solid var(--cbd-border); border-radius: var(--cbd-radius); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 14px; padding: 12px; }
.ux-search { max-width: 430px; min-width: min(100%, 280px); position: relative; }
.ux-search .form-control { padding-left: 40px; }
.ux-search-icon { color: var(--cbd-muted); left: 14px; position: absolute; top: 13px; }
.ux-filter-panel { background: var(--cbd-surface); border: 1px solid var(--cbd-border); border-radius: 10px; margin-bottom: 14px; padding: 14px; }
.ux-empty { align-items: center; background: var(--cbd-surface); border: 1px dashed #b9c9ce; border-radius: var(--cbd-radius); color: var(--cbd-muted); display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 180px; padding: 28px; text-align: center; }
.ux-empty i { color: #91a5ab; font-size: 2rem; }
.ux-scroll-hint { align-items: center; color: var(--cbd-muted); display: none; font-size: .78rem; gap: 6px; margin: 0 0 7px; }
.ux-scroll-hint i { color: var(--cbd-accent); }
.ux-page-progress { background: var(--cbd-accent); box-shadow: 0 0 8px rgba(42,181,125,.4); height: 3px; left: 0; position: fixed; top: 0; transform-origin: left center; transition: width .15s ease; width: 0; z-index: 100001; }
.ux-toast { align-items: center; background: var(--cbd-primary); border-radius: 10px; bottom: 22px; box-shadow: var(--cbd-shadow-raised); color: #fff; display: flex; font-weight: 650; gap: 9px; left: 50%; max-width: calc(100% - 32px); padding: 12px 16px; position: fixed; transform: translate(-50%, 18px); opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 100002; }
.ux-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ux-status { align-items: center; border-radius: 999px; display: inline-flex; font-size: .78rem; font-weight: 700; gap: 6px; line-height: 1; min-height: 28px; padding: 7px 10px; }
.ux-status::before { background: currentColor; border-radius: 50%; content: ''; height: 7px; width: 7px; }
.ux-status-success { background: #e8f8f1; color: #14704d; }
.ux-status-warning { background: #fff4dc; color: #8a5900; }
.ux-status-danger { background: #fdecea; color: #a72f28; }
.ux-status-neutral { background: #edf2f3; color: #52666d; }
.ux-form-section { border-bottom: 1px solid var(--cbd-border); margin-bottom: 22px; padding-bottom: 22px; }
.ux-form-section:last-child { border-bottom: 0; }
.ux-form-title { color: var(--cbd-primary); font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.ux-form-help { color: var(--cbd-muted); font-size: .86rem; margin-bottom: 15px; }
.ux-advanced { background: var(--cbd-surface); border: 1px solid var(--cbd-border); border-radius: var(--cbd-radius); margin-top: 16px; }
.ux-advanced summary { cursor: pointer; font-weight: 700; padding: 14px 16px; }
.ux-advanced-content { border-top: 1px solid var(--cbd-border); padding: 16px; }

.ux-table-scroll, .adv-table, .table-responsive { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
table.dataTable { border-collapse: separate !important; border-spacing: 0; min-width: 720px; }
table.dataTable thead th { background: #f4f7f7; color: var(--cbd-text); font-size: .78rem; letter-spacing: .02em; padding: 12px 10px !important; text-transform: uppercase; }
table.dataTable tbody td { border-color: #edf1f2; line-height: 1.35 !important; padding: 11px 10px !important; vertical-align: middle; }
table.dataTable tbody tr:hover { background: #f8fcfb; }
.dataTables_length, .dataTables_info, .dataTables_paginate { color: var(--cbd-muted); font-size: .86rem; }
.dataTables_length select { min-height: 36px; }
.actions-div, .actions-items { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.actions-div a, .actions-div button, .actions-items a, .actions-items button { align-items: center; display: inline-flex; justify-content: center; min-height: 38px; min-width: 38px; }
.page-content { padding-top: calc(var(--cbd-topbar-height) + 24px); }
.ux-toolbar[id], section[id], .card[id] { scroll-margin-top: calc(var(--cbd-topbar-height) + 20px); }

@media (max-width: 767.98px) {
    :root { --cbd-topbar-height: 64px; }
    .page-content { padding-left: 6px; padding-right: 6px; padding-top: calc(var(--cbd-topbar-height) + 18px); }
    .page-title-box { align-items: flex-start; flex-direction: column; padding-top: 12px; }
    .page-title-box h4 { font-size: 1.25rem; }
    .breadcrumb { font-size: .78rem; }
    .ux-page-header { display: block; }
    .ux-actions { margin-top: 14px; }
    .ux-actions .btn { flex: 1 1 auto; }
    .ux-toolbar { align-items: stretch; flex-direction: column; }
    .ux-search { max-width: none; width: 100%; }
    .card-body { padding: 16px; }
    .card-header { padding: 15px 16px; }
    .modal-dialog { margin: 10px; }
    .modal-footer { align-items: stretch; flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; }
    .table.dataTable thead tr:nth-child(2) { display: none; }
    .ux-scroll-hint { display: flex; }
    .dt-panelmenu, .dt-panelfooter { align-items: stretch; display: flex; flex-direction: column; gap: 8px; }
    .dataTables_length, .dataTables_info, .dataTables_paginate { float: none !important; text-align: center !important; }
    .profile-options .user-infos { display: none; }
    .dropdown-menu { max-width: calc(100vw - 24px); }
}

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