/**
 * ============================================================
 * CareerSetu Pro
 * Global Layout System
 * Version: V50
 * ============================================================
 *
 * File:
 * public_html/assets/css/layout.css
 *
 * Load AFTER:
 * assets/css/base.css
 *
 * PURPOSE:
 * - Global page structure
 * - Content containers
 * - Section layouts
 * - Responsive grids
 * - Public page shell
 * - Auth page shell
 * - Candidate application shell
 * - Dashboard/sidebar layout
 * - Content panels
 * - Sticky columns
 * - Empty/loading layouts
 * - Responsive structural utilities
 */


/* ============================================================
   01. APPLICATION ROOT
============================================================ */

.careersetu-pro {
    width: 100%;
    min-width: 0;
    min-height: 100%;
}


.careersetu-body {
    display: flex;
    flex-direction: column;

    min-height: 100vh;
}


.careersetu-main {
    position: relative;

    display: block;
    flex: 1 0 auto;

    width: 100%;
    min-width: 0;
}


/* ============================================================
   02. GLOBAL CONTENT WIDTHS
============================================================ */

.cs-container {
    width: 100%;
    max-width: var(--cs-container-width);

    margin-right: auto;
    margin-left: auto;

    padding-right: 12px;
    padding-left: 12px;
}


.cs-container-wide {
    width: 100%;
    max-width: 1440px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 24px;
    padding-left: 24px;
}


.cs-container-narrow {
    width: 100%;
    max-width: 980px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 24px;
    padding-left: 24px;
}


.cs-container-reading {
    width: 100%;
    max-width: 780px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 24px;
    padding-left: 24px;
}


.cs-container-form {
    width: 100%;
    max-width: 680px;

    margin-right: auto;
    margin-left: auto;
}


/* ============================================================
   03. PAGE SHELL
============================================================ */

.cs-page {
    position: relative;

    width: 100%;
    min-width: 0;
}


.cs-page-content {
    position: relative;

    width: 100%;

    padding:
        clamp(48px, 6vw, 80px)
        0;
}


.cs-page-content-sm {
    position: relative;

    width: 100%;

    padding:
        clamp(36px, 5vw, 60px)
        0;
}


.cs-page-content-lg {
    position: relative;

    width: 100%;

    padding:
        clamp(64px, 8vw, 112px)
        0;
}


.cs-page-soft {
    background:
        var(--cs-bg-soft);
}


.cs-page-blue {
    background:
        var(--cs-bg-blue);
}


.cs-page-gradient {
    background:
        var(--cs-gradient-soft);
}


/* ============================================================
   04. PAGE HEADER / INNER HERO
============================================================ */

