/* =========================================================================
   css/site-admin-tables.css
   Reusable chrome for the admin "DataTable + modal CRUD" pattern.
   Spec: administration/docs/redesign-2026-06/03-uiux-redesign-spec.md (§2.7)

   RULES (non-negotiable):
   - TOKENS ONLY. No hardcoded hex anywhere in this file. Surfaces, text,
     borders and accents are all consumed from --bs-*/--w5obm-* tokens so the
     admin chrome tracks the active theme on light AND dark themes.
   - Do NOT redeclare DataTable header/row colors here. css/site-tables.css
     already tokenizes table.dataTable / .w5obm-table. This file only adds the
     page anatomy around the table (card, header, breadcrumb, states, modal
     polish) plus the sanctioned status-tint helpers.
   - Never reassign a --bs-* surface token FROM var(--w5obm-light-panel-*)
     (creates a var cycle). Forced-light surfaces pair --w5obm-on-light;
     theme-following surfaces pair --bs-body-color / --bs-emphasis-color.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Page anatomy
   ------------------------------------------------------------------------- */

.admin-page {
    color: var(--bs-body-color);
}

.admin-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

.admin-card-header {
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.admin-card-header h1,
.admin-card-header h2,
.admin-card-header .h4,
.admin-card-header .h5 {
    color: var(--bs-emphasis-color);
    margin-bottom: 0;
}

/* Subtitle / helper text inside a card body or header. */
.admin-muted {
    color: var(--bs-secondary-color) !important;
}

.admin-strong {
    color: var(--bs-emphasis-color) !important;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   2. Breadcrumb (orientation for infrequent admins)
   ------------------------------------------------------------------------- */

.admin-breadcrumb {
    background: transparent;
    padding-left: 0;
    margin-bottom: 1rem;
}

.admin-breadcrumb a {
    color: var(--bs-link-color);
    text-decoration: none;
}

.admin-breadcrumb a:hover,
.admin-breadcrumb a:focus {
    color: var(--bs-link-hover-color, var(--bs-link-color));
    text-decoration: underline;
}

.admin-breadcrumb .breadcrumb-item.active,
.admin-breadcrumb .active {
    color: var(--bs-secondary-color);
}

.admin-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
}

/* -------------------------------------------------------------------------
   3. Action bar (one primary action per screen; stacks on phones)
   ------------------------------------------------------------------------- */

.admin-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-action-bar form {
    margin: 0;
}

/* -------------------------------------------------------------------------
   4. Status-tint helpers — the ONE sanctioned way to tint a surface.
      Replaces per-page #d4edda / #fff3cd / #e3f2fd hardcodes.
      Color is never the only signal; pair with an icon + label in markup.
   ------------------------------------------------------------------------- */

.admin-tint-success {
    background: color-mix(in srgb, var(--bs-success) 14%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-success) 40%, var(--bs-border-color));
    color: var(--bs-body-color);
}

.admin-tint-info {
    background: color-mix(in srgb, var(--bs-info) 14%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-info) 40%, var(--bs-border-color));
    color: var(--bs-body-color);
}

.admin-tint-warning {
    background: color-mix(in srgb, var(--bs-warning) 14%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-warning) 40%, var(--bs-border-color));
    color: var(--bs-body-color);
}

.admin-tint-danger {
    background: color-mix(in srgb, var(--bs-danger) 14%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-danger) 40%, var(--bs-border-color));
    color: var(--bs-body-color);
}

/* The status text/label inside a tint (or standalone) tracks the semantic hue. */
.admin-status-success { color: var(--bs-success); }
.admin-status-info    { color: var(--bs-info); }
.admin-status-warning { color: var(--bs-warning); }
.admin-status-danger  { color: var(--bs-danger); }

/* -------------------------------------------------------------------------
   5. DataTable row-flag highlights
      Replaces #fff3cd!important / #d1ecf1!important in users/index.php etc.
      !important is required to win over the row-bg rules in site-tables.css.
   ------------------------------------------------------------------------- */

