/* ── Tokens the SaaS pages reference that app.css does not define ───────────
   Defined here so no template needs a light-colour fallback. */
:root {
    --bg-subtle: rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAAS LAYER — AUTH, BILLING, ACCOUNT
   ═══════════════════════════════════════════════════════════════════════════

   Loaded after app.css and built entirely on the design tokens app.css already
   defines (--bg-*, --accent-*, --space-*, --radius-*, --text-*), so these pages
   are native to the product rather than a bolted-on login screen.

   DELIBERATELY A SEPARATE FILE: app.css is 3,000 lines that every existing page
   depends on. Nothing here redefines an existing selector — every class is
   namespaced under .auth-, .plan-, .acct-, .mock- or .nav-user.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Centred card shell ─────────────────────────────────────────────────── */
.auth-wrap {
    max-width: 460px;
    margin: var(--space-2xl) auto;
    padding: 0 var(--space-md);
}

.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.auth-head { margin-bottom: var(--space-lg); }

.auth-title {
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs);
    letter-spacing: -0.01em;
}

.auth-sub {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.auth-field { margin-bottom: var(--space-md); }

.auth-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.auth-input,
.soft-input {
    width: 100%;
    padding: 11px var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-input::placeholder,
.soft-input::placeholder { color: var(--text-muted); }

.auth-input:focus,
.soft-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-muted);
}

.auth-input:disabled { opacity: 0.55; cursor: not-allowed; }

.required-mark { color: var(--accent-danger); margin-left: 2px; }

.auth-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.auth-submit {
    width: 100%;
    padding: 12px var(--space-lg);
    background: var(--accent-primary);
    color: #1a1205;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.auth-submit:hover { background: var(--accent-primary-hover); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Google leads because it is the fastest path in, but stays visually quieter
   than the amber submit so the page keeps one focal point. */
.auth-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px var(--space-lg);
    background: #ffffff;
    color: #1f1f1f;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
}

.auth-google:hover { background: #f1f3f4; color: #1f1f1f; transform: translateY(-1px); }
.auth-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Divider ────────────────────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

/* ── Messages ───────────────────────────────────────────────────────────── */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: 11px var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.auth-alert-error   { background: var(--accent-danger-muted);    color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.auth-alert-success { background: var(--accent-success-muted);   color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.auth-alert-info    { background: var(--accent-secondary-muted); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }

.auth-foot {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-align: center;
}

.auth-foot a { color: var(--accent-primary); text-decoration: none; font-weight: var(--font-medium); }
.auth-foot a:hover { text-decoration: underline; }

.auth-inline-link {
    float: right;
    font-size: var(--text-xs);
    color: var(--accent-primary);
    text-decoration: none;
}
.auth-inline-link:hover { text-decoration: underline; }

.auth-method-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.auth-method-row:last-child { border-bottom: none; }
.auth-method-name { font-weight: var(--font-medium); color: var(--text-primary); }
.auth-method-state { font-size: var(--text-sm); color: var(--text-tertiary); }

.auth-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}
.auth-badge-on  { background: var(--accent-success-muted); color: #6ee7b7; }
.auth-badge-off { background: var(--bg-elevated); color: var(--text-tertiary); }

/* ── Nav profile icon ───────────────────────────────────────────────────── */
.nav-user { position: relative; }

.nav-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 6px 12px 6px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.nav-user-btn:hover { background: var(--bg-hover); border-color: var(--border-emphasis); color: var(--text-primary); }

.nav-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    color: #1a1205;
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nav-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 224px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-xs);
    z-index: 1090;
}

.nav-user-menu[hidden] { display: none; }

.nav-user-menu-head {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-xs);
}

.nav-user-menu-name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); }
.nav-user-menu-mail { font-size: var(--text-xs); color: var(--text-tertiary); word-break: break-all; }

.nav-user-menu a,
.nav-user-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px var(--space-md);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-user-menu a:hover,
.nav-user-menu button:hover { background: var(--bg-hover); color: var(--text-primary); }

