/* ServiceLog — app styles */

* { box-sizing: border-box; }
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ── Form validation ──────────────────────────────────────────────────── */

/* Error message text */
.help-block {
    font-size: .8rem;
    margin-top: .35rem;
    margin-bottom: 0;
    display: block;
}
.help-block-error {
    color: #dc2626;
}

/* Red border + tint on inputs inside an errored field */
.has-error .form-control,
.has-error .form-select {
    border-color: #dc2626;
    background-color: #fff7f7;
}
.has-error .form-control:focus,
.has-error .form-select:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

/* Label turns red too */
.has-error .control-label,
.has-error label {
    color: #dc2626;
}

/* ── Focus ring ───────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge { font-weight: 500; }

/* ── Sidebar active indicator ─────────────────────────────────────────── */
#sidebar .nav-link.active { position: relative; }
#sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 3px;
    background: #818cf8;
    border-radius: 0 3px 3px 0;
}

/* ── KPI cards ────────────────────────────────────────────────────────── */
.kpi-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,.1);
}

/* ── Sidebar overlay (mobile) ─────────────────────────────────────────── */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99;
    cursor: pointer;
}
#sidebar-overlay.show { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE TABLES
   On mobile every .sl-table row becomes a card.
   JavaScript in the layout sets data-label on each <td> from the <th>.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Kill the horizontal-scroll wrapper */
    div[style*="overflow-x"] { overflow-x: visible !important; }

    .sl-table { border-collapse: separate; border-spacing: 0 .5rem; }

    .sl-table thead { display: none; }

    .sl-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-bottom: .75rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }

    .sl-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding: .6rem .9rem;
        border-bottom: 1px solid #f3f4f6;
        font-size: .88rem;
        min-height: 2.6rem;
        /* allow value side to wrap */
        flex-wrap: nowrap;
    }
    .sl-table td:last-child { border-bottom: none; }

    /* Label from data-label attribute */
    .sl-table td[data-label]::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: .06em;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 6rem;
    }

    /* Action column — right-align, no label */
    .sl-table td[data-label=""]::before,
    .sl-table td:not([data-label])::before { display: none; }
    .sl-table td:last-child { justify-content: flex-end; }

    /* Row hover doesn't make sense as cards */
    .sl-table tbody tr:hover td { background: inherit; }
}

/* ── Mobile layout ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #main { padding-bottom: 2rem; }

    /* Give topbar more breathing room */
    #topbar { padding: .6rem 1rem; }

    /* Cards */
    .sl-card { padding: 1rem; border-radius: 8px; }

    /* KPI cards — tighter on phone */
    .kpi-card { padding: .9rem; }
    .kpi-card .kpi-value { font-size: 1.3rem; }
    .kpi-card .kpi-icon { width: 38px; height: 38px; font-size: 1.1rem; }

    /* Collapse horizontal in progress grid */
    .row.g-3 { --bs-gutter-x: .75rem; }

    /* Form fields full-width */
    .col-md-6, .col-md-4, .col-md-3 { width: 100%; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
    #sidebar, #topbar, .btn, .alert { display: none !important; }
    #main { margin-left: 0 !important; }
    .sl-card { border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
    body { font-size: 12px; }
}