/* Modern CSS Overrides - Makes existing HTML look modern */

/* ━━━━━━━━━━━━━━━━━━━━━ DARK STICKY JOB HEADER (coach-job-new.php) ━━━━━━━━━━━━━━━━━━━━━ */
/* .cj-header is a bespoke dark-navy bar with its own white-on-dark styling baked into
   inline styles. The global .form-control/.btn-outline rules below force a light-page
   look (white bg, dark text) that makes controls inside this dark bar invisible —
   restore proper contrast here with matching or higher specificity. */
.cj-header .btn-outline {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.cj-header .btn-outline:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.cj-header .form-control {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.cj-header .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.cj-header .form-control option {
    color: var(--text-primary) !important;
    background: #fff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ TABLES ━━━━━━━━━━━━━━━━━━━━━ */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

table thead {
    background: var(--light-bg) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

table th {
    padding: 14px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
}

table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 14px !important;
}

table tbody tr {
    transition: all 0.2s ease !important;
}

table tbody tr:hover {
    background: var(--light-bg) !important;
}

table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ CARDS & PANELS ━━━━━━━━━━━━━━━━━━━━━ */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px) !important;
}

.panel {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-md) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ BUTTONS ━━━━━━━━━━━━━━━━━━━━━ */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    padding: 10px 20px !important;
}

.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 85%, #000 15%)) !important;
    color: white !important;
}

.btn-primary:hover {
    filter: brightness(1.1) !important;
}

.btn-secondary {
    background: var(--light-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover {
    background: var(--border-color) !important;
}

.btn-outline {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

.btn-outline:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 12px !important;
}

.btn-danger {
    background: var(--error) !important;
    color: white !important;
}

.btn-danger:hover {
    filter: brightness(1.1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ FORMS ━━━━━━━━━━━━━━━━━━━━━ */
/* .form-control gets the full forced modern look (used across the app's real forms). */
.form-control {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    background: white !important;
}

.form-control:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

/* Bare inputs without .form-control (e.g. compact inline table rows with their own
   inline padding/font-size) get a modern border only — NOT !important, so any inline
   sizing (like a dense line-item table) still wins instead of being squished. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], textarea, select {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    transition: all 0.2s ease;
    background: white;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ BADGES ━━━━━━━━━━━━━━━━━━━━━ */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--success) !important;
}

.badge-error {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--error) !important;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning) !important;
}

