:root {
    --wcs-surface: #ffffff;
    --wcs-surface-soft: #f8fafc;
    --wcs-border: #e4e6ef;
    --wcs-text-muted: #7e8299;
    --wcs-primary-soft: rgba(54, 153, 255, 0.1);
    --wcs-shadow: 0 8px 24px rgba(24, 28, 50, 0.08);
    --wcs-radius: 0.75rem;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 12px;
    z-index: 1000;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1f2937;
    color: #fff;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 12px;
    color: #fff;
}

.layout-page-container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.layout-page-shell {
    background: var(--wcs-surface);
    border: 1px solid var(--wcs-border);
    border-radius: var(--wcs-radius);
    box-shadow: var(--wcs-shadow);
    padding: 1.5rem;
}

.layout-page-shell h1,
.layout-page-shell h2,
.layout-page-shell h3,
.layout-page-shell h4,
.layout-page-shell h5,
.layout-page-shell h6 {
    color: #181c32;
}

.layout-page-shell .text-muted {
    color: var(--wcs-text-muted) !important;
}

.layout-page-shell .card {
    border: 1px solid var(--wcs-border);
    border-radius: 0.625rem;
    box-shadow: 0 3px 12px rgba(24, 28, 50, 0.04);
}

.layout-page-shell .card-header {
    background-color: var(--wcs-surface-soft);
    border-bottom: 1px solid var(--wcs-border);
}

.layout-page-shell .table thead th {
    background-color: var(--wcs-surface-soft);
    border-bottom-color: var(--wcs-border);
    color: #3f4254;
    font-weight: 600;
}

.layout-page-shell .table.table-report thead th,
.layout-page-shell table.table-report.dataTable thead > tr > th,
.layout-page-shell table.table-report.dataTable thead > tr > td {
    background-color: #1f2d3d !important;
    border-bottom-color: #15202b !important;
    color: #ffffff !important;
}

.layout-page-shell table.table-report.dataTable thead > tr > th.sorting,
.layout-page-shell table.table-report.dataTable thead > tr > th.sorting_asc,
.layout-page-shell table.table-report.dataTable thead > tr > th.sorting_desc,
.layout-page-shell table.table-report.dataTable thead > tr > th.dt-orderable-asc,
.layout-page-shell table.table-report.dataTable thead > tr > th.dt-orderable-desc {
    color: #ffffff !important;
}

.layout-page-shell table.table-report.dataTable thead > tr > th span.dt-column-order::before,
.layout-page-shell table.table-report.dataTable thead > tr > th span.dt-column-order::after {
    color: #dbeafe !important;
    opacity: 1 !important;
}

.layout-page-shell #alerts-table thead th,
.layout-page-shell table#alerts-table.dataTable thead > tr > th,
.layout-page-shell table#alerts-table.dataTable thead > tr > td {
    background: #0f172a !important;
    color: #ffffff !important;
    border-bottom: 1px solid #020617 !important;
    font-weight: 700 !important;
}

.layout-page-shell #alerts-table_wrapper thead th .dt-column-order::before,
.layout-page-shell #alerts-table_wrapper thead th .dt-column-order::after {
    color: #bfdbfe !important;
    opacity: 1 !important;
}

.layout-page-shell .form-control,
.layout-page-shell .custom-select,
.layout-page-shell .select2-selection {
    border-radius: 0.5rem;
    border-color: #d1d3e0;
}

.layout-page-shell .form-control:focus,
.layout-page-shell .custom-select:focus {
    border-color: #3699ff;
    box-shadow: 0 0 0 0.2rem var(--wcs-primary-soft);
}

.auth-layout-bg {
    background-image: linear-gradient(135deg, rgba(17, 24, 39, 0.35), rgba(59, 130, 246, 0.25)), url('/assets/media/bg/bg-5.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.auth-layout-card {
    border-radius: var(--wcs-radius);
    border: 1px solid var(--wcs-border);
    padding: 1rem;
    box-shadow: var(--wcs-shadow);
    width: 100%;
    max-width: 520px;
}

.empty-layout-body {
    background-color: #f3f6f9;
}

.wcs-subheader {
    border-bottom: 1px solid var(--wcs-border);
    box-shadow: 0 2px 10px rgba(24, 28, 50, 0.04);
}

.wcs-footer {
    border-top: 1px solid var(--wcs-border);
}

.wcs-menu-nav .menu-link {
    border-radius: 0.5rem;
    margin: 0.125rem 0.5rem;
}

.wcs-menu-nav .menu-link:hover,
.wcs-menu-nav .menu-link.active {
    background-color: var(--wcs-primary-soft);
}

@media (max-width: 991.98px) {
    .layout-page-shell {
        padding: 1rem;
    }

    .layout-page-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}