/* PCB Design Refresh
   Loaded after legacy styles to modernize identity, spacing, mobile behavior, and admin UI. */

:root,
:root.light-mode {
    color-scheme: light;
    --bg: #f6f8fb;
    --card: #ffffff;
    --stroke: #d8e1ec;
    --txt: #111827;
    --txt-muted: #5f6f82;
    --brand-teal: #008f76;
    --brand-mint: #10b981;
    --brand-blue: #2563eb;
    --brand-amber: #d97706;
    --danger: #ef5b5b;
    --warning: #f4ba49;
    --surface-raised: #ffffff;
    --surface-soft: rgba(17, 24, 39, 0.045);
    --surface-tint: #eafaf6;
    --mobile-chrome: rgba(255, 255, 255, 0.94);
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.1);
    --shadow-tight: 0 8px 24px rgba(15, 23, 42, 0.08);
    --topbar-bg: rgba(255, 255, 255, 0.92);
    --footer-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --radius: 8px;
    --phoenix-gradient: var(--brand-teal);
    --focus-ring: 0 0 0 4px rgba(0, 168, 135, 0.16);
}

:root.dark-mode {
    color-scheme: dark;
    --bg: #0f1419;
    --card: #141d24;
    --stroke: #273241;
    --txt: #f5f7fa;
    --txt-muted: #a8b3bf;
    --brand-teal: #00a887;
    --brand-mint: #8ee5d2;
    --brand-blue: #4a8dff;
    --brand-amber: #f4ba49;
    --surface-raised: #18232d;
    --surface-soft: rgba(255, 255, 255, 0.035);
    --surface-tint: rgba(16, 185, 129, 0.12);
    --mobile-chrome: rgba(16, 24, 32, 0.94);
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
    --shadow-tight: 0 8px 24px rgba(0, 0, 0, 0.22);
    --topbar-bg: rgba(15, 20, 25, 0.88);
    --footer-bg: #101820;
    --sidebar-bg: #101820;
}

html {
    scroll-padding-top: 86px;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--bg) !important;
    letter-spacing: 0 !important;
}

body::before,
.hero-landing::before,
.hero-landing::after,
.features-section::before,
html.dashboard-page body::before,
html.dashboard-page .kpi-card::after,
html.dashboard-page .welcome-section::before {
    display: none !important;
}

.container {
    max-width: 1200px !important;
}

.topbar {
    min-height: 72px !important;
    padding: 12px 32px !important;
    background: var(--topbar-bg) !important;
    border-bottom-color: rgba(17, 24, 39, 0.09) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}

:root.dark-mode .topbar {
    border-bottom-color: rgba(216, 224, 234, 0.12) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
}

.brand a,
.brand-link {
    min-width: 0;
}

.brand img,
.brand-logo-img {
    height: 34px !important;
    max-height: 34px !important;
}

.brand-text-primary,
.brand-text-accent {
    font-size: 18px !important;
    letter-spacing: 0 !important;
}

.brand-text-accent {
    color: var(--brand-teal) !important;
}

:root.dark-mode .brand-text-accent {
    color: var(--brand-mint) !important;
}

nav a,
.topbar-center a {
    border-radius: var(--radius) !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    color: var(--txt-muted) !important;
}

nav a::before {
    display: none !important;
}

nav a:hover,
nav a.active {
    background: var(--surface-soft) !important;
    color: var(--txt) !important;
}

nav a.active {
    box-shadow: inset 0 -2px 0 var(--brand-teal);
}

.dark-mode-toggle-public,
.mobile-menu-toggle,
.dashboard-topbar-btn,
.lang-currency-switcher .dropdown-toggle {
    border-radius: var(--radius) !important;
}

.hero-landing {
    min-height: auto;
    display: flex;
    align-items: center;
    padding: clamp(48px, 7vw, 96px) 0 56px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(216, 224, 234, 0.1);
}

.hero-content {
    width: min(1180px, calc(100vw - 32px));
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
    gap: clamp(32px, 5vw, 72px) !important;
}

.hero-text,
.hero-text h1,
.hero-text p {
    text-align: start !important;
}

.hero-text h1 {
    font-size: clamp(38px, 5vw, 64px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.hero-text h1 span:first-child {
    background: linear-gradient(135deg, #111827, var(--brand-teal)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.hero-text h1 span:last-child {
    color: var(--brand-teal) !important;
}

:root.dark-mode .hero-text h1 span:first-child {
    background: linear-gradient(135deg, var(--txt), var(--brand-mint)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

:root.dark-mode .hero-text h1 span:last-child {
    color: var(--brand-mint) !important;
}

.hero-subtitle {
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    margin-bottom: 20px !important;
    color: var(--brand-mint) !important;
    background: rgba(0, 168, 135, 0.12) !important;
    border: 1px solid rgba(0, 168, 135, 0.28) !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

.hero-description {
    max-width: 620px !important;
    margin-inline: 0 !important;
    margin-bottom: 28px !important;
    font-size: clamp(16px, 1.55vw, 20px) !important;
    line-height: 1.8 !important;
}

.hero-buttons,
.hero-trust {
    justify-content: flex-start !important;
}

html[dir="rtl"] .hero-buttons,
html[dir="rtl"] .hero-trust {
    justify-content: flex-start !important;
}

.hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    margin: 24px 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.stat-item {
    text-align: start !important;
    background: var(--surface-soft);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 14px;
    min-width: 0;
}

.stat-value {
    font-size: clamp(20px, 2.3vw, 30px) !important;
    line-height: 1.1 !important;
    color: var(--brand-mint) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.stat-label {
    color: var(--txt-muted) !important;
    overflow-wrap: anywhere;
}

.trust-item {
    background: transparent;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--txt-muted) !important;
}

.btn,
button.btn,
a.btn,
html.dashboard-page .btn {
    border-radius: var(--radius) !important;
    letter-spacing: 0 !important;
    box-shadow: var(--shadow-tight) !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.35 !important;
}

.btn::before {
    display: none !important;
}

.btn > i[class*="bi-"],
.btn > i.bi,
html.dashboard-page .btn > i[class*="bi-"],
html.dashboard-page .btn > i.bi {
    margin-inline: 0 !important;
    flex: 0 0 auto;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:hover i,
.btn:hover span,
.btn:hover strong {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--stroke) !important;
    color: var(--txt) !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    background: var(--surface-soft) !important;
    border-color: var(--brand-teal) !important;
    color: var(--txt) !important;
    -webkit-text-fill-color: currentColor !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
.login-card .btn {
    background-color: var(--brand-teal) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.login-card .btn:hover {
    background-color: #006b5c !important;
    background-image: none !important;
    border-color: #006b5c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.btn-outline-warning:hover,
.btn-warning:hover,
.btn-light:hover {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.dashboard-topbar-btn:hover,
.dark-mode-toggle-public:hover,
.mobile-menu-toggle:hover {
    color: var(--txt) !important;
    -webkit-text-fill-color: currentColor !important;
}

.dashboard-preview {
    border-radius: var(--radius) !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: var(--shadow-soft) !important;
    transform: none !important;
}

.preview-header {
    background: rgba(255, 255, 255, 0.045) !important;
}

.preview-content {
    min-height: 360px !important;
}

.preview-sidebar,
.preview-chart {
    background: rgba(15, 23, 42, 0.04) !important;
}

:root.dark-mode .preview-sidebar,
:root.dark-mode .preview-chart {
    background: rgba(0, 0, 0, 0.12) !important;
}

.preview-nav-item,
.preview-kpi-item,
.integration-item,
.feature-card,
.card,
.booking-card,
.company-details,
.plan-card {
    border-radius: var(--radius) !important;
}

.preview-kpi-item {
    background: rgba(0, 168, 135, 0.08) !important;
}

.chart-bar {
    background: var(--brand-teal) !important;
    border-radius: 4px 4px 0 0 !important;
}

.features-section,
.integrations-section,
.cta-section {
    padding: clamp(56px, 7vw, 88px) 0 !important;
    margin: 0 !important;
}

.section-title {
    font-size: clamp(30px, 4vw, 48px) !important;
    letter-spacing: 0 !important;
    margin-bottom: 28px !important;
}

.section-title::after {
    width: 48px !important;
    height: 2px !important;
    margin-top: 16px !important;
}

.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 16px !important;
}

.feature-card,
.integration-item,
.card {
    background: var(--surface-raised) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: var(--shadow-tight) !important;
}

.feature-card {
    padding: 24px !important;
    text-align: start !important;
}

.feature-card::before {
    display: none !important;
}

.feature-card:hover,
.integration-item:hover,
.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-soft) !important;
    border-color: rgba(0, 168, 135, 0.45) !important;
}

.feature-icon,
.integration-icon {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px !important;
    border-radius: var(--radius);
    background: rgba(0, 168, 135, 0.12);
    color: var(--brand-mint);
    margin-bottom: 18px !important;
    animation: none !important;
    filter: none !important;
}

.feature-card h3,
.integration-item h4 {
    text-align: start !important;
    color: var(--txt) !important;
    font-size: 18px !important;
}

.feature-card p,
.integration-item p {
    text-align: start !important;
}

.integrations-section {
    background: rgba(255, 255, 255, 0.025) !important;
}

.integrations-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 16px !important;
}

.cta-section > .container > div {
    border-radius: var(--radius) !important;
    background: #087b66 !important;
    box-shadow: var(--shadow-soft);
}

.cta-section > .container > div > div[style*="absolute"] {
    display: none !important;
}

input,
select,
textarea,
.form-control,
.form-select {
    border-radius: var(--radius) !important;
    border-width: 1px !important;
    background: var(--surface-raised) !important;
    color: var(--txt) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    transform: none !important;
    box-shadow: var(--focus-ring) !important;
}

#booking.booking-section {
    padding: clamp(36px, 6vw, 72px) 0 !important;
    margin: 0 !important;
}

#booking.booking-section .card.booking-card {
    max-width: 1040px !important;
    padding: clamp(22px, 4vw, 40px) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)), var(--surface-raised) !important;
    box-shadow: var(--shadow-soft) !important;
}

#booking.booking-section .booking-header {
    margin-bottom: 24px !important;
}

#booking.booking-section .booking-header h2 {
    font-size: clamp(26px, 3.2vw, 38px) !important;
    color: var(--txt) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

#booking.booking-section .booking-form .form-grid,
section#booking.booking-section form.booking-form div.form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

#booking.booking-section .booking-form .form-group label,
section#booking.booking-section form.booking-form div.form-group > label {
    color: var(--txt-muted) !important;
    font-size: 13px !important;
}