.cs-page-header {
    position: relative;

    overflow: hidden;

    padding:
        clamp(54px, 7vw, 88px)
        0;

    border-bottom:
        1px solid
        var(--cs-border-light);

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(var(--cs-primary-rgb), 0.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(14, 165, 233, 0.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9ff 100%
        );
}


.cs-page-header::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -100px;

    width: 340px;
    height: 340px;

    border:
        1px solid
        rgba(var(--cs-primary-rgb), 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.cs-page-header::after {
    content: "";

    position: absolute;

    bottom: -180px;
    left: -150px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background:
        rgba(var(--cs-primary-rgb), 0.025);

    pointer-events: none;
}


.cs-page-header .container,
.cs-page-header .cs-container {
    position: relative;

    z-index: 2;
}


.cs-page-header-content {
    width: 100%;
    max-width: 820px;
}


.cs-page-header-center {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}


.cs-page-header-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    padding:
        7px
        13px;

    border:
        1px solid
        var(--cs-border-primary);

    border-radius:
        var(--cs-radius-pill);

    background:
        rgba(255, 255, 255, 0.78);

    color:
        var(--cs-primary-dark);

    font-size: 0.78rem;
    font-weight:
        var(--cs-font-bold);

    line-height: 1;

    letter-spacing: 0.055em;

    text-transform: uppercase;

    box-shadow:
        var(--cs-shadow-xs);

    backdrop-filter:
        blur(8px);
}


.cs-page-header-title {
    margin-bottom: 18px;

    font-size:
        clamp(
            2.1rem,
            5vw,
            3.85rem
        );

    line-height: 1.1;

    letter-spacing: -0.045em;
}


.cs-page-header-description {
    max-width: 700px;

    margin-bottom: 0;

    color:
        var(--cs-text-muted);

    font-size:
        clamp(
            1rem,
            1.6vw,
            1.15rem
        );

    line-height: 1.75;
}


.cs-page-header-center
.cs-page-header-description {
    margin-right: auto;
    margin-left: auto;
}


/* ============================================================
   05. BREADCRUMB LAYOUT
============================================================ */

.cs-breadcrumb-wrap {
    margin-bottom: 18px;
}


.cs-breadcrumb {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;

    color:
        var(--cs-text-muted);

    font-size: 0.875rem;
}


.cs-breadcrumb li {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.cs-breadcrumb li:not(:last-child)::after {
    content: "\F285";

    color:
        var(--cs-gray-400);

    font-family:
        "bootstrap-icons";

    font-size: 0.7rem;
}


.cs-breadcrumb a {
    color:
        var(--cs-text-muted);

    font-weight:
        var(--cs-font-medium);
}


.cs-breadcrumb a:hover {
    color:
        var(--cs-primary);
}


.cs-breadcrumb li:last-child {
    color:
        var(--cs-text-dark);

    font-weight:
        var(--cs-font-semibold);
}


/* ============================================================
   06. GENERIC FLEX LAYOUTS
============================================================ */

.cs-flex {
    display: flex;
}


.cs-flex-center {
    display: flex;

    align-items: center;
    justify-content: center;
}


.cs-flex-between {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.cs-flex-start {
    display: flex;

    align-items: flex-start;
}


.cs-flex-column {
    display: flex;

    flex-direction: column;
}


.cs-flex-wrap {
    flex-wrap: wrap;
}


.cs-align-center {
    align-items: center;
}


.cs-align-start {
    align-items: flex-start;
}


.cs-align-end {
    align-items: flex-end;
}


.cs-justify-center {
    justify-content: center;
}


.cs-justify-between {
    justify-content: space-between;
}


.cs-justify-end {
    justify-content: flex-end;
}


/* ============================================================
   07. GAP SYSTEM
============================================================ */

.cs-gap-1 {
    gap: var(--cs-space-1);
}


.cs-gap-2 {
    gap: var(--cs-space-2);
}


.cs-gap-3 {
    gap: var(--cs-space-3);
}


.cs-gap-4 {
    gap: var(--cs-space-4);
}


.cs-gap-5 {
    gap: var(--cs-space-5);
}


.cs-gap-6 {
    gap: var(--cs-space-6);
}


.cs-gap-8 {
    gap: var(--cs-space-8);
}


.cs-gap-10 {
    gap: var(--cs-space-10);
}


.cs-gap-12 {
    gap: var(--cs-space-12);
}


/* ============================================================
   08. CSS GRID FOUNDATION
============================================================ */

.cs-grid {
    display: grid;

    min-width: 0;
}


.cs-grid-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.cs-grid-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.cs-grid-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.cs-grid-auto {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );
}


.cs-grid-auto-sm {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(200px, 1fr)
        );
}


.cs-grid-auto-lg {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );
}


/* ============================================================
   09. COMMON TWO COLUMN LAYOUT
============================================================ */

.cs-split-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.85fr);

    align-items: center;

    gap:
        clamp(
            40px,
            6vw,
            84px
        );
}


.cs-split-layout-reverse {
    grid-template-columns:
        minmax(360px, 0.85fr)
        minmax(0, 1fr);
}


.cs-split-content {
    min-width: 0;
}


.cs-split-media {
    position: relative;

    min-width: 0;
}


/* ============================================================
   10. CONTENT + SIDEBAR LAYOUT
============================================================ */

.cs-content-sidebar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    align-items: start;

    gap: 32px;
}


.cs-sidebar-content {
    min-width: 0;
}


.cs-sidebar {
    min-width: 0;
}


.cs-sidebar-sticky {
    position: sticky;

    top: 120px;
}


/* ============================================================
   11. JOB LISTING LAYOUT
============================================================ */

.cs-jobs-layout {
    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

    align-items: start;

    gap: 28px;
}


.cs-jobs-filter-column {
    min-width: 0;
}


.cs-jobs-results-column {
    min-width: 0;
}


