/* =============================================
   GCUS — Global Styles
   ============================================= */

/* ── CSS Custom Properties ── */
:root {
    /* Dark theme (default) */
    --bg:                        #2b2b2b;
    --bg-card:                   #3a3a3a;
    --bg-card-header:            #333333;
    --border:                    #4a4a4a;
    --text:                      #d0d0d0;
    --text-heading:              #e0e0e0;
    --text-muted:                #888888;
    --input-bg:                  #333333;
    --input-bg-focus:            #3a3a3a;
    --input-border:              #555555;
    --input-focus-border:        #6ea8fe;
    --input-focus-shadow:        rgba(110, 168, 254, 0.2);
    --input-group-bg:            #444444;
    --label-text:                #b0b0b0;
    --table-head-text:           #9ca3af;
    --table-stripe:              rgba(255, 255, 255, 0.04);
    --table-hover:               rgba(255, 255, 255, 0.08);
    --badge-active-bg:           #065f46;
    --badge-active-text:         #a7f3d0;
    --badge-inactive-bg:         #7f1d1d;
    --badge-inactive-text:       #fca5a5;
    --alert-success-bg:          #14532d;
    --alert-success-border:      #166534;
    --alert-success-text:        #bbf7d0;
    --alert-danger-bg:           #7f1d1d;
    --alert-danger-border:       #991b1b;
    --alert-danger-text:         #fca5a5;
    --alert-info-bg:             #1e3a5f;
    --alert-info-border:         #1d4ed8;
    --alert-info-text:           #bfdbfe;
    --btn-secondary-color:       #9ca3af;
    --btn-secondary-border:      #6b7280;
    --btn-secondary-hover-bg:    #4a4a4a;
    --btn-secondary-hover-color: #d0d0d0;
    --dropdown-bg:               #3a3a3a;
    --dropdown-hover:            #4a4a4a;
    --dropdown-hover-text:       #ffffff;
    --modal-bg:                  #3a3a3a;
    --pagination-bg:             #3a3a3a;
    --pagination-text:           #9ca3af;
    --pagination-disabled-bg:    #2b2b2b;
    --pagination-disabled-text:  #555555;
    --accordion-bg:              #3a3a3a;
    --accordion-btn-bg:          #3a3a3a;
    --accordion-btn-text:        #d0d0d0;
    --accordion-open-bg:         #444444;
    --accordion-open-text:       #e0e0e0;
    --accordion-open-shadow:     #4a4a4a;
    --job-form-bg:               #333333;
    --sidebar-bg:                #212529;
    --sidebar-link-hover:        rgba(255, 255, 255, 0.1);
    --sidebar-active-bg:         rgba(255, 255, 255, 0.2);
    --nav-active:                #4ade80;
}

[data-theme="light"] {
    --bg:                        #f5f5f5;
    --bg-card:                   #ffffff;
    --bg-card-header:            #f1f3f5;
    --border:                    #dee2e6;
    --text:                      #212529;
    --text-heading:              #111827;
    --text-muted:                #6c757d;
    --input-bg:                  #ffffff;
    --input-bg-focus:            #ffffff;
    --input-border:              #ced4da;
    --input-focus-border:        #86b7fe;
    --input-focus-shadow:        rgba(13, 110, 253, 0.25);
    --input-group-bg:            #e9ecef;
    --label-text:                #495057;
    --table-head-text:           #6c757d;
    --table-stripe:              rgba(0, 0, 0, 0.03);
    --table-hover:               rgba(0, 0, 0, 0.05);
    --badge-active-bg:           #d1fae5;
    --badge-active-text:         #065f46;
    --badge-inactive-bg:         #fee2e2;
    --badge-inactive-text:       #991b1b;
    --alert-success-bg:          #d1fae5;
    --alert-success-border:      #6ee7b7;
    --alert-success-text:        #065f46;
    --alert-danger-bg:           #fee2e2;
    --alert-danger-border:       #fca5a5;
    --alert-danger-text:         #991b1b;
    --alert-info-bg:             #dbeafe;
    --alert-info-border:         #93c5fd;
    --alert-info-text:           #1e40af;
    --btn-secondary-color:       #6c757d;
    --btn-secondary-border:      #6c757d;
    --btn-secondary-hover-bg:    #e9ecef;
    --btn-secondary-hover-color: #495057;
    --dropdown-bg:               #ffffff;
    --dropdown-hover:            #f8f9fa;
    --dropdown-hover-text:       #212529;
    --modal-bg:                  #ffffff;
    --pagination-bg:             #ffffff;
    --pagination-text:           #6c757d;
    --pagination-disabled-bg:    #f8f9fa;
    --pagination-disabled-text:  #adb5bd;
    --accordion-bg:              #ffffff;
    --accordion-btn-bg:          #f8f9fa;
    --accordion-btn-text:        #212529;
    --accordion-open-bg:         #e9ecef;
    --accordion-open-text:       #111827;
    --accordion-open-shadow:     #dee2e6;
    --job-form-bg:               #f8f9fa;
    --sidebar-bg:                #212529;
    --sidebar-link-hover:        rgba(255, 255, 255, 0.08);
    --sidebar-active-bg:         rgba(255, 255, 255, 0.15);
    --nav-active:                #4ade80;
}

