/* ─────────────────────────────────────────────────────────────────────────────
   ho.arbi — shared UI theme (Option B "task-first split view")
   Loaded after Bootstrap 5 on every page via appHead() in includes/app_nav.php.
   Only restyles; page markup keeps using Bootstrap classes.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --ab-ink: #18181B;
    --ab-ink-2: #3F3F46;
    --ab-muted: #52525B;
    --ab-ground: #F4F4F5;
    --ab-surface: #FFFFFF;
    --ab-border: #E4E4E7;
    --ab-border-strong: #D4D4D8;
    --ab-accent: #0F766E;
    --ab-accent-hover: #115E59;
    --ab-accent-soft: #F0FDFA;
    --ab-accent-tint: #CCFBF1;
    --ab-accent-ink: #134E4A;
    --ab-warn-bg: #FEF3C7;  --ab-warn-fg: #92400E;
    --ab-bad-bg: #FEE2E2;   --ab-bad-fg: #991B1B;
    --ab-ok-bg: #DCFCE7;    --ab-ok-fg: #166534;
    --ab-radius: 12px;
    --ab-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ab-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Bootstrap overrides */
    --bs-body-font-family: var(--ab-font);
    --bs-body-color: var(--ab-ink);
    --bs-body-bg: var(--ab-ground);
    --bs-primary: var(--ab-accent);
    --bs-primary-rgb: 15, 118, 110;
    --bs-link-color: var(--ab-accent);
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: var(--ab-accent-hover);
    --bs-border-color: var(--ab-border);
    --bs-border-radius: 10px;
}

