/* ============================================================================
   Global Styles - Shared across all components
   All colours reference design tokens from tokens.css.
============================================================================ */

/* Global Reset & Base */
html, body {
    height: 100%;
    margin: 0;
    background-color: var(--token-bg-page);
    color: var(--token-text);
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Global Animations */
@keyframes spin {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}

@keyframes pulse {
    0%, 100% { transform: scale(1) }
    50% { transform: scale(1.05) }
}

/* Shared Component Classes */

/* Spinners */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--token-border);
    border-top: 3px solid var(--token-brand);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

.btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-border {
    width: 2rem;
    height: 2rem;
    border: .2em solid var(--token-brand);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .75s linear infinite;
}

/* Button Base Styles */
.btn-primary, .btn-secondary, .btn-dev, .btn-signout, .btn-support, .btn-retry, .provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: var(--token-radius);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--token-transition);
    border: 2px solid transparent;
    font-size: .85rem;
}

.btn-primary {
    background: var(--token-gradient-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--token-brand-rgb), .25);
}

    .btn-primary:hover:not(:disabled) {
        background: var(--token-gradient-brand-hover);
        border-color: transparent;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(var(--token-brand-rgb), .35);
    }

    .btn-primary:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(var(--token-brand-rgb), .25);
    }

.btn-secondary {
    background: var(--token-surface);
    color: var(--token-brand-dark);
    border-color: var(--token-border-medium);
}

    .btn-secondary:hover:not(:disabled) {
        background: var(--token-brand-light);
        color: var(--token-brand-dark);
        border-color: var(--token-brand);
        transform: translateY(-1px);
    }

    .btn-secondary:active:not(:disabled) {
        transform: translateY(0);
    }

.btn-support {
    background: var(--token-brand);
    border-color: var(--token-brand);
    color: #fff;
}

/* Own class, not .btn-secondary — Bootstrap's .btn-secondary:focus outranks ours and repaints it on click. */
.btn-retry {
    background: var(--token-surface);
    color: var(--token-text);
    border-color: var(--token-border-medium);
}

    .btn-retry:hover {
        background: var(--token-brand-light);
        border-color: var(--token-brand);
    }

    .btn-support:hover {
        background: var(--token-brand-hover);
        border-color: var(--token-brand-hover);
        transform: translateY(-1px);
    }

.btn-primary:disabled, .btn-secondary:disabled, .btn-dev:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* Form Controls */
.form-input {
    width: 100%;
    padding: .75rem;
    border: 2px solid var(--token-border);
    border-radius: var(--token-radius);
    font-size: .9rem;
    transition: all var(--token-transition);
    background: var(--token-surface);
    color: var(--token-text);
}

    .form-input:focus {
        outline: none;
        border-color: var(--token-brand);
        box-shadow: 0 0 0 .2rem rgba(var(--token-brand-rgb), .25);
    }

    .form-input.error {
        border-color: var(--token-danger);
    }

/* Alert Components */
.status-alert, .error-alert {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem;
    border-radius: var(--token-radius);
    margin-bottom: 1rem;
    font-size: .85rem;
}

    .status-alert.info {
        background: var(--token-info-alt-bg);
        border: 1px solid var(--token-info-alt-border);
        color: var(--token-info-alt-text);
    }

.error-alert {
    background: var(--token-warning-bg);
    border: 1px solid var(--token-warning-border);
    color: var(--token-warning-text);
}

.alert {
    padding: .75rem;
    border-radius: var(--token-radius);
    margin-bottom: 1rem;
}

.alert-danger {
    background: var(--token-danger-bg);
    color: var(--token-danger-text);
    border: 1px solid var(--token-danger-border);
}

.alert-success {
    background: var(--token-success-alert-bg);
    color: var(--token-success-dark);
    border: 1px solid var(--token-success-alert-border);
}

/* Dismissible Components */
.dismissible {
    position: relative;
    padding-right: 2.5rem;
}

.close-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: .25rem;
    border-radius: 3px;
    font-size: .8rem;
}

    .close-btn:hover {
        background: rgba(0,0,0,.1);
    }

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: 5px;
    font-weight: 500;
    font-size: .8rem;
}

    .status-badge.success {
        background: var(--token-info-alt-bg);
        color: var(--token-info-alt-text);
    }

    .status-badge.warning {
        background: var(--token-warning-bg);
        color: var(--token-warning-text);
    }

    .status-badge.primary {
        background: var(--token-info-light-bg);
        color: var(--token-info-text);
    }

    .status-badge.info {
        background: var(--token-info-alt-bg);
        color: var(--token-info-alt-text);
    }

    .status-badge.secondary {
        background: var(--token-bg-muted);
        color: var(--token-text-input);
    }

.full-width {
    width: 100%;
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: .5rem;
}

/* Per-element scrollbar styles previously here for .home-card-body /
   .verification-body / .portal-content have been replaced by the universal
   `*` rule below — same tokens, applies everywhere automatically. */

/* Toast Notification */

