/* ============================================================
   Scizu theme — component styles
   Requires _scizu-vars.css to be loaded first.
   Safe to load on every layout template.
   ============================================================ */

/* ── Page fill ────────────────────────────────────────────── */

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

#react-page-app {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Cards / columns ──────────────────────────────────────── */

.scizu-cg-zig-zag-container > .left-col,
.scizu-cg-zig-zag-container > .right-col {
    background-color: #fff;
    border: 1px solid var(--sz-card-border);
    border-radius: var(--sz-card-radius);
    box-shadow: var(--sz-card-shadow);
}

.bright-card {
    border-radius: var(--sz-card-radius);
    box-shadow: var(--sz-card-shadow);
}

/* ── Section headers ──────────────────────────────────────── */

.header-text-sm {
    color: var(--sz-primary);
    font-size: 11px;
    letter-spacing: 1.4px;
}

/* ── Dashboard action buttons ─────────────────────────────── */

.centered-button-container {
    height: auto;
}

.centered-button-container > .btn {
    background-color: #fff;
    border: 1px solid var(--sz-card-border);
    border-radius: 8px;
    color: #1c1917;
    box-shadow: var(--sz-card-shadow);
    font-size: .875rem;
    font-weight: 500;
    padding: .6rem .75rem;
    text-align: left;
    width: 100%;
    transition: border-color .12s, background-color .12s, box-shadow .12s;
}

.centered-button-container > .btn:hover,
.centered-button-container > .btn:active {
    background-color: var(--sz-primary-light);
    border-color: var(--sz-primary);
    color: var(--sz-primary-hover);
    box-shadow: 0 2px 8px rgba(37,99,235,.12);
}

/* ── List rows ────────────────────────────────────────────── */

.scizu-two-line-row {
    border-bottom: 1px solid var(--sz-card-border);
    padding-left: .5rem;
    border-left: 3px solid transparent;
    transition: border-color .12s, background-color .12s;
}

.scizu-two-line-row:hover {
    background-color: var(--sz-primary-light);
    border-left-color: var(--sz-primary);
}

/* ── Inputs ───────────────────────────────────────────────── */

.form-control {
    border-color: var(--sz-card-border);
}

.form-control:focus,
textarea.form-control:focus {
    border-color: var(--sz-primary);
    box-shadow: var(--sz-input-focus-shadow);
}

select:focus {
    border-color: var(--sz-primary);
    outline: none;
    box-shadow: var(--sz-input-focus-shadow);
}

/* ── Primary button ───────────────────────────────────────── */

.btn-primary {
    background-color: var(--sz-primary);
    border-color: var(--sz-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--sz-primary-hover);
    border-color: var(--sz-primary-hover);
    color: #fff;
}

.btn-primary:focus {
    box-shadow: var(--sz-input-focus-shadow);
    background-color: var(--sz-primary);
    border-color: var(--sz-primary);
}

/* ── Outline secondary in modals ──────────────────────────── */

.modal-body .btn-outline-secondary,
.modal-footer .btn-outline-secondary {
    border-color: var(--sz-card-border);
    color: #44403c;
}

.modal-body .btn-outline-secondary:hover,
.modal-footer .btn-outline-secondary:hover {
    background-color: var(--sz-primary-light);
    border-color: var(--sz-primary);
    color: var(--sz-primary-hover);
}

/* ── Muted text ───────────────────────────────────────────── */

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

/* ── Themed modal header (opt-in) ─────────────────────────── */
/* Add class sz-themed-header to .scizu-cg-dialog-box to get  */
/* the branded blue header treatment.                          */

.scizu-cg-dialog-box.sz-themed-header > .modal-header {
    background-color: var(--sz-primary);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 1rem 1.25rem;
}

.scizu-cg-dialog-box.sz-themed-header > .modal-header .modal-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.scizu-cg-dialog-box.sz-themed-header > .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: .8;
}

.scizu-cg-dialog-box.sz-themed-header > .modal-footer {
    background-color: var(--sz-modal-header-bg);
    border-top: 1px solid var(--sz-card-border);
    padding: .75rem 1.25rem;
}