body.ab {
    background: var(--ab-ground);
    color: var(--ab-ink);
    font-family: var(--ab-font);
    min-height: 100vh;
}
.ab-mono { font-family: var(--ab-mono); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.ab-topbar {
    background: var(--ab-ink);
    color: #fff;
    padding: 0 20px;
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.ab-brand { color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.ab-brand:hover { color: #fff; }
.ab-modnav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 auto; }
.ab-modnav a {
    color: #D4D4D8; text-decoration: none; font-size: 14px;
    padding: 10px 12px; border-radius: 8px; white-space: nowrap;
}
.ab-modnav a:hover { color: #fff; background: #27272A; }
.ab-modnav a.active { color: #fff; background: var(--ab-ink-2); font-weight: 600; }
.ab-user {
    color: #D4D4D8; background: transparent; border: 0; font-size: 14px;
    min-height: 44px; padding: 0 4px; display: flex; align-items: center; gap: 8px;
}
.ab-user:hover, .ab-user:focus { color: #fff; }
.ab-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--ab-ink-2); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
}

/* ── Sub bar (page title + stage tabs) ──────────────────────────────────── */
.ab-subbar {
    background: var(--ab-surface);
    border-bottom: 1px solid var(--ab-border);
    padding: 0 20px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
}
.ab-subbar h1 { font-size: 17px; font-weight: 600; margin: 0; padding: 12px 0; }
.ab-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.ab-tabs a, .ab-tabs button {
    height: 48px; padding: 0 14px; border: 0; background: none;
    border-bottom: 3px solid transparent; color: var(--ab-muted);
    font: inherit; font-size: 14px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.ab-tabs a:hover, .ab-tabs button:hover { color: var(--ab-ink); }
.ab-tabs .active { color: var(--ab-ink); font-weight: 600; border-bottom-color: var(--ab-accent); }
.ab-count { border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; background: var(--ab-border); color: var(--ab-ink); }
.ab-count.warn { background: var(--ab-warn-bg); color: var(--ab-warn-fg); }
.ab-count.bad { background: var(--ab-bad-bg); color: var(--ab-bad-fg); }

/* ── Page container + cards ─────────────────────────────────────────────── */
.ab-page { padding: 20px; max-width: 1320px; margin: 0 auto; }
.ab-card {
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
}
.ab-card-pad { padding: 16px; }
.ab-section-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.ab-label-caps { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-muted); }

/* Legacy page wrappers restyled so existing markup fits the new look */
body.ab .main-card {
    background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
    padding: 16px; box-shadow: none; margin: 0;
}
body.ab .btn-scan {
    background: var(--ab-accent); color: #fff; border: 0; border-radius: 0 10px 10px 0;
    padding: 0 14px; min-width: 44px;
}
body.ab .btn-scan:hover { background: var(--ab-accent-hover); color: #fff; }
body.ab .modal-header.bg-primary { background: var(--ab-ink) !important; }
@media (max-width: 575.98px) { body.ab .main-card { padding: 12px; } }

/* Queue cards (dashboard "Needs action") */
.ab-queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ab-queue a {
    background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
    padding: 16px; text-decoration: none; color: var(--ab-ink);
    display: flex; flex-direction: column; gap: 6px;
}
.ab-queue a:hover { border-color: var(--ab-accent); }
.ab-queue .team { font-size: 13px; color: var(--ab-muted); display: flex; justify-content: space-between; align-items: center; }
.ab-queue .title { font-size: 16px; font-weight: 600; }
.ab-queue .go { font-size: 13px; color: var(--ab-accent); font-weight: 500; }

/* Module tiles */
.ab-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ab-tile {
    background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: 10px;
    padding: 12px 14px; text-decoration: none; color: var(--ab-ink);
    display: flex; align-items: center; gap: 12px; min-height: 56px;
}
.ab-tile:hover { border-color: var(--ab-accent); color: var(--ab-ink); }
.ab-tile .ico {
    width: 34px; height: 34px; border-radius: 8px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--ab-accent-tint); color: var(--ab-accent-ink);
}
.ab-tile .name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ab-tile .sub { font-size: 12px; color: var(--ab-muted); line-height: 1.3; }

/* ── Bootstrap component tune-ups ───────────────────────────────────────── */
body.ab .btn { border-radius: 10px; min-height: 40px; font-weight: 500; }
body.ab .btn-sm { min-height: 34px; border-radius: 8px; }
body.ab .btn-primary {
    --bs-btn-bg: var(--ab-accent); --bs-btn-border-color: var(--ab-accent);
    --bs-btn-hover-bg: var(--ab-accent-hover); --bs-btn-hover-border-color: var(--ab-accent-hover);
    --bs-btn-active-bg: var(--ab-accent-hover); --bs-btn-active-border-color: var(--ab-accent-hover);
    --bs-btn-disabled-bg: var(--ab-accent); --bs-btn-disabled-border-color: var(--ab-accent);
}
body.ab .btn-outline-primary {
    --bs-btn-color: var(--ab-accent); --bs-btn-border-color: var(--ab-accent);
    --bs-btn-hover-bg: var(--ab-accent); --bs-btn-hover-border-color: var(--ab-accent);
}
body.ab .form-control, body.ab .form-select { border-radius: 10px; border-color: var(--ab-border-strong); min-height: 44px; }
body.ab .form-control-sm, body.ab .form-select-sm { min-height: 36px; border-radius: 8px; }
body.ab .form-control:focus, body.ab .form-select:focus {
    border-color: var(--ab-accent); box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .18);
}
body.ab .form-check-input:checked { background-color: var(--ab-accent); border-color: var(--ab-accent); }
body.ab .modal-content { border: 0; border-radius: 14px; }
body.ab .modal-header { border-radius: 14px 14px 0 0; }
body.ab .table > :not(caption) > * > * { padding: .7rem .75rem; }
body.ab table.dataTable thead th {
    background: #FAFAFA; color: var(--ab-muted); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
body.ab .dataTables_wrapper .dataTables_filter input,
body.ab .dataTables_wrapper .dataTables_length select { border-radius: 10px; min-height: 40px; }
body.ab .page-item.active .page-link { background: var(--ab-accent); border-color: var(--ab-accent); }
body.ab .page-link { color: var(--ab-accent); }

/* ── Mobile bottom nav + offcanvas menu ─────────────────────────────────── */
.ab-bottomnav { display: none; }
@media (max-width: 767.98px) {
    .ab-modnav { display: none; }
    .ab-user .ab-user-name { display: none; }
    .ab-topbar { padding: 0 12px; }
    .ab-subbar { padding: 0 12px; }
    .ab-page { padding: 12px; }
    body.ab.has-bottomnav { padding-bottom: 76px; }
    .ab-bottomnav {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0; height: 68px; z-index: 1030;
        background: var(--ab-surface); border-top: 1px solid var(--ab-border);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ab-bottomnav a, .ab-bottomnav button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--ab-muted); text-decoration: none; font-size: 12px; background: none; border: 0;
    }
    .ab-bottomnav i { font-size: 20px; }
    .ab-bottomnav .active { color: var(--ab-accent); font-weight: 600; }
}
.ab-menu-list a {
    display: flex; align-items: center; gap: 12px; padding: 12px 4px; min-height: 48px;
    color: var(--ab-ink); text-decoration: none; border-bottom: 1px solid var(--ab-ground); font-size: 15px;
}
.ab-menu-list a.active { color: var(--ab-accent); font-weight: 600; }
.ab-menu-list i { font-size: 18px; width: 24px; text-align: center; color: var(--ab-muted); }

/* ── Pre-login pages (login, forgot/reset password) ─────────────────────── */
body.ab-auth {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 20px;
}
body.ab-auth .login-card {
    background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: 16px;
    padding: 36px 32px; width: 100%; max-width: 400px;
}
body.ab-auth .login-logo {
    width: 56px; height: 56px; border-radius: 14px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; background: var(--ab-ink); color: #fff;
}
body.ab .btn-login {
    background: var(--ab-accent); color: #fff; border: 0; font-weight: 600; min-height: 44px;
}
body.ab .btn-login:hover, body.ab .btn-login:focus { background: var(--ab-accent-hover); color: #fff; }
@media (max-width: 575.98px) { body.ab-auth .login-card { padding: 28px 20px; } }