/* Shared presentation components for the current design system. */

.page-hero,
.panel-card,
.modern-card,
.stat-card,
.summary-card,
.section-card,
.form-card,
.page-side-card,
.table-card {
    background: var(--surface);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
}

.panel-card .card-header,
.section-card .card-header,
.form-card .card-header,
.table-card .card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--slate-200);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.panel-card .card-body,
.section-card .card-body,
.form-card .card-body,
.table-card .card-body {
    background: var(--surface);
}

.page-hero {
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.5rem;
}

.page-kicker {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-ink-secondary);
    font-weight: 700;
}

.page-title {
    color: var(--theme-text);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

.page-description {
    color: var(--text-muted);
    font-size: .95rem;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: .9rem;
}

.page-meta,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
}

.page-meta {
    padding: .3rem .7rem;
    border: 1px solid var(--slate-200);
    background: var(--slate-50);
    color: var(--slate-600);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.status-pill {
    padding: .28rem .65rem;
    border: 1px solid transparent;
    font-size: .72rem;
}

.status-pill.is-active,
.status-pill.status-active {
    background: var(--color-accent-teal-bg);
    color: var(--color-accent-teal-text);
    border-color: transparent;
}

.status-pill.is-waiting,
.status-pill.status-awaiting {
    background: var(--slate-100);
    color: var(--color-ink-secondary);
    border-color: var(--color-border-neutral);
}

.status-pill.is-progress,
.status-pill.status-progress {
    background: var(--warning-soft);
    color: var(--warning-text);
    border-color: #fde68a;
}

.status-pill.status-cancelled,
.status-pill.status-inactive {
    background: var(--slate-100);
    color: var(--slate-600);
    border-color: var(--slate-200);
}

.badge-teal-soft {
    background: var(--color-accent-teal-bg);
    color: var(--color-accent-teal-text);
}

.btn-dark-soft,
.btn-light-soft,
.btn-outline-soft {
    transition: transform 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, filter 100ms ease-out;
}

.btn-dark-soft:active,
.btn-light-soft:active,
.btn-outline-soft:active {
    transform: scale(0.98);
}

.btn-dark-soft {
    background: var(--color-ink);
    border: 0;
    color: #fff;
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 700;
}

.btn-dark-soft:hover,
.btn-dark-soft:focus {
    color: #fff;
    filter: brightness(1.15);
}

.btn-light-soft {
    background: var(--theme-surface);
    border: 1px solid var(--color-border-neutral);
    color: var(--theme-text);
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 700;
}

.btn-light-soft:hover,
.btn-light-soft:focus {
    background: var(--theme-hover);
    color: var(--theme-text);
    border-color: var(--color-ink-secondary);
}

.btn-outline-soft {
    background: transparent;
    border: 1px solid var(--color-border-neutral);
    color: var(--theme-text);
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 700;
}

.btn-outline-soft:hover,
.btn-outline-soft:focus {
    background: var(--theme-hover);
    color: var(--theme-text);
    border-color: var(--color-ink-secondary);
}

.btn-danger-soft {
    background: var(--danger-soft);
    border: 1px solid var(--danger-soft);
    color: var(--danger-text);
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 700;
    transition: transform 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out;
}

.btn-danger-soft:active {
    transform: scale(0.98);
}

.btn-danger-soft:hover,
.btn-danger-soft:focus {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--danger-text);
}

/* Compact ghost action buttons — table rows / inline action groups */

.btn-action-ghost {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--color-border-neutral);
    color: var(--theme-text-secondary);
    background: var(--theme-surface);
    text-decoration: none;
    transition: border-color 100ms ease-out, color 100ms ease-out, background-color 100ms ease-out, transform 100ms ease-out;
}

.btn-action-ghost:active {
    transform: scale(0.98);
}

.btn-action-ghost:hover,
.btn-action-ghost:focus {
    border-color: var(--slate-400);
    color: var(--theme-text);
    background: var(--theme-hover);
}

.btn-view-soft {
    color: var(--theme-text);
    border-color: var(--color-border-neutral);
    background: var(--theme-surface);
}

.btn-cancel-soft {
    color: var(--danger-text);
    border-color: var(--danger-soft);
    background: var(--danger-soft);
}

.btn-cancel-soft:hover,
.btn-cancel-soft:focus {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--danger-text);
}

/* .btn-dark-soft sits on the light page/card background in light mode (solid ink,
   per ai/design.md Section 2). In dark mode the page/card is itself near-ink, so an
   ink button loses all contrast — switch to solid teal there instead, matching the
   dark reference mockup's "Browse packages" / secondary CTA treatment. */
[data-theme="dark"] .btn-dark-soft {
    background: var(--color-accent-teal-bg);
    color: var(--color-accent-teal-text);
}