#booking.booking-section .booking-form .form-group input,
#booking.booking-section .booking-form .form-group select,
section#booking.booking-section form.booking-form div.form-group > input,
section#booking.booking-section form.booking-form div.form-group > select {
    border-width: 1px !important;
    background: rgba(0, 0, 0, 0.12) !important;
    min-height: 48px;
}

#booking.booking-section .booking-slot-status {
    min-height: 0 !important;
    text-align: start !important;
    margin: 2px 0 16px !important;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--stroke);
}

#booking.booking-section .booking-slot-status:empty {
    display: none;
}

#booking.booking-section .booking-slot-status[data-type="ok"] {
    border-color: rgba(0, 168, 135, 0.45);
}

#booking.booking-section .booking-slot-status[data-type="error"] {
    color: #ff8585 !important;
    border-color: rgba(239, 91, 91, 0.45);
}

#booking.booking-section .booking-card .warning-box {
    border-radius: var(--radius) !important;
    background: rgba(244, 186, 73, 0.12) !important;
    border-color: rgba(244, 186, 73, 0.38) !important;
}

.main-footer {
    margin-top: 0 !important;
    background: var(--footer-bg) !important;
    color: var(--txt) !important;
    box-shadow: inset 0 1px 0 var(--stroke);
}

.footer-grid {
    gap: 28px !important;
}

.footer-section-title {
    letter-spacing: 0 !important;
}

.social-link {
    border-radius: var(--radius) !important;
}

.topbar .user-menu:not(.active) .user-dropdown {
    display: none !important;
}

.topbar .user-menu.active .user-dropdown {
    display: block !important;
    max-width: calc(100vw - 24px);
}

html[dir="rtl"] .topbar .user-dropdown {
    left: 0 !important;
    right: auto !important;
}

body.signup-page .container {
    max-width: 980px !important;
}

body.signup-page .card {
    padding: clamp(24px, 4vw, 42px) !important;
}

body.signup-page form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.signup-page form h3,
body.signup-page form > div,
body.signup-page form > style,
body.signup-page form > button,
body.signup-page form > input[type="hidden"],
body.signup-page form > p {
    grid-column: 1 / -1;
}

body.signup-page form label {
    margin: 0;
}

body.signup-page .payment-method-option {
    border-radius: var(--radius) !important;
}

body.auth-page {
    min-height: 100vh;
}

.login-container {
    background: var(--bg) !important;
}

.login-logo img {
    max-width: 300px !important;
    filter: none !important;
}

.login-logo {
    background: #ffffff;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 14px 20px;
    box-shadow: var(--shadow-tight);
}

.login-card {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft) !important;
}

.auth-page .login-card h2 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.35 !important;
}

.login-card form {
    display: grid;
    gap: 16px;
}

.login-card .btn {
    width: 100%;
    justify-content: center;
}

.auth-helper-text {
    color: var(--txt-muted) !important;
    line-height: 1.8;
    margin: 0 0 18px;
    text-align: center;
}

.auth-form-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -4px;
}

.auth-form-links-center {
    justify-content: center;
    margin-top: 18px;
}

.auth-form-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-teal) !important;
    font-weight: 700;
    text-decoration: none !important;
}

.auth-form-links a:hover {
    color: var(--brand-blue) !important;
}

.auth-alert {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #047857 !important;
    margin-bottom: 16px !important;
}

.auth-alert-danger {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #9f1239 !important;
}

.auth-dev-link {
    border: 1px dashed var(--brand-teal);
    border-radius: var(--radius);
    background: rgba(16, 185, 129, 0.08);
    color: var(--txt);
    padding: 12px;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
    line-height: 1.7;
}

.auth-dev-link a {
    color: var(--brand-blue) !important;
    font-weight: 700;
}

html.dashboard-page body {
    background: var(--bg) !important;
}

html.dashboard-page .dashboard-sidebar {
    background: var(--sidebar-bg) !important;
    box-shadow: none !important;
    border-left-color: var(--stroke) !important;
}

html.dashboard-page .sidebar-header {
    background: transparent !important;
}

html.dashboard-page .nav-section-title {
    letter-spacing: 0 !important;
    color: var(--txt-muted) !important;
}

html.dashboard-page .nav-item {
    margin: 2px 10px !important;
    width: auto !important;
    border-radius: var(--radius) !important;
    border-right: 0 !important;
    padding: 10px 12px !important;
}

html.dashboard-page .nav-item:hover,
html.dashboard-page .nav-item.active {
    background: rgba(0, 168, 135, 0.12) !important;
    color: var(--dashboard-link-hover, #004f45) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .dashboard-topbar {
    background: var(--topbar-bg) !important;
    box-shadow: none !important;
    border-bottom-color: var(--stroke) !important;
}

html.dashboard-page,
html.dashboard-page body {
    background-color: var(--bg) !important;
    color: var(--txt) !important;
}

html.dashboard-page.dark-mode .nav-item:hover,
html.dashboard-page.dark-mode .nav-item.active {
    color: #eafdf8 !important;
}

html.dashboard-page .dashboard-content {
    padding: 16px !important;
}

html.dashboard-page .dashboard-content > .container-fluid,
html.dashboard-page .dashboard-content .container-fluid,
html.dashboard-page .dashboard-content .container {
    padding: clamp(14px, 2vw, 24px) !important;
}

html.dashboard-page .bg-white,
html.dashboard-page .table-light {
    background: var(--surface-raised) !important;
    color: var(--txt) !important;
}

html.dashboard-page .text-muted,
html.dashboard-page small.text-muted {
    color: var(--txt-muted) !important;
}

html.dashboard-page .welcome-card-custom {
    background:
        linear-gradient(145deg, var(--surface-tint), var(--surface-raised) 58%) !important;
    border: 1px solid var(--stroke) !important;
}

html.dashboard-page .welcome-description {
    background: var(--surface-soft) !important;
    border: 1px solid var(--stroke) !important;
}

html.dashboard-page .welcome-description p,
html.dashboard-page .welcome-description strong {
    color: var(--txt) !important;
}

.dashboard-mobile-home,
.dashboard-mobile-tabbar {
    display: none;
}

.mobile-dashboard-brand {
    display: none;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--txt);
    text-decoration: none;
    font-weight: 800;
}

.mobile-dashboard-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 3px 10px rgba(0, 168, 135, .22));
}

.mobile-dashboard-brand span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-mobile-home {
    border: 1px solid var(--stroke);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(0, 143, 118, 0.12), transparent 44%),
        linear-gradient(220deg, rgba(37, 99, 235, 0.12), transparent 52%),
        var(--surface-raised);
    box-shadow: var(--shadow-soft);
    padding: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.mobile-home-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.mobile-home-top > div {
    min-width: 0;
}

.mobile-kicker,
.mobile-home-top p,
.mobile-metric-row span {
    color: var(--txt-muted);
    overflow-wrap: anywhere;
}

.mobile-home-top h1 {
    margin: 4px 0 6px;
    color: var(--txt);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.mobile-home-top p {
    margin: 0;
    line-height: 1.7;
}

.mobile-ring {
    width: 94px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at center, var(--surface-raised) 55%, transparent 57%),
        conic-gradient(var(--brand-teal), var(--brand-blue), var(--brand-amber), var(--brand-teal));
    box-shadow: 0 12px 28px rgba(0, 143, 118, 0.18);
}

.mobile-ring strong {
    color: var(--txt);
    font-size: 24px;
    line-height: 1;
}

.mobile-ring span {
    color: var(--txt-muted);
    font-size: 12px;
}

.mobile-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.mobile-metric-row > div {
    min-height: 78px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: var(--mobile-chrome);
    padding: 10px;
}

.mobile-metric-row strong {
    color: var(--brand-teal);
    font-size: 18px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mobile-action-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 14px 0 0;
}

.mobile-action-rail a {
    min-width: 0;
    min-height: 76px;
    display: grid;
    place-items: center;
    gap: 6px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: var(--mobile-chrome);
    color: var(--txt) !important;
    text-decoration: none !important;
    font-weight: 800;
    padding: 8px 4px;
}

.mobile-action-rail span {
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mobile-action-rail i {
    color: var(--brand-teal);
    font-size: 23px;
}

.dashboard-mobile-tabbar {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1040;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--stroke);
    border-radius: 20px;
    background: var(--mobile-chrome);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
}

.dashboard-mobile-tabbar a {
    min-width: 0;
    min-height: 54px;
    display: grid;
    place-items: center;
    gap: 3px;
    border-radius: 14px;
    color: var(--txt-muted) !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-mobile-tabbar i {
    font-size: 21px;
}

.dashboard-mobile-tabbar a.active {
    color: var(--brand-teal) !important;
    background: rgba(0, 143, 118, 0.12);
}

.dashboard-command-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-command-card,
.dashboard-alert-card,
.dashboard-panel {
    color: var(--txt) !important;
}

.dashboard-command-card {
    min-height: 120px;
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: var(--surface-raised);
    box-shadow: var(--shadow-tight);
    display: grid;
    align-content: space-between;
    gap: 8px;
}

.dashboard-command-card .command-label,
.dashboard-command-card small {
    color: var(--txt-muted);
}

.dashboard-command-card strong {
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.2;
    color: var(--brand-teal);
    overflow-wrap: anywhere;
}

.command-card-danger strong {
    color: #dc3545;
}

.dashboard-alert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-alert-card {
    display: block;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-raised);
    text-decoration: none !important;
    box-shadow: var(--shadow-tight);
}

.dashboard-alert-card > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dashboard-alert-card span,
.dashboard-alert-card p {
    color: var(--txt-muted);
}

.dashboard-alert-card strong {
    color: var(--txt);
    font-size: 22px;
    line-height: 1;
}

.dashboard-alert-card p {
    margin: 0;
    line-height: 1.7;
}

.dashboard-alert-warning {
    border-color: rgba(217, 119, 6, 0.35);
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.08), var(--surface-raised));
}

.dashboard-alert-danger {
    border-color: rgba(220, 53, 69, 0.32);
    background: linear-gradient(180deg, rgba(220, 53, 69, 0.08), var(--surface-raised));
}

.dashboard-alert-info {
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.07), var(--surface-raised));
}

.dashboard-alert-success {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), var(--surface-raised));
}

.dashboard-panel .card-header {
    background: var(--surface-raised) !important;
    border-bottom-color: var(--stroke) !important;
}

