/* ==========================================================================
   STACQ.IO PORTAL — Design System & Styles
   Primary: #eb7b57 | Border Radius: 10px | Font: Inter
   ========================================================================== */

/* ----- Reset & Base ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Rich-text message content: keep list markers inside their containers.
   The * reset above zeroes all padding, so lists need explicit padding
   to prevent bullets/numbers from overflowing message boxes. */
ul, ol {
    padding-left: 1.5em;
    margin: 0.25em 0;
}

li {
    margin-bottom: 0.15em;
}

:root {
    --primary: #eb7b57;
    --primary-dark: #d4653e;
    --primary-light: #f5a689;
    --primary-bg: #fef3ef;
    --dark: #1a1a2e;
    --dark-2: #2d2d44;
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;
    --white: #ffffff;
    --green: #10b981;
    --green-bg: #ecfdf5;
    --red: #ef4444;
    --red-bg: #fef2f2;
    --yellow: #f59e0b;
    --yellow-bg: #fffbeb;
    --blue: #3b82f6;
    --blue-bg: #eff6ff;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: 0.2s ease;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fafcfa;
    color: var(--gray-900);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

/* ----- Navigation ----- */
.main-nav {
    background: #fafcfa;
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    height: 52px;
    width: auto;
    vertical-align: middle;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.25rem;
}

.brand-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: var(--white);
}

.brand-icon-lg {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    border-radius: var(--radius);
}

.brand-text {
    color: var(--white);
}

.brand-dot {
    color: var(--primary);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-user {
    color: var(--gray-600);
    font-size: 0.875rem;
}

.nav-link {
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.nav-link:hover {
    color: var(--primary);
    background: rgba(235, 123, 87, 0.08);
}

.nav-logout {
    color: var(--primary);
}

/* ----- Flash Messages ----- */
.flash-container {
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 1.5rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

.flash-success {
    background: var(--green-bg);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.flash-error {
    background: var(--red-bg);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.flash-info {
    background: var(--blue-bg);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.flash-warning {
    background: var(--yellow-bg);
    color: #92400e;
    border: 1px solid #fde68a;
}

.flash-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: inherit;
    opacity: 0.6;
    line-height: 1;
}

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Main Content ----- */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

/* ----- Auth Pages ----- */
.auth-wrapper {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: #fafcfa;
}

@media (max-width: 768px) {
    .auth-wrapper {
        align-items: flex-start;
        min-height: auto;
        padding: 1.5rem 1rem;
    }

    .auth-brand {
        display: none;
    }

    .auth-logo {
        display: none;
    }
}

.auth-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem;
    animation: fadeUp 0.4s ease;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.auth-logo {
    height: 40px;
    width: auto;
}

.auth-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.auth-subtitle {
    color: var(--gray-500);
    font-size: 0.95rem;
}

.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
}

.auth-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.auth-tab:hover {
    color: var(--primary-dark);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Dashboard ----- */
.dashboard {
    padding: 2rem 0;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dashboard-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.dashboard-subtitle {
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.back-link {
    display: inline-block;
    color: var(--gray-500);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.back-link:hover {
    color: var(--primary);
}

/* ----- Cards ----- */
.card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.4s ease;
    border: 1px solid var(--gray-200);
}

.card-compact {
    padding: 1rem 1.75rem;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count-badge {
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}

/* ----- Status Tracker ----- */
.status-tracker {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: 1rem 0;
    gap: 0;
}

.status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    z-index: 1;
}

.status-step.complete .step-dot {
    background: var(--primary);
    color: var(--white);
}

.status-step.current .step-dot {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 0 0 4px var(--primary-bg);
    animation: pulse 2s infinite;
}

.status-step.skipped .step-dot {
    background: var(--gray-300);
    color: var(--gray-500);
}

.step-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    max-width: 90px;
    line-height: 1.3;
    font-weight: 500;
}

.status-step.current .step-label {
    color: var(--primary);
    font-weight: 600;
}

.status-step.complete .step-label {
    color: var(--gray-700);
}

.step-date {
    font-size: 0.65rem;
    color: var(--primary);
    font-weight: 600;
    margin-top: 0.15rem;
}

.step-num {
    font-size: 0.7rem;
}

.step-skip {
    font-size: 1rem;
}

.step-line {
    flex: 1;
    height: 3px;
    background: var(--gray-200);
    min-width: 20px;
    margin: 17px 0 0 0;
    align-self: flex-start;
    transition: background 0.3s ease;
}

.step-line.complete {
    background: var(--primary);
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px var(--primary-bg);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(235, 123, 87, 0.15);
    }
}

/* ----- Free Trial Banner ----- */
.trial-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.trial-info h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark);
}

.trial-info p {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.trial-countdown {
    flex: 1;
    max-width: 800px;
}

.trial-progress {
    height: 8px;
    background: var(--gray-200);
    border-radius: 99px;
    overflow: hidden;
}

.trial-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 99px;
    transition: width 0.5s ease;
}

.trial-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    display: block;
    text-align: right;
}

.trial-warning .trial-bar {
    background: var(--yellow);
}

.trial-urgent .trial-bar {
    background: var(--red);
}

.trial-urgent .trial-info h3 {
    color: var(--red);
}

/* ----- Tables ----- */
.table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
}

.data-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.data-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    white-space: nowrap;
}