.cs-jobs-filter-sticky {
    position: sticky;

    top: 120px;
}


.cs-jobs-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.cs-jobs-toolbar-left,
.cs-jobs-toolbar-right {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* ============================================================
   12. JOB DETAIL LAYOUT
============================================================ */

.cs-job-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    align-items: start;

    gap: 32px;
}


.cs-job-detail-main {
    min-width: 0;
}


.cs-job-detail-aside {
    min-width: 0;
}


.cs-job-detail-sticky {
    position: sticky;

    top: 120px;
}


/* ============================================================
   13. AUTHENTICATION PAGE LAYOUT
============================================================ */

.cs-auth-page {
    position: relative;

    display: flex;

    align-items: stretch;

    min-height:
        calc(
            100vh -
            var(--cs-navbar-height)
        );

    overflow: hidden;

    background:
        var(--cs-bg-soft);
}


.cs-auth-layout {
    display: grid;

    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(520px, 1.1fr);

    width: 100%;
    min-height:
        calc(
            100vh -
            var(--cs-navbar-height)
        );
}


.cs-auth-visual {
    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        clamp(
            48px,
            6vw,
            88px
        );

    background:
        var(--cs-gradient-primary-dark);

    color:
        var(--cs-white);
}


.cs-auth-visual::before {
    content: "";

    position: absolute;

    top: -150px;
    right: -160px;

    width: 420px;
    height: 420px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}


.cs-auth-visual::after {
    content: "";

    position: absolute;

    bottom: -220px;
    left: -170px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.045);
}


.cs-auth-visual-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 560px;

    margin:
        0 auto;
}


.cs-auth-form-side {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    padding:
        clamp(
            40px,
            6vw,
            80px
        )
        clamp(
            24px,
            5vw,
            72px
        );

    background:
        var(--cs-white);
}


.cs-auth-form-wrap {
    width: 100%;
    max-width: 520px;

    margin:
        0 auto;
}


.cs-auth-form-wrap-sm {
    max-width: 440px;
}


.cs-auth-form-wrap-lg {
    max-width: 620px;
}


/* ============================================================
   14. AUTH CENTERED CARD LAYOUT
============================================================ */

.cs-auth-centered {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height:
        calc(
            100vh -
            var(--cs-navbar-height)
        );

    padding:
        clamp(48px, 7vw, 88px)
        20px;

    overflow: hidden;

    background:
        var(--cs-gradient-soft);
}


.cs-auth-centered::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -160px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        rgba(var(--cs-primary-rgb), 0.055);
}


.cs-auth-centered::after {
    content: "";

    position: absolute;

    bottom: -220px;
    left: -160px;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    background:
        rgba(14, 165, 233, 0.05);
}


.cs-auth-centered-card {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;
}


/* ============================================================
   15. CANDIDATE APPLICATION SHELL
============================================================ */

.cs-app-shell {
    position: relative;

    display: flex;

    width: 100%;
    min-height:
        calc(
            100vh -
            var(--cs-navbar-height)
        );

    background:
        #f6f8fc;
}


.cs-app-sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index:
        var(--cs-z-fixed);

    display: flex;

    flex-direction: column;

    width: 280px;

    overflow-y: auto;

    border-right:
        1px solid
        var(--cs-border-light);

    background:
        var(--cs-white);

    box-shadow:
        6px 0 24px
        rgba(16, 24, 40, 0.025);

    transition:
        transform
        var(--cs-transition);
}


.cs-app-main {
    display: flex;

    flex-direction: column;

    width:
        calc(
            100% - 280px
        );

    min-width: 0;
    min-height: 100vh;

    margin-left: 280px;
}


.cs-app-topbar {
    position: sticky;

    top: 0;

    z-index:
        var(--cs-z-sticky);

    display: flex;

    align-items: center;

    min-height: 72px;

    border-bottom:
        1px solid
        var(--cs-border-light);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 1px 8px
        rgba(16, 24, 40, 0.025);

    backdrop-filter:
        blur(16px);
}


.cs-app-topbar-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    padding:
        12px
        28px;
}


.cs-app-content {
    flex: 1 0 auto;

    width: 100%;
    min-width: 0;

    padding:
        30px;
}


.cs-app-content-inner {
    width: 100%;
    max-width: 1480px;

    margin:
        0 auto;
}