.dashboard-funnel,
.dashboard-compact-list,
.dashboard-checklist {
    display: grid;
    gap: 12px;
}

.funnel-step {
    display: grid;
    gap: 8px;
}

.funnel-step-head,
.compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.funnel-step-head span,
.compact-row small,
.dashboard-empty-state {
    color: var(--txt-muted);
}

.funnel-step-head strong,
.compact-row strong {
    color: var(--txt);
}

.funnel-bar {
    height: 9px;
    border-radius: 999px;
    background: var(--surface-soft);
    overflow: hidden;
}

.funnel-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue));
}

.compact-row {
    padding: 11px 0;
    border-bottom: 1px solid var(--stroke);
}

.compact-row:last-child {
    border-bottom: 0;
}

.compact-row > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.compact-row strong,
.compact-row small {
    overflow-wrap: anywhere;
}

.dashboard-empty-state {
    min-height: 120px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px dashed var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 16px;
}

.dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-action {
    min-height: 84px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--txt) !important;
    display: grid;
    place-items: center;
    gap: 6px;
    text-align: center;
    text-decoration: none !important;
    padding: 12px;
}

.dashboard-action i {
    color: var(--brand-teal);
    font-size: 24px;
}

.dashboard-action span {
    font-weight: 700;
}

.dashboard-intelligence-grid {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) minmax(420px, 1.35fr);
    gap: 16px;
    align-items: stretch;
}

.dashboard-health-card,
.dashboard-next-card,
.dashboard-module-card,
.dashboard-lane-card {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-tight);
    color: var(--txt) !important;
}

.dashboard-health-card {
    min-height: 268px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 20px;
}

.dashboard-health-success {
    border-color: rgba(16, 185, 129, .34);
}

.dashboard-health-warning {
    border-color: rgba(217, 119, 6, .36);
}

.dashboard-health-danger {
    border-color: rgba(220, 53, 69, .34);
}

.health-score-ring {
    position: relative;
    width: 128px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at center, var(--surface-raised) 58%, transparent 60%),
        conic-gradient(var(--brand-teal) calc(var(--score) * 1%), var(--surface-soft) 0);
    box-shadow: inset 0 0 0 1px var(--stroke), 0 16px 32px rgba(0, 143, 118, .13);
}

.health-score-ring strong {
    color: var(--txt);
    font-size: 34px;
    line-height: 1;
}

.health-score-ring span {
    color: var(--txt-muted);
    font-size: 12px;
    font-weight: 900;
    position: absolute;
    inset-block-end: 28px;
}

.health-card-copy {
    min-width: 0;
}

.health-card-copy > span,
.dashboard-section-kicker,
.lane-head span,
.dashboard-lane-card p,
.next-action-row small {
    color: var(--txt-muted);
}

.health-card-copy h2 {
    margin: 4px 0 8px;
    color: var(--txt);
    font-size: clamp(24px, 2.7vw, 36px);
    line-height: 1.2;
}

.health-card-copy p {
    color: var(--txt-muted);
    line-height: 1.8;
    margin: 0 0 14px;
}

.health-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.health-meta-grid > div {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 10px;
    display: grid;
    gap: 2px;
}

.health-meta-grid small {
    color: var(--txt-muted);
}

.health-meta-grid strong {
    color: var(--brand-teal);
    font-size: 20px;
}

.dashboard-lane-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-lane-card {
    min-height: 128px;
    display: grid;
    align-content: space-between;
    gap: 10px;
    padding: 16px;
    text-decoration: none !important;
}

.dashboard-lane-card:hover,
.next-action-row:hover,
.module-check:hover {
    border-color: rgba(0, 143, 118, .42);
    transform: translateY(-1px);
}

.lane-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.lane-head i {
    color: var(--brand-teal);
    font-size: 22px;
}

.lane-head strong {
    color: var(--txt);
    font-size: 24px;
}

.dashboard-lane-card p {
    margin: 0;
    line-height: 1.7;
}

.lane-tone-danger {
    border-color: rgba(220, 53, 69, .28);
}

.lane-tone-warning {
    border-color: rgba(217, 119, 6, .3);
}

.lane-tone-success {
    border-color: rgba(16, 185, 129, .3);
}

.dashboard-next-card,
.dashboard-module-card {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.dashboard-section-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
}

.dashboard-section-kicker i {
    color: var(--brand-teal);
}

.dashboard-next-list,
.dashboard-module-grid,
.dashboard-flow-grid {
    display: grid;
    gap: 10px;
}

.next-action-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 10px;
    color: var(--txt) !important;
    text-decoration: none !important;
}

.next-action-row i {
    color: var(--brand-teal);
    font-size: 21px;
}

.next-action-row > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.next-action-row strong,
.next-action-row small {
    overflow-wrap: anywhere;
}

.next-action-row > span {
    color: var(--brand-teal);
    font-weight: 900;
}

.next-tone-danger i,
.next-tone-danger > span {
    color: var(--dashboard-danger-text, #b42318);
}

.next-tone-warning i,
.next-tone-warning > span {
    color: var(--dashboard-warning-text, #8a5a00);
}

.module-check,
.flow-chip {
    min-height: 62px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--txt) !important;
    text-decoration: none !important;
    padding: 10px 12px;
}

.module-check i,
.flow-chip i {
    color: var(--brand-teal);
    font-size: 20px;
}

.module-check.is-missing i,
.flow-tone-danger i {
    color: var(--dashboard-danger-text, #b42318);
}

.module-check span,
.flow-chip span {
    color: var(--txt-muted);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.module-check strong,
.flow-chip strong {
    color: var(--txt);
}

.dashboard-flow-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flow-chip {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.flow-chip strong {
    font-size: 24px;
    line-height: 1;
}

.dashboard-subscription-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), var(--surface-raised));
    padding: 14px 16px;
    box-shadow: var(--shadow-tight);
}

.subscription-status-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.subscription-status-main > i {
    color: var(--brand-teal);
    font-size: 24px;
    flex: 0 0 auto;
}

.subscription-status-main div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.subscription-status-main strong {
    color: var(--txt);
    overflow-wrap: anywhere;
}

.subscription-status-main span {
    color: var(--txt-muted);
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--txt) !important;
    text-decoration: none !important;
}

.check-row i {
    flex: 0 0 auto;
}

.check-row.is-ok i {
    color: var(--brand-teal);
}

.check-row.is-missing i {
    color: var(--brand-amber);
}

html.dashboard-page .card,
html.dashboard-page .kpi-card,
html.dashboard-page .kpi-card-horizontal .card,
html.dashboard-page .kpi-card-vertical .card,
html.dashboard-page .quick-action-card,
html.dashboard-page .chart-container,
html.dashboard-page .schedule-timeline,
html.dashboard-page .subscription-card,
html.dashboard-page .welcome-section {
    border-radius: var(--radius) !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: var(--shadow-tight) !important;
}

html.dashboard-page .card,
html.dashboard-page .chart-container,
html.dashboard-page .schedule-timeline {
    padding: clamp(18px, 2.4vw, 28px) !important;
}

html.dashboard-page .kpi-card {
    padding: 24px !important;
}

html.dashboard-page .kpi-card:hover,
html.dashboard-page .card:hover,
html.dashboard-page .quick-action-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-soft) !important;
}

html.dashboard-page .kpi-value {
    font-size: clamp(30px, 4vw, 44px) !important;
    letter-spacing: 0 !important;
}

html.dashboard-page .btn {
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}

html.dashboard-page .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-tight) !important;
}

html.dashboard-page .table,
html.dashboard-page .modal-content,
html.dashboard-page .user-dropdown,
html.dashboard-page .status-badge,
html.dashboard-page .alert,
html.dashboard-page .timeline-item,
html.dashboard-page .time-badge {
    border-radius: var(--radius) !important;
}

html.dashboard-page .table tbody tr:hover,
html.dashboard-page .table .t-row:hover {
    transform: none !important;
}

html.dashboard-page .table-responsive {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-tight);
}

html.dashboard-page table.table {
    background: var(--surface-raised) !important;
    background-color: var(--surface-raised) !important;
    color: var(--txt) !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}

