/* Shared light/dark theme tokens for landing and authenticated shells. */
:root {
    --theme-bg: #f8fafc;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f1f5f9;
    --theme-text: #0f172a;
    --theme-muted: #64748b;
    --theme-border: #e2e8f0;
    --theme-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
    color-scheme: light;
}

html[data-theme="dark"] {
    --theme-bg: #0f172a;
    --theme-surface: #172033;
    --theme-surface-muted: #202c42;
    --theme-text: #f8fafc;
    --theme-muted: #b5c0d1;
    --theme-border: #334155;
    --theme-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    color-scheme: dark;
    --text-main: #f8fafc;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
}

html[data-theme="dark"] body { background-color: var(--theme-bg) !important; color: var(--theme-text); }
html[data-theme="dark"] body h1,
html[data-theme="dark"] body h2,
html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4,
html[data-theme="dark"] body h5,
html[data-theme="dark"] body h6 { color: var(--theme-text); }
html[data-theme="dark"] body .text-dark { color: var(--theme-text) !important; }
html[data-theme="dark"] body .text-muted { color: var(--theme-muted) !important; }
html[data-theme="dark"] body .bg-white,
html[data-theme="dark"] body .bg-light,
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .modal-content,
html[data-theme="dark"] body .dropdown-menu,
html[data-theme="dark"] body .admin-card,
html[data-theme="dark"] body .stat-card,
html[data-theme="dark"] body .card-m3,
html[data-theme="dark"] body .job-card-modern,
html[data-theme="dark"] body .blog-card-smart,
html[data-theme="dark"] body .step-card { background-color: var(--theme-surface) !important; color: var(--theme-text); border-color: var(--theme-border) !important; }
html[data-theme="dark"] body .dashboard-hero,
html[data-theme="dark"] body .dashboard-activity-card,
html[data-theme="dark"] body .pricing-card,
html[data-theme="dark"] body .plan-card,
html[data-theme="dark"] body .plan-header,
html[data-theme="dark"] body .plan-body,
html[data-theme="dark"] body .plan-actions,
html[data-theme="dark"] body .fasttrack-step,
html[data-theme="dark"] body .fasttrack-form-card { background: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] body .dashboard-hero p,
html[data-theme="dark"] body .dashboard-activity-card .text-muted,
html[data-theme="dark"] body .pricing-card .text-muted,
html[data-theme="dark"] body .plan-period,
html[data-theme="dark"] body .feature-list li,
html[data-theme="dark"] body .fasttrack-form-card .form-text { color: var(--theme-muted) !important; }
html[data-theme="dark"] body .plan-card .text-dark,
html[data-theme="dark"] body .pricing-card .text-dark { color: var(--theme-text) !important; }
html[data-theme="dark"] body .plan-card .btn-outline-dark { color: #e2e8f0 !important; border-color: #94a3b8 !important; }
html[data-theme="dark"] body .plan-card .form-control,
html[data-theme="dark"] body .plan-card .form-select { background: var(--theme-surface-muted) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] body .settings-card,
html[data-theme="dark"] body .settings-nav { background-color: var(--theme-surface) !important; color: var(--theme-text); border-color: var(--theme-border) !important; }
html[data-theme="dark"] body .login-card,
html[data-theme="dark"] body .auth-card,
html[data-theme="dark"] body .auth-container { background-color: var(--theme-surface) !important; color: var(--theme-text); border-color: var(--theme-border) !important; }
html[data-theme="dark"] body.login-body { background: #08111f !important; }
html[data-theme="dark"] body .section-title { color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] body .table { --bs-table-bg: var(--theme-surface); --bs-table-color: var(--theme-text); --bs-table-border-color: var(--theme-border); }
html[data-theme="dark"] body .table-hover tbody tr:hover { background-color: var(--theme-surface-muted) !important; }
html[data-theme="dark"] body .border,
html[data-theme="dark"] body .border-top,
html[data-theme="dark"] body .border-bottom { border-color: var(--theme-border) !important; }
html[data-theme="dark"] body .form-control,
html[data-theme="dark"] body .form-select,
html[data-theme="dark"] body textarea { background-color: var(--theme-surface-muted); color: var(--theme-text); border-color: var(--theme-border); }
html[data-theme="dark"] body .form-control::placeholder { color: #94a3b8; }
html[data-theme="dark"] body .dropdown-item { color: var(--theme-text); }
html[data-theme="dark"] body .dropdown-item:hover { background-color: var(--theme-surface-muted); }
html[data-theme="dark"] body .btn-light { background-color: var(--theme-surface-muted); color: var(--theme-text); border-color: var(--theme-border); }
html[data-theme="dark"] body .btn-outline-dark { color: #e2e8f0 !important; border-color: #94a3b8 !important; }
html[data-theme="dark"] body .btn-outline-dark:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }
html[data-theme="dark"] body .text-success { color: #34d399 !important; }
html[data-theme="dark"] body .text-warning { color: #fbbf24 !important; }
html[data-theme="dark"] body .text-secondary { color: #cbd5e1 !important; }
html[data-theme="dark"] body .theme-toggle { color: #fbbf24 !important; }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .landing-navbar { background-color: rgba(15, 23, 42, 0.94) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] .landing-navbar .nav-link,
html[data-theme="dark"] .landing-navbar .navbar-brand,
html[data-theme="dark"] .landing-navbar .text-dark { color: var(--theme-text) !important; }
html[data-theme="dark"] .hero-wrapper,
html[data-theme="dark"] .bg-surface,
html[data-theme="dark"] .section-light { background: var(--theme-bg) !important; }
html[data-theme="dark"] .pricing-wrapper,
html[data-theme="dark"] .share-btn,
html[data-theme="dark"] .hero-tag,
html[data-theme="dark"] .job-logo-box { background: var(--theme-surface) !important; border-color: var(--theme-border) !important; color: var(--theme-text); }
html[data-theme="dark"] .pricing-wrapper.highlight { background: var(--theme-surface) !important; }
html[data-theme="dark"] .pricing-wrapper .price-big,
html[data-theme="dark"] .pricing-wrapper h3,
html[data-theme="dark"] .pricing-wrapper .check-list li,
html[data-theme="dark"] .blog-title-smart,
html[data-theme="dark"] .blog-title-smart a,
html[data-theme="dark"] .blog-card-smart h3,
html[data-theme="dark"] .blog-card-smart h3 a { color: #f8fafc !important; }
html[data-theme="dark"] .pricing-wrapper .blog-meta-smart,
html[data-theme="dark"] .blog-meta-smart { color: #a5b4fc !important; }
html[data-theme="dark"] .pricing-wrapper .price-big + span { color: #cbd5e1 !important; }
html[data-theme="dark"] .job-card-modern,
html[data-theme="dark"] .blog-card-smart,
html[data-theme="dark"] .step-card { box-shadow: var(--theme-shadow); }
html[data-theme="dark"] .article-content { color: var(--theme-muted); }
html[data-theme="dark"] .share-box { border-color: var(--theme-border); }
html[data-theme="dark"] .check-list li { color: var(--theme-muted); }
html[data-theme="dark"] .hero-sub,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .landing-navbar .nav-link { color: var(--theme-muted) !important; }
html[data-theme="dark"] .footer { background: #080d18 !important; }
html[data-theme="dark"] .page-loader { background: rgba(15, 23, 42, 0.98); }

.theme-toggle { font-size: 1.15rem; color: var(--theme-muted); transition: color .2s ease, transform .2s ease; }
.btn, .page-link { white-space: nowrap; }
.table .btn { white-space: nowrap; }
.impersonation-banner { position: relative; z-index: 1200; background: #fbbf24; color: #172033; font-size: .82rem; font-weight: 700; }
.theme-toggle:hover { color: var(--primary-green, #0e4c48); transform: rotate(12deg); }
.theme-logo-dark { display: none !important; }
html[data-theme="dark"] .theme-logo-light { display: none !important; }
html[data-theme="dark"] .theme-logo-dark { display: block !important; }

html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-header,
html[data-theme="dark"] .offcanvas-body,
html[data-theme="dark"] .offcanvas-footer-stylish,
html[data-theme="dark"] .notification-drawer { background-color: var(--theme-surface) !important; color: var(--theme-text); border-color: var(--theme-border) !important; }
html[data-theme="dark"] .job-detail-footer,
html[data-theme="dark"] .offcanvas-footer-stylish { background-color: var(--theme-surface) !important; border-color: var(--theme-border) !important; color: var(--theme-text); }
html[data-theme="dark"] .job-detail-body,
html[data-theme="dark"] .offcanvas-body-stylish { color: var(--theme-text); }
html[data-theme="dark"] .notification-drawer .offcanvas-body { background-color: var(--theme-bg) !important; }
html[data-theme="dark"] .notification-drawer .list-group-item,
html[data-theme="dark"] .notification-drawer .dropdown-item { background-color: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] .notification-drawer .text-dark { color: var(--theme-text) !important; }
html[data-theme="dark"] .notification-drawer .text-muted { color: var(--theme-muted) !important; }
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] .notification-item.unread,
html[data-theme="dark"] .notification-item:hover { background-color: var(--theme-surface) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] .notification-message,
html[data-theme="dark"] .notification-empty { color: var(--theme-muted) !important; }
html[data-theme="dark"] .notification-icon { background: var(--theme-surface-muted) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .notification-item[data-type="success"] .notification-icon { background: #123b31 !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .notification-item[data-type="warning"] .notification-icon { background: #453313 !important; color: #fcd34d !important; }
html[data-theme="dark"] .notification-item[data-type="danger"] .notification-icon { background: #451b25 !important; color: #fda4af !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] .modal-header.bg-light,
html[data-theme="dark"] .offcanvas-header.bg-light { background-color: var(--theme-surface-muted) !important; color: var(--theme-text) !important; }
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-body { color: var(--theme-text); }
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .list-group-item { background-color: var(--theme-surface-muted); color: var(--theme-text); border-color: var(--theme-border); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .thead-light { --bs-table-bg: var(--theme-surface-muted) !important; --bs-table-color: var(--theme-text) !important; }
html[data-theme="dark"] .mobile-bottom-nav,
html[data-theme="dark"] .admin-mobile-bottom-nav { background: rgba(15, 23, 42, .97) !important; border-color: var(--theme-border) !important; }
html[data-theme="dark"] .mobile-nav-item,
html[data-theme="dark"] .admin-mobile-nav-item { color: #cbd5e1 !important; }
html[data-theme="dark"] .mobile-nav-item.active,
html[data-theme="dark"] .admin-mobile-nav-item.active { color: #6ee7b7 !important; }
html[data-theme="dark"] .page-link { background-color: var(--theme-surface); color: #93c5fd; border-color: var(--theme-border); }
html[data-theme="dark"] .page-item.active .page-link { background-color: var(--primary-green) !important; color: #fff !important; }

/* Keep every drawer above the mobile navigation and give it a real scroll region. */
.offcanvas { z-index: 1050 !important; }
@media (max-width: 767.98px) {
    .btn { max-width: 100%; }
    .d-flex.flex-column.flex-md-row > .btn,
    .d-flex.flex-column.flex-md-row > a.btn { align-self: flex-start; }
    .offcanvas { height: 100dvh !important; max-height: 100dvh; display: flex !important; flex-direction: column; }
    .offcanvas .offcanvas-body,
    .offcanvas .offcanvas-body-stylish,
    .offcanvas .job-detail-body { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; padding-bottom: 24px !important; }
    .offcanvas .offcanvas-footer-stylish,
    .offcanvas .job-detail-footer { position: static !important; flex: 0 0 auto; width: 100%; padding: 14px 16px calc(90px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 8px; }
    .offcanvas .offcanvas-footer-stylish > .btn,
    .offcanvas .job-detail-footer > .btn { min-height: 44px; min-width: 0; flex: 1 1 140px; }
    .notification-drawer .offcanvas-body { flex: 1 1 auto; }
    #emailModal,
    #subscriptionModal { z-index: 1110 !important; }
    #emailModal .modal-dialog,
    #subscriptionModal .modal-dialog { margin: 12px 12px calc(82px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 100px); }
    #emailModal .modal-content,
    #subscriptionModal .modal-content { max-height: calc(100dvh - 100px); overflow-y: auto; }
    #emailModal.show,
    #subscriptionModal.show { z-index: 1110 !important; }
    .modal-backdrop.show { z-index: 1090 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}