.nav-user-menu .nav-user-signout { color: var(--accent-danger); }
.nav-user-menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-xs) 0; }

/* ── Account name field on the upload card ──────────────────────────────── */
.account-name-wrap { margin-top: var(--space-lg); }

.account-name-wrap .auth-label {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* Reuses the existing .date-validation-msg styling for consistency with the
   date picker's own error, so both failures look like the same system. */

/* ── Plan selection ─────────────────────────────────────────────────────── */
.plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 860px;
    margin: var(--space-xl) auto;
}

@media (min-width: 768px) {
    .plan-grid { grid-template-columns: 1fr 1fr; }
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

.plan-card:hover { border-color: var(--border-emphasis); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.plan-card-featured { border-color: var(--accent-primary); box-shadow: var(--shadow-glow); }

.plan-tag {
    position: absolute;
    top: -11px;
    left: var(--space-xl);
    padding: 3px 12px;
    background: var(--accent-primary);
    color: #1a1205;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.03em;
}

.plan-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm);
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: var(--space-md);
}

.plan-price-amount {
    font-size: 2.25rem;
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.plan-price-period { font-size: var(--text-base); color: var(--text-tertiary); }

.plan-desc {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    flex-grow: 0;
}

.plan-features { list-style: none; padding: 0; margin: 0 0 var(--space-lg); flex-grow: 1; }

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-base);
    color: var(--text-secondary);
    padding: 6px 0;
}

.plan-features li i { color: var(--accent-success); margin-top: 3px; flex-shrink: 0; }

/* ── Mock checkout ──────────────────────────────────────────────────────── */
/* Deliberately does NOT extend base.html — it should feel like leaving the app
   for an external processor, which is what the real Razorpay flow will do. */
.mock-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: #0b0e13;
    font-family: var(--font-sans);
}

.mock-shell { width: 100%; max-width: 420px; }

.mock-testbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    background: repeating-linear-gradient(
        45deg, #3a2a08, #3a2a08 10px, #43310a 10px, #43310a 20px
    );
    border: 1px solid var(--accent-warning);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: #fbbf24;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mock-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-xl);
}

.mock-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-lg);
}

.mock-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--accent-secondary);
    color: #fff;
    font-size: 18px;
}

.mock-brand-name { font-weight: var(--font-bold); color: var(--text-primary); font-size: var(--text-lg); }
.mock-brand-sub { font-size: var(--text-xs); color: var(--text-tertiary); }

.mock-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: 9px 0;
    font-size: var(--text-base);
}

.mock-row-label { color: var(--text-tertiary); }
.mock-row-value { color: var(--text-primary); font-weight: var(--font-medium); text-align: right; }

.mock-amount {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-md) 0;
    margin: var(--space-md) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.mock-amount-label { color: var(--text-secondary); font-size: var(--text-base); }

.mock-amount-value {
    font-size: 1.75rem;
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.mock-actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }

.mock-btn {
    width: 100%;
    padding: 13px var(--space-lg);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.mock-btn-pay { background: var(--accent-success); color: #04231a; }
.mock-btn-pay:hover { filter: brightness(1.1); transform: translateY(-1px); }

.mock-btn-fail {
    background: transparent;
    color: var(--accent-danger);
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.mock-btn-fail:hover { background: var(--accent-danger-muted); }

.mock-note {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
}

/* ── Account area ───────────────────────────────────────────────────────── */
.acct-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

@media (min-width: 900px) { .acct-grid { grid-template-columns: repeat(3, 1fr); } }

.acct-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.acct-card-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-md);
}

.acct-kv { display: flex; justify-content: space-between; gap: var(--space-md); padding: 6px 0; font-size: var(--text-base); }
.acct-kv-label { color: var(--text-tertiary); }
.acct-kv-value { color: var(--text-primary); font-weight: var(--font-medium); text-align: right; }

.acct-section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-2xl) 0 var(--space-md);
}

