:root {
    --pc-brand-900: #172b4d;
    --pc-primary: #2563eb;
    --pc-primary-hover: #1d4ed8;
    --pc-bg: #f6f8fc;
    --pc-surface: #ffffff;
    --pc-surface-soft: #f1f5f9;
    --pc-text: #17253b;
    --pc-text-muted: #52637a;
    --pc-border: #e2e8f0;
    --pc-success: #15803d;
    --pc-warning: #b45309;
    --pc-danger: #b91c1c;
    --pc-info: #0369a1;
    --pc-radius-sm: 0.5rem;
    --pc-radius-md: 0.75rem;
    --pc-radius-lg: 1rem;
    --pc-shadow-card: 0 2px 10px rgb(23 37 59 / 5%);
    --pc-focus-ring: 0 0 0 3px rgb(37 99 235 / 24%);
    --pc-header-height: 4.25rem;
    --pc-sidebar-width: 15.75rem;
    --pc-content-max: 100rem;
    --body-bg: var(--pc-bg);
    --body-color: var(--pc-text);
    --primary: var(--pc-primary);
    --primary-rgb: 37, 99, 235;
    --link-color: var(--pc-primary);
    --link-hover-color: var(--pc-primary-hover);
    --border-color: var(--pc-border);
    --sidebar-bg: var(--pc-surface) !important;
    --sidebar-color: var(--pc-text-muted);
    --card-border-color: var(--pc-border);
    --card-border-radius: var(--pc-radius-md);
    --card-box-shadow: var(--pc-shadow-card);
    --input-focus-border-color: var(--pc-primary);
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body.pc-app-shell,
body:has(.sidebar-main) {
    min-width: 20rem;
    overflow-x: hidden;
    background: var(--pc-bg);
    color: var(--pc-text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pc-skip-link {
    position: fixed;
    z-index: 1100;
    top: 0.75rem;
    left: 0.75rem;
    translate: 0 -150%;
    padding: 0.65rem 0.9rem;
    border-radius: var(--pc-radius-sm);
    background: var(--pc-brand-900);
    color: #fff;
    font-weight: 700;
    transition: translate 150ms ease;
}

.pc-skip-link:focus {
    translate: 0;
    color: #fff;
}

.page-content {
    min-height: calc(100dvh - var(--pc-header-height));
    background: var(--pc-bg);
}

.content-wrapper,
.content-inner {
    min-width: 0;
    background: transparent;
}

.content-inner > .content,
.content-wrapper > .content,
.content {
    width: 100%;
    max-width: var(--pc-content-max);
    margin-inline: auto;
    padding: clamp(1rem, 2.2vw, 2rem);
}

.navbar:not(.navbar-footer) {
    min-height: var(--pc-header-height);
    border-bottom: 1px solid var(--pc-border);
    background: var(--pc-surface) !important;
    box-shadow: 0 1px 2px rgb(23 37 59 / 3%);
    color: var(--pc-text);
}

.navbar:not(.navbar-footer) .navbar-brand {
    min-width: var(--pc-sidebar-width);
    height: var(--pc-header-height);
    padding: 0.75rem 1.25rem;
    justify-content: flex-start;
}

.navbar:not(.navbar-footer) .navbar-brand img {
    width: auto;
    max-width: 8.75rem;
    max-height: 2.5rem;
    object-fit: contain;
}

.navbar:not(.navbar-footer) .nav-link,
.navbar:not(.navbar-footer) .navbar-nav-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-text-muted) !important;
}

.navbar:not(.navbar-footer) .nav-link:hover,
.navbar:not(.navbar-footer) .nav-link:focus-visible,
.navbar:not(.navbar-footer) .navbar-nav-link:hover,
.navbar:not(.navbar-footer) .navbar-nav-link:focus-visible {
    background: var(--pc-surface-soft);
    color: var(--pc-text) !important;
}

.sidebar-main {
    width: var(--pc-sidebar-width);
    border-right: 1px solid var(--pc-border);
    background: var(--pc-surface) !important;
    color: var(--pc-text-muted) !important;
    box-shadow: none !important;
}

.sidebar-main .sidebar-content {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

.sidebar-main .nav-sidebar {
    padding: 0.75rem;
}

.sidebar-main .nav-item-header {
    margin: 1rem 0 0.3rem;
    padding: 0 0.75rem;
    color: #718096 !important;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.75rem;
    text-transform: uppercase;
}

.sidebar-main .nav-item-header:first-child {
    margin-top: 0.25rem;
}

.sidebar-main .nav-link {
    min-height: 2.75rem;
    margin-block: 0.125rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--pc-radius-sm);
    color: var(--pc-text-muted) !important;
    font-size: 0.9rem;
    font-weight: 560;
    line-height: 1.35;
    transition: background-color 150ms ease, color 150ms ease;
}

.sidebar-main .nav-link i {
    color: #64748b !important;
    font-size: 1.2rem;
}

.sidebar-main .nav-link:hover,
.sidebar-main .nav-link:focus-visible {
    background: var(--pc-surface-soft) !important;
    color: var(--pc-text) !important;
}

.sidebar-main .nav-link.active,
.sidebar-main .nav-item-open > .nav-link,
.sidebar-main .nav-link[aria-current="page"] {
    background: #eaf1ff !important;
    color: #174ea6 !important;
    box-shadow: inset 3px 0 var(--pc-primary);
}

.sidebar-main .nav-link.active i,
.sidebar-main .nav-link[aria-current="page"] i {
    color: var(--pc-primary) !important;
}

.page-content .card,
.page-content .modal-content,
.page-content .dropdown-menu {
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-md);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow-card);
}