[data-theme="dark"] .btn-dark-soft:hover,
[data-theme="dark"] .btn-dark-soft:focus {
    color: var(--color-accent-teal-text);
    filter: brightness(1.08);
}

[data-theme="dark"] .status-pill.is-progress,
[data-theme="dark"] .status-pill.status-progress {
    border-color: rgba(214, 154, 60, 0.35);
}

.setup-note,
.empty-state {
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 16px;
    color: var(--text-muted);
}

.empty-state {
    padding: 1.5rem;
    text-align: center;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-50);
    color: var(--theme-text);
    border: 1px solid var(--slate-200);
}

.empty-state-title {
    color: var(--theme-text);
    font-size: 1rem;
    font-weight: 700;
}

.empty-state-message {
    color: var(--text-muted);
}

.table-card-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.icon-box {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--slate-50);
    color: var(--theme-text);
    border: 1px solid var(--slate-200);
}

/* icon-tone-* used to be five different accent colors (blue/amber/emerald/violet/rose)
   on one page — the exact "inconsistent accent colors per page" problem design.md
   Section 1 calls out. Collapsed to the single mint/ink treatment; icon glyphs (not
   color) now carry the differentiation between stat cards. Class names kept as-is so
   existing usages (dashboard stat cards) don't need to change. See ai/design.md Section 2. */
.icon-tone-blue,
.icon-tone-amber,
.icon-tone-emerald,
.icon-tone-violet,
.icon-tone-rose {
    background: var(--color-bg-mint);
    color: var(--color-ink);
    border-color: var(--color-bg-mint-border);
    box-shadow: none;
}

/* Mint has no dark-safe pairing (it's the landing page's light-only accent, see
   ai/design.md Section 2) — swap the icon boxes to a soft teal tint in dark mode so
   they stay legible against the dark card surfaces instead of glowing mint. */
[data-theme="dark"] .icon-tone-blue,
[data-theme="dark"] .icon-tone-amber,
[data-theme="dark"] .icon-tone-emerald,
[data-theme="dark"] .icon-tone-violet,
[data-theme="dark"] .icon-tone-rose {
    background: rgba(29, 158, 117, 0.16);
    color: var(--color-accent-teal-bg);
    border-color: rgba(29, 158, 117, 0.3);
}

.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-modern thead th {
    background: var(--bg-page);
    color: var(--color-ink-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--slate-200);
}

.table-modern tbody td {
    border-bottom: 1px solid var(--slate-200);
    color: var(--text-main);
    vertical-align: middle;
}

.table-modern tbody tr:hover {
    background: var(--slate-50);
}

.site-footer {
    background: var(--color-surface-dark);
    color: var(--color-text-on-dark-secondary);
    border-top: 1px solid var(--color-border-on-dark);
    box-shadow: none;
}

.site-footer .footer-brand-mark {
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border-on-dark);
    box-shadow: none;
}

.site-footer .footer-brand-name {
    color: var(--color-text-on-dark);
    font-weight: 500;
    letter-spacing: -.02em;
}

.site-footer .footer-lead {
    max-width: 28rem;
    color: var(--color-text-on-dark-secondary);
    line-height: 1.7;
}

.site-footer .footer-heading {
    color: var(--color-text-on-dark);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer h5,
.site-footer h6 {
    color: var(--color-text-on-dark);
}

.site-footer p,
.site-footer li {
    color: var(--color-text-on-dark-secondary);
}

.site-footer a {
    color: var(--color-text-on-dark-secondary);
}

.site-footer a:hover {
    color: var(--color-text-on-dark);
    text-decoration: none;
}

.site-footer .muted {
    color: var(--color-text-on-dark-secondary);
}

.site-footer .footer-hr {
    border-top: 1px solid var(--color-border-on-dark);
    margin-top: 1.75rem;
}

.site-footer .col-list li {
    margin-bottom: .5rem;
}

.site-footer .footer-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    color: var(--color-text-on-dark-secondary);
    font-size: 13px;
}