.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: auto;
    min-width: 280px;
    max-width: 420px;
    pointer-events: auto;
    padding: .875rem 1.25rem;
    border-radius: var(--token-radius-md);
    box-shadow: var(--token-shadow-card);
    font-size: .875rem;
    font-weight: 500;
}

.toast-success {
    background: var(--token-success-alert-bg);
    color: var(--token-success-dark);
    border: 1px solid var(--token-success-alert-border);
}

.toast-error {
    background: var(--token-danger-bg);
    color: var(--token-danger-text);
    border: 1px solid var(--token-danger-border);
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: none;
    border: none;
    color: currentColor;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 .25rem;
    min-width: 40px;
    min-height: 40px;
    opacity: .7;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}

.toast-slide-in {
    animation: toastSlideIn .3s ease-out forwards;
}

.toast-slide-out {
    animation: toastSlideOut .3s ease-in forwards;
}

/* Inline error pill — small inline message shown beneath form inputs or
   inside cards (e.g., Send-a-message composer, attachment-download failures
   in the email detail view). Theme-token driven so it flips for dark mode. */
.inline-error {
    margin: 0.5rem 0;
    padding: 0.4rem 0.6rem;
    background: var(--token-danger-light-bg);
    color: var(--token-danger);
    border-radius: 0.375rem;
    font-size: 0.75rem;
}

/* ============================================================================
   Universal slim scrollbar — minimal AugerSpark pattern. Track is fully
   transparent (no visible rail), only the thumb is visible. The thumb fades
   in subtly when scrolling and brightens on hover.

   Reference: AugerSpark/Components/Layout/MainLayout.razor.css:18-24 uses
   `scrollbar-color: var(--border-subtle) transparent` for the same effect.

   Third-party iframes (Stripe, 3CX call-us widget) are isolated documents
   and unaffected — their scrollbars stay browser-default by design.

   Specificity note: `*::-webkit-scrollbar` is 0,0,1 — any element-specific
   rule (e.g. .messages-tabs's `scrollbar-width: none` for the horizontal
   tab strip) overrides this. Opt-out works without ceremony.
============================================================================ */
*, *::before, *::after {
    scrollbar-width: thin;
    scrollbar-color: var(--token-scrollbar-thumb) transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }

/* Transparent track — invisible rail; matches AugerSpark's clean look. */
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--token-scrollbar-thumb);
    border-radius: 3px;
    /* Slight transparency at rest so the thumb feels light; opaque on hover. */
    opacity: 0.6;
}

    *::-webkit-scrollbar-thumb:hover {
        background: var(--token-text-muted);
        opacity: 1;
    }

/* ============================================================================
   Shared utility classes used across messages-section tab components
   (EmailTabComponent, ChatHistoryTabComponent, SendMessageComponent).
   Lifted out of EmailTabComponent's <style> so each tab is self-styled
   without depending on a sibling tab being rendered.
============================================================================ */

/* Tab content scroll containers — GLOBAL. Previously these lived only inside
   MessagesComponent's <style>, so a tab rendered WITHOUT Messages on the page
   (e.g. the Documents tab) received no scroll rules and its content overflowed
   the position:fixed .portal-main shell instead of scrolling. Defining them here
   makes every tab (.documents-tab, EmailTab, ChatHistoryTab, SendMessage, …)
   scroll correctly regardless of which component happens to be rendered. */
.tab-content {
    flex: 1 1 0;
    min-height: 0;            /* critical: lets the flex child shrink so overflow can scroll */
    display: flex;
    flex-direction: column;
}

.tab-content-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;   /* momentum scrolling on older iOS Safari */
}

.avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    flex: 0 0 auto;
}

/* Auger forest green for staff avatars */
.avatar-staff { background: #387639; }

/* Auger navy for the customer's own avatar */
.avatar-self { background: var(--auger-navy, #00333B); }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--token-text-muted);
    font-size: 0.9rem;
    background: var(--token-surface);
    border: 1px solid var(--token-border-lighter);
    border-radius: 0.625rem;
}

    .empty-state i {
        font-size: 1.75rem;
        margin-bottom: 0.6rem;
        display: block;
        color: var(--token-icon-muted);
    }

    .empty-state p { margin: 0; }

.back-to-inbox {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: 0;
    color: var(--token-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0 0 0.875rem;
}

    .back-to-inbox:hover { color: var(--token-text-heading); }

/* 3CX live-chat bubble — mobile clearance.
   The 3CX widget (ThreeCXChat.razor) renders <call-us id="wp-live-chat-by-3CX">
   with an inline `bottom: 20px right: 20px`, which on phones ≤640px lands
   directly on top of the fixed mobile-bottom-nav's "Contact" tab
   (PortalMainComponent.razor :1285-1325). Lift the bubble above the nav and
   clear the iOS safe-area inset on notched phones. !important is needed to
   beat the inline style set on the custom-element host. Desktop is unaffected. */
@media (max-width: 640px) {
    #wp-live-chat-by-3CX {
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .form-input {
        font-size: 16px;
    }
}

/* ============================================================================
   Driver.js portal walkthrough — theme-aware popover styling.
   The CDN driver.css ships white popovers + dark text. We override with the
   portal's design tokens so the popover auto-adapts when the customer toggles
   light/dark theme (--token-* values come from theme.light.css / theme.dark.css).
   Selectors target Driver.js v1.4 class names (driver-popover, driver-popover-*).
============================================================================ */
.driver-popover {
    /* Driver.js ships its own font stack; without this the tour reads in a
       different typeface to the rest of the portal. Footer buttons inherit it —
       their `all: unset` resolves font-family to inherit. */
    font-family: var(--token-font-family);
    background: var(--token-surface);
    color: var(--token-text-heading);
    border: 1px solid var(--token-border-light);
    border-radius: 0.625rem;
    box-shadow: var(--token-shadow-lg);
}

.driver-popover-title {
    color: var(--token-text-heading);
    font-weight: 700;
}

.driver-popover-description {
    color: var(--token-text-heading);
    opacity: 0.85;
    line-height: 1.5;
}

.driver-popover-progress-text {
    color: var(--token-text-muted);
    font-size: 0.75rem;
}

/* Arrow tip — must match the popover background so it appears continuous. */
.driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: var(--token-surface);
}
.driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: var(--token-surface);
}
.driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: var(--token-surface);
}
.driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: var(--token-surface);
}