/* ============================================================
   16. APPLICATION SIDEBAR INTERNAL LAYOUT
============================================================ */

.cs-app-sidebar-header {
    display: flex;

    align-items: center;

    min-height: 78px;

    padding:
        16px
        20px;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-app-sidebar-body {
    flex: 1 1 auto;

    padding:
        20px
        14px;
}


.cs-app-sidebar-footer {
    padding:
        16px;

    border-top:
        1px solid
        var(--cs-border-light);
}


/* ============================================================
   17. DASHBOARD PAGE HEADER
============================================================ */

.cs-dashboard-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;
}


.cs-dashboard-header-content {
    min-width: 0;
}


.cs-dashboard-title {
    margin-bottom: 6px;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.25rem
        );

    letter-spacing: -0.035em;
}


.cs-dashboard-description {
    max-width: 760px;

    margin: 0;

    color:
        var(--cs-text-muted);

    line-height: 1.65;
}


.cs-dashboard-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    flex-shrink: 0;
}


/* ============================================================
   18. DASHBOARD GRID SYSTEM
============================================================ */

.cs-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 24px;
}


.cs-col-12 {
    grid-column:
        span 12;
}


.cs-col-9 {
    grid-column:
        span 9;
}


.cs-col-8 {
    grid-column:
        span 8;
}


.cs-col-7 {
    grid-column:
        span 7;
}


.cs-col-6 {
    grid-column:
        span 6;
}


.cs-col-5 {
    grid-column:
        span 5;
}


.cs-col-4 {
    grid-column:
        span 4;
}


.cs-col-3 {
    grid-column:
        span 3;
}


/* ============================================================
   19. DASHBOARD STAT GRID
============================================================ */

.cs-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.cs-stat-grid-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.cs-stat-grid-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* ============================================================
   20. PANEL LAYOUT
============================================================ */

.cs-panel {
    position: relative;

    min-width: 0;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);
}


.cs-panel-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding:
        22px
        24px;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-panel-heading {
    min-width: 0;
}


.cs-panel-title {
    margin-bottom: 4px;

    font-size: 1.05rem;

    font-weight:
        var(--cs-font-bold);

    letter-spacing: -0.015em;
}


.cs-panel-description {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.875rem;

    line-height: 1.55;
}


.cs-panel-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.cs-panel-body {
    padding:
        24px;
}


.cs-panel-body-sm {
    padding:
        18px;
}


.cs-panel-body-lg {
    padding:
        30px;
}


.cs-panel-footer {
    padding:
        18px
        24px;

    border-top:
        1px solid
        var(--cs-border-light);

    background:
        var(--cs-gray-25);

    border-radius:
        0
        0
        var(--cs-radius-xl)
        var(--cs-radius-xl);
}


/* ============================================================
   21. PROFILE / SETTINGS LAYOUT
============================================================ */

.cs-settings-layout {
    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr);

    align-items: start;

    gap: 28px;
}


.cs-settings-nav {
    position: sticky;

    top: 96px;

    min-width: 0;
}


.cs-settings-content {
    min-width: 0;
}


/* ============================================================
   22. PAYMENT PAGE LAYOUT
============================================================ */

.cs-payment-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        400px;

    align-items: start;

    gap: 32px;
}


.cs-payment-main {
    min-width: 0;
}


.cs-payment-aside {
    min-width: 0;
}


.cs-payment-sticky {
    position: sticky;

    top: 110px;
}


/* ============================================================
   23. ASSESSMENT LAYOUT
============================================================ */

.cs-assessment-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    align-items: start;

    gap: 28px;
}


.cs-assessment-main {
    min-width: 0;
}


.cs-assessment-sidebar {
    min-width: 0;
}


.cs-assessment-sticky {
    position: sticky;

    top: 100px;
}


/* ============================================================
   24. FORM SECTION LAYOUT
============================================================ */

.cs-form-section {
    padding:
        26px
        0;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-form-section:first-child {
    padding-top: 0;
}


.cs-form-section:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.cs-form-section-grid {
    display: grid;

    grid-template-columns:
        240px
        minmax(0, 1fr);

    gap: 36px;
}


.cs-form-section-info {
    min-width: 0;
}


.cs-form-section-fields {
    min-width: 0;
}


.cs-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        20px
        18px;
}