html {
    font-size: 15px;
}

/* Clickable stat cards on dashboard */
.stat-card-link {
    cursor: pointer;
}
.stat-card-link:hover .card {
    opacity: 0.88;
    transform: translateY(-2px);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* ── Typography ── */
body {
    background-color: var(--bg);
    color: var(--text);
}

main {
    background-color: var(--bg) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
}

.text-muted {
    color: var(--text-muted) !important;
}

/* ── Sidebar ── */
.sidebar-link:hover {
    background-color: var(--sidebar-link-hover) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--sidebar-active-bg);
    border-left: 3px solid var(--nav-active);
    border-radius: 0 4px 4px 0;
}

/* ── Page heading ── */
.page-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

/* ── Stat cards ── */
.stat-card {
    border: none;
    border-radius: 8px;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* ── Cards ── */
.card {
    background-color: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

.card-header {
    background-color: var(--bg-card-header);
    border-color: var(--border);
    color: var(--text);
}

/* ── Tables ── */
.table {
    color: var(--text);
    border-color: var(--border);
}

.table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--table-head-text);
    border-color: var(--border);
}

.table td {
    border-color: var(--border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe);
    color: var(--text);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover);
    color: var(--text);
}

/* ── Forms ── */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg-focus);
    border-color: var(--input-focus-border);
    color: var(--text);
    box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    color: var(--label-text);
}

/* Input groups */
.input-group-text {
    background-color: var(--input-group-bg);
    border-color: var(--input-border);
    color: var(--text);
}

/* Inline job form */
#jobFormCollapse {
    background: var(--job-form-bg);
    border-radius: 6px;
    border: 1px solid var(--border);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

/* ── Badges ── */
.badge-active {
    background-color: var(--badge-active-bg);
    color: var(--badge-active-text);
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.badge-inactive {
    background-color: var(--badge-inactive-bg);
    color: var(--badge-inactive-text);
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* ── Alerts ── */
.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--alert-success-text);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

/* ── Buttons — outline secondary ── */
.btn-outline-secondary {
    color: var(--btn-secondary-color);
    border-color: var(--btn-secondary-border);
}

.btn-outline-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-color);
    border-color: var(--btn-secondary-border);
}

/* ── Dropdowns ── */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border);
}

.dropdown-item {
    color: var(--text);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--dropdown-hover-text);
}

.dropdown-divider {
    border-color: var(--border);
}

/* ── Modals ── */
.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--border);
    color: var(--text);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

/* ── Pagination ── */
.page-link {
    background-color: var(--pagination-bg);
    border-color: var(--border);
    color: var(--pagination-text);
}

.page-link:hover {
    background-color: var(--dropdown-hover);
    color: var(--text);
    border-color: var(--border);
}

.page-item.disabled .page-link {
    background-color: var(--pagination-disabled-bg);
    border-color: var(--border);
    color: var(--pagination-disabled-text);
}

/* ── Borders ── */
.border {
    border-color: var(--border) !important;
}

/* ── Accordions ── */
.accordion-item {
    background-color: var(--accordion-bg);
    border-color: var(--border);
}

.accordion-button {
    background-color: var(--accordion-btn-bg);
    color: var(--accordion-btn-text);
}

.accordion-button:not(.collapsed) {
    background-color: var(--accordion-open-bg);
    color: var(--accordion-open-text);
    box-shadow: inset 0 -1px 0 var(--accordion-open-shadow);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
}

/* Invert chevron icon for dark backgrounds; remove invert in light mode */
.accordion-button::after {
    filter: invert(0.8);
}

[data-theme="light"] .accordion-button::after {
    filter: none;
}

.accordion-body {
    background-color: var(--accordion-bg);
    color: var(--text);
}

/* =============================================
   PRINT STYLES — Receipt only
   ============================================= */

@media print {
    #sidebar,
    .no-print,
    .billing-controls,
    nav {
        display: none !important;
    }

    body {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        background: white !important;
    }

    main {
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
    }

    .receipt-printable {
        border: none !important;
        box-shadow: none !important;
    }

    @page {
        margin: 0.75in;
    }
}