.site-footer .footer-link::before {
    content: '';
    width: .35rem;
    height: .35rem;
    border-radius: 9999px;
    background: var(--color-border-on-dark);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.site-footer .footer-link:hover::before {
    background: var(--color-text-on-dark);
    transform: scale(1.15);
}

.site-footer .footer-link:hover,
.site-footer .footer-link:active,
.site-footer .footer-link.active,
.site-footer .footer-link:focus-visible {
    color: var(--color-text-on-dark);
    text-decoration: underline;
    text-decoration-color: var(--color-text-on-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.site-footer .footer-link:focus-visible {
    outline: 2px solid var(--color-text-on-dark);
    outline-offset: 4px;
    border-radius: 9999px;
}

.site-footer .footer-note {
    color: var(--color-text-on-dark-secondary);
    letter-spacing: .01em;
    font-size: 12px;
}

@media (max-width: 767px) {
    .site-footer .col-md-3 {
        margin-bottom: 1.25rem;
    }

    .site-footer .social-row {
        gap: .5rem;
    }
}

.nav-shell {
    background: var(--color-surface-dark);
    border-bottom: 1px solid var(--color-border-on-dark);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-brand {
    color: var(--color-text-on-dark);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -.01em;
    text-decoration: none;
}

/* For CTAs placed directly on the dark navbar/footer surface — .btn-dark-soft
   (ink bg) would be ink-on-ink there. Mirrors the landing page's dark-CTA-section
   pattern: light button on the dark surface. */
.btn-on-dark-soft {
    background: var(--color-surface-white);
    border: 0;
    color: var(--color-ink);
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 700;
    transition: transform 100ms ease-out, filter 100ms ease-out;
}

.btn-on-dark-soft:hover,
.btn-on-dark-soft:focus {
    color: var(--color-ink);
    filter: brightness(0.94);
}

.btn-on-dark-soft:active {
    transform: scale(0.98);
}

.nav-toggle-icon {
    font-size: 1.1rem;
}

.nav-brand strong {
    color: var(--color-text-on-dark);
}

/* Navigation icon system */
.nav-icon-badge {
    --nav-icon-size: 2rem;
    --nav-icon-radius: 14px;

    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    border-radius: var(--nav-icon-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.nav-icon-badge-sm {
    --nav-icon-size: 1.45rem;
    --nav-icon-radius: 10px;
}

.nav-icon-badge i,
.nav-icon-badge svg {
    font-size: .95rem;
    width: .95rem;
    height: .95rem;
    line-height: 1;
}

.wallet-pill:hover .nav-icon-badge,
.user-dropdown-btn:hover .nav-icon-badge,
.nav-mobile-link:hover .nav-icon-badge,
.dropdown-item:hover .nav-icon-badge {
    transform: translateY(-1px) scale(1.03);
}

/* Navigation links */
.nav-link-modern {
    position: relative;
    color: var(--color-text-on-dark-secondary);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 8px;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}

.nav-link-modern:hover {
    color: var(--color-text-on-dark);
}

.nav-link-modern.is-active {
    background: var(--color-accent-teal-bg);
    color: var(--color-accent-teal-text);
}

/* Right-side navbar cluster: notifications, balance, user grouped in one container */
.nav-cluster {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--color-border-on-dark);
    border-radius: 8px;
    padding: .35rem .6rem;
}

.nav-cluster-divider {
    width: 1px;
    height: 18px;
    background: var(--color-border-on-dark);
    flex-shrink: 0;
}

.nav-cluster-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-dark-secondary);
    background: transparent;
    border: 0;
    padding: .2rem;
    transition: color 150ms ease-out;
}

.nav-cluster-icon-btn:hover {
    color: var(--color-text-on-dark);
}

/* Wallet and user menu */
.wallet-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-teal-bg);
    color: var(--color-accent-teal-text);
    text-decoration: none;
    font-weight: 500;
    padding: .3rem .8rem;
    font-size: .82rem;
    transition: filter 150ms ease-out;
}

.wallet-pill:hover {
    color: var(--color-accent-teal-text);
    filter: brightness(0.96);
}

.user-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--color-text-on-dark);
    padding: .2rem .3rem;
    transition: opacity 150ms ease-out;
    max-width: 12rem;
}

.user-dropdown-btn .text-truncate {
    min-width: 0;
}

.user-dropdown-btn:hover {
    opacity: .85;
}

/* User avatars */
.nav-avatar,
.nav-mobile-avatar {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-white);
    color: var(--color-ink);
    border: 0;
    box-shadow: none;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Mobile toggle */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 14px;
    border: 1px solid var(--color-border-on-dark);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-on-dark);
    box-shadow: none;
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast);
}

.nav-toggle:hover {
    border-color: var(--color-text-on-dark-secondary);
}

.nav-toggle-icon {
    font-size: 1rem;
}

/* Mobile panel — continuation of the dark brand frame, not workspace content */
.nav-mobile-panel {
    background: var(--color-surface-dark);
    border-top: 1px solid var(--color-border-on-dark);
}

.nav-mobile-meta {
    border-top: 1px solid var(--color-border-on-dark);
    border-bottom: 1px solid var(--color-border-on-dark);
    background: rgba(255, 255, 255, 0.04);
}

.nav-mobile-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    color: var(--color-text-on-dark-secondary);
    text-decoration: none;
    font-weight: 500;
    transition:
        background-color 150ms ease-out,
        color 150ms ease-out;
}

.nav-mobile-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-on-dark);
}

.nav-mobile-link.is-active {
    background: var(--color-accent-teal-bg);
    color: var(--color-accent-teal-text);
}

/* Dropdown icons alignment */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.dropdown-item .nav-icon-badge {
    margin-right: 0 !important;
}