/* ==========================================================================
   Faciotech client area — accessibility and touch fixes (UX pass 2026-09-25)

   Loaded by includes/hooks/faciotech_client_area_ux.php on client-area pages only,
   after every stylesheet in includes/head.tpl, so equal-specificity rules here win.

   What it fixes, measured on staging with axe-core and a 390px phone viewport:
     1. Dark mode: the brand blue #0146C7 is used as TEXT on #18191A/#242526 grounds
        (dashboard panel buttons, "View all services") = 1.97-2.26:1. Those use #6DA3E8
        instead (the theme's own dark "primary lighter" tint), which is 5.9:1 on #242526
        and 6.8:1 on #18191A.
     2. Dark mode: DataTables header cells and body cells keep a white background from
        the base theme, so light text sits on white (1.24:1).
     3. Text under 12px on phones (chips, table headers, section and support labels).
     4. Touch targets under 44px on phones (buttons, pagination, verify-email bar).

   Shared chrome is NOT styled here: the breadcrumb, sidebar card titles and active row,
   and the dark-mode colour of unclassed links in the client layout live in
   assets/css/faciotech-a11y.css (theme owner). This file only covers components that
   exist in the client area alone.
   ========================================================================== */

body {
    --fca-link-on-dark: #6DA3E8;
}

/* --------------------------------------------------------------------------
   1. Sidebar
   -------------------------------------------------------------------------- */

/* Filter counts ("0" beside Paid / Unpaid / Open ...) are white pills on a dark card. */
html.ft-dark-mode body.ft-layout-client .sidebar .list-group-item .badge {
    background-color: var(--ft-bg);
    color: var(--ft-text);
}

@media (max-width: 767.98px) {
    /* "Learn more" style links in sidebar card footers were 20px tall. */
    body.ft-layout-client .sidebar .card-sidebar .card-footer a:not(.btn) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   2. Verify-email bar (logged-in clients with an unverified address)
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .ft-verify-bar__btn {
        min-height: 44px;
    }

    .ft-verify-bar__close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   3. Page headings and dashboard
   -------------------------------------------------------------------------- */

/* The dashboard greeting became the page's <h1>; keep its existing look. */
h1.fca-welcome-greeting {
    margin: 0;
    color: inherit;
}

.fca-section-label {
    font-size: 0.75rem;
}

.fca-page .client-home-cards .card-header .btn.btn-xs {
    font-size: 0.75rem;
}

html.ft-dark-mode .fca-page .client-home-cards .card-header .btn.btn-xs {
    color: var(--fca-link-on-dark) !important;
}

/* Links inside panel sentences need more than colour to stand out (WCAG 1.4.1). */
.fca-page .client-home-cards .card-body a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Recent News rows kept the base theme's white background and #DDD rules in dark mode. */
html.ft-dark-mode .fca-page .client-home-cards .list-group-item {
    background-color: var(--ft-card-bg);
    border-color: var(--ft-border);
    color: var(--ft-text);
}

html.ft-dark-mode .fca-page .client-home-cards .list-group-item:hover,
html.ft-dark-mode .fca-page .client-home-cards .list-group-item:focus {
    background-color: var(--ft-bg-alt);
}

/* "View all N services" is brand blue on the dark page = 2.26:1. */
html.ft-dark-mode .fca-services-more {
    color: var(--fca-link-on-dark);
}

.fca-empty-state-cta {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .client-home-cards .card-footer .btn-view-more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   4. Buttons and chips used across the client area
   -------------------------------------------------------------------------- */

.fca-btn-primary,
.fca-btn-secondary,
.fst-list-btn {
    min-height: 44px;
}

@media (max-width: 767.98px) {
    .fca-btn-sm {
        min-height: 44px;
    }

    /* The checkbox is 24px (the WCAG 2.2 AA minimum); its whole label row is the target. */
    .fca-page label:has(.form-check-input) {
        min-height: 44px;
    }
}

.fca-chip {
    font-size: 0.75rem;
}

/* Grey chips were #6C757D on #F1F3F5 = 4.21:1 at 12px bold. */
body .fca-chip--terminated,
body .fca-chip--cancelled,
body .fca-chip--expired {
    color: var(--ft-gray-700);
}

/* --------------------------------------------------------------------------
   5. Data tables (services, domains, invoices, quotes, emails, tickets)
   -------------------------------------------------------------------------- */

body.ft-layout-client .dataTables_wrapper table.table-list thead th {
    font-size: 0.75rem;
}

html.ft-dark-mode body.ft-layout-client .dataTables_wrapper table.table-list thead th,
html.ft-dark-mode body.ft-layout-client .dataTables_wrapper table.table-list thead th.sorting_asc,
html.ft-dark-mode body.ft-layout-client .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--ft-bg-alt);
    color: var(--ft-text-muted);
}