/* CRITICAL: Driver.js v1.4 styles its footer buttons with the compound
   selector `.driver-popover-footer button { all: unset; ... }` (specificity
   0,1,1). To override, our selectors MUST also include the `button` element
   and either match or beat that specificity — using `.driver-popover-next-btn`
   alone (specificity 0,1,0) loses the cascade despite later source order.
   We use `.driver-popover-footer button.driver-popover-next-btn` (0,2,1)
   so we definitively win. The `all: unset` in their rule wipes all inherited
   styles, so we must explicitly set every visual property we want. */

/* Back — ghost button styled to read on BOTH themes. Transparent background
   shows through to the popover surface (--token-surface adapts per theme);
   border + text use neutral tokens that flip per theme. */
.driver-popover-footer button.driver-popover-prev-btn,
.driver-popover-footer button.cwp-tour-skip-btn {
    background: transparent;
    color: var(--token-text-muted);
    border: 1px solid var(--token-border-medium);
    border-radius: 0.4rem;
    padding: 0.45rem 0.95rem;
    font-weight: 500;
    font-size: 0.85rem;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .driver-popover-footer button.driver-popover-prev-btn:hover,
    .driver-popover-footer button.cwp-tour-skip-btn:hover {
        background: var(--token-bg-muted);
        color: var(--token-text-heading);
        border-color: var(--token-text-muted);
    }

    .driver-popover-footer button.driver-popover-prev-btn:focus-visible,
    .driver-popover-footer button.cwp-tour-skip-btn:focus-visible {
        outline: 2px solid var(--token-brand);
        outline-offset: 2px;
    }

    .driver-popover-footer button.driver-popover-prev-btn:disabled,
    .driver-popover-footer button.driver-popover-prev-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Skip (injected by portal-tour.js) shares the Back ghost style below. Its class
   deliberately avoids the "driver-popover" substring: Driver's click interceptor
   swallows clicks on anything whose className contains it. */
.driver-popover-footer button.cwp-tour-skip-btn {
    margin-right: 0.4rem;
}

/* Next / Done — primary brand colour, matches the rest of the portal. */
.driver-popover-footer button.driver-popover-next-btn {
    background: var(--token-brand);
    color: #fff;
    border: 1px solid var(--token-brand);
    border-radius: 0.4rem;
    padding: 0.45rem 0.95rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

    .driver-popover-footer button.driver-popover-next-btn:hover {
        background: var(--token-brand-hover);
        border-color: var(--token-brand-hover);
        color: #fff;
    }

    .driver-popover-footer button.driver-popover-next-btn:focus-visible {
        outline: 2px solid var(--token-brand);
        outline-offset: 2px;
    }

    .driver-popover-footer button.driver-popover-next-btn:active {
        transform: translateY(1px);
    }

/* Close (X) — muted so it doesn't compete with the action buttons.
   :focus MUST be themed too: Driver.js focuses the X when a step opens, and the
   CDN's :focus rule paints it near-black — invisible on the dark surface. */
.driver-popover-close-btn {
    color: var(--token-text-muted);
    transition: color 120ms ease;
}

    .driver-popover-close-btn:hover,
    .driver-popover-close-btn:focus {
        color: var(--token-text-heading);
    }

    .driver-popover-close-btn:focus-visible {
        outline: 2px solid var(--token-brand);
        outline-offset: 2px;
        border-radius: 0.25rem;
    }

/* Three footer buttons (Skip/Back/Next) can crowd the popover on narrow phones. */
@media (max-width: 480px) {
    .driver-popover-footer {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .toast-container {
        left: 1rem;
        right: 1rem;
        min-width: 0;
        max-width: none;
    }
}