:root {
    --primary: #2563eb;
    --primary-contrast: #ffffff;
    --bg: #f4f5f7;
    --card-bg: #ffffff;
    --text: #1f2933;
    --border: #e2e5e9;
    --font-family: 'Poppins';
}

* { box-sizing: border-box; }

button, input, select, textarea { font-family: inherit; }

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

body {
    margin: 0;
    font-family: var(--font-family), -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2, h3, h4 {
    font-family: var(--font-family), -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg) 100%);
}

.auth-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    padding: 2.8rem 2.5rem;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(17, 24, 39, 0.12);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 380px;
    transition: max-width 0.15s ease;
}

.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
}

.auth-card-wide {
    max-width: 680px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.auth-card-wide form label { margin-bottom: 0.7rem; }
.auth-card-wide .security-question-group { padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.auth-card-wide .muted { margin: 0 0 0.7rem; }

.auth-logo {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.auth-logo-img {
    max-height: 48px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

form input, form select {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-top: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form input:focus, form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-row { display: flex; gap: 1rem; }
.form-row > label { flex: 1; min-width: 0; }

.auth-card .btn {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.auth-card .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

.register-terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.security-question-group {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
}
.register-terms-check input[type="checkbox"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0.15rem 0 0;
    border: none;
    background: none;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.alert {
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error { background: #fde8e8; color: #9b1c1c; }
.alert-success { background: #def7ec; color: #03543f; }
.alert-warning { background: #fef3c7; color: #92400e; }

.topbar {
    background: #111827;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
}

.topbar-brand { font-weight: 700; }

.topbar-nav a {
    color: #d1d5db;
    text-decoration: none;
    margin-left: 1.2rem;
    font-size: 0.92rem;
}

.topbar-nav a:hover { color: #fff; }

.content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.stat-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

a.stat-card:hover {
    box-shadow: 0 0 0 1px var(--border), 0 4px 10px rgba(0,0,0,0.08);
}

.stat-value { font-size: 1.6rem; font-weight: 400; }
.stat-label { color: #6b7280; font-size: 0.85rem; margin-top: 0.3rem; }

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    margin-top: 1rem;
}

.fixed-table { table-layout: fixed; }

.table th, .table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.table th { color: #6b7280; font-weight: 600; }
.table tfoot td { font-size: 0.9rem; text-align: right; }

/* Line-item + totals tables (invoices, quotes, income forecast): the last column
   holds an amount, so it - and its header - stay right-aligned throughout thead,
   tbody and tfoot, matching the right-aligned Subtotal/Total labels above. */
.table-totals th:last-child, .table-totals td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.table tfoot td:first-child:not([colspan]) { padding-right: 1.5rem; }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}

.page-header h1, .page-header h2 { margin-bottom: 0; }

/* Every button/button-like link across the app - primary CTAs and secondary
   actions alike - renders at this one size, so no page ever ends up with a
   mismatched pair sitting side by side. */
.btn, .btn-sm, button {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    border: none;
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn:hover, .btn-sm:hover, button:hover { opacity: 0.9; }

.inline-form {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0;
}

.inline-form input, .inline-form select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.inline-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.inline-checkbox input {
    width: auto;
}

.editor-toolbar {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.editor-toolbar-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
}

.editor-toolbar-btn:hover {
    background: var(--bg);
}

.ai-generate { margin-top: 0.35rem; }
.ai-generate-toggle {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--primary);
    border-radius: 5px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ai-generate-toggle:hover { background: var(--bg); }
.ai-generate-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.ai-generate-input {
    flex: 1;
    min-width: 220px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 0.85rem;
    background: var(--card-bg);
    color: var(--text);
}
.ai-generate-run {
    background: var(--primary);
    color: var(--primary-contrast);
    border: none;
    border-radius: 5px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.ai-generate-run:disabled { opacity: 0.6; cursor: default; }
.ai-generate-status { font-size: 0.8rem; color: var(--text); opacity: 0.75; }

/* Fixed rather than a normal flex child of .client-shell (display:flex) - as a flow
   item it would stretch to the row's full cross-axis height (the sidebar/main-content
   row), rendering as a tall column instead of a thin top bar. .impersonating below
   compensates the space it takes up. */
.impersonation-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    background: #92400e;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
}
body.client-shell.impersonating { padding-top: 2.4rem; }

.impersonation-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.1rem !important;
}

.sortable-th:hover {
    color: var(--primary);
}

.sortable-th::after {
    content: '\2195';
    position: absolute;
    right: 0.3rem;
    opacity: 0.35;
    font-size: 0.8em;
}

.sortable-th.sorted-asc::after {
    content: '\2191';
    opacity: 1;
}

.sortable-th.sorted-desc::after {
    content: '\2193';
    opacity: 1;
}

.row-actions {
    white-space: nowrap;
}

.row-actions .btn-sm {
    margin-right: 0.3rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
}

.muted {
    color: #9ca0a8;
    font-size: 0.85rem;
}

.pie-chart-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.pie-chart-svg {
    width: 260px;
    height: 260px;
    flex-shrink: 0;
}

.pie-slice {
    stroke: var(--card-bg);
    stroke-width: 2;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.pie-slice:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

.pie-slice-label {
    font-size: 11px;
    font-weight: 600;
    fill: #fff;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.pie-center-value {
    font-size: 20px;
    font-weight: 700;
    fill: var(--text);
}

.pie-center-label {
    font-size: 11px;
    fill: #9ca0a8;
}

.pie-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 200px;
}

.pie-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.pie-legend i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}

.pie-legend-value {
    color: #9ca0a8;
    margin-left: auto;
    padding-left: 0.5rem;
    white-space: nowrap;
}

.whois-raw {
    background: var(--card-bg, #14151a);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    max-height: 500px;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
    background: #e5e7eb;
    color: #374151;
}

.badge-active, .badge-paid, .badge-completed { background: #def7ec; color: #03543f; }
.badge-pending, .badge-unpaid, .badge-draft { background: #fef3c7; color: #92400e; }
.badge-suspended, .badge-overdue, .badge-redemption { background: #fde8e8; color: #9b1c1c; }
.badge-terminated, .badge-cancelled, .badge-closed, .badge-inactive { background: #e5e7eb; color: #4b5563; }
.badge-priority-low { background: #e5e7eb; color: #4b5563; }
.badge-priority-medium { background: #fef3c7; color: #92400e; }
.badge-priority-high { background: #fde8e8; color: #9b1c1c; }
.badge-accepted { background: #def7ec; color: #03543f; }
.badge-declined { background: #fde8e8; color: #9b1c1c; }
.badge-sent { background: #e0e7ff; color: #3730a3; }
.badge-expired { background: #e5e7eb; color: #4b5563; }

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.card-form {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
    max-width: 780px;
}

.card-form-centered { margin-left: auto; margin-right: auto; }

.settings-form { max-width: none; padding: 2rem; }
.settings-form input[type="text"], .settings-form input[type="email"], .settings-form input[type="number"] { max-width: 320px; }
.settings-form textarea { max-width: 520px; }
.settings-field-wide { flex: 1 1 100%; }
.settings-field-spacer { flex: 1; min-width: 0; }
.settings-section-title { margin: 2rem 0 0.25rem; font-size: 1.05rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.settings-section-title-first { margin-top: 0; border-top: none; padding-top: 0; }
.settings-form-actions { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

.automation-section {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--border);
}
.automation-section:first-of-type { margin-top: 1.5rem; }
.automation-section h2 { margin-top: 0; margin-bottom: 0.3rem; }

.card-form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    flex: 1;
}

.card-form input, .card-form select, .card-form textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.65rem;
    margin-top: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
}

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

.form-row label { flex: 1; }

.checkbox-label input { width: auto; display: inline-block; margin-right: 0.4rem; }

/* Invisible bot-check honeypot field (App\Core\Captcha) - off-screen rather than
   display:none, since some bots specifically skip display:none fields when auto-filling. */
.hp-field { position: absolute; left: -5000px; top: -5000px; }

.ticket-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1.2rem;
    margin-top: 1rem;
    font-size: 0.88rem;
}

.ticket-meta-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca0a8;
    margin-bottom: 0.15rem;
}

.ticket-status-form {
    margin-left: auto;
}

.ticket-thread { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; }

.ticket-message {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    max-width: 640px;
}

.ticket-message-admin { align-self: flex-end; background: #eff6ff; border-color: #bfdbfe; }

.ticket-message-meta { font-size: 0.78rem; color: #6b7280; margin-bottom: 0.4rem; }
.ticket-message-body { font-size: 0.92rem; white-space: pre-wrap; }

/* ===================================================
   Dark admin theme (Blend Dark Mode inspired)
   =================================================== */

body.theme-dark {
    --bg: #17181c;
    --card-bg: #212227;
    --text: #d7d8dc;
    --border: #34353b;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.theme-dark a { color: #8ab4f8; }

/* The blanket "a" color above (for plain in-text links) has higher specificity
   than the component rules for these anchor-tag UI pieces, so it was silently
   winning and recoloring their text. Re-assert their intended colors here at
   matching specificity so they render as designed instead of as link-blue. */
body.theme-dark a.btn, body.theme-dark a.btn-sm { color: var(--primary-contrast, #fff); }
body.theme-dark .wh-topbar-brand { color: #fff; }
body.theme-dark .wh-quickadd { color: var(--primary-contrast, #fff); }
body.theme-dark .wh-profile { color: #fff; }
body.theme-dark .wh-topnav > a, body.theme-dark .wh-dropdown > a { color: #c3c4c9; }
body.theme-dark .wh-dropdown-menu a { color: #c3c4c9; }
body.theme-dark .wh-header-link { color: #e5e6ea; }
body.theme-dark .wh-header-link:hover { color: #fff; }
body.theme-dark .sidebar-brand { color: #fff; }
body.theme-dark .sidebar-nav a, body.theme-dark .sidebar-footer a, body.theme-dark .sidebar-section a { color: #b6b8bf; }

body.theme-dark .table th { color: #8b8d94; }
body.theme-dark .stat-label { color: #9ca0a8; }
body.theme-dark .ticket-message-meta { color: #9ca0a8; }

body.theme-dark .alert-error { background: #3a1f22; color: #f5a3ac; }
body.theme-dark .alert-success { background: #1c332a; color: #7fd7ab; }
body.theme-dark .alert-warning { background: #3a2f14; color: #fbbf24; }

body.theme-dark .badge { background: #34353b; color: #c8c9ce; }
body.theme-dark .badge-active, body.theme-dark .badge-paid, body.theme-dark .badge-completed { background: #16352a; color: #4ade80; }
body.theme-dark .badge-pending, body.theme-dark .badge-unpaid, body.theme-dark .badge-draft { background: #3a2f14; color: #fbbf24; }
body.theme-dark .badge-suspended, body.theme-dark .badge-overdue, body.theme-dark .badge-redemption { background: #3a1f22; color: #f87171; }
body.theme-dark .badge-terminated, body.theme-dark .badge-cancelled, body.theme-dark .badge-closed, body.theme-dark .badge-inactive { background: #34353b; color: #9ca0a8; }
body.theme-dark .badge-priority-low { background: #34353b; color: #9ca0a8; }
body.theme-dark .badge-priority-medium { background: #3a2f14; color: #fbbf24; }
body.theme-dark .badge-priority-high { background: #3a1f22; color: #f87171; }
body.theme-dark .badge-accepted { background: #16352a; color: #4ade80; }
body.theme-dark .badge-declined { background: #3a1f22; color: #f87171; }
body.theme-dark .badge-sent { background: #26264a; color: #a5b4fc; }
body.theme-dark .badge-expired { background: #34353b; color: #9ca0a8; }

body.theme-dark .ticket-message-admin { background: #1e2a3f; border-color: #2d4269; }

body.theme-dark .card-form input,
body.theme-dark .card-form select,
body.theme-dark .card-form textarea,
body.theme-dark .inline-form input,
body.theme-dark .inline-form select {
    background: #17181c;
    color: var(--text);
}

/* WHMCS-style top nav */

.wh-topbar {
    display: flex;
    align-items: center;
    background: #101114;
    border-bottom: 3px solid var(--primary);
    padding: 0 1rem;
    flex-shrink: 0;
    gap: 0.9rem;
}

.wh-topbar-logo-img {
    height: 38px;
    display: block;
}

.wh-topbar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    padding: 0.9rem 0.3rem;
}

.wh-quickadd {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.wh-topnav {
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
    flex: 1;
}

.wh-topnav > a, .wh-dropdown > a {
    display: flex;
    align-items: center;
    padding: 0.9rem 0.8rem;
    color: #c3c4c9;
    text-decoration: none;
    font-size: 0.88rem;
}

.wh-topnav > a:hover, .wh-dropdown:hover > a, .wh-topnav a.active { color: #fff; background: #1c1d22; }

.wh-dropdown { position: relative; }

.wh-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #212227;
    border: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    min-width: 170px;
    z-index: 30;
    flex-direction: column;
    padding: 0.4rem 0;
}

.wh-dropdown:hover .wh-dropdown-menu { display: flex; }

.wh-dropdown-menu a {
    padding: 0.5rem 1rem;
    color: #c3c4c9;
    text-decoration: none;
    font-size: 0.85rem;
}

.wh-dropdown-menu a:hover { background: #2a2b31; color: #fff; }

.wh-topbar-right { display: flex; align-items: center; gap: 0.6rem; }

.wh-header-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.35);
    color: #e5e6ea;
    background: transparent;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wh-header-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); color: #fff; }
.wh-dropdown-right .wh-dropdown-menu { left: auto; right: 0; }
.wh-dropdown-menu-wide { min-width: 260px; }
.wh-dropdown-menu-wide a { white-space: nowrap; }
.wh-dropdown-menu-nowrap { min-width: 260px; }
.wh-dropdown-menu-nowrap a { white-space: nowrap; }
.wh-dropdown-label { padding: 0.5rem 1rem 0.2rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #7d7f87; font-weight: 600; }
.wh-profile { color: #fff; text-decoration: none; font-size: 0.88rem; padding: 0.9rem 0.3rem; display: block; }

.wh-dropdown-submenu { position: relative; }

.wh-dropdown-submenu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: default;
}

.wh-dropdown-submenu-menu {
    display: none;
    position: absolute;
    top: -0.4rem;
    left: 100%;
    background: #212227;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 220px;
    z-index: 31;
    flex-direction: column;
    padding: 0.4rem 0;
}

.wh-dropdown-submenu:hover .wh-dropdown-submenu-menu { display: flex; }

.wh-dropdown-submenu-menu a {
    padding: 0.5rem 1rem;
    color: #c3c4c9;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}

.wh-dropdown-submenu-menu a:hover { background: #2a2b31; color: #fff; }

/* Sidebar shell */

.admin-shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar-section { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }

.sidebar-section-title {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: #7d7f87;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.sidebar-section a { display: block; color: #b6b8bf; text-decoration: none; font-size: 0.85rem; padding: 0.3rem 0; }
.sidebar-section a:hover { color: #fff; }

.sidebar-search { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-search input {
    background: #17181c;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: var(--text);
    font-size: 0.85rem;
}
.sidebar-search button {
    padding: 0.4rem;
    font-size: 0.82rem;
}

.sidebar-staff { color: #b6b8bf; font-size: 0.85rem; padding: 0.25rem 0; }

.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: #1b1c21;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.3rem 1.2rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    border-bottom: 1px solid var(--border);
}

.sidebar-brand span { color: #8ab4f8; font-weight: 400; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.8rem 0;
    flex: 1;
}

.sidebar-nav a {
    padding: 0.65rem 1.2rem;
    color: #b6b8bf;
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover { background: #24252b; color: #fff; }
.sidebar-nav a.active { background: #24252b; color: #fff; border-left-color: var(--primary); }

.sidebar-footer {
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--border);
}

.sidebar-footer a { color: #b6b8bf; text-decoration: none; font-size: 0.9rem; }
.sidebar-footer a:hover { color: #fff; }

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.8rem 1.8rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.admin-topbar-date { color: #9ca0a8; font-size: 0.85rem; }

.admin-main .content {
    max-width: none;
    margin: 0;
    padding-top: 1rem;
}

/* Colorful KPI cards (green / pink / orange / teal), matching the Blend dashboard style */

body.theme-dark .stat-grid .stat-card:nth-child(4n+1) { background: #1f7a4d; border-color: #1f7a4d; }
body.theme-dark .stat-grid .stat-card:nth-child(4n+2) { background: #b13c74; border-color: #b13c74; }
body.theme-dark .stat-grid .stat-card:nth-child(4n+3) { background: #b5720f; border-color: #b5720f; }
body.theme-dark .stat-grid .stat-card:nth-child(4n+4) { background: #1f8a8a; border-color: #1f8a8a; }

body.theme-dark .stat-grid .stat-card { color: #fff; }
body.theme-dark .stat-grid .stat-card .stat-label { color: rgba(255,255,255,0.85); }

/* Dashboard widget grid */

.widget-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1px;
    grid-auto-flow: dense;
    align-items: start;
    gap: 1rem;
    margin-top: 1.5rem;
}

.widget-wide { grid-column: 1 / -1; }

.widget {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.widget-header {
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}

.widget-body { padding: 1rem 1.1rem; }

.widget-header-actions {
    float: right;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 400;
}

.widget-header-actions form {
    display: inline;
}

.widget-header-actions button {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.widget-header-actions a,
.widget-header-actions button {
    opacity: 0.6;
}

.widget-header-actions a:hover,
.widget-header-actions button:hover {
    opacity: 1;
}

.widget-footer { padding: 0.6rem 1.1rem; border-top: 1px solid var(--border); }
.widget-footer a { font-size: 0.82rem; }

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

.billing-grid a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.billing-figure { font-size: 1.3rem; font-weight: 700; }
.billing-label { font-size: 0.78rem; color: #9ca0a8; margin-top: 0.2rem; }

.billing-green { color: #4ade80; }
.billing-orange { color: #fbbf24; }
.billing-pink { color: #f472b6; }
.billing-gray { color: var(--text); }

.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.feed-list li { font-size: 0.85rem; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; }
.feed-list li:last-child { border-bottom: none; padding-bottom: 0; }
.feed-meta { display: block; color: #9ca0a8; font-size: 0.76rem; margin-top: 0.15rem; }

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

.chart-svg { width: 100%; height: 280px; display: block; cursor: crosshair; }
.chart-legend { display: flex; gap: 1.2rem; margin-top: 0.6rem; font-size: 0.8rem; color: #9ca0a8; flex-wrap: wrap; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.4rem; }

.chart-wrap { position: relative; }
.chart-tooltip {
    position: absolute;
    top: 10px;
    background: #111827;
    color: #fff;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.6;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
    white-space: nowrap;
}
.chart-tooltip-date { font-weight: 700; margin-bottom: 0.15rem; }
.chart-tooltip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; }
.chart-crosshair-line { stroke: #9ca0a8; stroke-width: 1; stroke-dasharray: 3,3; }

.chart-summary { display: flex; gap: 1.8rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.chart-summary-item { display: flex; flex-direction: column; }
.chart-summary-item strong { font-size: 1.3rem; }
.chart-summary-item span { font-size: 0.75rem; color: #9ca0a8; }

.chart-range-slider { margin: 0.9rem 0 0.3rem; padding: 0 2px; }
.chart-range-slider input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
    height: 28px;
    cursor: pointer;
    touch-action: pan-y;
}
.chart-range-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--range-fill, 30%), var(--border) var(--range-fill, 30%), var(--border) 100%);
}
.chart-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--card-bg);
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    cursor: grab;
}
.chart-range-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.chart-range-slider input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--border);
}
.chart-range-slider input[type="range"]::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
}
.chart-range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--card-bg);
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    cursor: grab;
}

.sidebar-calendar { padding-bottom: 0.8rem; }
.sidebar-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.sidebar-calendar-header span { font-size: 0.78rem; font-weight: 600; color: #e5e7eb; }
.sidebar-calendar-header button {
    background: none;
    border: none;
    color: #b6b8bf;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.sidebar-calendar-header button:hover:not(:disabled) { background: #24252b; color: #fff; }
.sidebar-calendar-header button:disabled { opacity: 0.25; cursor: default; }

.mini-calendar-weekdays, .mini-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.mini-calendar-weekdays { margin-bottom: 0.25rem; }
.mini-calendar-weekdays span { text-align: center; font-size: 0.62rem; color: #7d7f87; font-weight: 600; }
.mini-calendar-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0.68rem;
    color: #b6b8bf;
    border-radius: 4px;
}
.mini-calendar-day-empty { visibility: hidden; }
.mini-calendar-day-today { background: var(--primary); color: var(--primary-contrast, #fff); font-weight: 700; }
.mini-calendar-day-clickable { cursor: pointer; }
.mini-calendar-day-clickable:hover { background: #24252b; color: #fff; }
.mini-calendar-day-selected:not(.mini-calendar-day-today) { background: #2f3038; color: #fff; box-shadow: inset 0 0 0 1px var(--primary); }
.mini-calendar-dots { position: absolute; bottom: 2px; display: flex; gap: 2px; }
.mini-calendar-dot { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }

.sidebar-calendar-detail {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: #17181c;
    border-radius: 6px;
    font-size: 0.75rem;
}
.sidebar-calendar-detail strong { display: block; color: #fff; margin-bottom: 0.3rem; }
.sidebar-calendar-detail a { display: block; color: #8ab4f8; text-decoration: none; padding: 0.15rem 0; }
.sidebar-calendar-detail a:hover { text-decoration: underline; }
.sidebar-calendar-note-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: #1f2025;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: #e5e7eb;
    font-size: 0.75rem;
    font-family: inherit;
    resize: vertical;
    min-height: 3.2rem;
}
.sidebar-calendar-note-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.sidebar-calendar-note-save {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    border: none;
    border-radius: 5px;
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    cursor: pointer;
}
.sidebar-calendar-note-save:hover { opacity: 0.9; }
.sidebar-calendar-note-status { font-size: 0.7rem; color: #9ca0a8; }
.icon-lock { vertical-align: -2px; margin-right: 0.15rem; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis-label { fill: #9ca0a8; font-size: 9px; }

.btn-active { background: var(--text); color: var(--bg); }

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.8rem;
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.bulk-bar .checkbox-label { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; }

.bulk-bar select {
    display: inline-block;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
}

.bulk-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
.bulk-count { color: #9ca0a8; font-size: 0.85rem; }

.report-tile { text-decoration: none; color: inherit; display: block; transition: border-color 0.15s; }
.report-tile:hover { border-color: var(--primary); }

.widget[draggable="true"] { cursor: grab; }
.widget.dragging { opacity: 0.4; }
.widget-drag-handle { cursor: grab; color: #6b6d76; margin-right: 0.3rem; font-size: 0.8rem; }
.widgets-locked .widget[draggable="false"] { cursor: default; }
.widgets-locked .widget-drag-handle { opacity: 0.25; cursor: default; }
.widget-grid .widget-header { user-select: none; }

/* ===================================================
   Client portal theme ("Control" inspired) with light/dark toggle
   =================================================== */

.client-shell {
    --bg: #f4f5f8;
    --card-bg: #ffffff;
    --text: #38414d;
    --border: #e6e8ec;
    display: flex;
    min-height: 100vh;
}

html[data-theme="dark"] .client-shell {
    --bg: #12161c;
    --card-bg: #1c212b;
    --text: #d7d8dc;
    --border: #2a303b;
}

.client-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #1c2536;
    display: flex;
    flex-direction: column;
}

.client-sidebar-brand {
    background: #1c2536;
    border-bottom: 3px solid var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1.1rem 1.2rem;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Only meaningful once the sidebar is a toggleable overlay (<=820px) - on desktop it's
   a permanent column with nothing to close. The "button." qualifier isn't decorative -
   .client-sidebar-close alone ties in specificity with the shared .theme-toggle base
   rule (display: flex) that comes later in this file, and a tie goes to whichever rule
   is later regardless of which one is "more specific" in intent - so a bare class here
   silently loses and the button never actually hides on desktop. */
button.client-sidebar-close { display: none; border-color: rgba(255,255,255,0.3); color: #fff; flex-shrink: 0; }
@media (max-width: 820px) {
    button.client-sidebar-close { display: flex; }
}

.client-sidebar-logo-img {
    max-height: 68px;
    max-width: 100%;
    display: block;
}

.client-sidebar-nav {
    flex: 1;
    padding: 0.8rem 0;
    display: flex;
    flex-direction: column;
}

.client-sidebar-nav a, .client-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.2rem;
    color: #a7b0c0;
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.client-sidebar-nav a svg, .client-sidebar-footer a svg { width: 18px; height: 18px; flex-shrink: 0; }

.client-sidebar-nav a:hover, .client-sidebar-footer a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.client-sidebar-nav a.active { background: rgba(255,255,255,0.08); color: var(--primary); }

.client-sidebar-footer { padding: 0.4rem 0 1rem; border-top: 1px solid rgba(255,255,255,0.08); }

/* "Accounts" nav group (Invoices/Statement/Quotes) - an accordion in the sidebar and the
   collapsed mobile nav, a hover/click flyout dropdown in the uncollapsed horizontal desktop
   nav. Shared between .client-sidebar-nav and .client-topnav-links; see the media queries
   further down for the flyout variant. */
.client-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1.2rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: #a7b0c0;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.client-nav-group-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.client-nav-group-toggle span { flex: 1; }
.client-nav-group-toggle:hover { background: rgba(255,255,255,0.05); color: #fff; }
.client-nav-group-toggle.active { background: rgba(255,255,255,0.08); color: var(--primary); }
.client-nav-chevron { transition: transform 0.15s ease; }
.client-nav-group.open .client-nav-chevron { transform: rotate(180deg); }

.client-nav-submenu { display: none; flex-direction: column; }
.client-nav-group.open .client-nav-submenu { display: flex; }
.client-sidebar-nav .client-nav-submenu a { padding-left: 2.6rem; font-size: 0.87rem; }

.client-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    padding: 0;
}

.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle-moon { display: none; align-items: center; }
html[data-theme="dark"] .theme-toggle-sun { display: none; }
html[data-theme="dark"] .theme-toggle-moon { display: flex; }

.client-topbar-user { font-size: 0.9rem; color: var(--text); }

.client-user-menu { position: relative; }

.client-user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.client-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 40;
    padding: 0.4rem;
}

.client-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.87rem;
    color: var(--text);
}

.client-user-dropdown a svg { width: 16px; height: 16px; flex-shrink: 0; }
.client-user-dropdown a:hover { background: var(--bg); }

.client-topbar-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.sidebar-burger { display: none; }

.client-main .content { max-width: none; margin: 0; padding: 2rem 1.8rem; flex: 1; }

.client-footer { flex-shrink: 0; }

.client-stat-grid .stat-card {
    border: none;
    text-decoration: none;
    display: block;
    color: #fff;
    transition: opacity 0.15s;
}

.client-stat-grid .stat-card:hover { opacity: 0.9; }
.client-stat-grid .stat-label { color: rgba(255,255,255,0.85); }

.client-stat-grid .stat-card-red { background: #e2685f; }
.client-stat-grid .stat-card-green { background: #3ec9a7; }
.client-stat-grid .stat-card-blue { background: #5b9bd5; }
.client-stat-grid .stat-card-purple { background: #9b7fd4; }

html[data-theme="dark"] .client-shell .alert-error { background: #3a1f22; color: #f5a3ac; }
html[data-theme="dark"] .client-shell .alert-success { background: #1c332a; color: #7fd7ab; }

html[data-theme="dark"] .client-shell .badge { background: #2a303b; color: #c8c9ce; }
html[data-theme="dark"] .client-shell .badge-active, html[data-theme="dark"] .client-shell .badge-paid, html[data-theme="dark"] .client-shell .badge-completed { background: #16352a; color: #4ade80; }
html[data-theme="dark"] .client-shell .badge-pending, html[data-theme="dark"] .client-shell .badge-unpaid, html[data-theme="dark"] .client-shell .badge-draft { background: #3a2f14; color: #fbbf24; }
html[data-theme="dark"] .client-shell .badge-suspended, html[data-theme="dark"] .client-shell .badge-overdue, html[data-theme="dark"] .client-shell .badge-redemption { background: #3a1f22; color: #f87171; }
html[data-theme="dark"] .client-shell .badge-terminated, html[data-theme="dark"] .client-shell .badge-cancelled, html[data-theme="dark"] .client-shell .badge-closed, html[data-theme="dark"] .client-shell .badge-inactive { background: #2a303b; color: #9ca0a8; }

html[data-theme="dark"] .client-shell .card-form input,
html[data-theme="dark"] .client-shell .card-form select,
html[data-theme="dark"] .client-shell .card-form textarea {
    background: #12161c;
    color: var(--text);
}

html[data-theme="dark"] .client-shell .ticket-message-admin { background: #1e2a3f; border-color: #2d4269; }

@media (max-width: 820px) {
    /* Full-width panel that unrolls downward from the top edge, rather than a narrow
       column sliding in from the side - covers the same full height once open either
       way, just enters on the vertical axis instead of the horizontal one. */
    .client-sidebar { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; z-index: 20; transform: translateY(-100%); transition: transform 0.2s; }
    .client-sidebar.open { transform: translateY(0); }
    .client-main { width: 100%; }
    .sidebar-burger { display: flex; }
}

/* ===================================================
   Client portal: layout-position toggle (left sidebar / top menu)
   =================================================== */

.layout-toggle-sidebar-icon { display: flex; align-items: center; }
.layout-toggle-top-icon { display: none; align-items: center; }
html[data-menu="top"] .layout-toggle-sidebar-icon { display: none; }
html[data-menu="top"] .layout-toggle-top-icon { display: flex; }

.client-topnav-corner {
    /* Anchored a fixed distance from the bar's own top edge (not centered on the whole
       bar) - the bar's height varies when its content wraps to extra rows on narrow
       screens, and centering on the full (variable) height made this float ambiguously
       between rows instead of sitting cleanly in the top-right corner. */
    position: absolute;
    top: 0.85rem;
    right: 1.2rem;
}

.client-topnav-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #1c2536;
    border-bottom: 3px solid var(--primary);
    padding: 0 1.2rem;
    gap: 1rem;
    flex-shrink: 0;
}

/* In sidebar mode, .client-topnav-bar (icons only) sits beside .client-sidebar-brand
   (the logo block) at the top of the page - match its height so their teal borders
   form one continuous line across the page instead of stepping at the seam. */
html:not([data-menu="top"]) .client-topnav-bar { min-height: 89px; }

@media (max-width: 820px) {
    /* Top-mode: stacked and centered (logo alone on its row, icons centered below) -
       there's no room for a normal single-row logo-left/icons-right layout once the
       nav has collapsed to a hamburger at this width. */
    html[data-menu="top"] .client-topnav-bar { justify-content: center; padding-top: 0.3rem; padding-bottom: 1.25rem; gap: 0.4rem; }
    html[data-menu="top"] .client-topbar-right { margin-left: 0; }
    html[data-menu="top"] .client-topnav-brand { flex-basis: 100%; justify-content: center; }

    /* Sidebar mode: the sidebar itself (and its own logo) goes off-canvas at this width,
       so show a substitute logo directly in the topnav-bar instead of leaving the header
       logo-less - a normal single row, logo left, icons right, same as desktop (not the
       stacked/centered top-mode treatment above, which this width would otherwise have
       room to avoid). */
    html:not([data-menu="top"]) .client-topnav-brand { display: flex; }
}

/* Sidebar/top-menu layout toggle - hidden on phones (both orientations), same as the
   public site's horizontal/vertical toggle: there's no realistic case for a horizontal
   top-menu on a phone-width screen, so the choice is meaningless there and it only
   crowds the icon row. Kept for tablet widths and up. */
@media (max-width: 930px) {
    .client-layout-toggle { display: none; }
}

@media (max-width: 480px) {
    /* Symmetric padding here (no reserved right-hand gap) - the corner badge is just a
       small chevron at this width (the name text is hidden below), so it doesn't need
       the wider reservation the corner's fuller content needs at 481-820px, and giving
       it one anyway would pull the centered logo/icons off true center. */
    .client-topnav-bar { gap: 0.3rem; padding: 0.3rem 0.9rem 1.25rem; }
    .client-topbar-right { gap: 0.5rem; }
    .client-topbar-guest { display: none; }
    .client-topbar-user-name { display: none; }
    .client-topnav-corner { right: 0.9rem; }
}

/* Space is reserved for the corner badge ("Hi, Name") dynamically via JS (see
   alignCorner in the layout script) instead of a fixed guess here - a short name
   shouldn't waste nav width a longer one would actually need to avoid overlapping it. */

.client-topnav-brand, .client-topnav-links { display: none; }
html[data-menu="top"] .client-topnav-brand { display: flex; }
html[data-menu="top"] .client-topnav-links { display: flex; }

.client-topnav-bar .theme-toggle {
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.client-topnav-bar .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.5); }
.client-topnav-bar .client-topbar-user,
.client-topnav-bar .client-user-menu-toggle { color: #fff; }

.client-topnav-brand {
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 0.85rem 0;
    margin-right: 0.5rem;
    white-space: nowrap;
}

.client-topnav-logo-img { max-height: 50px; display: block; }

/* This override must come after the unconditional rule above (same specificity) - a
   media query placed before a same-specificity base rule loses the cascade regardless
   of whether it matches, so it has to sit later in the file to actually win here.
   42px matches the public site's mobile logo (see .marketing-nav-logo-img) - the
   largest height that still leaves the burger/cart/theme icons at their full size
   without wrapping to a second row. */
@media (max-width: 480px) {
    .client-topnav-logo-img { max-height: 44px; }
}

.client-topnav-links {
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}

.client-topnav-links a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #a7b0c0;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.9rem 0.7rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.client-topnav-links a svg { width: 16px; height: 16px; flex-shrink: 0; }
.client-topnav-links a:hover { color: #fff; }
.client-topnav-links a.active { color: var(--primary); }

/* Icon-only on the horizontal nav specifically (the sidebar's own Dashboard link keeps
   its label - plenty of room there) - saves enough width to make the horizontal nav
   achievable on more common desktop screens. */
.client-topnav-links .client-nav-home span { display: none; }

/* "Accounts" group on the uncollapsed horizontal nav: same look as the plain links, with
   a flyout dropdown instead of the sidebar's inline accordion. */
.client-topnav-links .client-nav-group { position: relative; }
.client-topnav-links .client-nav-group-toggle {
    gap: 0.4rem;
    width: auto;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.9rem 0.7rem;
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.client-topnav-links .client-nav-group-toggle svg:first-child { width: 16px; height: 16px; }
.client-topnav-links .client-nav-group-toggle span { flex: none; }
.client-topnav-links .client-nav-group-toggle:hover { background: none; color: #fff; }
.client-topnav-links .client-nav-group-toggle.active { background: none; color: var(--primary); }
.client-topnav-links .client-nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 170px;
    background: #1c2536;
    border-bottom: 3px solid var(--primary);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    z-index: 35;
}
.client-topnav-links .client-nav-group:hover .client-nav-submenu { display: flex; }
.client-topnav-links .client-nav-submenu a { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }

.client-topnav-logout {
    color: #a7b0c0;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.client-topnav-logout svg { width: 16px; height: 16px; }
.client-topnav-logout:hover { color: #fff; }

html[data-menu="top"] .client-sidebar { display: none; }
html[data-menu="top"] .client-main { width: 100%; }
html[data-menu="top"] .sidebar-burger { display: none; }

/* Nav-collapsed is toggled by JS once the horizontal nav no longer fits -
   this is content-length-dependent (a guest's single Knowledgebase link
   fits far narrower than a client's full nav), so a fixed width breakpoint
   can't serve both; see the collapse-measuring script at the bottom of
   this layout. */
html[data-menu="top"].nav-collapsed .client-topnav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #1c2536;
    border-bottom: 3px solid var(--primary);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 30;
}
html[data-menu="top"].nav-collapsed .client-topnav-links.open { display: flex; }
html[data-menu="top"].nav-collapsed .client-topnav-links a { padding: 0.85rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html[data-menu="top"].nav-collapsed .sidebar-burger { display: flex; }

/* Once the horizontal nav is collapsed into the mobile dropdown, "Accounts" reverts to
   the same inline accordion as the sidebar instead of the desktop flyout. */
html[data-menu="top"].nav-collapsed .client-topnav-links .client-nav-group-toggle {
    width: 100%;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
    font-weight: 500;
}
html[data-menu="top"].nav-collapsed .client-topnav-links .client-nav-group-toggle span { flex: 1; }
html[data-menu="top"].nav-collapsed .client-topnav-links .client-nav-group:hover .client-nav-submenu { display: none; }
html[data-menu="top"].nav-collapsed .client-topnav-links .client-nav-group.open .client-nav-submenu { display: flex; }
html[data-menu="top"].nav-collapsed .client-topnav-links .client-nav-submenu {
    position: static;
    min-width: 0;
    background: rgba(0,0,0,0.15);
    border-bottom: none;
    box-shadow: none;
}
html[data-menu="top"].nav-collapsed .client-topnav-links .client-nav-submenu a { padding: 0.7rem 1.2rem 0.7rem 2.6rem; }

/* ===================================================
   Client portal: redesigned dashboard (account card,
   notice banners, icon stat tiles)
   =================================================== */

.client-account-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.3rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.client-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}

.client-account-info { flex: 1; min-width: 220px; }

.client-account-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.client-account-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.client-account-meta span { display: flex; align-items: center; gap: 0.35rem; }
.client-account-meta svg { width: 14px; height: 14px; flex-shrink: 0; }

.client-balance-boxes { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.client-balance-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    min-width: 140px;
}

.client-balance-box-due { border-color: #f5b3ad; background: #fef2f1; }
html[data-theme="dark"] .client-balance-box-due { border-color: #5c2a26; background: #2a1715; }

.client-balance-amount { font-size: 1.15rem; font-weight: 700; }
.client-balance-box-due .client-balance-amount { color: #dc2626; }
.client-balance-label { font-size: 0.78rem; color: #6b7280; margin-top: 0.15rem; }

.client-notice {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.8rem;
}

.client-notice-danger { border-left-color: #dc2626; }

.client-notice svg { width: 22px; height: 22px; flex-shrink: 0; color: #f59e0b; }
.client-notice-danger svg { color: #dc2626; }

.client-notice-body { flex: 1; }
.client-notice-title { font-weight: 700; font-size: 0.92rem; }
.client-notice-text { font-size: 0.85rem; color: #6b7280; margin-top: 0.15rem; }

.client-stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.client-stat-tile {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease;
}

.client-stat-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.client-stat-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.7rem;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.client-stat-tile-icon svg { width: 20px; height: 20px; }

.client-stat-tile-value { font-size: 1.5rem; font-weight: 700; }
.client-stat-tile-label { color: #6b7280; font-size: 0.85rem; margin-top: 0.2rem; }

.client-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 2rem 0 0.8rem;
}

.client-section-head h2 { margin: 0; }
.client-section-head a { font-size: 0.85rem; }

/* Dashboard: Services and Recent Invoices tables sit one above the other, so their
   columns are pinned to matching widths to line up even though the two tables have
   different headers/content. */
.dashboard-align-table { table-layout: fixed; }
.dashboard-align-table th:nth-child(1), .dashboard-align-table td:nth-child(1) { width: 32%; }
.dashboard-align-table th:nth-child(2), .dashboard-align-table td:nth-child(2) { width: 28%; }
.dashboard-align-table th:nth-child(3), .dashboard-align-table td:nth-child(3) { width: 20%; }
.dashboard-align-table th:nth-child(4), .dashboard-align-table td:nth-child(4) { width: 20%; }

html[data-theme="dark"] .client-account-meta { color: #9ca0a8; }
html[data-theme="dark"] .client-notice-text { color: #9ca0a8; }
html[data-theme="dark"] .client-stat-tile-label { color: #9ca0a8; }
html[data-theme="dark"] .client-balance-label { color: #9ca0a8; }

input[type="color"] { width: 60px; height: 42px; padding: 4px; cursor: pointer; }
.color-swatches { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.color-swatch:hover { border-color: var(--text); }

/* Small on/off toggle switch - green/primary when on, orange when off (used for
   quick enable/disable actions like the admin product list). */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 21px; cursor: pointer; vertical-align: middle; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-switch-track { position: absolute; inset: 0; background: #ea580c; border-radius: 999px; transition: background 0.15s ease; }
.toggle-switch-track::before { content: ''; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; }
.toggle-switch input:checked ~ .toggle-switch-track { background: var(--primary); }
.toggle-switch input:checked ~ .toggle-switch-track::before { transform: translateX(17px); }
.toggle-switch input:focus-visible ~ .toggle-switch-track { box-shadow: 0 0 0 2px var(--border); }

/* ===================================================
   Admin panel: mobile responsiveness
   =================================================== */

.wh-nav-burger {
    display: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #34353b;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.wh-nav-burger svg { width: 18px; height: 18px; }

/* Desktop default: the collapse wrapper is just a transparent flex row so the
   topnav + profile menu sit exactly as they did before the wrapper existed -
   topnav filling the middle, the admin link pinned to the far right. The
   mobile media query below is what turns it into a toggleable dropdown. */
.wh-topbar-collapse {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .wh-nav-burger { display: flex; }
    .wh-topbar { flex-wrap: wrap; padding: 0.6rem 1rem; }

    .wh-topbar-collapse { display: none; width: 100%; flex-direction: column; order: 3; }
    .wh-topbar-collapse.open { display: flex; }

    .wh-topnav { flex-direction: column; align-items: stretch; gap: 0; }
    .wh-topnav > a, .wh-dropdown > a { padding: 0.7rem 0.5rem; }

    .wh-topnav .wh-dropdown-menu, .wh-topbar-right .wh-dropdown-menu {
        display: flex;
        position: static;
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0 0 0.4rem 1.2rem;
        min-width: 0;
    }

    .wh-topbar-right {
        flex-direction: column;
        align-items: stretch;
        padding-top: 0.5rem;
        border-top: 1px solid #26272c;
    }

    .wh-profile { padding: 0.6rem 0.5rem; }

    .admin-shell { flex-direction: column; }
    .sidebar { display: none; }

    .admin-topbar { padding: 0.6rem 1rem; }
    .admin-main .content { padding: 1.2rem 1rem; }

    .page-header { flex-wrap: wrap; gap: 0.6rem; }
    .form-row { flex-wrap: wrap; }
    .inline-form { flex-wrap: wrap; }

    .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===================================================
   Client portal: domain search / register / transfer bar
   =================================================== */

.domain-search-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.2rem 0 2rem;
}

.domain-search-card h2 { margin-top: 0; }

.domain-search-bar {
    display: flex;
    gap: 0.6rem;
}

.domain-search-bar input {
    flex: 1;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
}

.domain-results-table { margin-top: 1.2rem; }

.domain-congrats {
    background: #def7ec;
    color: #03543f;
    border: 1px solid #b0e6c9;
    border-radius: 8px;
    padding: 0.8rem 1.1rem;
    margin-top: 1rem;
    font-size: 0.92rem;
}
html[data-theme="dark"] .domain-congrats { background: #1c332a; color: #7fd7ab; border-color: #29513f; }

.domain-sorry {
    background: #fef3e2;
    color: #92400e;
    border: 1px solid #fcd9a8;
    border-radius: 8px;
    padding: 0.8rem 1.1rem;
    margin-top: 1rem;
    font-size: 0.92rem;
}
html[data-theme="dark"] .domain-sorry { background: #3a2f14; color: #fbbf24; border-color: #5c4a1f; }

/* Homepage domain search result, shown as a lightbox instead of an inline banner. */
.domain-result-card { text-align: center; }
.domain-result-card h1 { margin: 0.2rem 0 0.6rem; }
.domain-result-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.domain-result-icon svg { width: 28px; height: 28px; }
.domain-result-card-success .domain-result-icon { background: #16a34a; }
.domain-result-card-taken .domain-result-icon { background: #dc2626; }
.domain-result-card .btn { margin-top: 1rem; }

.domain-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1rem;
}
.domain-result-actions .btn,
.domain-result-actions .btn-sm { margin-top: 0; }

.client-cart-wrap { position: relative; }

.client-cart-badge {
    position: relative;
    display: inline-flex;
}

.client-cart-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 40;
}

@media (max-width: 820px) {
    /* The cart icon can sit anywhere in the centered header at this width, so anchoring
       the popup to it (via `right: 0` above) can push it off-screen - pin it to the
       viewport instead. JS sets `top` to just below the header bar (see positionCartPopup). */
    .client-cart-popup {
        position: fixed;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
    }
}

.client-cart-popup-header {
    padding: 0.8rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.client-cart-popup-body { padding: 0.4rem 0; }

.client-cart-empty { padding: 1rem; color: #6b7280; font-size: 0.85rem; margin: 0; }

.client-cart-confirm {
    background: #def7ec;
    color: #03543f;
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .client-cart-confirm { background: #1c332a; color: #7fd7ab; }

.client-cart-upsell {
    background: #eef2ff;
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.client-cart-upsell p { margin: 0; color: #363f8c; }
.client-cart-upsell .btn-sm { white-space: nowrap; }
html[data-theme="dark"] .client-cart-upsell { background: #1e2338; }
html[data-theme="dark"] .client-cart-upsell p { color: #b3bbf5; }

.client-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
}

.client-cart-item-info {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    gap: 0.1rem;
}

.client-cart-item-info .muted { font-size: 0.76rem; text-transform: capitalize; }

.client-cart-popup-footer { padding: 0.7rem 1rem; text-align: center; }
.client-cart-popup-footer .btn-sm { width: 100%; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.product-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.4rem 1.3rem 1.3rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
}

.product-card-name {
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin: 0 0 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border);
}

.product-card-name span { display: block; }

.product-card-price { font-size: 1.3rem; font-weight: 500; }
.product-card-setup { font-size: 0.78rem; margin-top: 0.2rem; }

.product-feature-list {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    flex: 1;
    font-size: 0.85rem;
    color: #6b7280;
}

.product-feature-list li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.product-feature-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}

html[data-theme="dark"] .product-feature-list { color: #9ca0a8; }
.product-card-btn { margin-top: 1rem; text-align: center; }

.field-hint { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: #dc2626; }

.order-summary {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 1rem 0;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.3rem 0;
}

.order-summary-total {
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    font-weight: 700;
    font-size: 1rem;
}

/* ===================================================
   Client portal: unified cart / checkout page
   =================================================== */

.cart-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 1.2rem;
}

.cart-empty-state p { font-size: 1.05rem; color: #6b7280; margin-bottom: 1.2rem; }
.cart-empty-actions { display: flex; gap: 0.7rem; justify-content: center; }

.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    margin-top: 1.2rem;
    align-items: start;
}

.cart-items-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.cart-line-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
}
.cart-line-item:last-child { border-bottom: none; }

.cart-line-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.cart-line-info { flex: 1; min-width: 0; }
.cart-line-title { font-weight: 600; font-size: 0.95rem; }
.cart-line-meta { font-size: 0.8rem; color: #6b7280; margin-top: 0.15rem; }

.cart-line-price {
    text-align: right;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
}
.cart-line-price .muted { display: block; font-weight: 400; font-size: 0.74rem; }

.cart-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.3rem;
    position: sticky;
    top: 1rem;
}

.cart-summary-card h2 { margin-top: 0; font-size: 1.05rem; }

.cart-checkout-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-continue-link {
    display: block;
    text-align: center;
    margin-top: 0.8rem;
    font-size: 0.85rem;
}

html[data-theme="dark"] .cart-line-meta { color: #9ca0a8; }
html[data-theme="dark"] .cart-empty-state p { color: #9ca0a8; }

@media (max-width: 760px) {
    .cart-page-grid { grid-template-columns: 1fr; }
    .cart-summary-card { position: static; }
}

.order-steps {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
    margin: 1rem 0 1.6rem;
}

.order-step {
    flex: 1;
    display: flex;
    gap: 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.order-step-arrow {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    color: #9ca0a8;
}

.order-step-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    background: #e6e8ec;
    color: #6b7280;
}

.order-step-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.25rem; }
.order-step-desc { font-size: 0.82rem; color: #6b7280; margin-bottom: 0.5rem; }
.order-step-link { font-size: 0.82rem; }

.order-step-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.order-step-active .order-step-num { background: var(--primary); color: var(--primary-contrast, #fff); }

.order-step-done .order-step-num { background: #16a34a; color: #fff; }

.order-step-locked { opacity: 0.6; }

html[data-theme="dark"] .order-step-num { background: #2a303b; color: #9ca0a8; }
html[data-theme="dark"] .order-step-desc { color: #9ca0a8; }
html[data-theme="dark"] .order-step-arrow { color: #4b5563; }

@media (max-width: 700px) {
    .order-steps { flex-direction: column; }
    .order-step-arrow { display: none; }
}

.product-card-disabled { opacity: 0.6; }
.product-card-disabled .product-card-btn { pointer-events: none; }

.client-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
}

.domain-transfer-details {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}

.domain-transfer-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--primary);
}

.domain-transfer-details form { margin-top: 0.8rem; }

.domain-pricelist-card { margin-top: 1.5rem; }
.domain-pricelist-card summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
}
.domain-pricelist-body { margin-top: 1rem; }

.domain-pricelist-filter {
    width: 100%;
    max-width: 320px;
    margin-bottom: 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .domain-search-bar { flex-direction: column; }
}

/* ===================================================
   Public marketing homepage
   =================================================== */

.marketing-shell { min-height: 100vh; }

html[data-theme="dark"] .marketing-shell {
    --bg: #12161c;
    --card-bg: #1c212b;
    --text: #d7d8dc;
    --border: #2a303b;
}

html[data-theme="dark"] .marketing-shell .alert-error { background: #3a1f22; color: #f5a3ac; }
html[data-theme="dark"] .marketing-shell .alert-success { background: #1c332a; color: #7fd7ab; }
html[data-theme="dark"] .marketing-shell .badge { background: #2a303b; color: #c8c9ce; }
html[data-theme="dark"] .marketing-shell .badge-active { background: #16352a; color: #4ade80; }
html[data-theme="dark"] .marketing-shell .badge-pending { background: #3a2f14; color: #fbbf24; }
html[data-theme="dark"] .marketing-shell .badge-inactive { background: #2a303b; color: #9ca0a8; }

/* Public site: horizontal nav bar (default) vs. a real left sidebar (vertical mode) -
   the same two-mode model as the client portal, including the same auto-fallback (JS
   switches to vertical whenever the horizontal nav doesn't fit) and the same
   off-canvas-below-820px behavior for the sidebar. See client-sidebar/.client-shell
   above for the pattern this mirrors. */
.marketing-shell { display: flex; min-height: 100vh; }

.marketing-sidebar {
    display: none;
    width: 220px;
    flex-shrink: 0;
    background: #1c2536;
    flex-direction: column;
}
.marketing-shell.vertical-menu .marketing-sidebar { display: flex; }

.marketing-sidebar-brand {
    background: #1c2536;
    border-bottom: 3px solid var(--primary);
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.marketing-sidebar-brand a { color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; display: block; }
.marketing-sidebar-logo-img { max-height: 48px; max-width: 100%; display: block; }
/* Only meaningful once the sidebar is a toggleable overlay (<=820px) - above that it's
   a permanent column (same as the client portal's desktop sidebar) with nothing to
   close. */
button.marketing-sidebar-close { display: none; border-color: rgba(255,255,255,0.3); color: #fff; flex-shrink: 0; }
@media (max-width: 820px) {
    button.marketing-sidebar-close { display: flex; }
}

.marketing-sidebar-nav { flex: 1; padding: 0.8rem 0; display: flex; flex-direction: column; }
.marketing-sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 0.7rem 1.2rem;
    color: #a7b0c0;
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}
.marketing-sidebar-nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }

.marketing-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Flex items default to min-width:auto (their content's min-content size), not 0 - so
   a wide grid inside one of these sections (e.g. a minmax()-based product grid) could
   refuse to shrink below that width and push the whole column wider than the viewport.
   min-width:0 here lets each section actually shrink to fit like a normal block would. */
.marketing-main > * { min-width: 0; }

@media (max-width: 820px) {
    /* Full-width panel that unrolls downward from the top edge, rather than a narrow
       column sliding in from the side - covers the same full height once open either
       way, just enters on the vertical axis instead of the horizontal one. */
    .marketing-shell.vertical-menu .marketing-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: 40;
        transform: translateY(-100%);
        transition: transform 0.2s;
    }
    .marketing-shell.vertical-menu .marketing-sidebar.open { transform: translateY(0); }
}

.marketing-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.8rem;
    background: #1c2536;
    border-bottom: 3px solid var(--primary);
}

/* In vertical mode, .marketing-nav (icons only, once the logo moves into the sidebar)
   sits beside .marketing-sidebar-brand at the top of the page - match its height so
   their teal borders form one continuous line instead of stepping at the seam. */
.marketing-shell.vertical-menu .marketing-nav { min-height: 86px; }

/* Vertical mode: the horizontal links move into the sidebar, so hide them (and the
   logo, which now lives in the sidebar's own brand block) from the header - except
   below 820px, where the sidebar goes off-canvas and the header needs a substitute
   logo and a burger to open it, same as the client portal. */
.marketing-shell.vertical-menu .marketing-nav-links { display: none; }
.marketing-shell.vertical-menu .marketing-nav-brand { display: none; }
.marketing-shell.vertical-menu .marketing-nav-layout-toggle { margin-left: auto; }

.marketing-nav-burger { display: none; }
@media (max-width: 820px) {
    /* Logo stays alone on the left (same as the client portal); the burger joins the
       icon cluster on the right instead of sitting next to the logo - it's now the
       first visible item after the logo in the markup (nav-links and the layout
       toggle are both hidden here), so it's the one that gets the auto margin. */
    .marketing-shell.vertical-menu .marketing-nav-brand { display: flex; }
    .marketing-shell.vertical-menu .marketing-nav-burger { display: flex; margin-left: auto; }
    .marketing-shell.vertical-menu .marketing-nav-layout-toggle { margin-left: 0; }
}

/* Manual layout toggle - lets a visitor force vertical (sidebar) mode even when the
   horizontal nav would otherwise fit, or switch back. Icon shows the layout clicking
   it switches TO. */
.marketing-nav .layout-toggle-sidebar-icon { display: flex; align-items: center; }
.marketing-nav .layout-toggle-top-icon { display: none; align-items: center; }
.marketing-shell.vertical-menu .layout-toggle-sidebar-icon { display: none; }
.marketing-shell.vertical-menu .layout-toggle-top-icon { display: flex; }

/* Hidden on phones (both orientations) - horizontal never realistically fits there
   (it always auto-falls-back to the sidebar), so the choice is meaningless and it only
   crowds the logo; kept for tablet widths and up, where the nav can genuinely go
   either way. The substitute logo gets a bit more room once the toggle is gone. */
@media (max-width: 930px) {
    .marketing-nav-layout-toggle { display: none; }
    .marketing-shell.vertical-menu .marketing-nav-logo-img { max-height: 52px; }
}

.marketing-nav .theme-toggle { border-color: rgba(255,255,255,0.2); color: #a7b0c0; }
.marketing-nav .theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

.marketing-nav-brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    padding: 0.85rem 0;
    white-space: nowrap;
}
.marketing-nav-logo-img { max-height: 48px; display: block; }

.marketing-nav-links { display: flex; gap: 0.3rem; margin-left: 1rem; flex: 1; }
.marketing-nav-links a {
    display: flex;
    align-items: center;
    color: #a7b0c0;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.9rem 0.7rem;
    white-space: nowrap;
}
.marketing-nav-links a:hover { color: #fff; }

.marketing-nav-login {
    white-space: nowrap;
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}
.marketing-nav-login:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); opacity: 1; }

.marketing-hero-banner { line-height: 0; }

.marketing-hero-banner-wrap { position: relative; }

.marketing-hero-banner-link { display: block; }

.marketing-hero-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.marketing-hero-banner-lights {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .marketing-hero-banner-lights { display: none; }
}

.marketing-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
    padding: 1.8rem 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    width: 100%;
}
.marketing-trust-item { font-size: 0.85rem; color: #6b7280; text-align: center; }
.marketing-trust-item strong { display: block; font-size: 1.2rem; color: var(--text); font-weight: 800; text-align: center; }

.marketing-hero-search {
    display: flex;
    gap: 0.6rem;
    max-width: 560px;
    margin: 0 auto;
    background: var(--card-bg);
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.1);
    border: 1px solid var(--border);
}

.marketing-hero-search input {
    flex: 1;
    padding: 0.75rem 0.9rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    background: transparent;
    color: var(--text);
}
.marketing-hero-search input:focus { outline: none; }

.marketing-hero-search button {
    padding: 0.75rem 1.6rem;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.marketing-hero-search button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

.marketing-tld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.1rem;
    max-width: 1100px;
    margin: 1.8rem auto 0;
    width: 100%;
    min-width: 0;
}

.marketing-tld-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 5px solid var(--primary);
    border-radius: 12px;
    padding: 1.4rem 1rem;
    text-align: center;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.marketing-tld-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12); }
.marketing-tld-card-orange { border-top-color: #fb923c; }
.marketing-tld-card-rose { border-top-color: #fb7185; }
.marketing-tld-card-teal { border-top-color: #2dd4bf; }

.marketing-tld-card-name { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.marketing-tld-card-price { font-size: 1.15rem; font-weight: 700; color: var(--primary); margin: 0.4rem 0 0.9rem; }
.marketing-tld-card-price span { font-size: 0.78rem; font-weight: 500; color: #6b7280; }
.marketing-tld-card-btn {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    font-weight: 700;
    font-size: 0.82rem;
    font-family: inherit;
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}
.marketing-tld-card-btn:hover { opacity: 0.9; }

.marketing-tld-viewall { text-align: center; margin: 1.5rem 0 0; }
.marketing-tld-viewall a { font-weight: 700; color: var(--primary); }

/* Full domain pricelist page (/domain-pricing) */
.marketing-hero-search-input-standalone {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 2rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text);
}

.marketing-hero-results {
    max-width: 720px;
    margin: 2rem auto 0;
    text-align: left;
}

/* width:100% matters here, not just cosmetic - .marketing-main is a column flexbox, and
   a flex item with an auto cross-axis margin (the "margin: 0 auto" centering trick)
   has stretch alignment disabled per spec, falling back to fit-content sizing instead
   of filling the container. That let an auto-fit/minmax() grid inside compute far more
   columns than actually fit, overflowing the page horizontally. An explicit width makes
   the item's size definite again regardless of the auto margins. */
.marketing-section { width: 100%; max-width: 1320px; margin: 0 auto; padding: 3.5rem 1.8rem; }
.marketing-section-alt { width: 100%; background: var(--card-bg); max-width: none; }
.marketing-section-alt > * { max-width: 1320px; margin-left: auto; margin-right: auto; }

.marketing-section-head { text-align: center; margin-bottom: 2rem; }
.marketing-section-head h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.4rem; letter-spacing: -0.01em; }


.marketing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
}

.marketing-feature {
    padding: 1.3rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.marketing-feature:hover { background: var(--bg); }

.marketing-feature-title { font-weight: 700; margin-bottom: 0.3rem; }

.kb-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
    margin-top: 1.5rem;
}
.kb-category-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
}
.kb-category-card h2 { margin-top: 0; font-size: 1.1rem; }
.kb-category-card .feed-list { margin-top: 0.8rem; }

.custom-page-section { max-width: 1320px; margin: 0 auto; text-align: left; padding-top: 3rem; }
.custom-page-section h1 { text-align: left; font-size: 2rem; margin-bottom: 1.5rem; }
.custom-page-content { font-size: 1rem; line-height: 1.7; }
.custom-page-content ul { padding-left: 1.4rem; }
.custom-page-content li { margin-bottom: 0.4rem; }

/* ===================================================
   Homepage: hero motion, plan cards, shortcuts, dark CTA,
   feature icons, FAQ accordion. See app/views/home/index.php.
   =================================================== */

.marketing-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
    width: 100%;
    min-width: 0;
}

.marketing-plan-card {
    background: var(--card-bg);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.marketing-plan-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(17, 24, 39, 0.12); }

.marketing-plan-card-banner {
    position: relative;
    overflow: hidden;
    padding: 1.6rem 1.4rem;
    color: #fff;
}
.marketing-plan-card-name { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.marketing-plan-card-price { position: relative; z-index: 1; font-size: 1.5rem; font-weight: 800; }
.marketing-plan-card-price span { font-size: 0.8rem; font-weight: 500; opacity: 0.85; }

.marketing-plan-card-banner-blue { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); }
.marketing-plan-card-banner-orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.marketing-plan-card-banner-rose { background: linear-gradient(135deg, #fb7185, #be123c); }
.marketing-plan-card-banner-teal { background: linear-gradient(135deg, #2dd4bf, #0f766e); }

.marketing-plan-card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

.marketing-plan-card-btn {
    margin-top: auto;
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.marketing-plan-card-btn-blue { background: var(--primary); }
.marketing-plan-card-btn-orange { background: #ea580c; }
.marketing-plan-card-btn-rose { background: #be123c; }
.marketing-plan-card-btn-teal { background: #0f766e; }
.marketing-plan-card-btn:hover { opacity: 0.9; }

.marketing-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.3rem;
    width: 100%;
    min-width: 0;
}
.marketing-shortcut {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.6rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.marketing-shortcut:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.1); }
.marketing-shortcut-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.marketing-shortcut-icon svg { width: 24px; height: 24px; }
.marketing-shortcut-icon-blue { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #000)); }
.marketing-shortcut-icon-orange { background: linear-gradient(135deg, #fb923c, #f97316); }
.marketing-shortcut-icon-rose { background: linear-gradient(135deg, #fb7185, #e11d48); }
.marketing-shortcut-icon-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.marketing-shortcut-label { font-weight: 700; font-size: 0.9rem; color: var(--text); }

.marketing-feature { display: flex; flex-direction: column; align-items: flex-start; }
.marketing-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    color: #fff;
    transition: transform 0.25s ease;
}
.marketing-feature-icon svg { width: 22px; height: 22px; }
.marketing-feature:hover .marketing-feature-icon { transform: scale(1.12) rotate(-6deg); }
.marketing-feature-icon-blue { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #000)); }
.marketing-feature-icon-orange { background: linear-gradient(135deg, #fb923c, #f97316); }
.marketing-feature-icon-rose { background: linear-gradient(135deg, #fb7185, #e11d48); }
.marketing-feature-icon-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); }

.marketing-faq { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; }
.marketing-faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 1.3rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.marketing-faq-item[open] { border-color: var(--primary); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08); }
.marketing-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 0;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.marketing-faq-item summary::-webkit-details-marker { display: none; }
.marketing-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary);
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.25s ease;
}
.marketing-faq-item[open] summary::after { transform: rotate(45deg); }
.marketing-faq-answer { padding: 0 0 1.2rem; color: #6b7280; line-height: 1.6; font-size: 0.95rem; }

.marketing-dark-cta {
    position: relative;
    overflow: hidden;
    background: #111827;
    padding: 3.5rem 1.8rem;
}
.marketing-dark-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.marketing-dark-cta-inner h2 { color: #fff; font-size: 1.7rem; font-weight: 800; margin: 0 0 0.4rem; }
.marketing-dark-cta-inner p { color: #9ca0a8; margin: 0; }
.marketing-dark-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.marketing-dark-cta-btn { background: transparent; border: 1.5px solid var(--primary); color: #fff; padding: 0.8rem 1.8rem; border-radius: 999px; font-weight: 700; }
.marketing-dark-cta-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }
.marketing-dark-cta-btn-outline { background: transparent; border: 1.5px solid #4b5563; color: #fff; border-radius: 999px; padding: 0.75rem 1.6rem; }
.marketing-dark-cta-btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .marketing-feature-icon, .marketing-plan-card, .marketing-shortcut {
        animation: none !important;
        transition: none !important;
    }
}

.marketing-footer {
    background: #05070b;
    color: #7d8394;
    padding: 3.5rem 1.8rem 1.5rem;
    border-top: 3px solid var(--primary);
}
.marketing-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #1a1e29;
}
.marketing-footer-brand { font-weight: 800; font-size: 1.3rem; color: #fff; }
.marketing-footer-brand p { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.6; max-width: 320px; color: #7d8394; }
.marketing-footer-logo { display: block; height: 42px; width: auto; align-self: flex-start; }
.marketing-footer-col h4 { color: #fff; font-size: 0.95rem; font-weight: 700; margin: 0 0 1rem; }
.marketing-footer-col { display: flex; flex-direction: column; gap: 0.65rem; }
.marketing-footer-col a { color: #7d8394; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem; transition: color 0.15s ease; }
.marketing-footer-col a:hover { color: var(--primary); }
.marketing-footer-col a svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.marketing-footer-bottom {
    max-width: 1320px;
    margin: 1.2rem auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.marketing-footer-copyright { font-size: 0.8rem; color: #5b6172; margin: 0; }
.marketing-footer-legal { display: flex; gap: 1.2rem; }
.marketing-footer-legal a { color: #5b6172; font-size: 0.8rem; transition: color 0.15s ease; }
.marketing-footer-legal a:hover { color: var(--primary); }

@media (max-width: 760px) {
    .marketing-footer-inner { grid-template-columns: 1fr; }
}

.marketing-shell.vertical-menu .marketing-nav { gap: 0.6rem; padding: 0 1rem; }

/* This override must come after the unconditional rule above (same specificity) - a
   media query placed before a same-specificity rule loses the cascade regardless of
   whether it matches, so it has to sit later in the file to actually win here.
   True phone widths: the enlarged tablet logo (52px) leaves no room for the burger and
   theme-toggle to render at full size, so they get squeezed by flex-shrink. Trim the
   nav's side padding and gap to the minimum that still reads comfortably, and size the
   logo to the largest height that still leaves the icons at their full, uncompressed
   38px (matches the client portal's mobile logo, see .client-topnav-logo-img). */
@media (max-width: 480px) {
    .marketing-shell.vertical-menu .marketing-nav { padding: 0 0.4rem; gap: 0.4rem; }
    .marketing-shell.vertical-menu .marketing-nav-logo-img { max-height: 44px; }
}

@media (max-width: 760px) {
    .marketing-hero-search { flex-direction: column; border-radius: 10px; }
    .marketing-trust-strip { gap: 1.2rem; }
    .marketing-dark-cta-inner { text-align: center; justify-content: center; }
}

.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(17,24,39,0.08);
}
/* Setting display:flex above means the [hidden] attribute alone no longer hides this
   element (an author "display" rule beats the UA's [hidden]{display:none} regardless
   of order), so it must be restated explicitly here. */
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: 0.88rem; color: var(--text); max-width: 640px; }
.cookie-notice p a { color: var(--primary); }
.cookie-notice button {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.back-to-top {
    position: fixed;
    bottom: 1.8rem;
    right: 1.8rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    z-index: 50;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top[hidden] { display: none; }

.chat-widget-toggle {
    position: fixed;
    bottom: 1.8rem;
    left: 1.8rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 50;
    transition: transform 0.15s ease;
}
.chat-widget-toggle:hover { transform: translateY(-3px); }

.chat-widget-panel {
    position: fixed;
    bottom: 6rem;
    left: 1.8rem;
    width: 340px;
    max-width: calc(100vw - 2.4rem);
    height: 440px;
    max-height: calc(100vh - 8rem);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-widget-panel[hidden] { display: none; }

.chat-widget-header {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    padding: 0.9rem 1.1rem;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-widget-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.chat-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.chat-widget-message {
    max-width: 85%;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.87rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.chat-widget-message-bot {
    align-self: flex-start;
    background: var(--bg);
    color: var(--text);
    border-bottom-left-radius: 3px;
}

.chat-widget-message-user {
    align-self: flex-end;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    border-bottom-right-radius: 3px;
}

.chat-widget-typing { opacity: 0.6; }

.chat-widget-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.7rem;
    border-top: 1px solid var(--border);
}

.chat-widget-input-row input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.87rem;
    background: var(--card-bg);
    color: var(--text);
}
.chat-widget-input-row input:focus { outline: none; border-color: var(--primary); }

.chat-widget-input-row button {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 500px) {
    .chat-widget-panel { left: 1rem; right: 1rem; width: auto; bottom: 5.5rem; }
    .chat-widget-toggle { left: 1.2rem; bottom: 1.2rem; }
}

/* ===================================================
   Client Login lightbox
   =================================================== */

/* Reusable "form as a lightbox" page treatment - e.g. /tickets/create - a full-page
   route rendered as a centered, dimmed-backdrop card instead of a plain page. Unlike
   .login-modal-overlay this isn't JS-toggled; the route itself IS the lightbox. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 60;
}

.lightbox-card {
    position: relative;
    background: var(--card-bg);
    color: var(--text);
    padding: 2.2rem;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.lightbox-card h1 { margin: 0 0 1.2rem; font-size: 1.3rem; }

.lightbox-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: none;
}
.lightbox-close:hover { background: var(--bg); color: var(--text); }

.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 100;
}

.login-modal-overlay[hidden] { display: none; }

.login-modal {
    position: relative;
    background: var(--card-bg);
    color: var(--text);
    padding: 2.2rem;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
}

.login-modal-wide { max-width: 560px; }

.login-modal h2 { margin: 0 0 1.2rem; font-size: 1.3rem; font-weight: 800; }

.login-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
}
.login-modal-close:hover { background: var(--bg); color: var(--text); }

.login-modal label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.login-modal input {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-top: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.95rem;
}

.login-modal-submit { width: 100%; margin-top: 0.4rem; }
.login-modal p { margin: 1rem 0 0; font-size: 0.85rem; text-align: center; }
.login-modal-error { margin-bottom: 1rem; }