html.dashboard-page table.table thead th,
html.dashboard-page table.table .table-light th {
    background: var(--surface-tint) !important;
    border-bottom: 1px solid var(--stroke) !important;
    color: var(--txt) !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

html.dashboard-page table.table tbody td,
html.dashboard-page table.table tbody th {
    border-color: var(--stroke) !important;
    color: var(--txt) !important;
}

html.dashboard-page table.table tbody tr {
    background: var(--surface-raised) !important;
}

html.dashboard-page table.table.table-hover tbody tr:hover > * {
    background: var(--surface-soft) !important;
    color: var(--txt) !important;
}

html.dashboard-page table.table .table-secondary > *,
html.dashboard-page table.table tr.table-secondary > * {
    background: var(--surface-soft) !important;
    color: var(--txt) !important;
}

html.dashboard-page table.table a {
    color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 1100px) {
    .hero-content {
        grid-template-columns: 1fr !important;
    }

    .hero-visual {
        order: -1;
    }

    .dashboard-preview {
        max-width: 760px;
        margin-inline: auto;
    }
}

@media (max-width: 968px) {
    .topbar {
        padding: 10px 14px !important;
        grid-template-columns: auto auto 1fr !important;
    }

    .topbar .topbar-center {
        background: var(--surface-raised) !important;
    }

    .hero-landing {
        min-height: auto;
    }

    .hero-text,
    .hero-text h1,
    .hero-text p {
        text-align: center !important;
    }

    .hero-buttons,
    .hero-trust {
        justify-content: center !important;
    }

    .hero-description {
        margin-inline: auto !important;
    }

    #booking.booking-section .booking-form .form-grid,
    section#booking.booking-section form.booking-form div.form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-command-strip,
    .dashboard-alert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-intelligence-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-lane-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.dashboard-page .dashboard-topbar-left {
        flex: 1 1 auto !important;
        max-width: none !important;
        gap: 8px !important;
    }

    html.dashboard-page .mobile-dashboard-brand {
        display: inline-flex;
        flex: 0 1 auto;
    }

    html.dashboard-page .topbar-title {
        display: none !important;
    }

    html.dashboard-page .dashboard-sidebar.show {
        visibility: visible !important;
    }
}

@media (max-width: 720px) {
    html.dashboard-page body {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    html.dashboard-page .dashboard-content {
        padding: 10px 12px 18px !important;
    }

    html.dashboard-page .dashboard-content > .container-fluid,
    html.dashboard-page .dashboard-content .container-fluid,
    html.dashboard-page .dashboard-content .container {
        padding: 10px 0 18px !important;
    }

    html.dashboard-page .welcome-card-custom,
    html.dashboard-page .dashboard-print-wrap {
        display: none !important;
    }

    .dashboard-mobile-home {
        display: block;
    }

    .dashboard-mobile-tabbar {
        display: grid;
    }

    .dashboard-command-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .dashboard-command-card {
        min-height: 116px;
        border-radius: 16px;
        padding: 14px;
    }

    .hero-content {
        gap: 28px !important;
    }

    body.landing-page:not(.company-site) .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .preview-content {
        min-height: auto !important;
    }

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

    .features-grid,
    .integrations-grid,
    #booking.booking-section .booking-form .form-grid,
    section#booking.booking-section form.booking-form div.form-grid,
    body.signup-page form {
        grid-template-columns: 1fr !important;
    }

    .feature-card,
    .integration-item,
    .card {
        padding: 20px !important;
    }

    .hero-buttons .btn,
    .btn-large {
        width: 100% !important;
    }

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

    .dashboard-command-strip,
    .dashboard-alert-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-intelligence-grid,
    .dashboard-lane-grid,
    .health-meta-grid,
    .dashboard-flow-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-health-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        min-height: auto;
        padding: 16px;
    }

    .health-score-ring {
        width: 116px;
    }

    .dashboard-lane-card,
    .dashboard-next-card,
    .dashboard-module-card {
        border-radius: 16px;
    }

    .dashboard-command-strip,
    .dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-command-card,
    .dashboard-alert-card {
        min-height: auto;
    }

    .compact-row {
        align-items: flex-start;
    }

    .dashboard-subscription-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-subscription-banner .btn {
        width: 100%;
    }

    html.dashboard-page .table-responsive {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html.dashboard-page table.mobile-card-table {
        background: transparent !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    html.dashboard-page table.mobile-card-table thead {
        display: none !important;
    }

    html.dashboard-page table.mobile-card-table tbody,
    html.dashboard-page table.mobile-card-table tr,
    html.dashboard-page table.mobile-card-table td,
    html.dashboard-page table.mobile-card-table th {
        min-width: 0 !important;
        width: 100% !important;
    }

    html.dashboard-page table.mobile-card-table tbody,
    html.dashboard-page table.mobile-card-table tr {
        display: block !important;
        background: transparent !important;
    }

    html.dashboard-page table.mobile-card-table tbody tr {
        --bs-table-accent-bg: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-striped-bg: transparent !important;
        border: 1px solid var(--stroke) !important;
        border-radius: 16px !important;
        background: var(--surface-raised) !important;
        box-shadow: var(--shadow-tight) !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
        padding: 10px 12px !important;
    }

    html.dashboard-page table.mobile-card-table tbody tr.table-secondary {
        border-color: rgba(0, 143, 118, 0.26) !important;
        background: var(--surface-tint) !important;
    }

    html.dashboard-page table.mobile-card-table tbody td,
    html.dashboard-page table.mobile-card-table tbody th {
        --bs-table-accent-bg: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-striped-bg: transparent !important;
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: start !important;
        gap: 4px !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--stroke) !important;
        color: var(--txt) !important;
        padding: 9px 0 !important;
        text-align: start !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    html.dashboard-page table.mobile-card-table.table-hover tbody tr:hover > * {
        background: transparent !important;
        background-color: transparent !important;
    }

    html.dashboard-page table.mobile-card-table tbody td:last-child,
    html.dashboard-page table.mobile-card-table tbody th:last-child {
        border-bottom: 0 !important;
    }

    html.dashboard-page table.mobile-card-table tbody td::before,
    html.dashboard-page table.mobile-card-table tbody th::before {
        content: attr(data-label);
        color: var(--txt-muted);
        display: block;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.6;
    }

    html.dashboard-page table.mobile-card-table tbody td[colspan],
    html.dashboard-page table.mobile-card-table tbody tr.mobile-table-note-row td {
        display: block !important;
        background: transparent !important;
        border-bottom: 0 !important;
        padding: 18px 8px !important;
        text-align: center !important;
    }

    html.dashboard-page table.mobile-card-table tbody td[colspan]::before,
    html.dashboard-page table.mobile-card-table tbody tr.mobile-table-note-row td::before {
        content: none !important;
    }

    html.dashboard-page table.mobile-card-table .btn-group,
    html.dashboard-page table.mobile-card-table form.d-inline {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }

    html.dashboard-page table.mobile-card-table .btn {
        margin: 0 !important;
        min-height: 36px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-text h1 {
        font-size: 34px !important;
    }

    .dashboard-preview {
        display: none;
    }

    .hero-trust {
        display: none !important;
    }

    .topbar-right {
        gap: 4px !important;
    }

    .topbar .user-menu {
        margin-left: 0 !important;
        margin-inline: 0 !important;
        padding: 4px !important;
    }

    .topbar .user-menu .chevron {
        display: none !important;
    }

    html.dashboard-page .mobile-dashboard-brand span {
        max-width: 82px;
    }
}

@media (max-width: 380px) {
    html.dashboard-page .mobile-dashboard-brand span {
        display: none;
    }

    .mobile-home-top {
        gap: 10px;
    }

    .mobile-ring {
        width: 82px;
    }

    .mobile-home-top h1 {
        font-size: 26px;
    }

    .mobile-metric-row {
        gap: 8px;
    }

    .mobile-metric-row > div {
        min-height: 72px;
        padding: 8px;
    }

    .mobile-action-rail {
        gap: 6px;
    }

    .mobile-action-rail-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .mobile-action-rail-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mobile-action-rail a {
        min-height: 68px;
        border-radius: 13px;
        padding: 7px 2px;
    }

    .mobile-action-rail i {
        font-size: 20px;
    }

    .mobile-action-rail span {
        font-size: 11px;
    }
}

@media (max-width: 340px) {
    html.dashboard-page .dashboard-topbar-left {
        flex: 0 0 auto !important;
        max-width: none !important;
    }
}

@media print {
    .dashboard-mobile-tabbar {
        display: none !important;
    }
}

body.landing-page .hero-content {
    box-sizing: border-box;
    overflow: hidden;
}

body.landing-page .hero-text {
    max-width: 100%;
    overflow: hidden;
}

body.landing-page .hero-text h1 {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center !important;
    font-size: clamp(32px, 4.4vw, 56px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word;
}

body.landing-page .hero-description {
    max-width: 100%;
    margin-inline: auto;
}

body.landing-page .hero-buttons {
    justify-content: center;
}

/* Dashboard text color system */
:root,
:root.light-mode {
    --dashboard-heading: #0f172a;
    --dashboard-text: #172033;
    --dashboard-muted: #5f6f82;
    --dashboard-subtle: #73839a;
    --dashboard-link: #006b5c;
    --dashboard-link-hover: #004f45;
    --dashboard-positive: #087f5b;
    --dashboard-warning-text: #8a5a00;
    --dashboard-danger-text: #b42318;
    --dashboard-info-text: #175cd3;
    --dashboard-inverted: #ffffff;
    --dashboard-soft-primary: #e7f8f4;
    --dashboard-soft-success: #e9f8ef;
    --dashboard-soft-warning: #fff4db;
    --dashboard-soft-danger: #fff0f0;
    --dashboard-soft-info: #edf4ff;
    --txt: var(--dashboard-text);
    --txt-muted: var(--dashboard-muted);
}

:root.dark-mode {
    --dashboard-heading: #ffffff;
    --dashboard-text: #eef4fb;
    --dashboard-muted: #aeb9c7;
    --dashboard-subtle: #93a3b8;
    --dashboard-link: #67e8d1;
    --dashboard-link-hover: #9cf3e4;
    --dashboard-positive: #86efac;
    --dashboard-warning-text: #f6d26b;
    --dashboard-danger-text: #ff9d9d;
    --dashboard-info-text: #93c5fd;
    --dashboard-inverted: #08111b;
    --dashboard-soft-primary: rgba(0, 168, 135, .16);
    --dashboard-soft-success: rgba(34, 197, 94, .16);
    --dashboard-soft-warning: rgba(245, 158, 11, .16);
    --dashboard-soft-danger: rgba(239, 91, 91, .18);
    --dashboard-soft-info: rgba(37, 99, 235, .18);
    --txt: var(--dashboard-text);
    --txt-muted: var(--dashboard-muted);
}

html.dashboard-page,
html.dashboard-page body,
html.dashboard-page .dashboard-wrapper,
html.dashboard-page .dashboard-content,
html.dashboard-page .container,
html.dashboard-page .container-fluid,
html.dashboard-page .card,
html.dashboard-page .card-body,
html.dashboard-page .card-header,
html.dashboard-page .modal-content,
html.dashboard-page .modal-body,
html.dashboard-page .offcanvas,
html.dashboard-page .dropdown-menu,
html.dashboard-page .list-group-item,
html.dashboard-page .accordion-item,
html.dashboard-page .tab-content,
html.dashboard-page .table,
html.dashboard-page table,
html.dashboard-page .form-control-plaintext,
html.dashboard-page .form-check-label,
html.dashboard-page .input-group-text {
    color: var(--dashboard-text) !important;
}

html.dashboard-page :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
html.dashboard-page .page-title,
html.dashboard-page .card-title,
html.dashboard-page .modal-title,
html.dashboard-page .offcanvas-title,
html.dashboard-page .sidebar-brand-name,
html.dashboard-page .dashboard-topbar-user-name,
html.dashboard-page .mobile-home-top h1,
html.dashboard-page .mobile-ring strong,
html.dashboard-page .mobile-metric-row strong,
html.dashboard-page .fw-bold,
html.dashboard-page .fw-semibold,
html.dashboard-page strong,
html.dashboard-page b {
    color: var(--dashboard-heading) !important;
}

html.dashboard-page .page-title,
html.dashboard-page .text-primary.page-title,
html.dashboard-page h1.text-primary,
html.dashboard-page h2.text-primary,
html.dashboard-page h3.text-primary,
html.dashboard-page h4.text-primary,
html.dashboard-page h5.text-primary,
html.dashboard-page h6.text-primary {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .page-subtitle,
html.dashboard-page .text-muted,
html.dashboard-page .text-body-secondary,
html.dashboard-page .text-secondary,
html.dashboard-page .small,
html.dashboard-page small,
html.dashboard-page .form-text,
html.dashboard-page .nav-section-title,
html.dashboard-page .dashboard-topbar-user-role,
html.dashboard-page .mobile-kicker,
html.dashboard-page .mobile-home-top p,
html.dashboard-page .mobile-metric-row span,
html.dashboard-page .mobile-ring span,
html.dashboard-page .table caption {
    color: var(--dashboard-muted) !important;
}

html.dashboard-page code,
html.dashboard-page code.small,
html.dashboard-page .small code,
html.dashboard-page .bg-light code,
html.dashboard-page code.bg-light {
    color: var(--dashboard-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .text-primary,
html.dashboard-page .link-primary,
html.dashboard-page .dashboard-content a:not(.btn):not(.nav-item):not(.dropdown-item):not(.page-link) {
    color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .dashboard-content a:not(.btn):not(.nav-item):not(.dropdown-item):not(.page-link):hover,
html.dashboard-page .link-primary:hover,
html.dashboard-page .text-primary:hover {
    color: var(--dashboard-link-hover) !important;
}

html.dashboard-page code.text-primary,
html.dashboard-page .text-primary code {
    color: var(--dashboard-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .text-success,
html.dashboard-page .link-success {
    color: var(--dashboard-positive) !important;
}

html.dashboard-page .text-warning,
html.dashboard-page .link-warning {
    color: var(--dashboard-warning-text) !important;
}

html.dashboard-page .text-danger,
html.dashboard-page .link-danger {
    color: var(--dashboard-danger-text) !important;
}

html.dashboard-page .text-info,
html.dashboard-page .link-info {
    color: var(--dashboard-info-text) !important;
}

html.dashboard-page .text-dark,
html.dashboard-page .text-black,
html.dashboard-page .text-body {
    color: var(--dashboard-text) !important;
}

html.dashboard-page .table thead th,
html.dashboard-page .table thead td,
html.dashboard-page .table-light th,
html.dashboard-page .table-light td,
html.dashboard-page .table-secondary th,
html.dashboard-page .table-secondary td {
    color: var(--dashboard-heading) !important;
}

html.dashboard-page .table tbody th,
html.dashboard-page .table tbody td,
html.dashboard-page .table tfoot th,
html.dashboard-page .table tfoot td {
    color: var(--dashboard-text) !important;
}

html.dashboard-page .table td::before,
html.dashboard-page .table th::before,
html.dashboard-page table.mobile-card-table tbody td::before,
html.dashboard-page table.mobile-card-table tbody th::before {
    color: var(--dashboard-subtle) !important;
}

html.dashboard-page .form-label,
html.dashboard-page label,
html.dashboard-page legend,
html.dashboard-page .col-form-label {
    color: var(--dashboard-heading) !important;
}

html.dashboard-page .form-control,
html.dashboard-page .form-select,
html.dashboard-page textarea,
html.dashboard-page select,
html.dashboard-page input[type="text"],
html.dashboard-page input[type="email"],
html.dashboard-page input[type="password"],
html.dashboard-page input[type="number"],
html.dashboard-page input[type="date"],
html.dashboard-page input[type="time"],
html.dashboard-page input[type="url"],
html.dashboard-page input[type="tel"],
html.dashboard-page input[type="search"] {
    color: var(--dashboard-text) !important;
}

html.dashboard-page .form-control::placeholder,
html.dashboard-page input::placeholder,
html.dashboard-page textarea::placeholder {
    color: var(--dashboard-subtle) !important;
    opacity: 1 !important;
}

html.dashboard-page code,
html.dashboard-page pre,
html.dashboard-page kbd {
    color: var(--dashboard-link) !important;
}

html.dashboard-page .bg-primary.bg-opacity-10,
html.dashboard-page .bg-info.bg-opacity-10,
html.dashboard-page .bg-success.bg-opacity-10,
html.dashboard-page .bg-warning.bg-opacity-10,
html.dashboard-page .bg-danger.bg-opacity-10 {
    border: 1px solid var(--stroke) !important;
}

html.dashboard-page .bg-primary.bg-opacity-10,
html.dashboard-page .text-primary.bg-primary,
html.dashboard-page code.bg-primary {
    background: var(--dashboard-soft-primary) !important;
    border-color: rgba(0, 122, 104, .22) !important;
    color: var(--dashboard-link) !important;
}

html.dashboard-page .bg-success.bg-opacity-10,
html.dashboard-page .text-success.bg-success,
html.dashboard-page code.bg-success {
    background: var(--dashboard-soft-success) !important;
    border-color: rgba(8, 127, 91, .22) !important;
    color: var(--dashboard-positive) !important;
}

html.dashboard-page .bg-warning.bg-opacity-10,
html.dashboard-page .text-warning.bg-warning,
html.dashboard-page code.bg-warning {
    background: var(--dashboard-soft-warning) !important;
    border-color: rgba(138, 90, 0, .24) !important;
    color: var(--dashboard-warning-text) !important;
}

html.dashboard-page .bg-danger.bg-opacity-10,
html.dashboard-page .text-danger.bg-danger,
html.dashboard-page code.bg-danger {
    background: var(--dashboard-soft-danger) !important;
    border-color: rgba(180, 35, 24, .22) !important;
    color: var(--dashboard-danger-text) !important;
}

html.dashboard-page .bg-info.bg-opacity-10,
html.dashboard-page .text-info.bg-info,
html.dashboard-page code.bg-info {
    background: var(--dashboard-soft-info) !important;
    border-color: rgba(23, 92, 211, .22) !important;
    color: var(--dashboard-info-text) !important;
}

html.dashboard-page .badge:not(.bg-warning):not(.bg-light):not(.bg-opacity-10),
html.dashboard-page .btn-primary,
html.dashboard-page .btn-success,
html.dashboard-page .btn-danger,
html.dashboard-page .btn-info,
html.dashboard-page .btn-dark {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .badge.bg-warning,
html.dashboard-page .btn-warning,
html.dashboard-page .badge.bg-light,
html.dashboard-page .btn-light {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html.dashboard-page .badge {
    border: 1px solid transparent !important;
    font-weight: 800 !important;
}

html.dashboard-page .badge:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark):not(.bg-opacity-10),
html.dashboard-page .badge.bg-secondary,
html.dashboard-page .bg-secondary:not(.bg-opacity-10) {
    background: #475569 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .badge.bg-primary,
html.dashboard-page .bg-primary:not(.bg-opacity-10) {
    background: #006b5c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .badge.bg-success,
html.dashboard-page .bg-success:not(.bg-opacity-10) {
    background: #087f5b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .badge.bg-danger,
html.dashboard-page .bg-danger:not(.bg-opacity-10) {
    background: #b42318 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .badge.bg-info,
html.dashboard-page .bg-info:not(.bg-opacity-10) {
    background: #175cd3 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .badge.bg-warning,
html.dashboard-page .bg-warning:not(.bg-opacity-10) {
    background: #f4ba49 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html.dashboard-page .badge.bg-light,
html.dashboard-page .bg-light:not(.bg-opacity-10) {
    background: var(--surface-raised) !important;
    border-color: var(--stroke) !important;
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .badge.bg-dark,
html.dashboard-page .bg-dark:not(.bg-opacity-10) {
    background: #111827 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn-primary {
    background-color: #006b5c !important;
    background-image: none !important;
    border-color: transparent !important;
}

html.dashboard-page .btn-success {
    background: #087f5b !important;
    border-color: #087f5b !important;
}

html.dashboard-page .btn-danger {
    background: #b42318 !important;
    border-color: #b42318 !important;
}

html.dashboard-page .btn-info {
    background: #175cd3 !important;
    border-color: #175cd3 !important;
}

html.dashboard-page .btn-warning {
    background: #f4ba49 !important;
    border-color: #d99a16 !important;
}

html.dashboard-page .btn-light {
    background: var(--surface-raised) !important;
    border-color: var(--stroke) !important;
}

html.dashboard-page .btn-dark {
    background: #111827 !important;
    border-color: #111827 !important;
}

html.dashboard-page .btn-secondary {
    background: var(--surface-soft) !important;
    border-color: var(--stroke) !important;
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn:not(.btn-link):not([class*="btn-outline"]):not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-close) {
    background-color: #006b5c !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn-outline-primary,
html.dashboard-page .btn-outline-success,
html.dashboard-page .btn-outline-warning,
html.dashboard-page .btn-outline-danger,
html.dashboard-page .btn-outline-info,
html.dashboard-page .btn-outline-secondary,
html.dashboard-page .btn-outline-light,
html.dashboard-page .btn-outline-dark {
    background: var(--surface-raised) !important;
    background-image: none !important;
}

html.dashboard-page .btn-outline-primary {
    color: var(--dashboard-link) !important;
    border-color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn.btn-outline-primary,
html.dashboard-page a.btn.btn-outline-primary,
html.dashboard-page button.btn.btn-outline-primary,
html.dashboard-page table.table a.btn.btn-outline-primary {
    color: var(--dashboard-link) !important;
    border-color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-outline-success {
    color: var(--dashboard-positive) !important;
    border-color: var(--dashboard-positive) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn.btn-outline-success,
html.dashboard-page a.btn.btn-outline-success,
html.dashboard-page button.btn.btn-outline-success,
html.dashboard-page table.table a.btn.btn-outline-success {
    color: var(--dashboard-positive) !important;
    border-color: var(--dashboard-positive) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-outline-warning {
    color: var(--dashboard-warning-text) !important;
    border-color: var(--dashboard-warning-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-outline-danger {
    color: var(--dashboard-danger-text) !important;
    border-color: var(--dashboard-danger-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn.btn-outline-danger,
html.dashboard-page a.btn.btn-outline-danger,
html.dashboard-page button.btn.btn-outline-danger,
html.dashboard-page table.table a.btn.btn-outline-danger {
    color: var(--dashboard-danger-text) !important;
    border-color: var(--dashboard-danger-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-outline-info {
    color: var(--dashboard-info-text) !important;
    border-color: var(--dashboard-info-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-outline-secondary,
html.dashboard-page .btn-outline-light,
html.dashboard-page .btn-outline-dark {
    color: var(--dashboard-text) !important;
    border-color: var(--stroke) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-outline-primary:hover,
html.dashboard-page .btn-outline-success:hover,
html.dashboard-page .btn-outline-danger:hover,
html.dashboard-page .btn-outline-info:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn-outline-primary:hover {
    background: #006b5c !important;
    border-color: #006b5c !important;
}

html.dashboard-page .btn-outline-success:hover {
    background: #087f5b !important;
    border-color: #087f5b !important;
}

html.dashboard-page .btn-outline-danger:hover {
    background: #b42318 !important;
    border-color: #b42318 !important;
}

html.dashboard-page .btn-outline-info:hover {
    background: #175cd3 !important;
    border-color: #175cd3 !important;
}

html.dashboard-page .btn.btn-outline-primary:hover,
html.dashboard-page a.btn.btn-outline-primary:hover,
html.dashboard-page button.btn.btn-outline-primary:hover,
html.dashboard-page table.table a.btn.btn-outline-primary:hover {
    background: #006b5c !important;
    border-color: #006b5c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn.btn-outline-success:hover,
html.dashboard-page a.btn.btn-outline-success:hover,
html.dashboard-page button.btn.btn-outline-success:hover,
html.dashboard-page table.table a.btn.btn-outline-success:hover {
    background: #087f5b !important;
    border-color: #087f5b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn.btn-outline-danger:hover,
html.dashboard-page a.btn.btn-outline-danger:hover,
html.dashboard-page button.btn.btn-outline-danger:hover,
html.dashboard-page table.table a.btn.btn-outline-danger:hover {
    background: #b42318 !important;
    border-color: #b42318 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn.btn-outline-info:hover,
html.dashboard-page a.btn.btn-outline-info:hover,
html.dashboard-page button.btn.btn-outline-info:hover,
html.dashboard-page table.table a.btn.btn-outline-info:hover {
    background: #175cd3 !important;
    border-color: #175cd3 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn.btn-outline-warning:hover,
html.dashboard-page a.btn.btn-outline-warning:hover,
html.dashboard-page button.btn.btn-outline-warning:hover,
html.dashboard-page table.table a.btn.btn-outline-warning:hover {
    background: #f4ba49 !important;
    border-color: #d99a16 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html.dashboard-page .btn-outline-warning:hover {
    background: #f4ba49 !important;
    border-color: #d99a16 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html.dashboard-page .btn-outline-secondary:hover,
html.dashboard-page .btn-outline-light:hover,
html.dashboard-page .btn-outline-dark:hover {
    background: var(--surface-soft) !important;
    border-color: var(--dashboard-link) !important;
    color: var(--dashboard-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-check:checked + .btn-outline-primary,
html.dashboard-page .btn-check:active + .btn-outline-primary,
html.dashboard-page .btn-outline-primary.active,
html.dashboard-page .btn-outline-primary.dropdown-toggle.show,
html.dashboard-page .btn-outline-primary:active {
    background: var(--dashboard-link) !important;
    border-color: var(--dashboard-link) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn-check:checked + .btn-outline-secondary,
html.dashboard-page .btn-check:active + .btn-outline-secondary,
html.dashboard-page .btn-outline-secondary.active,
html.dashboard-page .btn-outline-secondary.dropdown-toggle.show,
html.dashboard-page .btn-outline-secondary:active {
    background: var(--dashboard-soft-primary) !important;
    border-color: var(--dashboard-link) !important;
    color: var(--dashboard-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .dropdown-item {
    color: var(--dashboard-text) !important;
}

html.dashboard-page .dropdown-item:hover,
html.dashboard-page .dropdown-item:focus {
    background: var(--dashboard-soft-primary) !important;
    color: var(--dashboard-link-hover) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn:hover i,
html.dashboard-page .btn:hover span,
html.dashboard-page .btn:hover strong,
html.dashboard-page .nav-item:hover i,
html.dashboard-page .nav-item:hover span,
html.dashboard-page .dropdown-item:hover i,
html.dashboard-page .dropdown-item:hover span,
html.dashboard-page .user-dropdown-item:hover i,
html.dashboard-page .user-dropdown-item:hover span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .btn-primary:hover,
html.dashboard-page .btn-success:hover,
html.dashboard-page .btn-danger:hover,
html.dashboard-page .btn-info:hover,
html.dashboard-page .btn-dark:hover,
html.dashboard-page .btn:not(.btn-link):not([class*="btn-outline"]):not(.btn-secondary):not(.btn-warning):not(.btn-light):not(.btn-close):hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .btn-warning:hover,
html.dashboard-page .btn-light:hover {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html.dashboard-page .btn-secondary:hover,
html.dashboard-page .dashboard-topbar-btn:hover,
html.dashboard-page .dark-mode-toggle:hover,
html.dashboard-page .sidebar-toggle:hover,
html.dashboard-page .dashboard-topbar-user-menu:hover,
html.dashboard-page .domain-mini-actions .btn-outline-secondary:hover {
    background: var(--surface-soft) !important;
    border-color: var(--stroke) !important;
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .user-dropdown-item:hover,
html.dashboard-page .list-group-item-action:hover,
html.dashboard-page .page-link:hover {
    background: var(--dashboard-soft-primary) !important;
    color: var(--dashboard-link-hover) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .table-hover tbody tr:hover,
html.dashboard-page .table-hover tbody tr:hover > *,
html.dashboard-page table.table tbody tr:hover,
html.dashboard-page table.table tbody tr:hover > * {
    --bs-table-accent-bg: var(--surface-soft) !important;
    background-color: var(--surface-soft) !important;
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .table-hover tbody tr:hover a:not(.btn),
html.dashboard-page table.table tbody tr:hover a:not(.btn) {
    color: var(--dashboard-link-hover) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .nav-item:hover,
html.dashboard-page .nav-item:focus,
html.dashboard-page .nav-item.active {
    color: var(--dashboard-link-hover) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page a.nav-item:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):hover,
html.dashboard-page a.nav-item:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):focus,
html.dashboard-page a.nav-item:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item).active {
    color: var(--dashboard-link-hover) !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration: none !important;
}

html.dashboard-page.dark-mode .nav-item:hover,
html.dashboard-page.dark-mode .nav-item:focus,
html.dashboard-page.dark-mode .nav-item.active {
    color: #eafdf8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode a.nav-item:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):hover,
html.dashboard-page.dark-mode a.nav-item:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item):focus,
html.dashboard-page.dark-mode a.nav-item:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item).active {
    color: #eafdf8 !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration: none !important;
}

html.dashboard-page table.table tbody tr:hover a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item),
html.dashboard-page .table-hover tbody tr:hover a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item) {
    color: var(--dashboard-link-hover) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode table.table tbody tr:hover a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item),
html.dashboard-page.dark-mode .table-hover tbody tr:hover a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.list-group-item) {
    color: #eafdf8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .btn-secondary:hover,
html.dashboard-page.dark-mode .btn-outline-secondary:hover,
html.dashboard-page.dark-mode .btn-outline-light:hover,
html.dashboard-page.dark-mode .btn-outline-dark:hover,
html.dashboard-page.dark-mode .dashboard-topbar-btn:hover,
html.dashboard-page.dark-mode .dark-mode-toggle:hover,
html.dashboard-page.dark-mode .sidebar-toggle:hover,
html.dashboard-page.dark-mode .dashboard-topbar-user-menu:hover {
    color: var(--dashboard-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .nav-tabs .nav-link.active {
    background: var(--surface-raised) !important;
    border-color: var(--stroke) var(--stroke) var(--surface-raised) !important;
    color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .nav-tabs .nav-link:hover,
html.dashboard-page .nav-tabs .nav-link:focus {
    color: var(--dashboard-heading) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .lang-currency-switcher .dropdown-toggle {
    background: rgba(103, 232, 209, .12) !important;
    border-color: rgba(103, 232, 209, .28) !important;
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .lang-currency-switcher .dropdown-item {
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .lang-currency-switcher .dropdown-item.active,
html.dashboard-page.dark-mode .lang-currency-switcher .dropdown-item.active span {
    color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: var(--dashboard-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .nav-tabs .nav-link {
    color: var(--dashboard-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page.dark-mode .nav-tabs .nav-link.active {
    background: var(--surface-raised) !important;
    border-color: var(--stroke) var(--stroke) var(--surface-raised) !important;
    color: var(--dashboard-link) !important;
    -webkit-text-fill-color: currentColor !important;
}

html.dashboard-page .pagination .page-link {
    color: var(--dashboard-link) !important;
}

html.dashboard-page .pagination .active .page-link,
html.dashboard-page .page-item.active .page-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dashboard-page .alert,
html.dashboard-page .toast,
html.dashboard-page .popover {
    color: var(--dashboard-text) !important;
}

html.dashboard-page .tooltip-inner {
    background: var(--dashboard-heading) !important;
    color: var(--dashboard-inverted) !important;
}

html.dashboard-page .alert-success {
    color: var(--dashboard-positive) !important;
}

html.dashboard-page .alert-warning {
    color: var(--dashboard-warning-text) !important;
}

html.dashboard-page .alert-danger {
    color: var(--dashboard-danger-text) !important;
}

html.dashboard-page .alert-info {
    color: var(--dashboard-info-text) !important;
}

/* SaaS companies command table and support workflow */
.support-workflow-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.workflow-step,
.domain-card,
.company-support-panel,
.support-access-banner {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-tight);
}

.workflow-step {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px;
}

.workflow-step i {
    color: var(--brand-teal);
    font-size: 24px;
}

.workflow-step div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.workflow-step strong,
.domain-card-head code {
    color: var(--dashboard-heading);
}

.workflow-step small,
.domain-hint,
.domain-card small {
    color: var(--dashboard-muted);
    overflow-wrap: anywhere;
}

.companies-command-table {
    min-width: 0 !important;
    width: 100% !important;
}

html.dashboard-page .companies-command-table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    display: block !important;
}

html.dashboard-page .companies-command-table thead {
    display: none !important;
}

html.dashboard-page .companies-command-table tbody {
    display: grid !important;
    gap: 14px;
    padding: 14px;
}

html.dashboard-page .companies-command-table tbody tr {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg: transparent !important;
    align-items: start !important;
    background: linear-gradient(180deg, var(--surface-raised), var(--surface-soft)) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-tight) !important;
    display: grid !important;
    gap: 10px;
    grid-template-areas:
        "company domain custom support"
        "slug domain custom support"
        "users appointments subscription support"
        "status status status support";
    grid-template-columns: minmax(170px, .9fr) minmax(220px, 1.15fr) minmax(180px, .95fr) minmax(250px, 1.15fr);
    margin: 0 !important;
    padding: 12px !important;
}

html.dashboard-page .companies-command-table tbody tr:hover > * {
    background: var(--surface-raised) !important;
    color: var(--txt) !important;
}

html.dashboard-page .companies-command-table tbody td {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg: transparent !important;
    align-content: start;
    background: var(--surface-raised) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: var(--txt) !important;
    display: grid !important;
    gap: 8px;
    min-width: 0 !important;
    padding: 12px !important;
    text-align: start !important;
    vertical-align: top !important;
}

html.dashboard-page .companies-command-table tbody td::before {
    content: attr(data-label);
    color: var(--dashboard-muted);
    display: block;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
}

html.dashboard-page .companies-command-table tbody td:nth-child(1) { grid-area: company; }
html.dashboard-page .companies-command-table tbody td:nth-child(2) { grid-area: slug; }
html.dashboard-page .companies-command-table tbody td:nth-child(3) { grid-area: domain; }
html.dashboard-page .companies-command-table tbody td:nth-child(4) { grid-area: custom; }
html.dashboard-page .companies-command-table tbody td:nth-child(5) { grid-area: users; }
html.dashboard-page .companies-command-table tbody td:nth-child(6) { grid-area: appointments; }
html.dashboard-page .companies-command-table tbody td:nth-child(7) { grid-area: subscription; }
html.dashboard-page .companies-command-table tbody td:nth-child(8) { grid-area: status; }
html.dashboard-page .companies-command-table tbody td:nth-child(9) { grid-area: support; }

html.dashboard-page .companies-command-table tbody td:nth-child(1)::before {
    content: none;
}

html.dashboard-page .companies-command-table tbody td:nth-child(5),
html.dashboard-page .companies-command-table tbody td:nth-child(6),
html.dashboard-page .companies-command-table tbody td:nth-child(7),
html.dashboard-page .companies-command-table tbody td:nth-child(8) {
    align-content: center;
    justify-items: center;
    min-height: 72px;
    text-align: center !important;
}

html.dashboard-page .companies-command-table tbody td:nth-child(5) .badge,
html.dashboard-page .companies-command-table tbody td:nth-child(6) .badge,
html.dashboard-page .companies-command-table tbody td:nth-child(7) .badge,
html.dashboard-page .companies-command-table tbody td:nth-child(8) .badge {
    border-radius: 999px;
    min-width: 72px;
    padding: 7px 12px;
}

.company-domain-cell {
    vertical-align: top !important;
}

.domain-stack,
.company-support-panel {
    display: grid;
    gap: 10px;
}

.domain-card {
    padding: 12px;
    display: grid;
    gap: 8px;
}

.domain-card.is-missing {
    border-style: dashed;
    background: var(--surface-soft);
}

.domain-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.domain-card-head span {
    color: var(--dashboard-muted);
    font-weight: 900;
    font-size: 12px;
}

.domain-card-head code {
    background: var(--dashboard-soft-primary);
    border: 1px solid rgba(0, 122, 104, .22);
    border-radius: 8px;
    padding: 4px 8px;
}

.domain-url {
    color: var(--dashboard-link) !important;
    font-weight: 800;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.domain-url i {
    font-size: 12px;
}

.domain-mini-actions,
.support-action-grid,
.support-danger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.domain-mini-actions .btn,
.company-support-panel .btn,
html.dashboard-page .companies-command-table tbody td:nth-child(4) .btn {
    align-items: center;
    border-width: 1px !important;
    display: inline-flex;
    font-weight: 900;
    gap: 5px;
    justify-content: center;
    min-height: 38px;
}

.domain-mini-actions .btn-outline-primary,
.support-action-grid .btn-outline-primary,
.support-upload-form .btn-outline-primary,
html.dashboard-page .companies-command-table tbody td:nth-child(4) .btn-outline-info {
    background: var(--surface-raised) !important;
    border-color: var(--dashboard-link) !important;
    color: var(--dashboard-link) !important;
}

.domain-mini-actions .btn-outline-secondary {
    background: var(--surface-soft) !important;
    border-color: var(--stroke) !important;
    color: var(--dashboard-muted) !important;
}

.company-support-panel .btn-success {
    background: #006b5c !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.support-danger-row .btn-danger {
    background: #b42318 !important;
    border-color: #b42318 !important;
    color: #ffffff !important;
}

.support-danger-row .btn-outline-danger {
    background: var(--dashboard-soft-danger) !important;
    border-color: rgba(180, 35, 24, .45) !important;
    color: var(--dashboard-danger-text) !important;
}

.domain-edit-form,
.support-upload-form,
.support-panel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.company-support-panel {
    padding: 12px;
    min-width: 0;
    width: 100%;
}

.company-row-logo {
    width: 44px;
    height: 44px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    object-fit: contain;
    background: var(--surface-soft);
    padding: 4px;
}

.company-row-logo.logo-empty {
    display: grid;
    place-items: center;
    color: var(--dashboard-muted);
}

.support-panel-top {
    grid-template-columns: auto minmax(0, 1fr);
}

.support-status-form {
    min-width: 0;
}

.support-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-upload-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.support-file-picker {
    cursor: pointer;
    display: grid;
    min-width: 0;
}

.support-file-picker input {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.support-file-picker span {
    align-items: center;
    background: var(--surface-soft);
    border: 1px dashed rgba(0, 122, 104, .35);
    border-radius: var(--radius);
    color: var(--dashboard-link);
    display: flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
}

.support-file-picker:focus-within span,
.support-file-picker:hover span {
    background: var(--dashboard-soft-primary);
    border-style: solid;
}

.support-danger-row {
    justify-content: flex-start;
}

.support-access-banner {
    margin: 12px clamp(12px, 2vw, 24px) 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-color: rgba(217, 119, 6, .35);
    background: linear-gradient(180deg, rgba(217, 119, 6, .1), var(--surface-raised));
}

.support-access-banner > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.support-access-banner i {
    color: var(--dashboard-warning-text);
}

.support-access-banner strong {
    color: var(--dashboard-heading);
}

.support-access-banner span {
    color: var(--dashboard-link);
    font-weight: 900;
}

.support-access-banner small {
    color: var(--dashboard-muted);
}

@media (max-width: 1500px) {
    html.dashboard-page .companies-command-table tbody tr {
        grid-template-areas:
            "company domain"
            "slug domain"
            "custom support"
            "users appointments"
            "subscription status";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .support-workflow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .support-workflow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: calc(152px + env(safe-area-inset-bottom)) !important;
    }

    .workflow-step {
        align-items: start;
        grid-template-columns: 1fr;
        min-height: 122px;
        padding: 11px;
    }

    .workflow-step i {
        font-size: 20px;
    }

    .workflow-step strong {
        font-size: 14px;
        line-height: 1.35;
    }

    .workflow-step small {
        font-size: 12px;
        line-height: 1.55;
    }

    .support-action-grid {
        grid-template-columns: 1fr;
    }

    .support-access-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .support-access-banner .btn {
        width: 100%;
    }

    html.dashboard-page .companies-command-table tbody {
        gap: 12px;
        padding: 10px;
    }

    html.dashboard-page .companies-command-table tbody tr {
        border-radius: 16px !important;
        grid-template-areas:
            "company"
            "slug"
            "domain"
            "custom"
            "users"
            "appointments"
            "subscription"
            "status"
            "support";
        grid-template-columns: 1fr;
        padding: 10px !important;
    }

    html.dashboard-page .companies-command-table tbody td {
        border-radius: 12px !important;
        padding: 11px !important;
    }

    html.dashboard-page .companies-command-table tbody td:nth-child(5),
    html.dashboard-page .companies-command-table tbody td:nth-child(6),
    html.dashboard-page .companies-command-table tbody td:nth-child(7),
    html.dashboard-page .companies-command-table tbody td:nth-child(8) {
        min-height: auto;
    }
}

@media (max-width: 340px) {
    .support-workflow-strip {
        grid-template-columns: 1fr;
    }
}

/* Public Website Light Palette
   A calmer light theme for the official marketing pages. */
html:not(.dashboard-page):not(.dark-mode),
html.light-mode:not(.dashboard-page) {
    --p: #0f766e;
    --a: #1d4ed8;
    --brand-teal: #0f766e;
    --brand-mint: #0d9488;
    --brand-blue: #1d4ed8;
    --surface-tint: #eef8f5;
    --surface-soft: rgba(15, 118, 110, 0.075);
    --phoenix-green: #0f766e;
    --phoenix-mint: #0d9488;
    --phoenix-gradient: #0f766e;
    --focus-ring: 0 0 0 4px rgba(15, 118, 110, 0.16);
}

html:not(.dashboard-page):not(.dark-mode) body,
html.light-mode:not(.dashboard-page) body {
    background: #f5f8f7 !important;
    color: #172033 !important;
}

html:not(.dashboard-page):not(.dark-mode) .topbar,
html.light-mode:not(.dashboard-page) .topbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: rgba(15, 118, 110, 0.12) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dashboard-page):not(.dark-mode) .brand-text-primary,
html:not(.dashboard-page):not(.dark-mode) .brand-text-accent,
html.light-mode:not(.dashboard-page) .brand-text-primary,
html.light-mode:not(.dashboard-page) .brand-text-accent {
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) a:not(.btn):not(.nav-link):not(.dropdown-item),
html.light-mode:not(.dashboard-page) a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #1d4ed8;
}

html:not(.dashboard-page):not(.dark-mode) a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
html.light-mode:not(.dashboard-page) a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #0f766e;
}

html:not(.dashboard-page):not(.dark-mode) .text-primary,
html:not(.dashboard-page):not(.dark-mode) .feature-card .text-primary,
html:not(.dashboard-page):not(.dark-mode) .plan-card .text-primary,
html.light-mode:not(.dashboard-page) .text-primary,
html.light-mode:not(.dashboard-page) .feature-card .text-primary,
html.light-mode:not(.dashboard-page) .plan-card .text-primary {
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .text-success,
html.light-mode:not(.dashboard-page) .text-success {
    color: #087f5b !important;
}

html:not(.dashboard-page):not(.dark-mode) .hero-subtitle,
html.light-mode:not(.dashboard-page) .hero-subtitle {
    color: #0b5f59 !important;
    background: #e4f3ef !important;
    border-color: #b7ddd4 !important;
}

html:not(.dashboard-page):not(.dark-mode) .hero-text h1 span:first-child,
html.light-mode:not(.dashboard-page) .hero-text h1 span:first-child,
html:not(.dashboard-page):not(.dark-mode) .pricing-hero h1,
html.light-mode:not(.dashboard-page) .pricing-hero h1,
html:not(.dashboard-page):not(.dark-mode) .plan-card .h2,
html.light-mode:not(.dashboard-page) .plan-card .h2 {
    background: none !important;
    color: #172033 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .hero-text h1 span:last-child,
html.light-mode:not(.dashboard-page) .hero-text h1 span:last-child,
html:not(.dashboard-page):not(.dark-mode) .stat-value,
html:not(.dashboard-page):not(.dark-mode) .preview-kpi-value,
html.light-mode:not(.dashboard-page) .stat-value,
html.light-mode:not(.dashboard-page) .preview-kpi-value {
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .stat-item,
html.light-mode:not(.dashboard-page) .stat-item,
html:not(.dashboard-page):not(.dark-mode) .preview-kpi-item,
html.light-mode:not(.dashboard-page) .preview-kpi-item,
html:not(.dashboard-page):not(.dark-mode) .info-card,
html.light-mode:not(.dashboard-page) .info-card,
html:not(.dashboard-page):not(.dark-mode) .info-box,
html.light-mode:not(.dashboard-page) .info-box {
    background: #edf7f4 !important;
    border-color: #bfded7 !important;
}

html:not(.dashboard-page):not(.dark-mode) .stat-label,
html.light-mode:not(.dashboard-page) .stat-label {
    color: #53657a !important;
}

html:not(.dashboard-page):not(.dark-mode) .preview-nav-item.active,
html.light-mode:not(.dashboard-page) .preview-nav-item.active {
    color: #0b5f59 !important;
    background: #e4f3ef !important;
    border-color: #0f766e !important;
}

html:not(.dashboard-page):not(.dark-mode) .btn-primary,
html:not(.dashboard-page):not(.dark-mode) button.btn-primary,
html:not(.dashboard-page):not(.dark-mode) a.btn-primary,
html:not(.dashboard-page):not(.dark-mode) .plan-card .btn-primary,
html:not(.dashboard-page):not(.dark-mode) .btn.btn-primary,
html.light-mode:not(.dashboard-page) .btn-primary,
html.light-mode:not(.dashboard-page) button.btn-primary,
html.light-mode:not(.dashboard-page) a.btn-primary,
html.light-mode:not(.dashboard-page) .plan-card .btn-primary,
html.light-mode:not(.dashboard-page) .btn.btn-primary {
    background: #0f766e !important;
    background-color: #0f766e !important;
    background-image: none !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .btn-primary:hover,
html:not(.dashboard-page):not(.dark-mode) button.btn-primary:hover,
html:not(.dashboard-page):not(.dark-mode) a.btn-primary:hover,
html:not(.dashboard-page):not(.dark-mode) .plan-card .btn-primary:hover,
html.light-mode:not(.dashboard-page) .btn-primary:hover,
html.light-mode:not(.dashboard-page) button.btn-primary:hover,
html.light-mode:not(.dashboard-page) a.btn-primary:hover,
html.light-mode:not(.dashboard-page) .plan-card .btn-primary:hover {
    background: #0b5f59 !important;
    background-color: #0b5f59 !important;
    border-color: #0b5f59 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .btn-outline-primary,
html:not(.dashboard-page):not(.dark-mode) .plan-card .btn-outline-primary,
html.light-mode:not(.dashboard-page) .btn-outline-primary,
html.light-mode:not(.dashboard-page) .plan-card .btn-outline-primary {
    background: #ffffff !important;
    border-color: #0f766e !important;
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .btn-outline-primary:hover,
html:not(.dashboard-page):not(.dark-mode) .plan-card .btn-outline-primary:hover,
html.light-mode:not(.dashboard-page) .btn-outline-primary:hover,
html.light-mode:not(.dashboard-page) .plan-card .btn-outline-primary:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .btn-secondary,
html.light-mode:not(.dashboard-page) .btn-secondary,
html:not(.dashboard-page):not(.dark-mode) .btn-outline-secondary,
html.light-mode:not(.dashboard-page) .btn-outline-secondary {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #172033 !important;
}

html:not(.dashboard-page):not(.dark-mode) .bg-success,
html.light-mode:not(.dashboard-page) .bg-success {
    background-color: #087f5b !important;
    color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .bg-primary,
html.light-mode:not(.dashboard-page) .bg-primary {
    background-color: #0f766e !important;
    color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .bg-info,
html.light-mode:not(.dashboard-page) .bg-info {
    background-color: #175cd3 !important;
    color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .about-hero,
html:not(.dashboard-page):not(.dark-mode) .docs-hero,
html:not(.dashboard-page):not(.dark-mode) .floating-card,
html:not(.dashboard-page):not(.dark-mode) .cta-section > .container > div,
html:not(.dashboard-page):not(.dark-mode) .company-card[style*="phoenix-gradient"],
html.light-mode:not(.dashboard-page) .about-hero,
html.light-mode:not(.dashboard-page) .docs-hero,
html.light-mode:not(.dashboard-page) .floating-card,
html.light-mode:not(.dashboard-page) .cta-section > .container > div,
html.light-mode:not(.dashboard-page) .company-card[style*="phoenix-gradient"] {
    background: #0f766e !important;
    background-color: #0f766e !important;
    background-image: none !important;
    color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .about-hero h1,
html:not(.dashboard-page):not(.dark-mode) .about-hero p,
html:not(.dashboard-page):not(.dark-mode) .docs-hero h1,
html:not(.dashboard-page):not(.dark-mode) .docs-hero p,
html:not(.dashboard-page):not(.dark-mode) .cta-section > .container > div h2,
html:not(.dashboard-page):not(.dark-mode) .cta-section > .container > div p,
html:not(.dashboard-page):not(.dark-mode) .company-card[style*="phoenix-gradient"] h2,
html:not(.dashboard-page):not(.dark-mode) .company-card[style*="phoenix-gradient"] p,
html.light-mode:not(.dashboard-page) .about-hero h1,
html.light-mode:not(.dashboard-page) .about-hero p,
html.light-mode:not(.dashboard-page) .docs-hero h1,
html.light-mode:not(.dashboard-page) .docs-hero p,
html.light-mode:not(.dashboard-page) .cta-section > .container > div h2,
html.light-mode:not(.dashboard-page) .cta-section > .container > div p,
html.light-mode:not(.dashboard-page) .company-card[style*="phoenix-gradient"] h2,
html.light-mode:not(.dashboard-page) .company-card[style*="phoenix-gradient"] p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .phoenix-badge,
html.light-mode:not(.dashboard-page) .phoenix-badge,
html:not(.dashboard-page):not(.dark-mode) .step-number,
html.light-mode:not(.dashboard-page) .step-number,
html:not(.dashboard-page):not(.dark-mode) .plan-card.popular::after,
html.light-mode:not(.dashboard-page) .plan-card.popular::after {
    background: #0f766e !important;
    background-color: #0f766e !important;
    background-image: none !important;
    color: #ffffff !important;
}

html:not(.dashboard-page):not(.dark-mode) .info-card h3,
html:not(.dashboard-page):not(.dark-mode) .mission-section h2,
html:not(.dashboard-page):not(.dark-mode) .team-member h3,
html:not(.dashboard-page):not(.dark-mode) .docs-section h2,
html:not(.dashboard-page):not(.dark-mode) .info-box h4,
html.light-mode:not(.dashboard-page) .info-card h3,
html.light-mode:not(.dashboard-page) .mission-section h2,
html.light-mode:not(.dashboard-page) .team-member h3,
html.light-mode:not(.dashboard-page) .docs-section h2,
html.light-mode:not(.dashboard-page) .info-box h4 {
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .docs-section h3,
html:not(.dashboard-page):not(.dark-mode) .team-member .role,
html:not(.dashboard-page):not(.dark-mode) .info-card a,
html:not(.dashboard-page):not(.dark-mode) .docs-section code,
html.light-mode:not(.dashboard-page) .docs-section h3,
html.light-mode:not(.dashboard-page) .team-member .role,
html.light-mode:not(.dashboard-page) .info-card a,
html.light-mode:not(.dashboard-page) .docs-section code {
    color: #1d4ed8 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .warning-box h4,
html.light-mode:not(.dashboard-page) .warning-box h4 {
    color: #9a6700 !important;
}

html:not(.dashboard-page):not(.dark-mode) .plan-card.popular,
html.light-mode:not(.dashboard-page) .plan-card.popular {
    border-color: #0f766e !important;
    background: linear-gradient(180deg, #ffffff, #f0f8f6) !important;
}

html:not(.dashboard-page):not(.dark-mode) .plan-card::before,
html:not(.dashboard-page):not(.dark-mode) .plan-card.popular::before,
html.light-mode:not(.dashboard-page) .plan-card::before,
html.light-mode:not(.dashboard-page) .plan-card.popular::before {
    background: #0f766e !important;
}

html:not(.dashboard-page):not(.dark-mode) .footer-brand-title,
html:not(.dashboard-page):not(.dark-mode) .agents-hero h1,
html:not(.dashboard-page):not(.dark-mode) .agent-hero h1,
html:not(.dashboard-page):not(.dark-mode) .benefits-title,
html.light-mode:not(.dashboard-page) .footer-brand-title,
html.light-mode:not(.dashboard-page) .agents-hero h1,
html.light-mode:not(.dashboard-page) .agent-hero h1,
html.light-mode:not(.dashboard-page) .benefits-title {
    background: none !important;
    background-image: none !important;
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .footer-brand-tagline,
html:not(.dashboard-page):not(.dark-mode) .footer-links-list a,
html:not(.dashboard-page):not(.dark-mode) .footer-copyright p,
html:not(.dashboard-page):not(.dark-mode) .powered-by-text,
html.light-mode:not(.dashboard-page) .footer-brand-tagline,
html.light-mode:not(.dashboard-page) .footer-links-list a,
html.light-mode:not(.dashboard-page) .footer-copyright p,
html.light-mode:not(.dashboard-page) .powered-by-text {
    color: #53657a !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .footer-section-title,
html:not(.dashboard-page):not(.dark-mode) .powered-by-text strong,
html:not(.dashboard-page):not(.dark-mode) .footer-copyright strong,
html.light-mode:not(.dashboard-page) .footer-section-title,
html.light-mode:not(.dashboard-page) .powered-by-text strong,
html.light-mode:not(.dashboard-page) .footer-copyright strong {
    color: #172033 !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .footer-links-list a:hover,
html:not(.dashboard-page):not(.dark-mode) .social-link,
html.light-mode:not(.dashboard-page) .footer-links-list a:hover,
html.light-mode:not(.dashboard-page) .social-link {
    color: #0f766e !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dashboard-page):not(.dark-mode) .social-link:hover,
html.light-mode:not(.dashboard-page) .social-link:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}