.data-table tbody tr {
    transition: background var(--transition);
}

.data-table tbody tr:hover {
    background: var(--gray-50);
}

/* ----- Badges & Pills ----- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-basic_human_nopub {
    background: #f1f5f9;
    color: #475569;
}

.badge-basic_human {
    background: var(--blue-bg);
    color: #1d4ed8;
}

.badge-basic_ai {
    background: #f0fdf4;
    color: #15803d;
}

.badge-advanced_ai {
    background: var(--yellow-bg);
    color: #b45309;
}

.badge-expert {
    background: var(--red-bg);
    color: #dc2626;
}

.status-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-active,
.status-open,
.status-deferred {
    background: var(--green-bg);
    color: #065f46;
}

.status-pending,
.status-in_progress,
.status-removal_requested {
    background: var(--yellow-bg);
    color: #92400e;
}

.status-resolved,
.status-completed,
.status-paid,
.status-invoiced {
    background: var(--blue-bg);
    color: #1e40af;
}

.status-revoked,
.status-declined,
.status-refunded {
    background: var(--red-bg);
    color: #991b1b;
}

/* ----- Forms ----- */
.form-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.form-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.section-subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
    overflow: hidden;
}

.form-group input[type="date"],
.form-group input[type="month"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 100%;
    min-width: 0;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--gray-900);
    background: var(--white);
    transition: all var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(235, 123, 87, 0.15);
}

.form-group textarea {
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray-400);
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 200px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

/* Two equal columns that become one on a phone. Exists so a template can stop
   writing `grid-template-columns: 1fr 1fr` inline: an inline style cannot carry
   a media query, so every one of those is a layout that is two-across at 390px
   no matter how narrow the screen gets. */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Main content beside a fixed sidebar, stacking on a phone.

   minmax(0, 1fr) rather than 1fr for the content column: a bare 1fr track has
   an automatic minimum of its own content, so one thing inside it that will
   not shrink widens the track and shoves the fixed sidebar off the right edge.
   A lead note carrying an unbroken grounding-API URL did exactly that, and the
   Status panel ended up past the viewport with the page scrolling sideways. */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

/* Long strings break at every width, not only on a phone. overflow-wrap is an
   inherited property, so one declaration on the wrapper reaches everything
   inside it. break-word rather than anywhere: it does not reduce an element's
   min-content width to a single character, which is what collapsed a grid
   track and wrapped a label one letter per line. The mobile rule still raises
   it to `anywhere` where the tighter behaviour is needed.

   Without this, a lead note carrying a grounding-API URL ran to the edge of
   its card on desktop, because every wrapping rule lived behind a media
   query. */
