/* ============================================================
   Worx shared layout system
   Site.Master loads this once for the whole application.
   Page-level CSS should only handle page-specific widgets.
   ============================================================ */

:root {
    --worx-shell-detail: 1140px;
    --worx-shell-browse: 1140px;
    --worx-gap: 1rem;
    --worx-nav-bg: rgba(16, 21, 31, 0.94);
    --worx-nav-border: rgba(255, 255, 255, 0.08);
    --worx-nav-link: rgba(226, 232, 240, 0.82);
    --worx-nav-link-hover: #ffffff;
    --worx-nav-pill: rgba(255, 255, 255, 0.06);
    --worx-nav-pill-border: rgba(255, 255, 255, 0.1);
    --worx-border: #e5e7eb;
    --worx-card-header: #f8fafc;
    --worx-text: #212529;
    --worx-muted: #6c757d;
    --worx-table-header-bg: #f8fafc;
    --worx-table-hover-bg: #f3f7fb;
    --worx-table-hover-border: #dbe7f3;
    --worx-table-row-bg: #ffffff;
}

html {
    scrollbar-gutter: stable;
}

.navbar.sticky-top {
    width: 100vw;
}

.body-content {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.worx-global-nav {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92)) !important;
    border-bottom: 1px solid var(--worx-nav-border);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.35rem 1rem rgba(15, 23, 42, 0.12);
}

.worx-global-nav .container-fluid {
    min-height: 4.5rem;
}

.worx-global-nav .navbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f8fafc;
}

.worx-global-nav .navbar-brand:hover,
.worx-global-nav .navbar-brand:focus {
    color: #ffffff;
}

.worx-global-nav .navbar-toggler {
    border: 1px solid var(--worx-nav-pill-border);
    border-radius: 0.9rem;
    padding: 0.55rem 0.7rem;
    background: var(--worx-nav-pill);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.worx-global-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(125, 211, 252, 0.24);
}

.worx-nav-collapse {
    align-items: center;
}

.worx-main-nav,
.worx-session-nav {
    gap: 0.4rem;
}