html.ft-dark-mode body.ft-layout-client .table-list > tbody > tr > td {
    background-color: var(--ft-card-bg);
    color: var(--ft-text);
}

html.ft-dark-mode body.ft-layout-client .table-list > tbody > tr > td.dataTables_empty {
    color: var(--ft-text-muted);
}

html.ft-dark-mode body.ft-layout-client .table-list > tbody > tr:hover > td {
    background-color: var(--ft-bg-alt);
}

html.ft-dark-mode body.ft-layout-client .dataTables_wrapper .page-link {
    background-color: var(--ft-card-bg);
    border-color: var(--ft-border);
    color: var(--ft-text);
}

html.ft-dark-mode body.ft-layout-client .dataTables_wrapper .page-item.disabled .page-link {
    color: var(--ft-text-muted);
}

html.ft-dark-mode body.ft-layout-client .dataTables_wrapper .page-item.active .page-link {
    background-color: var(--ft-blue);
    border-color: var(--ft-blue);
    color: #fff;
}

@media (max-width: 767.98px) {
    body.ft-layout-client .dataTables_wrapper .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.ft-layout-client .dataTables_wrapper .dataTables_filter input,
    body.ft-layout-client .dataTables_wrapper .dataTables_length select {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   6. Account pages
   -------------------------------------------------------------------------- */

/* .fca-page paints every input white; fields the client may not edit must still look locked. */
.fca-page .form-control:disabled,
.fca-page .form-control[readonly] {
    background-color: var(--ft-bg-alt);
    color: var(--ft-text-muted);
    cursor: not-allowed;
}

/* Choose Account: align the card with the page heading instead of centring it. */
.fca-user-page .card.mw-540 {
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   7. Support
   -------------------------------------------------------------------------- */

/* "Online" was #15803D on its green wash = 4.39:1 (light) and 2.2:1 (dark). */
.fst-dept-card .support-hours-badge-inline.is-online {
    color: #166534;
}

html.ft-dark-mode .fst-dept-card .support-hours-badge-inline.is-online {
    color: #86EFAC;
}

/* 10.9-11.8px on phones. These rules follow the theme's phone overrides in source order,
   so they win there too. */
.fst-dept-card .support-hours-schedule,
.fst-stepone-stat {
    font-size: 0.78rem;
}

.fst-stepone-kicker {
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   8. Affiliates (sign-up view for clients who are not affiliates yet)
   -------------------------------------------------------------------------- */

.fca-aff-signup {
    text-align: center;
    padding: 48px 20px 32px;
}

.fca-aff-signup h1 {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 8px;
}

.fca-aff-lead {
    color: var(--ft-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.fca-aff-cta {
    margin-top: 20px;
}

.fca-aff-cards {
    padding-bottom: 48px;
}

.fca-aff-card {
    border: 1px solid var(--ft-card-border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    margin-bottom: 20px;
    background: var(--ft-card-bg);
}

.fca-aff-card-icon {
    font-size: 36px;
    margin-bottom: 12px;
    color: var(--ft-blue);
}

html.ft-dark-mode .fca-aff-card-icon {
    color: var(--fca-link-on-dark);
}

.fca-aff-card h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.fca-aff-card p {
    color: var(--ft-text-muted);
    font-size: 0.875rem;
    margin: 0 0 6px;
}

.fca-aff-card p.fca-aff-note {
    font-size: 0.8125rem;
    margin: 0;
}

.fca-aff-card p.fca-aff-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.ft-dark-mode .fca-aff-card p.fca-aff-note a {
    color: var(--fca-link-on-dark);
}