.admin-panel {
    overflow-wrap: break-word;
}

/* Three equal columns, stepping down rather than stacking straight to one.

   Note admin_stats.html and admin_finance.html each define their own
   .stat-grid in a page-local <style> block, with different column counts and
   different breakpoints. They are a fork, but a deliberate-looking one, so
   reconciling them is its own decision rather than a side effect of adding a
   page that needed three columns. */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* A field that wants the full row. `grid-column: 1 / -1` rather than `span 2`,
   because span 2 in a grid that has collapsed to one column creates an
   implicit second column and puts the single-column layout back where it
   started. `1 / -1` is the whole row whatever the column count turns out to
   be. */
.form-grid-full {
    grid-column: 1 / -1;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* ----- Trial Radio Group ----- */
.trial-radio-group {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .trial-radio-group {
        flex-direction: column;
        gap: 10px;
    }
}

/* ----- Waiver Section ----- */
.waiver-section {
    margin: 1rem 0;
}

.waiver-box {
    background: var(--yellow-bg);
    border: 1.5px solid #fde68a;
    border-radius: var(--radius);
    padding: 1.25rem;
}

.waiver-box h4 {
    font-size: 0.9rem;
    color: #92400e;
    margin-bottom: 0.5rem;
}

.waiver-box p {
    font-size: 0.8rem;
    color: #78350f;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: var(--white);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-300);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
}

.btn-ghost {
    background: none;
    color: var(--gray-600);
    padding: 0.4rem 0.75rem;
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.btn-danger {
    background: var(--red);
    color: var(--white);
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    color: var(--white);
}

.btn-warning {
    background: var(--yellow);
    color: var(--white);
}

.btn-warning:hover {
    background: #d97706;
    color: var(--white);
}

.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
}

.btn-full {
    width: 100%;
}

/* ----- Tabs ----- */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tab {
    padding: 0.65rem 1.25rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
    white-space: nowrap;
}

.tab:hover {
    color: var(--primary-dark);
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
    animation: fadeUp 0.3s ease;
}

.tab-content.active {
    display: block;
}

/* ----- Edit Pack Cards ----- */
.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.pack-card {
    border: 2px solid var(--gray-200);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.pack-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.pack-featured {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.pack-badge {
    position: absolute;
    top: -10px;
    right: 1rem;
    background: var(--primary);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pack-minutes {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.pack-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0.25rem 0;
}

.pack-desc {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

/* ----- Time Bank ----- */
.time-bank-display {
    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--white) 100%);
    border: 2px solid var(--primary-light);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

.admin-time-bank {
    margin-bottom: 1.5rem;
}

.time-bank-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.time-bank-label {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ----- Billing Grid ----- */
.billing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.billing-item {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 1rem;
}

/* A .billing-item used outside .billing-grid has no gap to inherit, because the
   grid's `gap` is what separates them. Standalone full-width panels below the
   grid, the payment method and the agreement, were rendering flush against each
   other with no space at any breakpoint. The margin matches the grid's 1rem gap
   so a panel spaces identically whether or not it is inside the grid. */
.billing-item--standalone {
    margin-bottom: 1rem;
}

.billing-item--standalone:last-child {
    margin-bottom: 0;
}

.billing-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.billing-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
}

/* ----- Health Grid ----- */
.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.health-card {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--gray-200);
}

.health-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.health-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.health-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
}

.health-up {
    color: var(--green);
}

/* ----- Admin Status Bar ----- */
.admin-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.status-indicator {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    font-weight: 600;
}

.status-signed {
    background: var(--green-bg);
    color: #065f46;
}

.status-unsigned {
    background: var(--red-bg);
    color: #991b1b;
}

.status-link {
    background: var(--blue-bg);
    color: #1e40af;
    cursor: pointer;
    transition: all var(--transition);
}

.status-link:hover {
    background: #dbeafe;
}

/* ----- Search ----- */
.search-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.search-input {
    font-size: 1rem !important;
    padding: 0.7rem 1rem !important;
}

/* ----- Inline Actions ----- */
.inline-action {
    display: inline-block;
}

.inline-form {
    margin-bottom: 1rem;
}

/* ----- Empty States ----- */
.empty-state {
    color: var(--gray-500);
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 0;
}

/* ----- Links ----- */
.link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.8rem;
}

.link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ----- Utilities ----- */
.text-muted {
    color: var(--gray-500);
    font-size: 0.8rem;
}

/* ----- Dashboard Grid Classes (for responsive overrides) ----- */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.ga4-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.review-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cancel-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ----- Admin Panel ----- */
.admin-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ----- Responsive: Tablet (1024px) ----- */
@media (max-width: 1024px) {

    .nav-inner,
    .site-header-inner {
        padding: 15px 30px;
    }

    .site-footer {
        padding: 2.5rem 30px 1.5rem;
    }

    .footer-heading {
        font-size: 36px;
    }

    .billing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .health-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- Responsive: Mobile (768px) ----- */
@media (max-width: 768px) {
    .main-content {
        padding: 0 1rem 2rem;
    }

    .dashboard-header {
        flex-direction: column;
    }

    .header-actions {
        width: 100%;
    }

    .header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.78rem;
        padding: 0.5rem 0.75rem;
    }

    /* Notification dropdown — positioning controlled by JS, CSS only sets max-height */
    .notif-dropdown {
        max-width: calc(100vw - 32px);
    }

    .auth-card {
        padding: 1.5rem;
        margin: 1rem;
    }

    .status-tracker {
        padding: 0.5rem 0;
    }

    .status-step {
        min-width: 80px;
    }

    .step-label {
        font-size: 0.6rem;
        max-width: 70px;
    }

    .billing-grid {
        grid-template-columns: 1fr !important;
    }

    .health-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .nav-inner {
        padding: 14px 16px;
    }

    .site-header-inner {
        padding: 14px 20px;
        min-height: 64px;
    }

    /* Contain logo within header */
    .site-logo img {
        height: 30px;
    }

    .nav-logo {
        height: 30px;
    }

    .nav-right {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .nav-link {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    .nav-user {
        display: none;
    }

    /* A 1fr grid track and a flex item are sized to their longest unbroken
       word. One email address, one website URL, one note with a link in it
       widened the prospect lead page to desktop width on a phone, and every
       admin page is built the same way. Let text break anywhere and let grid
       and flex children shrink below their content. Explicit widths still
       apply; only the automatic minimum is removed. */
    .admin-panel * {
        overflow-wrap: anywhere;
        min-width: 0;
    }

    /* ...but not on a label or a heading. `anywhere` differs from `break-word`
       in that it also drops the element's min-content width to a single
       character, so a grid track sized from that minimum can collapse to
       nothing and the short text inside it renders one letter per line. That
       is what happened to "BUSINESS NAME" on the prospect lead edit form: the
       label column collapsed while the input column beside it kept its width.
       These elements are short, and none of them is the long unbroken email
       address or URL the rule above exists for, so they break on words. */
    .admin-panel label,
    .admin-panel h1,
    .admin-panel h2,
    .admin-panel h3,
    .admin-panel h4,
    .admin-panel th,
    .admin-panel .stat-label,
    .admin-panel .card-title,
    .admin-panel button,
    /* .btn sets white-space: nowrap, which beats every overflow-wrap value
       there is, so a long button label runs straight out of its container no
       matter what wrapping is asked for. The campaign picker is a wrapping row
       of buttons named things like "Partner - Formation & Professional
       Services"; each one overflowed on its own line. Let them wrap and cap
       them at the width they were given. */
    .admin-panel .btn,
    .admin-panel button {
        white-space: normal;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    /* .form-row .form-group is 0,2,0 and `.admin-panel *` is 0,1,0, so this
       200px floor outranks the rule meant to let admin children shrink. Two of
       them side by side need 400px, which is wider than the phone. */
    .form-row .form-group {
        min-width: 0;
    }

    /* Two fixed columns become one. */
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* The sidebar drops below the content rather than taking 320px of a 390px
       screen and leaving the content column about fifty pixels to live in. */
    .detail-layout {
        grid-template-columns: 1fr;
    }

    /* A fixed 340px box plus page padding overflows a 360px phone. */
    .tour-tip {
        width: auto;
        max-width: calc(100vw - 32px);
    }

    /* A form control's intrinsic width comes from its `size` attribute, not
       its content, so it does not shrink with the rule above and instead
       forces its own track wide at the expense of its neighbour. With
       border-box the declared width:100% is the whole control, padding and
       border included, so it fits the track it is given. */
    .admin-panel input,
    .admin-panel select,
    .admin-panel textarea {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* The action button in every admin table. 28px tall at desktop; a thumb
       needs more. */
    .btn-sm {
        min-height: 40px;
        padding: 0.55rem 0.85rem;
        font-size: 0.8rem;
    }

    .nav-right .btn-warning {
        display: none;
    }

    #mobileStopImpersonate {
        display: inline-flex !important;
    }

    .tabs {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .trial-banner {
        flex-direction: column;
    }

    .trial-countdown {
        max-width: 100%;
        width: 100%;
    }

    .trial-progress {
        height: 10px;
    }

    .search-form {
        flex-direction: column;
    }

    .search-form .form-group {
        width: 100%;
    }

    .admin-status-bar {
        flex-direction: column;
    }

    .pack-grid {
        grid-template-columns: 1fr;
    }

    .footer-heading {
        font-size: 28px;
    }

    .card {
        padding: 1.25rem;
    }

    .score-grid {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .review-options {
        flex-direction: column;
    }

    .review-options>label {
        width: 100%;
    }

    .cancel-actions {
        flex-direction: column;
        width: 100%;
    }

    .cancel-actions .btn {
        width: 100%;
        text-align: center;
    }

    .ga4-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .ga4-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Notification dropdowns — positioning controlled by JS; only visual overrides here */
    #clientNotifDropdown,
    #notifDropdown {
        max-height: 70vh !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
    }

    .data-table {
        font-size: 0.78rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.6rem 0.65rem;
    }
}

/* ----- Password Toggle ----- */
.pw-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.pw-toggle:hover {
    opacity: 1;
}

@media (max-width: 480px) {
    .dashboard-title {
        font-size: 1.35rem;
    }

    .billing-grid {
        grid-template-columns: 1fr;
    }

    .health-grid {
        grid-template-columns: 1fr;
    }

    .time-bank-value {
        font-size: 2.5rem;
    }

    .footer-heading {
        font-size: 24px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .header-actions {
        flex-direction: column;
    }

    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }


    .nav-right {
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.3rem 0.4rem;
        font-size: 0.75rem;
    }



    .card {
        padding: 1rem;
        border-radius: 12px;
    }

    .card-title {
        font-size: 1rem;
    }

    .ga4-tabs {
        gap: 4px;
    }

    .ga4-tabs button {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    .status-step {
        min-width: 65px;
    }

    .step-dot {
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }

    .step-label {
        font-size: 0.55rem;
        max-width: 60px;
    }
}

/* ==========================================================================
   SITE HEADER & FOOTER (matches stacq.io for login page)
   ========================================================================== */

/* ----- Site Header ----- */
.site-header {
    background: #fafcfa;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 200;
}

.site-header-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo img {
    height: 52px;
    width: auto;
    vertical-align: middle;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.site-nav a,
.site-dropdown-btn {
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 300;
    padding: 0.4rem 20px 0.3rem;
    border-radius: 0;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.site-nav a:hover,
.site-dropdown-btn:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.site-nav-active {
    color: var(--primary) !important;
    font-weight: 500 !important;
    border-bottom-color: var(--primary) !important;
}

.nav-sep {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    user-select: none;
    padding: 0 0.1rem;
}

.dropdown-arrow {
    font-size: 0.65rem;
    margin-left: 0.1rem;
}

/* ----- Dropdown ----- */
.site-dropdown {
    position: relative;
    display: inline-flex;
}

.site-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 160px;
    padding: 0.5rem 0;
    z-index: 300;
}

.site-dropdown:hover .site-dropdown-menu {
    display: block;
}

.site-dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--gray-700);
    white-space: nowrap;
}

.site-dropdown-menu a:hover {
    background: var(--gray-50);
    color: var(--primary);
}

.mobile-menu-btn,
.admin-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    width: 28px;
    height: 22px;
    position: relative;
    flex-shrink: 0;
}

.mobile-menu-btn span,
.admin-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
    position: absolute;
    left: 4px;
    transition: all 0.2s ease;
}

.mobile-menu-btn span:nth-child(1),
.admin-menu-btn span:nth-child(1) {
    top: 3px;
}

.mobile-menu-btn span:nth-child(2),
.admin-menu-btn span:nth-child(2) {
    top: 10px;
}

.mobile-menu-btn span:nth-child(3),
.admin-menu-btn span:nth-child(3) {
    top: 17px;
}

/* The admin, partner and team header collapses to a hamburger at 1024px, not
   the client header's 1400px: its link row is shorter and fits a laptop. Below
   that the row used to wrap into three or four lines pinned under the sticky
   bar, eating most of a phone screen. */
@media (max-width: 1024px) {
    .main-nav .nav-right {
        display: none;
    }

    .admin-menu-btn {
        display: block;
    }
}

@media (min-width: 1025px) {
    .admin-menu-btn {
        display: none !important;
    }
}

/* Admin carries twelve links, twice any other role's row. At 14px they broke
   onto two lines ("Partner / Revenue") on an ordinary laptop. Smaller text
   that never wraps, and below the width where even that cannot fit on one
   row, the hamburger takes over early for admin only. */
.main-nav--admin .nav-right {
    gap: 0.25rem;
}

.main-nav--admin .nav-link {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}

@media (max-width: 1279px) {
    .main-nav--admin .nav-right {
        display: none;
    }

    /* Beats the min-width: 1025px !important above on specificity. */
    .main-nav--admin .admin-menu-btn {
        display: block !important;
    }
}

/* ----- Shared responsive helpers for pages built from inline styles ----- */
/* An inline grid-template-columns cannot be reached by any stylesheet rule
   without !important, so the grids that must collapse on a phone carry a
   class instead of the inline declaration. */
.grid-3-collapse {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.w9-address-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.referral-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

/* A card that scrolls its table sideways on a phone instead of clipping it.
   overflow:hidden on the card was worse than no wrapper: the right-hand
   columns were unreachable, with no scrollbar to reach them. */
.scroll-card {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .grid-3-collapse,
    .referral-steps-grid {
        grid-template-columns: 1fr;
    }

    .scroll-card td,
    .scroll-card th {
        overflow-wrap: anywhere;
    }

    /* A page-level sticky bar sat under the z-index:100 nav, and the nav has
       no fixed height to offset it by across three breakpoints. */
    .sticky-actions {
        position: static !important;
    }
}

@media (max-width: 640px) {
    .w9-address-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Site Footer ----- */
.site-footer {
    background: #fafcfa;
    border-top: 1px solid var(--gray-200);
    padding: 2.5rem 50px 1.5rem;
    margin-top: 0;
}

.site-footer-inner {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* Footer heading */
.footer-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 46px;
    font-weight: 300;
    color: var(--gray-800);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.heading-dot {
    color: var(--primary);
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.footer-nav a,
.footer-nav .site-dropdown-btn {
    color: var(--gray-600);
    font-size: 0.78rem;
    font-weight: 300;
    padding: 0.3rem 0.5rem 0.25rem;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
}

.footer-nav a:hover,
.footer-nav .site-dropdown-btn:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.social-img {
    width: 50px;
    height: 50px;
    transition: transform var(--transition), opacity var(--transition);
}

.social-img:hover {
    transform: scale(1.1);
    opacity: 0.85;
}

.footer-social a:first-child .social-img {
    width: 47px;
    height: 47px;
    position: relative;
    top: 1px;
}

.footer-social a:nth-child(3) .social-img {
    width: 49px;
    height: 49px;
    position: relative;
    top: 1px;
}

/* Footer bottom bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-200);
    padding-top: 1rem;
    font-size: 0.7rem;
    padding-left: 0;
    padding-right: 0;
}

.footer-copy {
    color: var(--gray-400);
}

.footer-legal-links {
    color: var(--gray-500);
}

.footer-legal-links a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-legal-links a:hover {
    color: var(--primary);
}

.legal-sep {
    color: var(--gray-400);
    padding: 0 0.25rem;
}

/* Upward dropdown for footer */
.site-dropdown-menu-up {
    top: auto;
    bottom: 100%;
    margin-bottom: 0.25rem;
}

/* ----- Mobile Header & Overlay Menu ----- */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    flex-direction: column;
    padding-top: 80px;
}

.mobile-menu-nav {
    background: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0 2rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, max-height 0.35s ease, transform 0.3s ease, padding 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-top: -15px;
}

.mobile-menu-overlay.open {
    display: flex;
}

.mobile-menu-overlay.animating .mobile-menu-nav {
    opacity: 1;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(0);
    padding: 20px 2rem;
}

/* Spacer pushes nav below the sticky header */
.mobile-menu-header {
    flex-shrink: 0;
    height: 0;
    pointer-events: none;
}

.mobile-close-btn {
    display: none;
}

.mobile-menu-logo {
    display: none;
}

.mobile-menu-logo img {
    height: 44px;
    width: auto;
}

.mobile-menu-nav a {
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    padding: 0.75rem 1rem;
    transition: opacity var(--transition);
}

.mobile-menu-nav a:hover {
    opacity: 0.8;
    color: var(--white);
}

/* ----- Mobile Menu Accordion Sub-Items ----- */
.mobile-submenu-group {
    width: 100%;
    text-align: center;
}

.mobile-submenu-toggle {
    color: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: center;
    transition: opacity var(--transition);
}

.mobile-submenu-toggle:hover {
    opacity: 0.8;
}

.mobile-submenu-toggle .mobile-arrow {
    display: inline-block;
    font-size: 0.7rem;
    margin-left: 4px;
    transition: transform 0.25s ease;
}

.mobile-submenu-toggle.open .mobile-arrow {
    transform: rotate(180deg);
}

.mobile-submenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-submenu a {
    font-size: 14px !important;
    padding: 0.5rem 1rem !important;
    opacity: 0.85;
}

@media (max-width: 1400px) {
    .site-header {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .site-header-inner {
        padding: 18px 20px;
        position: relative;
        justify-content: flex-start;
    }

    .site-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
        order: -1;
    }

    .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .site-logo img {
        height: 44px;
    }

    .site-footer {
        padding: 2.5rem 20px 1.5rem;
    }

    .footer-heading {
        font-size: 28px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 0.25rem;
    }

    .footer-nav .nav-sep {
        display: none;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Portal Nav Mobile */
    .nav-right {
        gap: 0.4rem;
    }

    .nav-link {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }

    .nav-logo {
        height: 36px;
    }

    /* Dashboard header overflow */
    .dashboard-title {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .dashboard-subtitle {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Admin tabs mobile stacking */
    .admin-tabs {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .admin-tabs .btn {
        width: 100%;
        text-align: center;
        font-size: 13px;
    }

    .admin-tabs>div {
        width: 100%;
        margin-right: 0 !important;
    }

    .admin-tabs .btn {
        justify-content: center;
    }

    /* Prevent admin-tabs/header-actions full-width btn from bleeding into notification dropdowns */
    #notifDropdown .btn,
    #clientNotifDropdown .btn {
        width: auto;
        text-align: left;
    }

    /* Admin panel header */
    .admin-panel .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .mobile-menu-header {
        padding: 0 20px;
    }
}

@media (min-width: 1401px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* ----- UserWay mobile bottom-left override ----- */
@media (max-width: 768px) {

    .uwy,
    .userway_p4,
    .userway_p4.userway_left,
    [data-userway-s] {
        left: 10px !important;
        right: auto !important;
        bottom: 10px !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Product tour
   Rendered entirely by static/js/tour.js. The dim is the ring's box-shadow,
   so there is no separate scrim element; .tour-blocker only swallows clicks.
   ═══════════════════════════════════════════════════════════════════════ */

/* Deliberately not positioned. The ring and tooltip are absolute in document
   coordinates, which only holds while no ancestor establishes a containing
   block. body is unpositioned and the reset above zeroes its margin, so the
   origin is the document. Do not add position or transform here. */
.tour-root {
    position: static;
}

.tour-blocker {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: transparent;
}

.tour-ring {
    position: absolute;
    z-index: 10045;
    border-radius: 12px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62),
                0 0 0 3px var(--primary);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.tour-tip {
    position: absolute;
    z-index: 10050;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--white);
    border-radius: 14px;
    padding: 18px 20px 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
    animation: tourTipIn 0.22s ease-out;
}

@keyframes tourTipIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tour-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.tour-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.tour-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gray-600);
    margin: 0 0 16px 0;
    /* A long unbroken token (a share URL, a domain) has no break opportunity and
       would otherwise run past the edge of the tooltip. */
    overflow-wrap: anywhere;
}

.tour-link {
    display: inline-block;
    margin: 0 0 16px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #eb7b57;
    text-decoration: underline;
    overflow-wrap: anywhere;
    /* Comfortable tap target on mobile without disturbing inline flow. */
    padding: 2px 0;
}

.tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tour-actions-right {
    display: flex;
    gap: 8px;
}

.tour-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.tour-btn-primary {
    background: var(--primary);
    color: var(--white);
}

.tour-btn-primary:hover {
    background: var(--primary-dark);
}

.tour-btn-ghost {
    background: var(--white);
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.tour-btn-ghost:hover {
    background: var(--gray-50);
}

.tour-btn-quiet {
    background: none;
    color: var(--gray-500);
    padding-left: 4px;
    padding-right: 4px;
}

.tour-btn-quiet:hover {
    color: var(--gray-700);
}

.tour-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The bug report button and the accessibility widget are both fixed position
   and would sit on top of the spotlight. Hide them for the duration. */
body.tour-active .bug-fab-wrap,
body.tour-active .uwy,
body.tour-active [data-userway-s] {
    display: none !important;
}

/* Phone: the tooltip becomes a bottom sheet rather than chasing a target that
   may be wider than the screen. Matches the bug panel's treatment. */
.tour-tip.tour-tip-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
    max-width: none;
}

@media (prefers-reduced-motion: reduce) {
    .tour-ring { transition: none; }
    .tour-tip  { animation: none; }
}

/* ── Message bodies (admin ↔ client / partner / team direct messages) ──────
   Bodies are stored as <br>-delimited HTML by sanitize.normalize_breaks().
   pre-wrap matches the WYSIWYG editor surface exactly, so what is typed is
   what renders. The p/ul/li rules are for messages written before that
   normalization existed and still hold <p> tags. */
.msg-body { white-space: pre-wrap; word-wrap: break-word; }
.msg-body p { margin: 0 0 10px 0; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body ul, .msg-body ol { margin: 10px 0; padding-left: 1.4em; }
.msg-body li { margin-bottom: 2px; }