.worx-global-nav .nav-link {
    color: var(--worx-nav-link);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    transition: color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.worx-global-nav .nav-link:hover,
.worx-global-nav .nav-link:focus,
.worx-global-nav .nav-link[aria-expanded="true"] {
    color: var(--worx-nav-link-hover);
    background: var(--worx-nav-pill);
    box-shadow: inset 0 0 0 1px var(--worx-nav-pill-border);
}

.worx-session-nav {
    align-items: center;
}

.worx-session-nav > li {
    list-style: none;
}

.worx-session-nav > li > .nav-link:not(.dropdown-toggle) {
    padding-left: 1rem;
    padding-right: 1rem;
}

.site-page-column {
    max-width: var(--worx-shell-detail);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.site-page-column > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.site-page-column:has(.doc-preview-layout) {
    max-width: none;
}

.body-content > hr,
.body-content > footer {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.body-content > main:not(.container-fluid) {
    max-width: var(--worx-shell-detail);
    margin-left: auto;
    margin-right: auto;
    padding: 1rem calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.page-shell,
.detail-shell,
.client-page-shell,
.job-page-shell,
.office-page-shell,
.template-page-shell,
.doc-details-page {
    max-width: var(--worx-shell-detail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.browse-shell {
    max-width: var(--worx-shell-browse) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-topbar,
.client-page-topbar,
.job-page-topbar,
.office-page-topbar,
.template-page-topbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.page-title,
.client-page-title,
.job-page-title,
.office-page-title,
.template-page-title {
    margin: 0 !important;
    font-size: calc(1.3rem + 0.6vw) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: var(--worx-text) !important;
}

.page-subtitle,
.client-page-subtitle {
    display: none !important;
}

.page-actions,
.client-page-actions,
.job-page-actions,
.office-page-actions,
.template-page-actions,
.doc-details-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.detail-card,
.card,
.tab-card,
.client-details-card,
.job-details-card,
.office-details-card,
.template-details-card,
.client-tab-card,
.job-tab-card,
.template-panel-card {
    border: 1px solid var(--worx-border) !important;
    border-radius: 0.375rem !important;
    overflow: hidden !important;
    background: #fff !important;
}

.detail-card > .card-body,
.client-details-card > .card-body,
.job-details-card > .card-body,
.office-details-card > .card-body,
.template-details-card > .card-body {
    padding: 0 !important;
}

.card > .card-header,
.tab-card .card-header,
.client-tab-card .card-header,
.job-tab-card .card-header,
.template-panel-card .card-header {
    background: var(--worx-card-header) !important;
    border-bottom-color: var(--worx-border) !important;
}

.table-responsive {
    margin-bottom: 0;
}

.table {
    --bs-table-bg: var(--worx-table-row-bg);
    --bs-table-striped-bg: var(--worx-table-row-bg);
    --bs-table-striped-color: var(--worx-text);
    --bs-table-hover-bg: var(--worx-table-hover-bg);
    --bs-table-hover-color: var(--worx-text);
    --bs-table-border-color: var(--worx-border);
    margin-bottom: 0;
    color: var(--worx-text);
    border-color: var(--worx-border);
}

.table > :not(caption) > * > * {
    padding: 0.95rem 0.9rem;
    background-color: var(--worx-table-row-bg);
    border-bottom-color: var(--worx-border);
    box-shadow: none !important;
    vertical-align: middle;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.table > thead {
    vertical-align: middle;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background: var(--worx-table-header-bg) !important;
    color: #334155;
    font-weight: 600;
    border-bottom-width: 1px;
}

.table > tbody > tr > th {
    background: var(--worx-table-header-bg) !important;
    color: #334155;
    font-weight: 600;
    border-bottom-width: 1px;
    cursor: default;
}

.table > tbody > tr:nth-of-type(odd) > *,
.table > tbody > tr:nth-of-type(even) > * {
    background-color: var(--worx-table-row-bg) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: transparent;
    background-color: var(--worx-table-row-bg) !important;
    color: var(--worx-text) !important;
}

.table-hover > tbody > tr:hover > *,
.table.table-striped.table-hover > tbody > tr:hover > * {
    background-color: var(--worx-table-hover-bg) !important;
    border-bottom-color: var(--worx-table-hover-border) !important;
    color: var(--worx-text) !important;
}

.table-hover > tbody > tr:hover > th,
.table.table-striped.table-hover > tbody > tr:hover > th {
    background: var(--worx-table-header-bg) !important;
    border-bottom-color: var(--worx-border) !important;
    color: #334155 !important;
}

.detail-form-section,
.client-form-section,
.job-form-section,
.office-form-section,
.template-form-section {
    display: block !important;
    padding: 1rem !important;
    border-bottom: 1px solid var(--worx-border) !important;
}

.detail-form-section:last-of-type,
.client-form-section:last-of-type,
.job-form-section:last-of-type,
.office-form-section:last-of-type,
.template-form-section:last-of-type {
    border-bottom: 0 !important;
}

.detail-form-section-title,
.client-form-section-title,
.job-form-section-title,
.office-form-section-title,
.template-form-section-title {
    display: none !important;
}

.detail-form-grid,
.client-form-grid,
.job-form-grid,
.office-form-grid,
.template-form-grid,
.client-form-grid-three,
.job-form-grid-three,
.office-form-grid-three,
.office-form-grid-four,
.template-form-grid-three {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.client-form-grid-four {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.client-form-grid-two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.detail-field-wide,
.client-field-wide,
.job-field-wide,
.office-field-wide,
.template-field-wide {
    grid-column: 1 / -1 !important;
}

.job-field-span-two {
    grid-column: span 2 !important;
}

.detail-form-actions,
.client-form-actions,
.job-form-actions,
.office-form-actions,
.template-form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
    background: #fff !important;
    border-top: 1px solid var(--worx-border) !important;
}

.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
    max-width: none;
}

.form-control[readonly],
input[type="text"][readonly],
input[type="password"][readonly],
input[type="email"][readonly],
input[type="tel"][readonly],
input[type="number"][readonly],
textarea[readonly] {
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
    color: var(--bs-secondary-color, #6c757d) !important;
    border-color: var(--bs-border-color, #ced4da) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.form-control[readonly]:focus,
input[type="text"][readonly]:focus,
input[type="password"][readonly]:focus,
input[type="email"][readonly]:focus,
input[type="tel"][readonly]:focus,
input[type="number"][readonly]:focus,
textarea[readonly]:focus {
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
    color: var(--bs-secondary-color, #6c757d) !important;
    border-color: var(--bs-border-color, #ced4da) !important;
    box-shadow: none !important;
}

.detail-card .form-control,
.detail-card .form-select,
.client-details-card .form-control,
.client-details-card .form-select,
.job-details-card .form-control,
.job-details-card .form-select,
.office-details-card .form-control,
.office-details-card .form-select,
.template-details-card .form-control,
.template-details-card .form-select {
    width: 100% !important;
}

.detail-card .form-label,
.client-details-card .form-label,
.job-details-card .form-label,
.office-details-card .form-label,
.template-details-card .form-label {
    margin-bottom: 0.5rem !important;
}

.mobile-data-card,
.client-mobile-card,
.job-mobile-card {
    border: 1px solid #d8dee6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 1rem !important;
    box-shadow: none !important;
}

.dl-horizontal dt {
    white-space: normal;
}

.btn.btn-working {
    cursor: wait !important;
    opacity: 0.82;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.18);
}

.btn-superadmin {
    --bs-btn-color: #fff;
    --bs-btn-bg: #fd7e14;
    --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc6502;
    --bs-btn-hover-border-color: #dc6502;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #c85c02;
    --bs-btn-active-border-color: #c85c02;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #fd7e14;
    --bs-btn-disabled-border-color: #fd7e14;
}

.btn-outline-superadmin {
    --bs-btn-color: #d96200;
    --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fd7e14;
    --bs-btn-hover-border-color: #fd7e14;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc6502;
    --bs-btn-active-border-color: #dc6502;
    --bs-btn-disabled-color: #fd7e14;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fd7e14;
}

.btn-admin {
    --bs-btn-color: #212529;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-outline-admin {
    --bs-btn-color: #8a6200;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-manager {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-outline-manager {
    --bs-btn-color: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: #198754;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-disabled-color: #198754;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #198754;
}

.super-admin-pill {
    background: #fd7e14;
    border-radius: .25rem;
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    padding: .25rem .4rem;
}

.super-admin-select {
    border-color: #fd7e14 !important;
    box-shadow: 0 0 0 .08rem rgba(253, 126, 20, .18) !important;
}

.page-working,
.page-working * {
    cursor: wait !important;
}

@media (max-width: 767.98px) {
    .page-topbar,
    .client-page-topbar,
    .job-page-topbar,
    .office-page-topbar,
    .template-page-topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: start !important;
        column-gap: 0.75rem !important;
    }

    .detail-form-section,
    .client-form-section,
    .job-form-section,
    .office-form-section,
    .template-form-section {
        padding: 1.2rem !important;
    }

    .detail-form-grid,
    .client-form-grid,
    .job-form-grid,
    .office-form-grid,
    .template-form-grid,
    .client-form-grid-three,
    .job-form-grid-three,
    .office-form-grid-three,
    .office-form-grid-four,
    .template-form-grid-three {
        grid-template-columns: 1fr !important;
    }

    .detail-form-actions,
    .client-form-actions,
    .job-form-actions,
    .office-form-actions,
    .template-form-actions {
        flex-direction: column-reverse !important;
        padding: 1.2rem !important;
    }

    .detail-form-actions .btn,
    .client-form-actions .btn,
    .job-form-actions .btn,
    .office-form-actions .btn,
    .template-form-actions .btn {
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    .worx-nav-collapse {
        margin-top: 0.9rem;
        padding: 0.8rem;
        border: 1px solid var(--worx-nav-pill-border);
        border-radius: 1.1rem;
        background: rgba(15, 23, 42, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .worx-main-nav,
    .worx-session-nav {
        gap: 0.2rem;
    }

    .worx-main-nav {
        margin-bottom: 0.8rem;
    }

    .worx-session-nav {
        margin-top: 0.4rem;
    }

    .worx-session-nav > li > .nav-link:not(.dropdown-toggle) {
        display: block;
        text-align: center;
    }
}