.w5obm-table tbody tr.row-flag-warning,
table.dataTable tbody tr.row-flag-warning {
    background: color-mix(in srgb, var(--bs-warning) 18%, var(--bs-body-bg)) !important;
}

.w5obm-table tbody tr.row-flag-info,
table.dataTable tbody tr.row-flag-info {
    background: color-mix(in srgb, var(--bs-info) 18%, var(--bs-body-bg)) !important;
}

.w5obm-table tbody tr.row-flag-success,
table.dataTable tbody tr.row-flag-success {
    background: color-mix(in srgb, var(--bs-success) 18%, var(--bs-body-bg)) !important;
}

.w5obm-table tbody tr.row-flag-danger,
table.dataTable tbody tr.row-flag-danger {
    background: color-mix(in srgb, var(--bs-danger) 18%, var(--bs-body-bg)) !important;
}

/* -------------------------------------------------------------------------
   6. Table states (every state designed; none left blank) — §2.6
   ------------------------------------------------------------------------- */

.admin-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1.25rem;
    color: var(--bs-body-color);
}

.admin-state .admin-state-icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--bs-secondary-color);
}

.admin-state .admin-state-title {
    color: var(--bs-emphasis-color);
    font-weight: 600;
    margin: 0;
}

.admin-state .admin-state-text {
    color: var(--bs-secondary-color);
    max-width: 38rem;
    margin: 0;
}

/* Loading state: centered spinner + label. */
.admin-state-loading .admin-state-icon {
    color: var(--bs-primary);
}

/* Error state inside the card uses a tokened danger tint, never a stack trace. */
.admin-state-error {
    background: color-mix(in srgb, var(--bs-danger) 10%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-danger) 35%, var(--bs-border-color));
    border-radius: var(--bs-border-radius, 0.375rem);
}

.admin-state-error .admin-state-icon {
    color: var(--bs-danger);
}

/* DataTables' built-in "no matching records" cell (filtered-to-zero). */
.dataTables_wrapper .dataTables_empty {
    color: var(--bs-secondary-color);
    padding: 1.5rem;
}

/* -------------------------------------------------------------------------
   7. Modal polish — inherit tokens; never force-light a modal surface.
      Bootstrap's modal already retargets to theme tokens globally; these
      rules only ensure the CRUD-specific regions stay on-token.
   ------------------------------------------------------------------------- */

.admin-card .modal-content,
.modal .admin-modal-content {
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Form-level error region (role="alert"). Uses the danger tint helper look. */
.admin-form-error {
    color: var(--bs-danger);
}

/* Required-field marker. */
.admin-required {
    color: var(--bs-danger);
}

/* Help text under a field. */
.admin-field-help {
    color: var(--bs-secondary-color);
}

/* -------------------------------------------------------------------------
   8. Focus / keyboard — visible focus ring on every interactive target.
   ------------------------------------------------------------------------- */

.admin-card .btn:focus-visible,
.admin-card a:focus-visible,
.admin-card .form-control:focus-visible,
.admin-card .form-select:focus-visible,
.admin-breadcrumb a:focus-visible,
.modal .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* -------------------------------------------------------------------------
   9. Tap targets & legibility (older, less computer-literate audience)
   ------------------------------------------------------------------------- */

.admin-card .btn-sm {
    min-height: 38px;
}

.admin-action-bar .btn-lg,
.admin-card-header .btn-lg {
    min-height: 48px;
}

/* Keep row-action groups from cramping on touch. */
.admin-card .btn-group .btn + .btn {
    margin-left: 0.25rem;
}

/* -------------------------------------------------------------------------
   10. Mobile / responsive
   ------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .admin-action-bar {
        align-items: stretch;
    }

    /* The single primary action drops full-width below the title on phones. */
    .admin-action-bar > .btn,
    .admin-card-header > .btn {
        width: 100%;
    }

    .admin-state {
        padding: 1.75rem 1rem;
    }
}