/* spq-theme-fix.css
   Theme-aware overrides + mobile-native treatments for pages that were audited
   in cmd #422 (hardcoded CSS + non-mobile-friendly). Any page using .spq-tf-*
   classes below picks up light/dark theming and phone-native card fallback
   automatically. */

/* -------- Panel / card tokens (light + dark) -------- */
.spq-tf-page { color: var(--bs-body-color); background: var(--bs-body-bg); }
.spq-tf-panel {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.spq-tf-muted { color: var(--bs-secondary-color, #6b7280); }
.spq-tf-hairline { border-color: var(--bs-border-color, #e5e7eb) !important; }

[data-bs-theme="dark"] .spq-tf-panel { box-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* -------- ERP surface (professional flat cards) -------- */
.spq-tf-surface {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px;
}
.spq-tf-title-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
    background: color-mix(in srgb, var(--theme-default, #6366f1) 4%, var(--bs-body-bg));
    border-radius: 12px 12px 0 0;
}
.spq-tf-title-row h1, .spq-tf-title-row h2, .spq-tf-title-row h3 { margin:0; font-size: 15px; font-weight: 600; }

/* -------- Semantic badges that follow theme -------- */
.spq-tf-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1px solid transparent;
}
.spq-tf-badge-warn { background: color-mix(in srgb, var(--bs-warning, #f59e0b) 18%, transparent); color: var(--bs-warning-text-emphasis, #92400e); border-color: color-mix(in srgb, var(--bs-warning, #f59e0b) 30%, transparent); }
.spq-tf-badge-ok   { background: color-mix(in srgb, var(--bs-success, #16a34a) 18%, transparent); color: var(--bs-success-text-emphasis, #14532d); border-color: color-mix(in srgb, var(--bs-success, #16a34a) 30%, transparent); }
.spq-tf-badge-err  { background: color-mix(in srgb, var(--bs-danger,  #ef4444) 18%, transparent); color: var(--bs-danger-text-emphasis, #7f1d1d);  border-color: color-mix(in srgb, var(--bs-danger, #ef4444) 30%, transparent); }
.spq-tf-badge-info { background: color-mix(in srgb, var(--bs-info,    #0ea5e9) 18%, transparent); color: var(--bs-info-text-emphasis, #164e63);    border-color: color-mix(in srgb, var(--bs-info, #0ea5e9) 30%, transparent); }
.spq-tf-badge-brand{ background: color-mix(in srgb, var(--theme-default, #6366f1) 18%, transparent); color: var(--theme-default, #6366f1);            border-color: color-mix(in srgb, var(--theme-default, #6366f1) 30%, transparent); }

/* -------- Buttons: keep min touch target size everywhere -------- */
.spq-tf-touch, .spq-tf-touch.btn { min-height: 40px; min-width: 40px; }

/* -------- Table → card fallback for phones -------- */
.spq-tf-mtable { width: 100%; }

@media (max-width: 767.98px) {
    .spq-tf-hide-mobile { display: none !important; }

    /* Convert an ordinary table into stacked cards.
       Give each <td> a data-label="..." attribute for the row header. */
    .spq-tf-mtable, .spq-tf-mtable thead, .spq-tf-mtable tbody, .spq-tf-mtable tr, .spq-tf-mtable th, .spq-tf-mtable td {
        display: block; width: 100%;
    }
    .spq-tf-mtable thead { display: none; }
    .spq-tf-mtable tr {
        margin: 0 0 10px 0; padding: 12px 14px;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color, #e5e7eb);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .spq-tf-mtable td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0; border: none;
        font-size: 14px; text-align: right;
    }
    .spq-tf-mtable td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-weight: 600; text-align: left;
        color: var(--bs-secondary-color, #6b7280);
        text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
    }
    .spq-tf-mtable td[data-label=""]::before, .spq-tf-mtable td:not([data-label])::before { display: none; }

    /* Bottom-sheet feel for modal-lg on phones */
    .spq-tf-sheet .modal-dialog {
        position: fixed !important; bottom: 0; left: 0; right: 0; margin: 0;
        max-width: 100%;
    }
    .spq-tf-sheet .modal-content {
        border-radius: 18px 18px 0 0;
        max-height: 92vh; overflow-y: auto;
    }

    /* Enforce native-app touch targets everywhere on phone */
    .spq-tf-page .btn, .spq-tf-page .form-control, .spq-tf-page .form-select {
        min-height: 44px;
    }
    .spq-tf-page .btn-sm { min-height: 36px; }

    /* Split-panel layouts (col-lg-3/9 etc.) collapse to stacked full-width */
    .spq-tf-collapse-cols > [class*="col-"] { width: 100% !important; max-width: 100%; flex: 0 0 100%; }
}

/* -------- Two-pane layouts get a real ERP frame on desktop -------- */
@media (min-width: 992px) {
    .spq-tf-two-pane {
        display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: 16px;
    }
}

/* -------- Fixed 42/58 (Login) → sane split -------- */
.spq-tf-auth-shell {
    display: grid; min-height: 100vh; background: var(--bs-body-bg);
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .spq-tf-auth-shell { grid-template-columns: 1fr 1fr; }
}

/* -------- Permission matrix (EditRole) mobile handling -------- */
@media (max-width: 767.98px) {
    .spq-tf-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .spq-tf-matrix table { min-width: 560px; } /* still scrolls, but with clear hint */
    .spq-tf-matrix::before {
        content: "Swipe horizontally to see all permissions"; display: block;
        padding: 8px 12px; font-size: 12px; color: var(--bs-secondary-color, #6b7280);
        background: color-mix(in srgb, var(--theme-default, #6366f1) 6%, transparent);
        border-radius: 10px; margin-bottom: 8px;
    }
}