.cs-form-grid-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.cs-form-full {
    grid-column:
        1 / -1;
}


/* ============================================================
   25. TABLE / DATA AREA
============================================================ */

.cs-data-layout {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);
}


.cs-data-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding:
        18px
        20px;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-data-toolbar-left,
.cs-data-toolbar-right {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap: 10px;
}


.cs-table-responsive {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling:
        touch;
}


/* ============================================================
   26. SEARCH / FILTER LAYOUT
============================================================ */

.cs-search-layout {
    display: grid;

    grid-template-columns:
        minmax(220px, 1.5fr)
        repeat(
            2,
            minmax(160px, 0.8fr)
        )
        auto;

    align-items: end;

    gap: 12px;
}


.cs-search-field {
    min-width: 0;
}


.cs-search-action {
    flex-shrink: 0;
}


/* ============================================================
   27. ACTION BAR
============================================================ */

.cs-action-bar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        18px
        20px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-xs);
}


.cs-action-bar-content {
    min-width: 0;
}


.cs-action-bar-actions {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


/* ============================================================
   28. STICKY ACTION FOOTER
============================================================ */

.cs-sticky-actions {
    position: sticky;

    bottom: 0;

    z-index: 50;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    margin:
        28px
        -30px
        -30px;

    padding:
        16px
        30px;

    border-top:
        1px solid
        var(--cs-border-light);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 -8px 24px
        rgba(16, 24, 40, 0.045);

    backdrop-filter:
        blur(14px);
}


/* ============================================================
   29. CENTERED STATE LAYOUT
============================================================ */

.cs-state-layout {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 360px;

    padding:
        48px
        24px;

    text-align: center;
}


.cs-state-content {
    width: 100%;
    max-width: 540px;

    margin:
        0 auto;
}


.cs-state-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 22px;

    border-radius:
        var(--cs-radius-2xl);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);

    font-size: 1.75rem;
}


.cs-state-title {
    margin-bottom: 10px;

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.75rem
        );
}


.cs-state-description {
    margin:
        0 auto;

    color:
        var(--cs-text-muted);

    line-height: 1.7;
}


/* ============================================================
   30. LOADING LAYOUT
============================================================ */

.cs-loading-layout {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 200px;

    color:
        var(--cs-text-muted);
}


.cs-loading-spinner {
    width: 24px;
    height: 24px;

    border:
        3px solid
        var(--cs-gray-200);

    border-top-color:
        var(--cs-primary);

    border-radius: 50%;

    animation:
        cs-layout-spin
        0.8s
        linear
        infinite;
}


@keyframes cs-layout-spin {

    to {
        transform:
            rotate(360deg);
    }
}


/* ============================================================
   31. MODAL LAYOUT HELPERS
============================================================ */

.cs-modal-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.cs-modal-content {
    min-width: 0;
}


.cs-modal-actions {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}


/* ============================================================
   32. WIDTH UTILITIES
============================================================ */

.cs-w-100 {
    width: 100% !important;
}


.cs-max-400 {
    max-width: 400px !important;
}


.cs-max-500 {
    max-width: 500px !important;
}


.cs-max-600 {
    max-width: 600px !important;
}


.cs-max-700 {
    max-width: 700px !important;
}


.cs-max-800 {
    max-width: 800px !important;
}


.cs-max-900 {
    max-width: 900px !important;
}


.cs-max-1000 {
    max-width: 1000px !important;
}


/* ============================================================
   33. POSITION UTILITIES
============================================================ */

.cs-relative {
    position: relative !important;
}


.cs-sticky {
    position: sticky;

    top: 100px;
}


.cs-overflow-hidden {
    overflow: hidden !important;
}


.cs-overflow-auto {
    overflow: auto !important;
}


/* ============================================================
   34. RESPONSIVE — LARGE TABLET / SMALL DESKTOP
============================================================ */

@media (max-width: 1199.98px) {

    .cs-content-sidebar {
        grid-template-columns:
            minmax(0, 1fr)
            320px;
    }


    .cs-job-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            330px;
    }


    .cs-payment-layout {
        grid-template-columns:
            minmax(0, 1fr)
            360px;
    }


    .cs-jobs-layout {
        grid-template-columns:
            270px
            minmax(0, 1fr);
    }


    .cs-assessment-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;
    }


    .cs-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .cs-col-3 {
        grid-column:
            span 6;
    }


    .cs-auth-layout {
        grid-template-columns:
            minmax(380px, 0.85fr)
            minmax(480px, 1.15fr);
    }
}