.acct-empty {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--text-tertiary);
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-xl);
}

.acct-empty i { font-size: 2rem; display: block; margin-bottom: var(--space-md); opacity: 0.5; }

/* Status pills — state must read at a glance, not require reading the word. */
.status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-completed  { background: var(--accent-success-muted);   color: #6ee7b7; }
.status-processing { background: var(--accent-secondary-muted); color: #93c5fd; }
.status-queued     { background: var(--accent-warning-muted);   color: #fcd34d; }
.status-created    { background: var(--bg-elevated);            color: var(--text-tertiary); }
.status-failed     { background: var(--accent-danger-muted);    color: #fca5a5; }
.status-cancelled  { background: var(--bg-elevated);            color: var(--text-muted); }
.status-paid       { background: var(--accent-success-muted);   color: #6ee7b7; }
.status-pending    { background: var(--accent-warning-muted);   color: #fcd34d; }
.status-refunded   { background: var(--accent-secondary-muted); color: #93c5fd; }
.status-active     { background: var(--accent-success-muted);   color: #6ee7b7; }
.status-expired    { background: var(--bg-elevated);            color: var(--text-tertiary); }
.status-past_due   { background: var(--accent-warning-muted);   color: #fcd34d; }

@media (prefers-reduced-motion: reduce) {
    .auth-submit, .auth-google, .plan-card, .mock-btn, .nav-user-btn { transition: none; }
    .auth-submit:hover, .auth-google:hover, .plan-card:hover, .mock-btn:hover { transform: none; }
}

/* ── "Coming soon" plan card ─────────────────────────────────────────────────
   Diagonal ribbon pinned to the top-left corner. The card needs overflow:hidden
   so the ribbon's rotated corners are clipped; .plan-card already has
   position:relative for .plan-tag. */
.plan-card-soon { overflow: hidden; }
.plan-card-soon .plan-price, .plan-card-soon .plan-features { opacity: .72; }
.plan-ribbon {
    position: absolute; top: 22px; left: -42px;
    width: 180px; padding: 6px 0;
    transform: rotate(-45deg);
    background: var(--accent-primary); color: #fff;
    font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; text-align: center;
    box-shadow: var(--shadow-md); pointer-events: none; z-index: 2;
}
.plan-btn-soon, .plan-btn-soon:hover {
    background: var(--bg-subtle); color: var(--text-tertiary);
    border: 1px dashed var(--border-default); cursor: not-allowed;
    transform: none; box-shadow: none;
}

/* ── Account tables ──────────────────────────────────────────────────────────
   My audits, Payment history, and the two tables on Overview.

   Deliberately NOT Bootstrap's .table: Bootstrap 5.3 paints .table cells with
   --bs-body-bg, which is #fff because the document is not in Bootstrap dark
   mode. Our text tokens are dark-theme (near-white), so the result was
   near-white text on white cells. This class is derived token-for-token from
   the dashboard's .data-table (app.css) so the account pages read as the same
   product: elevated header, small uppercase tertiary labels, transparent cells,
   subtle borders, faint zebra, hover. Left-aligned proportional text instead
   of .data-table's centred monospace because these columns are names and
   dates, not metrics. */
.acct-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    background: transparent;
    color: var(--text-secondary);
}
.acct-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.acct-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.acct-table td.acct-primary { color: var(--text-primary); font-weight: var(--font-medium); }
.acct-table td.acct-mono    { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.acct-table td.acct-num     { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.acct-table td.acct-nowrap  { white-space: nowrap; }
.acct-table tbody tr:last-child td { border-bottom: none; }
.acct-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.acct-table tbody tr:hover td { background: var(--bg-hover); }
.acct-table a { color: var(--accent-primary); text-decoration: none; }
.acct-table a:hover { text-decoration: underline; }
.acct-table .acct-none { color: var(--text-muted); }

/* The card that wraps a table gets no padding so header bg runs edge to edge. */
.acct-card.acct-card-table { padding: 0; overflow: hidden; }