.page-content .card-header,
.page-content .modal-header,
.page-content .modal-footer {
    border-color: var(--pc-border);
    background: transparent;
}

.page-content .btn {
    min-height: 2.5rem;
    border-radius: var(--pc-radius-sm);
    font-weight: 650;
}

.page-content .btn-sm {
    min-height: 2.125rem;
}

.page-content .btn-primary {
    border-color: var(--pc-primary);
    background: var(--pc-primary);
}

.page-content .btn-primary:hover,
.page-content .btn-primary:focus-visible,
.page-content .btn-primary:active {
    border-color: var(--pc-primary-hover) !important;
    background: var(--pc-primary-hover) !important;
}

.page-content .btn-outline-primary {
    border-color: #b8cdfa;
    color: #1d4ed8;
}

.page-content .form-control,
.page-content .form-select,
.page-content .select2-selection {
    min-height: 2.625rem;
    border-color: #cbd5e1;
    border-radius: var(--pc-radius-sm);
    background-color: var(--pc-surface);
    color: var(--pc-text);
}

.page-content .form-control:focus,
.page-content .form-select:focus,
.page-content .select2-container--focus .select2-selection {
    border-color: var(--pc-primary);
    box-shadow: var(--pc-focus-ring);
}

.page-content label,
.page-content .form-label {
    color: #334155;
    font-weight: 650;
}

.page-content .table {
    --table-border-color: var(--pc-border);
    color: var(--pc-text);
}

.page-content .table thead th {
    border-bottom-color: var(--pc-border);
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.page-content .table tbody td {
    padding-block: 0.85rem;
    border-bottom-color: #edf1f6;
    vertical-align: middle;
}

.page-content .table-hover tbody tr:hover > * {
    background: #f8fafc;
}

.page-content .table-responsive {
    border-radius: var(--pc-radius-sm);
    scrollbar-color: #cbd5e1 transparent;
}

.page-content .pagination .page-link {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: var(--pc-border);
    color: var(--pc-text-muted);
}

.page-content .pagination .active > .page-link {
    border-color: var(--pc-primary);
    background: var(--pc-primary);
    color: #fff;
}

.page-content :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
    box-shadow: var(--pc-focus-ring);
}

.page-content .text-muted,
.page-content .text-secondary {
    color: var(--pc-text-muted) !important;
}

.page-content .alert {
    border-width: 1px;
    border-radius: var(--pc-radius-md);
}

.page-content .validation-summary-errors,
.page-content .field-validation-error,
.page-content .invalid-feedback {
    color: var(--pc-danger);
}

.navbar-footer {
    border-color: var(--pc-border) !important;
    background: var(--pc-surface) !important;
    color: var(--pc-text-muted);
}

@media (max-width: 991.98px) {
    .navbar:not(.navbar-footer) .navbar-brand {
        min-width: 0;
        padding-inline: 0.75rem;
    }

    .navbar:not(.navbar-footer) .navbar-brand img {
        max-width: 7rem;
    }

    .sidebar-main {
        width: min(19rem, calc(100vw - 2rem));
        box-shadow: 0 16px 40px rgb(23 37 59 / 18%) !important;
    }

    .content-inner > .content,
    .content-wrapper > .content,
    .content {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .page-content .btn:not(.btn-icon) {
        white-space: normal;
    }

    .page-content .datatable-header,
    .page-content .datatable-footer {
        gap: 0.75rem;
        padding-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .sidebar-main .nav-link.active,
    .sidebar-main .nav-link[aria-current="page"] {
        border-left: 3px solid Highlight;
    }
}