/* ============================================================
   35. RESPONSIVE — TABLET
============================================================ */

@media (max-width: 991.98px) {

    .cs-container,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-container-reading {
        padding-right: 20px;
        padding-left: 20px;
    }


    .cs-grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .cs-grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .cs-split-layout,
    .cs-split-layout-reverse {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 42px;
    }


    .cs-content-sidebar,
    .cs-job-detail-layout,
    .cs-payment-layout,
    .cs-assessment-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .cs-sidebar-sticky,
    .cs-job-detail-sticky,
    .cs-payment-sticky,
    .cs-assessment-sticky {
        position: static;
    }


    .cs-jobs-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .cs-jobs-filter-sticky {
        position: static;
    }


    .cs-auth-layout {
        grid-template-columns:
            minmax(0, 1fr);

        min-height: auto;
    }


    .cs-auth-visual {
        min-height: 360px;

        padding:
            56px
            32px;
    }


    .cs-auth-form-side {
        padding:
            56px
            24px;
    }


    .cs-settings-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .cs-settings-nav {
        position: static;
    }


    .cs-form-section-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 18px;
    }


    .cs-search-layout {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /**
     * Application shell becomes off-canvas.
     */

    .cs-app-sidebar {
        width: 280px;

        transform:
            translateX(-100%);
    }


    .cs-app-shell.sidebar-open
    .cs-app-sidebar {
        transform:
            translateX(0);
    }


    .cs-app-main {
        width: 100%;

        margin-left: 0;
    }


    .cs-app-content {
        padding:
            24px;
    }


    .cs-sticky-actions {
        margin:
            24px
            -24px
            -24px;

        padding:
            14px
            24px;
    }


    .cs-dashboard-grid {
        gap: 20px;
    }


    .cs-col-9,
    .cs-col-8,
    .cs-col-7,
    .cs-col-5,
    .cs-col-4 {
        grid-column:
            span 6;
    }
}