.badge-primary {
    background: rgba(27, 46, 75, 0.1) !important;
    color: var(--primary) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ MODALS ━━━━━━━━━━━━━━━━━━━━━ */
/* Match only real modal containers (id is "modal-xxx" or ends in "-modal"/"Modal") —
   NOT fields inside them like "cn-modal-amount" or "fault-modal-error". */
[id^="modal-"],
[id$="-modal"],
[id$="Modal"] {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    padding: 20px !important;
}

[id^="modal-"][style*="display: flex"],
[id$="-modal"][style*="display: flex"],
[id$="Modal"][style*="display: flex"] {
    display: flex !important;
}

[id^="modal-"] > div,
[id$="-modal"] > div,
[id$="Modal"] > div {
    background: var(--card-bg) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-xl) !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    animation: slideUp 0.3s ease !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━ SECTIONS ━━━━━━━━━━━━━━━━━━━━━ */
section {
    background: var(--card-bg) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    border: 1px solid var(--border-color) !important;
}

.section-header {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ EMPTY STATES ━━━━━━━━━━━━━━━━━━━━━ */
.empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    color: var(--text-secondary) !important;
}

.empty-state svg {
    color: var(--border-color) !important;
    margin-bottom: 16px !important;
}

.empty-state p {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: var(--text-primary) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ LAYOUT ADJUSTMENTS ━━━━━━━━━━━━━━━━━━━━━ */
.app-layout {
    display: flex !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.sidebar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}

main, .main-content {
    margin-left: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 36px 44px !important;
    overflow-y: auto !important;
    max-height: none !important;
    height: 100% !important;
    background: var(--light-bg) !important;
    display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ TOPBAR (legacy pages using render_topbar) ━━━━━━━━━━━━━━━━━━━━━ */
.topbar {
    position: relative !important;
    top: auto !important;
    margin: -36px -44px 28px -44px !important;
    padding: 22px 44px !important;
    background: var(--card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.topbar-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.page-content {
    padding: 0 !important;
}

/* Force page headers to sit on the light content background, not the gradient backdrop */
.page-header {
    background: transparent !important;
}
.page-header .page-title,
.page-header h1 {
    color: var(--text-primary) !important;
}
.page-header .page-subtitle,
.page-header p {
    color: var(--text-secondary) !important;
}
.page-header .btn-outline {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    background: transparent !important;
}
.page-header .btn-outline:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ TEXT STYLES ━━━━━━━━━━━━━━━━━━━━━ */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}

a {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

a:hover {
    color: color-mix(in srgb, var(--accent) 85%, #000 15%) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━ UTILITIES ━━━━━━━━━━━━━━━━━━━━━ */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-muted { color: var(--text-secondary) !important; }
.text-success { color: var(--success) !important; }
.text-error { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 8px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-6 { margin-top: 24px !important; }

.p-2 { padding: 8px !important; }
.p-4 { padding: 16px !important; }
.p-6 { padding: 24px !important; }

.rounded { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }

.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.hidden { display: none !important; }
.flex { display: flex !important; }
.grid { display: grid !important; }

/* ━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
    /* ── Sidebar: off-canvas overlay drawer, not a stacked/inline column ── */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(280px, 85vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }
    .mobile-nav-overlay {
        z-index: 999 !important;
    }
    body.sidebar-open .mobile-nav-overlay {
        display: block !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        width: 40px;
        height: 40px;
        z-index: 1001 !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        border-radius: 10px !important;
        color: var(--text-primary) !important;
        box-shadow: var(--shadow-md) !important;
    }

    main, .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 20px !important;
        padding-top: 68px !important;
        height: 100% !important;
    }

    /* No top-margin bleed here — main's padding-top:68px already clears
       space below the fixed hamburger button, so the topbar just needs to
       fill the width, not push back up into that reserved space. */
    .topbar {
        margin: 0 -20px 20px -20px !important;
        padding: 16px 20px !important;
    }

    /* ── Tables: scroll horizontally inside a wrapper (JS-injected below),
       keeping the table itself as a real table so header/body columns stay
       aligned — display:block on <table> breaks column alignment entirely. ── */
    .table-scroll-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -4px;
    }
    .table-scroll-wrap table {
        min-width: 560px;
    }

    table {
        font-size: 12px !important;
    }

    table th, table td {
        padding: 10px 12px !important;
        white-space: nowrap;
    }

    /* ── Modals: fit small viewports properly ── */
    [id^="modal-"] > div,
    [id$="-modal"] > div,
    [id$="Modal"] > div {
        max-width: 94vw !important;
        max-height: 88vh !important;
        margin: 0 3vw;
    }

    /* ── Touch targets: comfortable size for fingers, not mouse pointers ── */
    .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        min-height: 40px;
    }
    .btn-sm {
        min-height: 36px;
        padding: 8px 14px !important;
    }
    /* 16px prevents iOS Safari's auto-zoom-on-focus, but only for real form
       fields — NOT bare inputs inside dense tables (e.g. invoice line items),
       which need to stay small to fit their narrow columns. */
    .form-control {
        min-height: 40px;
        font-size: 16px !important;
    }
    .form-control.form-control-sm {
        min-height: 36px;
    }
    textarea.form-control {
        min-height: 80px;
    }

    /* Multi-column inline-style grids collapse to a single column on phones
       (this codebase uses inline grid-template-columns extensively rather
       than utility classes, so match the common concrete patterns used). */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}