/* ============================================================
   36. RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .cs-container,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-container-reading {
        padding-right: 16px;
        padding-left: 16px;
    }


    .cs-page-content {
        padding:
            48px
            0;
    }


    .cs-page-content-sm {
        padding:
            38px
            0;
    }


    .cs-page-content-lg {
        padding:
            58px
            0;
    }


    .cs-page-header {
        padding:
            46px
            0;
    }


    .cs-page-header-title {
        margin-bottom: 14px;
    }


    .cs-grid-2,
    .cs-grid-3,
    .cs-grid-4 {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .cs-dashboard-header {
        flex-direction: column;

        align-items: stretch;

        gap: 16px;

        margin-bottom: 22px;
    }


    .cs-dashboard-actions {
        justify-content: flex-start;
    }


    .cs-dashboard-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 16px;
    }


    .cs-col-12,
    .cs-col-9,
    .cs-col-8,
    .cs-col-7,
    .cs-col-6,
    .cs-col-5,
    .cs-col-4,
    .cs-col-3 {
        grid-column:
            auto;
    }


    .cs-stat-grid,
    .cs-stat-grid-2,
    .cs-stat-grid-3 {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 14px;
    }


    .cs-panel {
        border-radius:
            var(--cs-radius-lg);
    }


    .cs-panel-header {
        padding:
            18px;
    }


    .cs-panel-body {
        padding:
            18px;
    }


    .cs-panel-body-sm {
        padding:
            16px;
    }


    .cs-panel-body-lg {
        padding:
            20px;
    }


    .cs-panel-footer {
        padding:
            16px
            18px;

        border-radius:
            0
            0
            var(--cs-radius-lg)
            var(--cs-radius-lg);
    }


    .cs-form-grid,
    .cs-form-grid-3 {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 16px;
    }


    .cs-search-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .cs-jobs-toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .cs-jobs-toolbar-left,
    .cs-jobs-toolbar-right {
        width: 100%;
    }


    .cs-action-bar {
        flex-direction: column;

        align-items: stretch;
    }


    .cs-action-bar-actions {
        width: 100%;
    }


    .cs-data-toolbar {
        flex-direction: column;

        align-items: stretch;
    }


    .cs-data-toolbar-left,
    .cs-data-toolbar-right {
        width: 100%;
    }


    .cs-auth-visual {
        min-height: auto;

        padding:
            44px
            20px;
    }


    .cs-auth-form-side {
        padding:
            44px
            18px;
    }


    .cs-auth-centered {
        padding:
            48px
            16px;
    }


    .cs-app-topbar-inner {
        padding:
            10px
            16px;
    }


    .cs-app-content {
        padding:
            18px
            16px;
    }


    .cs-sticky-actions {
        flex-wrap: wrap;

        margin:
            20px
            -16px
            -18px;

        padding:
            14px
            16px;
    }


    .cs-state-layout {
        min-height: 300px;

        padding:
            40px
            18px;
    }
}


/* ============================================================
   37. RESPONSIVE — SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .cs-container,
    .cs-container-wide,
    .cs-container-narrow,
    .cs-container-reading {
        padding-right: 14px;
        padding-left: 14px;
    }


    .cs-page-header {
        padding:
            40px
            0;
    }


    .cs-page-header-eyebrow {
        margin-bottom: 13px;

        font-size: 0.7rem;
    }


    .cs-page-header-title {
        font-size:
            clamp(
                1.85rem,
                9vw,
                2.45rem
            );
    }


    .cs-page-header-description {
        font-size: 0.96rem;

        line-height: 1.7;
    }


    .cs-auth-visual {
        padding:
            38px
            16px;
    }


    .cs-auth-form-side {
        padding:
            38px
            14px;
    }


    .cs-auth-centered {
        padding:
            40px
            12px;
    }


    .cs-panel-header {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    .cs-panel-actions {
        width: 100%;
    }


    .cs-dashboard-actions {
        width: 100%;
    }


    .cs-app-content {
        padding:
            16px
            12px;
    }


    .cs-app-topbar-inner {
        padding:
            10px
            12px;
    }


    .cs-sticky-actions {
        margin:
            18px
            -12px
            -16px;

        padding:
            12px;
    }


    .cs-sticky-actions > * {
        flex:
            1 1 auto;
    }
}


/* ============================================================
   38. APPLICATION SIDEBAR OVERLAY
============================================================ */

.cs-app-overlay {
    position: fixed;

    inset: 0;

    z-index:
        calc(
            var(--cs-z-fixed) - 1
        );

    display: none;

    background:
        rgba(15, 23, 42, 0.48);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity var(--cs-transition),
        visibility var(--cs-transition);

    backdrop-filter:
        blur(2px);
}


@media (max-width: 991.98px) {

    .cs-app-overlay {
        display: block;
    }


    .cs-app-shell.sidebar-open
    .cs-app-overlay {
        opacity: 1;

        visibility: visible;
    }
}


/* ============================================================
   39. PRINT LAYOUT
============================================================ */

@media print {

    .cs-page-content,
    .cs-page-content-sm,
    .cs-page-content-lg {
        padding:
            20px
            0;
    }


    .cs-app-sidebar,
    .cs-app-topbar,
    .cs-app-overlay,
    .cs-sticky-actions,
    .cs-dashboard-actions {
        display: none !important;
    }


    .cs-app-main {
        width: 100% !important;

        margin-left: 0 !important;
    }


    .cs-app-content {
        padding: 0 !important;
    }


    .cs-panel,
    .cs-data-layout {
        border:
            1px solid
            #dddddd !important;

        box-shadow:
            none !important;
    }


    .cs-content-sidebar,
    .cs-job-detail-layout,
    .cs-payment-layout,
    .cs-assessment-layout,
    .cs-settings-layout,
    .cs-form-section-grid {
        display: block;
    }


    .cs-sidebar-sticky,
    .cs-job-detail-sticky,
    .cs-payment-sticky,
    .cs-assessment-sticky,
    .cs-settings-nav {
        position: static;
    }
}


/* ============================================================
   40. REDUCED MOTION
============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .cs-app-sidebar,
    .cs-app-overlay {
        transition: none;
    }


    .cs-loading-spinner {
        animation-duration:
            1.5s !important;
    }
}


/* ============================================================
   END OF GLOBAL LAYOUT SYSTEM
============================================================ */