:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #eef4f8;
    --bg-tertiary: rgba(255, 255, 255, 0.88);
    --bg-soft: rgba(255, 255, 255, 0.7);
    --border-soft: #e2e8f0;
    --border-strong: rgba(148, 163, 184, 0.34);
    --accent: #14B8A6;
    --accent-hover: #14B8A6;
    --text-primary: #111827;
    --text-secondary: #64748b;
    --text-strong: #0f172a;
    --text-muted: #64748b;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;
    --success-strong: #166534;
    --warning-strong: #b45309;
    --danger-strong: #991b1b;
    --info-strong: #1d4ed8;
    --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.07);
    --shadow-float: 0 22px 48px rgba(15, 23, 42, 0.10);
    --surface-1: rgba(255, 255, 255, 0.74);
    --surface-2: rgba(255, 255, 255, 0.92);
    --surface-3: rgba(255, 255, 255, 0.98);
    --surface-accent: rgba(20, 184, 166, 0.09);
    --surface-accent-strong: rgba(20, 184, 166, 0.16);
    --surface-success: rgba(16, 185, 129, 0.12);
    --surface-warning: rgba(245, 158, 11, 0.12);
    --surface-danger: rgba(239, 68, 68, 0.12);
    --surface-info: rgba(59, 130, 246, 0.12);
    --divider-soft: rgba(226, 232, 240, 0.9);
    --body-gradient:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.12), transparent 24%),
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f5f9fc 45%, #edf3f8 100%);
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --sidebar-width: 214px;
    --content-max: 1480px;
    --accent-strong: #0f766e;
    --teal-500: #14B8A6;
    --icon-button-bg: rgba(255, 255, 255, 0.86);
    --icon-button-fg: var(--text-primary);
    --icon-button-hover-bg: var(--surface-3);
    --icon-button-active-fg: var(--accent);
    --sidebar-icon-bg: rgba(255, 255, 255, 0.76);
    --sidebar-icon-fg: var(--accent);
    --sidebar-icon-active: var(--accent);
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.94);
    --sidebar-link-hover-fg: var(--text-primary);
    --profile-bg: rgba(255, 255, 255, 0.88);
    --profile-name: var(--text-primary);
    --profile-role: var(--text-secondary);
    --avatar-bg: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(56, 189, 248, 0.12));
    --avatar-fg: var(--accent);
    --pill-bg: rgba(255, 255, 255, 0.82);
    --pill-fg: var(--text-secondary);
    --pill-active-bg: rgba(20, 184, 166, 0.12);
    --pill-active-fg: var(--accent-strong);
    --pill-border: rgba(148, 163, 184, 0.18);
    --card-bg: var(--surface-2);
    --card-fg: var(--text-primary);
    --card-muted: var(--text-secondary);
    --table-head-bg: rgba(255, 255, 255, 0.94);
    --table-head-fg: var(--text-secondary);
    --table-row-fg: var(--text-primary);
    --table-row-muted: var(--text-secondary);
    --table-hover-bg: rgba(20, 184, 166, 0.04);
    --input-bg: rgba(255, 255, 255, 0.94);
    --input-fg: var(--text-primary);
    --input-placeholder: var(--text-secondary);
    --input-focus-bg: #ffffff;
    --panel-border: var(--border-soft);
    --surface-subtle: rgba(255, 255, 255, 0.82);
    --disabled-bg: rgba(148, 163, 184, 0.12);
    --disabled-fg: #64748b;
    --disabled-border: rgba(148, 163, 184, 0.16);
}

html.dark,
:root[data-theme="dark"],
[data-theme="dark"] {
    --bg: #0b1220;
    --card: #111827;
    --card-soft: #1e293b;
    --border: #334155;
    --text: #f8fafc;
    --muted: #cbd5e1;
    --muted-2: #94a3b8;
    --primary: #14b8a6;
    --primary-text: #ffffff;
    --bg-primary: #0b1220;
    --bg-secondary: #0f172a;
    --bg-tertiary: rgba(15, 23, 42, 0.92);
    --bg-soft: rgba(30, 41, 59, 0.84);
    --border-soft: #334155;
    --border-strong: #475569;
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-strong: #F8FAFC;
    --text-muted: #94A3B8;
    --shadow-soft: 0 16px 40px rgba(2, 8, 23, 0.28);
    --shadow-float: 0 32px 80px rgba(2, 8, 23, 0.34);
    --surface-1: rgba(30, 41, 59, 0.84);
    --surface-2: #111827;
    --surface-3: #1e293b;
    --surface-accent: rgba(20, 184, 166, 0.18);
    --surface-accent-strong: rgba(20, 184, 166, 0.28);
    --surface-success: rgba(34, 197, 94, 0.18);
    --surface-warning: rgba(245, 158, 11, 0.18);
    --surface-danger: rgba(239, 68, 68, 0.18);
    --surface-info: rgba(59, 130, 246, 0.18);
    --success-strong: #86efac;
    --warning-strong: #fcd34d;
    --danger-strong: #fca5a5;
    --info-strong: #93c5fd;
    --divider-soft: rgba(71, 85, 105, 0.9);
    --accent-strong: #5EEAD4;
    --icon-button-bg: #1e293b;
    --icon-button-fg: #E2E8F0;
    --icon-button-hover-bg: #334155;
    --icon-button-active-fg: #F8FAFC;
    --sidebar-icon-bg: #1e293b;
    --sidebar-icon-fg: #CBD5E1;
    --sidebar-icon-active: #5EEAD4;
    --sidebar-link-hover-bg: #1e293b;
    --sidebar-link-hover-fg: #F8FAFC;
    --profile-bg: #111827;
    --profile-name: #F8FAFC;
    --profile-role: #94A3B8;
    --avatar-bg: #2DD4BF;
    --avatar-fg: #0F172A;
    --pill-bg: #1e293b;
    --pill-fg: #CBD5E1;
    --pill-active-bg: #14b8a6;
    --pill-active-fg: #ffffff;
    --pill-border: #334155;
    --card-bg: #111827;
    --card-fg: #F8FAFC;
    --card-muted: #CBD5E1;
    --table-head-bg: #111827;
    --table-head-fg: #CBD5E1;
    --table-row-fg: #F8FAFC;
    --table-row-muted: #CBD5E1;
    --table-hover-bg: rgba(51, 65, 85, 0.72);
    --input-bg: #0f172a;
    --input-fg: #F8FAFC;
    --input-placeholder: #94A3B8;
    --input-focus-bg: #0f172a;
    --panel-border: #334155;
    --surface-subtle: #1e293b;
    --disabled-bg: #273449;
    --disabled-fg: #94A3B8;
    --disabled-border: #334155;
    --body-gradient:
        radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), transparent 22%),
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.14), transparent 20%),
        radial-gradient(circle at bottom center, rgba(45, 212, 191, 0.08), transparent 24%),
        linear-gradient(180deg, #142136 0%, #0F172A 48%, #111827 100%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--body-gradient);
}

a {
    color: inherit;
    text-decoration: none;
}

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

img,
svg {
    max-width: 100%;
}

svg {
    display: block;
    flex-shrink: 0;
}

.site-shell {
    width: min(var(--content-max), calc(100% - 28px));
    margin: 0 auto;
    padding: 12px 0 20px;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.app-main {
    min-width: 0;
}

.glass-card,
.glass-panel,
.metric-card,
.crm-table-wrap,
.kanban-column,
.timeline-card,
.drawer-panel,
.modal-panel,
.sidebar,
.topbar {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.glass-card,
.glass-panel,
.metric-card,
.crm-table-wrap,
.kanban-column,
.timeline-card,
.drawer-panel,
.modal-panel,
.topbar {
    border-radius: var(--radius-xl);
}

.sidebar {
    position: sticky;
    top: 16px;
    min-height: calc(100vh - 32px);
    border-radius: var(--radius-2xl);
    padding: 12px;
    overflow: hidden;
}

.brand-chip,
.section-chip,
.status-badge,
.topbar-chip,
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.brand-chip,
.section-chip {
    color: var(--accent);
    background: var(--surface-2);
}

.sidebar-title {
    margin: 12px 0 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.sidebar-copy {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 12px;
}

.sidebar-meta {
    margin-top: 14px;
    border-radius: 18px;
    border: 1px solid rgba(20, 184, 166, 0.14);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0.45));
    padding: 12px;
}

.sidebar-branding {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sidebar-brand-logo-wrap {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.sidebar-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.sidebar-brand-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--accent-strong);
}

.sidebar-brand-copy {
    min-width: 0;
}

.agency-branding .sidebar-title {
    margin: 0 0 4px;
    font-size: 19px;
    line-height: 1.15;
}

.agency-branding .sidebar-copy {
    font-size: 12px;
    line-height: 1.45;
}

.sidebar-group {
    margin-top: 12px;
}

.sidebar-group-title {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sidebar-group-toggle {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 2px 0;
}

.sidebar-group-toggle::-webkit-details-marker {
    display: none;
}

.sidebar-group-caret {
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.58;
    transition: transform 180ms ease;
    transform: rotate(45deg);
}

.sidebar-group[open] .sidebar-group-caret {
    transform: rotate(225deg);
}

.sidebar-links {
    display: grid;
    gap: 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 14px;
    border: 1px solid transparent;
    min-height: 40px;
    padding: 7px 9px;
    color: var(--text-secondary);
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.sidebar-link:hover {
    border-color: var(--border-soft);
    background: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover-fg);
    transform: translateY(-1px);
}

.sidebar-link.is-active {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.06));
    border-color: rgba(20, 184, 166, 0.18);
    color: var(--text-primary);
    box-shadow: inset 2px 0 0 var(--accent);
}

.sidebar-link-main {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sidebar-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--sidebar-icon-bg);
    color: var(--sidebar-icon-fg);
}

.sidebar-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.premium-button svg,
.dashboard-priority-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.sidebar-link.is-active .sidebar-icon {
    background: var(--surface-accent-strong);
    color: var(--sidebar-icon-active);
}

.sidebar-link-text {
    min-width: 0;
}

.sidebar-link-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    line-height: 1.25;
}

.sidebar-link-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--surface-accent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    margin-bottom: 14px;
    overflow: hidden;
}

.topbar-left,
.topbar-right,
.topbar-center {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-center {
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.topbar-left {
    min-width: 0;
}

.topbar-right {
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.command-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 520px);
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--input-bg);
    padding: 0 12px;
    color: var(--input-placeholder);
    flex: 1 1 auto;
    min-width: 0;
}

.command-bar-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.command-bar-icon svg {
    width: 16px;
    height: 16px;
}

.command-bar input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--input-fg);
}

.command-bar input::placeholder {
    color: var(--input-placeholder);
}

.topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    padding: 0 12px;
    color: var(--card-fg);
    font-size: 12px;
    font-weight: 600;
    transition: 180ms ease;
    white-space: nowrap;
}

.topbar-action:hover {
    background: var(--surface-accent);
    border-color: rgba(20, 184, 166, 0.18);
    transform: translateY(-1px);
}

.icon-button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--icon-button-bg);
    color: var(--icon-button-fg);
    cursor: pointer;
    transition: 180ms ease;
}

.icon-button svg {
    width: 17px;
    height: 17px;
    display: block;
}

.icon-button:hover {
    background: var(--icon-button-hover-bg);
    color: var(--icon-button-active-fg);
    transform: translateY(-1px);
}

.topbar-workspace-chip {
    min-height: 30px;
    padding-inline: 10px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--profile-bg);
    padding: 0 11px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--avatar-bg);
    color: var(--avatar-fg);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-pill-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--profile-name);
    line-height: 1.2;
}

.user-pill-role {
    font-size: 10px;
    color: var(--profile-role);
    line-height: 1.2;
}

.page-grid {
    display: grid;
    gap: 16px;
}

.page-hero {
    padding: 16px;
}

.page-hero h1,
.dashboard-hero h1 {
    margin: 12px 0 8px;
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.page-hero p,
.dashboard-hero p {
    max-width: 920px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.hero-actions,
.sticky-actions,
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-actions,
.page-actions {
    margin-top: 14px;
}

.premium-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.premium-button:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: var(--shadow-soft);
}

.premium-button.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #052e2b;
    box-shadow: 0 16px 40px rgba(20, 184, 166, 0.24);
}

.premium-button.secondary {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.26);
    color: var(--text-primary);
}

.premium-button.ghost {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--accent);
}

.premium-button.danger,
.premium-button.ghost.danger {
    background: var(--surface-danger);
    border-color: rgba(239, 68, 68, 0.22);
    color: var(--danger-strong);
}

.premium-button.whatsapp {
    background: linear-gradient(135deg, #25d366, #16a34a);
    color: #052e16;
    box-shadow: 0 16px 40px rgba(34, 197, 94, 0.22);
}

.sticky-actions {
    position: sticky;
    bottom: 18px;
    justify-content: flex-end;
    margin-top: 8px;
    z-index: 6;
}

.metrics-grid,
.content-grid,
.triple-grid,
.duo-grid {
    display: grid;
    gap: 16px;
}

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

.content-grid {
    grid-template-columns: minmax(0, 1.15fr) 360px;
}

.triple-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.metric-card {
    padding: 14px;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

.metric-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.metric-value {
    margin: 8px 0 4px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.metric-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.metric-card.success .metric-value,
.status-badge.success {
    color: var(--success);
}

.metric-card.warning .metric-value,
.status-badge.warning {
    color: var(--warning);
}

.metric-card.accent .metric-value,
.status-badge.accent {
    color: var(--accent);
}

.section-card {
    padding: 14px;
    background: var(--card-bg);
    color: var(--card-fg);
}

.section-card h2,
.section-card h3 {
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.section-copy {
    margin: 6px 0 0;
    color: var(--card-muted);
    line-height: 1.6;
    font-size: 13px;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.filter-chip {
    background: var(--pill-bg);
    color: var(--pill-fg);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
    min-height: 38px;
    cursor: pointer;
    transition: 180ms ease;
}

.filter-chip:hover,
.filter-chip.is-active {
    background: var(--pill-active-bg);
    border-color: var(--pill-border);
    color: var(--pill-active-fg);
}

.panel-grid {
    display: grid;
    gap: 18px;
}

.panel-grid.sidebar-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.crm-table-wrap {
    padding: 12px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.crm-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    table-layout: auto;
}

.crm-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 12px;
    color: var(--table-head-fg);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    background: var(--table-head-bg);
}

.crm-table td {
    padding: 13px 12px;
    font-size: 13px;
    color: var(--table-row-fg);
    border-bottom: 1px solid var(--divider-soft);
    vertical-align: top;
    word-break: normal;
    overflow-wrap: normal;
}

.crm-table tbody tr {
    transition: background 180ms ease;
}

.crm-table tbody tr:hover td {
    background: var(--table-hover-bg);
}

.crm-table tr:last-child td {
    border-bottom: 0;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.toolbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(100%, 340px);
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--input-bg);
    padding: 0 12px;
}

.toolbar-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--input-fg);
}

.toolbar-search input::placeholder {
    color: var(--input-placeholder);
}

.status-badge {
    letter-spacing: 0.08em;
    min-height: 24px;
    padding: 0 10px;
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: 10px;
    border-color: transparent;
    font-weight: 800;
}

.status-badge.success {
    background: var(--surface-success);
    color: var(--success-strong);
}

.status-badge.warning {
    background: var(--surface-warning);
    color: var(--warning-strong);
}

.status-badge.danger {
    background: var(--surface-danger);
    color: var(--danger-strong);
}

.status-badge.accent {
    background: var(--surface-accent);
    color: var(--accent-strong);
}

.status-badge.info {
    background: var(--surface-info);
    color: var(--info-strong);
}

.status-badge.subtle {
    background: rgba(148, 163, 184, 0.10);
    color: var(--text-secondary);
}

html.dark .sidebar-link.is-active,
:root[data-theme="dark"] .sidebar-link.is-active,
[data-theme="dark"] .sidebar-link.is-active {
    background: rgba(20, 184, 166, 0.16);
    border-color: rgba(20, 184, 166, 0.3);
    color: #f8fafc;
}

html.dark .topbar-action,
html.dark .premium-button.secondary,
html.dark .premium-button.ghost,
html.dark .tab-pill,
html.dark .segmented-link,
:root[data-theme="dark"] .topbar-action,
:root[data-theme="dark"] .premium-button.secondary,
:root[data-theme="dark"] .premium-button.ghost,
:root[data-theme="dark"] .tab-pill,
:root[data-theme="dark"] .segmented-link,
[data-theme="dark"] .topbar-action,
[data-theme="dark"] .premium-button.secondary,
[data-theme="dark"] .premium-button.ghost,
[data-theme="dark"] .tab-pill,
[data-theme="dark"] .segmented-link {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

html.dark .topbar-action:hover,
html.dark .premium-button.secondary:hover,
html.dark .premium-button.ghost:hover,
html.dark .tab-pill:hover,
html.dark .segmented-link:hover,
:root[data-theme="dark"] .topbar-action:hover,
:root[data-theme="dark"] .premium-button.secondary:hover,
:root[data-theme="dark"] .premium-button.ghost:hover,
:root[data-theme="dark"] .tab-pill:hover,
:root[data-theme="dark"] .segmented-link:hover,
[data-theme="dark"] .topbar-action:hover,
[data-theme="dark"] .premium-button.secondary:hover,
[data-theme="dark"] .premium-button.ghost:hover,
[data-theme="dark"] .tab-pill:hover,
[data-theme="dark"] .segmented-link:hover {
    background: #334155;
    color: #ffffff;
    border-color: #475569;
    box-shadow: none;
}

html.dark .tab-pill.is-active,
html.dark .segmented-link.is-active,
:root[data-theme="dark"] .tab-pill.is-active,
:root[data-theme="dark"] .segmented-link.is-active,
[data-theme="dark"] .tab-pill.is-active,
[data-theme="dark"] .segmented-link.is-active {
    background: #14b8a6;
    color: #ffffff;
    border-color: #14b8a6;
}

html.dark .premium-button.ghost,
:root[data-theme="dark"] .premium-button.ghost,
[data-theme="dark"] .premium-button.ghost {
    color: #cbd5e1;
}

html.dark .form-input-dark,
html.dark .toolbar-search,
html.dark .command-bar,
html.dark .lead-search-box,
:root[data-theme="dark"] .form-input-dark,
:root[data-theme="dark"] .toolbar-search,
:root[data-theme="dark"] .command-bar,
:root[data-theme="dark"] .lead-search-box,
[data-theme="dark"] .form-input-dark,
[data-theme="dark"] .toolbar-search,
[data-theme="dark"] .command-bar,
[data-theme="dark"] .lead-search-box {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

html.dark .crm-table-wrap,
html.dark .drawer-panel,
html.dark .modal-panel,
html.dark .glass-card,
html.dark .glass-panel,
html.dark .metric-card,
:root[data-theme="dark"] .crm-table-wrap,
:root[data-theme="dark"] .drawer-panel,
:root[data-theme="dark"] .modal-panel,
:root[data-theme="dark"] .glass-card,
:root[data-theme="dark"] .glass-panel,
:root[data-theme="dark"] .metric-card,
[data-theme="dark"] .crm-table-wrap,
[data-theme="dark"] .drawer-panel,
[data-theme="dark"] .modal-panel,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-panel,
[data-theme="dark"] .metric-card {
    background: #111827;
    border-color: #263449;
    color: #f8fafc;
}

html.dark .status-badge.accent,
:root[data-theme="dark"] .status-badge.accent,
[data-theme="dark"] .status-badge.accent {
    background: rgba(20, 184, 166, 0.18);
    color: #5eead4;
}

.status-badge[data-status="paid"],
.status-badge[data-status="active"],
.status-badge[data-status="completed"],
.status-badge[data-status="success"] {
    background: var(--surface-success);
    color: var(--success-strong);
}

.status-badge[data-status="trial"],
.status-badge[data-status="pending"],
.status-badge[data-status="manual_pending"],
.status-badge[data-status="part_paid"],
.status-badge[data-status="yearly"],
.status-badge[data-status="monthly"] {
    background: var(--surface-warning);
    color: var(--warning-strong);
}

.status-badge[data-status="failed"],
.status-badge[data-status="overdue"],
.status-badge[data-status="expired"],
.status-badge[data-status="suspended"],
.status-badge[data-status="cancelled"],
.status-badge[data-status="past_due"] {
    background: var(--surface-danger);
    color: var(--danger-strong);
}

.status-badge[data-status="processing"],
.status-badge[data-status="issued"],
.status-badge[data-status="open"],
.status-badge[data-status="info"] {
    background: var(--surface-info);
    color: var(--info-strong);
}

.plan-badge {
    letter-spacing: 0.06em;
}

.plan-badge.plan-starter,
.plan-badge.plan-agency {
    background: rgba(100, 116, 139, 0.14);
    color: #334155;
}

.plan-badge.plan-growth {
    background: rgba(59, 130, 246, 0.12);
    color: #1e40af;
}

.plan-badge.plan-professional {
    background: rgba(139, 92, 246, 0.14);
    color: #6d28d9;
}

.plan-badge.plan-enterprise {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
}

.plan-badge.plan-silver {
    background: rgba(100, 116, 139, 0.14);
    color: #334155;
}

html.dark .plan-badge.plan-starter,
html.dark .plan-badge.plan-agency,
[data-theme="dark"] .plan-badge.plan-starter,
[data-theme="dark"] .plan-badge.plan-agency {
    color: #cbd5e1;
}

html.dark .plan-badge.plan-growth,
[data-theme="dark"] .plan-badge.plan-growth {
    color: #bfdbfe;
}

html.dark .plan-badge.plan-professional,
[data-theme="dark"] .plan-badge.plan-professional {
    color: #ddd6fe;
}

html.dark .plan-badge.plan-enterprise,
[data-theme="dark"] .plan-badge.plan-enterprise {
    color: #fde68a;
}

html.dark .plan-badge.plan-silver,
[data-theme="dark"] .plan-badge.plan-silver {
    color: #e2e8f0;
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.kanban-column {
    padding: 16px;
}

.kanban-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kanban-card {
    margin-top: 12px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 15px;
    transition: 180ms ease;
}

.kanban-card:hover {
    border-color: rgba(45, 212, 191, 0.26);
    transform: translateY(-1px);
}

.premium-kanban {
    margin-top: 22px;
    align-items: start;
    grid-auto-columns: minmax(300px, 1fr);
}

.premium-column {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: 180ms ease;
}

.premium-column.is-drop-target {
    border-color: rgba(45, 212, 191, 0.42);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1), var(--shadow-soft);
}

.premium-kanban-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 4px;
    background: linear-gradient(180deg, var(--bg-tertiary) 78%, rgba(255, 255, 255, 0));
}

.pipeline-column-stack {
    display: grid;
    gap: 14px;
    align-content: start;
    min-height: 120px;
}

.premium-kanban.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.premium-kanban-card {
    cursor: grab;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
}

.premium-kanban-card.is-dragging {
    opacity: 0.55;
    transform: rotate(1deg) scale(0.98);
    cursor: grabbing;
}

.premium-kanban-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.16), var(--shadow-soft);
}

.pipeline-card-head,
.pipeline-card-value-row,
.pipeline-card-footer,
.owner-chip,
.pipeline-rule-row,
.pipeline-mini-form,
.pipeline-inline-form,
.pipeline-select-wrap {
    display: flex;
    gap: 12px;
}

.pipeline-card-head,
.pipeline-card-value-row,
.pipeline-card-footer {
    align-items: center;
    justify-content: space-between;
}

.pipeline-card-head {
    align-items: flex-start;
}

.pipeline-card-value-row {
    margin-top: 14px;
}

.pipeline-card-value-row strong {
    font-size: 18px;
    letter-spacing: -0.03em;
}

.pipeline-card-meta-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.pipeline-meta-item {
    display: grid;
    gap: 8px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    padding: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.owner-chip {
    align-items: center;
}

.owner-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--surface-accent);
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pipeline-card-footer {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    align-items: flex-end;
    flex-direction: column;
}

.pipeline-empty-state {
    min-height: 112px;
    display: grid;
    place-items: center;
    gap: 10px;
    border-radius: 22px;
    border: 1px dashed var(--border-soft);
    background: var(--surface-2);
    padding: 22px 16px;
    text-align: center;
    color: var(--text-secondary);
}

.pipeline-empty-illustration {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-accent);
    color: var(--accent-hover);
    font-size: 18px;
    font-weight: 700;
}

.pipeline-toolbar {
    gap: 18px;
}

.pipeline-select-wrap {
    flex: 0 0 220px;
}

.pipeline-detail-drawer {
    width: min(1080px, 100%);
}

.pipeline-detail-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.pipeline-timeline-stack {
    margin-top: 0;
}

.pipeline-inline-form {
    margin-top: 18px;
    flex-direction: column;
}

.pipeline-inline-form .premium-button {
    align-self: flex-start;
}

.pipeline-mini-form {
    margin-top: 12px;
    justify-content: flex-end;
}

.pipeline-rule-row {
    align-items: flex-end;
}

.pipeline-rule-row .form-field {
    flex: 1 1 0;
}

.pipeline-order-field {
    flex: 0 0 110px !important;
}

.pipeline-rules-modal {
    width: min(920px, 100%);
}

.kanban-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.kanban-card-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.studio-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 18px;
}

.studio-column,
.preview-panel {
    padding: 18px;
}

.component-list,
.canvas-list,
.settings-list,
.agent-list,
.departure-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.list-item-card {
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 14px;
}

.timeline-stack {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.timeline-card {
    padding: 18px;
    transition: all 0.2s ease;
}

.timeline-day {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.timeline-title {
    margin: 12px 0 0;
    font-size: 18px;
    font-weight: 600;
}

.timeline-meta {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;
}

.profile-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
}

.progress-bar {
    position: relative;
    margin-top: 18px;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.progress-value {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
}

.chart-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.chart-card {
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 18px;
    min-height: 220px;
}

.chart-placeholder {
    margin-top: 18px;
    height: 130px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(45, 212, 191, 0.14), transparent),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0, rgba(148, 163, 184, 0.08) 1px, transparent 1px, transparent 64px);
}

.tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.tab-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: 180ms ease;
}

.tab-pill.is-active {
    background: var(--pill-active-bg);
    border-color: var(--accent);
    color: var(--pill-active-fg);
}

.tab-pill:hover {
    transform: translateY(-1px);
    background: var(--surface-3);
    color: var(--text-primary);
}

.settings-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
}

.settings-card {
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    padding: 18px;
}

.form-input-dark {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--input-bg);
    padding: 0 14px;
    color: var(--input-fg);
    outline: 0;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.form-input-dark::placeholder {
    color: var(--input-placeholder);
}

.form-input-dark option,
select.form-input-dark option {
    background: var(--input-bg);
    color: var(--input-fg);
}

.form-input-dark:focus {
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
    background: var(--input-focus-bg);
}

.drawer-panel,
.modal-panel {
    padding: 18px;
}

.drawer-head,
.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.drawer-fields {
    display: grid;
    gap: 14px;
}

.empty-state {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 200px;
    border-radius: 24px;
    border: 1px dashed var(--border-soft);
    background: var(--surface-2);
    text-align: center;
    padding: 20px;
}

.empty-state h3 {
    margin: 0;
    font-size: 22px;
}

.empty-state p {
    margin: 0;
    max-width: 420px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.contacts-shell {
    overflow: hidden;
}

.contacts-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.contacts-kpi-card {
    min-height: 118px;
    padding: 18px 20px;
}

.contacts-kpi-card .metric-value {
    margin-bottom: 6px;
}

.contacts-toolbar,
.contacts-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.contacts-toolbar-form,
.contacts-bulk-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 720px;
    flex-wrap: wrap;
}

.contacts-search-box {
    min-width: min(100%, 340px);
    flex: 1 1 320px;
}

.contacts-toolbar--simple {
    align-items: flex-start;
}

.contacts-toolbar-form--simple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto;
    align-items: center;
}

.contacts-segment-wrap {
    min-width: 0;
}

.contacts-toolbar-new {
    white-space: nowrap;
}

.contacts-toolbar-more {
    flex: 0 0 auto;
}

.contacts-more-menu {
    position: relative;
}

.contacts-more-panel {
    width: min(320px, calc(100vw - 32px));
    padding: 14px;
}

.contacts-more-form {
    display: grid;
    gap: 12px;
}

.contacts-more-actions,
.contacts-more-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contacts-segment-row {
    gap: 8px;
    padding-top: 10px;
}

.contacts-bulk-toolbar {
    margin: 16px 0 14px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}

.checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    color: var(--text-secondary);
}

.bulk-choice-wrap {
    min-width: 180px;
}

.sticky-filter-row {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: 12px;
    padding-bottom: 6px;
    background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(255, 255, 255, 0) 100%);
}

html.dark .sticky-filter-row {
    background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(15, 23, 42, 0) 100%);
}

.contacts-table-shell {
    overflow-x: auto;
}

.contacts-card-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.contacts-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1.15fr) minmax(250px, 0.78fr) minmax(240px, 0.72fr);
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.contacts-card:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, 0.24);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}

.contacts-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.28);
}

.contacts-card-select,
.contacts-card-main,
.contacts-card-center,
.contacts-card-side {
    min-width: 0;
}

.contacts-card-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.contacts-card-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
}

.contacts-card-phone-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 13px;
}

.contacts-card-phone {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

.contacts-card-email {
    color: var(--text-secondary);
    font-size: 13px;
}

.contacts-inline-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #15803d;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.contacts-card-center,
.contacts-card-side {
    display: grid;
    gap: 10px;
    align-content: center;
}

.contacts-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 12px;
}

.contacts-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
}

.contacts-manager-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-height: 36px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    background: rgba(20, 184, 166, 0.08);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.contacts-manager-badge.is-unassigned {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
}

.contacts-manager-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.contacts-card-statuses {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contacts-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.contact-action-icon {
    min-height: 34px;
    font-size: 12px;
    white-space: nowrap;
}

.contacts-card-actions .icon-action.whatsapp {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.22);
    color: #15803d;
}

.contacts-actions-menu summary {
    min-width: 42px;
    padding: 0 12px;
}

.contacts-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-3);
}

.contacts-table tbody tr {
    transition: background 180ms ease, transform 180ms ease;
}

.contacts-table tbody tr:hover {
    background: var(--surface-2);
}

.contacts-tag-row td {
    padding-top: 0;
    border-top: 0;
}

.contact-row-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
}

.contact-row-link.is-mobile-link {
    flex: 1;
}

.contact-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--surface-accent);
    border: 1px solid rgba(45, 212, 191, 0.18);
    color: var(--accent-hover);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.contact-avatar.large {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
    border-radius: 24px;
    font-size: 22px;
}

.contacts-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-cloud {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.inline-tags {
    margin-top: 0;
}

.row-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.row-check input,
.checkbox-chip input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-hover);
}

.contact-profile-shell {
    margin-top: 24px;
}

.contact-profile-head {
    align-items: flex-start;
    gap: 18px;
}

.contact-profile-title-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-profile-title-wrap h2 {
    margin: 10px 0 0;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.04em;
}

.contact-profile-summary,
.contact-profile-grid,
.contact-data-grid {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}

.contact-profile-summary {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
}

.contact-profile-grid,
.contact-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-overview-card,
.contact-preferences-card,
.mini-data-card {
    padding: 22px;
}

.profile-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.view-item strong {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.6;
}

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

.drawer-section {
    display: grid;
    gap: 16px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
}

.form-grid {
    display: grid;
    gap: 14px;
}

.form-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-field {
    display: grid;
    gap: 10px;
}

.form-field span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.form-textarea {
    min-height: 124px;
    resize: vertical;
}

.drawer-wide {
    width: min(980px, calc(100vw - 28px));
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.timeline-copy {
    margin: 14px 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.empty-inline-state {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed var(--border-soft);
    background: var(--card-bg);
    color: var(--card-muted);
}

.field-error-text {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
}

.mini-data-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.mini-data-card {
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--card-fg);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

.mini-data-card strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
    color: var(--card-fg);
}

.timeline-card:hover,
.mini-data-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.import-modal-sheet {
    width: min(1160px, calc(100vw - 28px));
}

.import-summary-grid,
.import-mapping-grid {
    display: grid;
    gap: 14px;
}

.import-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.import-sample-shell {
    display: grid;
    gap: 14px;
}

.contacts-sample-table {
    overflow: auto;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
}

.contacts-mobile-card {
    display: grid;
    gap: 14px;
}

.contacts-empty-state {
    margin-top: 16px;
}

html.dark .contacts-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.96));
}

html.dark .contacts-inline-wa,
html.dark .contacts-card-actions .icon-action.whatsapp {
    color: #4ade80;
}

@media (max-width: 1280px) {
    .contact-profile-summary,
    .contact-profile-grid,
    .contact-data-grid {
        grid-template-columns: 1fr;
    }

    .contacts-card {
        grid-template-columns: auto minmax(0, 1fr) minmax(260px, 0.9fr);
    }

    .contacts-card-side {
        grid-column: 2 / -1;
    }
}

@media (max-width: 920px) {
    .contacts-kpi-grid {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar-form,
    .contacts-bulk-left,
    .form-grid.two-col,
    .form-grid.three-col,
    .profile-overview-grid,
    .import-summary-grid,
    .import-mapping-grid,
    .mini-data-grid {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar-form,
    .contacts-bulk-left {
        display: grid;
    }

    .contact-profile-title-wrap {
        align-items: flex-start;
    }

    .drawer-wide,
    .import-modal-sheet {
        width: min(100vw - 18px, 100%);
    }

    .contacts-toolbar-form--simple {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar-new,
    .contacts-toolbar-more,
    .contacts-toolbar-more .premium-button {
        width: 100%;
    }

    .contacts-card {
        grid-template-columns: 1fr;
    }

    .contacts-card-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .contacts-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contacts-card-actions .contacts-actions-menu {
        grid-column: span 2;
    }

    .contacts-card-actions > .icon-action:nth-child(2) {
        display: none;
    }

    .contacts-card-actions .icon-action,
    .contacts-actions-menu summary {
        width: 100%;
        justify-content: center;
    }
}

.inline-form {
    margin: 0;
}

.quote-builder-shell {
    margin-top: 24px;
}

.quote-wizard-shell {
    margin-top: 24px;
    display: grid;
    gap: 24px;
}

.quote-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.quote-step-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    box-shadow: var(--shadow-soft);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.quote-step-pill span {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-primary);
    font-weight: 700;
}

.quote-step-pill strong {
    font-size: 14px;
    line-height: 1.2;
}

.quote-step-pill.is-active,
.quote-step-pill.is-complete {
    border-color: rgba(45, 212, 191, 0.32);
    color: var(--text-primary);
}

.quote-step-pill.is-active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(255, 255, 255, 0.88));
    transform: translateY(-1px);
}

.quote-step-pill.is-complete span,
.quote-step-pill.is-active span {
    background: rgba(45, 212, 191, 0.18);
    color: #0f766e;
}

.quote-step-panel {
    display: none;
}

.quote-step-panel.is-active {
    display: block;
}

.quote-step-card {
    display: grid;
    gap: 22px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-soft);
}

.quote-step-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-advanced-grid .full-width {
    grid-column: 1 / -1;
}

.form-input-large {
    min-height: 52px;
    font-size: 15px;
}

.quote-more-details {
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: rgba(248, 250, 252, 0.8);
    padding: 16px 18px;
}

.quote-more-details[open] {
    display: grid;
    gap: 18px;
}

.quote-more-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    list-style: none;
}

.quote-more-details summary::-webkit-details-marker {
    display: none;
}

.quote-item-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.quote-item-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    transition: all 160ms ease;
}

.quote-item-tab.is-active {
    border-color: rgba(45, 212, 191, 0.32);
    color: var(--text-primary);
    background: rgba(45, 212, 191, 0.16);
}

.quote-tab-count {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.quote-item-step-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: rgba(248, 250, 252, 0.84);
}

.quote-item-step-toolbar h4 {
    margin: 0 0 6px;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.quote-wizard-item-list,
.quote-template-list,
.quote-preview-list {
    display: grid;
    gap: 16px;
}

.quote-wizard-item-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-soft);
}

.quote-item-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.quote-item-toolbar h4 {
    margin: 12px 0 0;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.quote-inline-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.quote-inline-summary span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.quote-item-field-grid,
.quote-item-meta-grid {
    align-items: start;
}

.quote-template-strip {
    display: grid;
    gap: 14px;
}

.quote-pricing-layout,
.quote-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.quote-pricing-sticky {
    position: sticky;
    top: 24px;
}

.quote-preview-section,
.quote-preview-group {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: rgba(248, 250, 252, 0.84);
}

.quote-preview-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--divider-soft);
}

.quote-preview-line:first-of-type {
    padding-top: 0;
    border-top: none;
}

.quote-final-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.quote-admin-details {
    margin-top: 6px;
}

.quote-step-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.72);
}

.quote-step-footer-meta {
    color: var(--text-secondary);
    font-size: 14px;
}

.quote-builder-top {
    align-items: flex-start;
}

.quote-builder-form {
    display: grid;
    gap: 24px;
}

.quote-header-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-workspace-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.quote-components-panel,
.quote-builder-canvas,
.quote-pricing-card,
.quote-share-card {
    display: grid;
    gap: 16px;
}

.quote-components-panel,
.quote-builder-canvas,
.quote-pricing-card,
.quote-share-card,
.quote-item-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}

.quote-component-actions .premium-button {
    width: 100%;
    justify-content: center;
}

.quote-builder-cards {
    display: grid;
    gap: 16px;
}

.quote-builder-empty {
    min-height: 180px;
}

.quote-item-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.quote-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

.quote-item-card.is-dragging {
    opacity: 0.62;
}

.quote-item-card.is-drag-over {
    border-color: rgba(45, 212, 191, 0.42);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.12);
}

.quote-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.quote-item-head h4 {
    margin: 12px 0 0;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.quote-item-price-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}

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

.quote-pricing-panel {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 18px;
}

.quote-summary-list {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
}

.quote-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-secondary);
}

.quote-summary-row strong {
    color: var(--text-primary);
}

.quote-summary-row.total {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--divider-soft);
    font-size: 18px;
    color: var(--text-primary);
}

.quote-summary-row.success strong {
    color: var(--success);
}

.vertical-actions {
    flex-direction: column;
    align-items: stretch;
}

.vertical-actions .premium-button {
    width: 100%;
    justify-content: center;
}

.share-stack {
    display: grid;
    gap: 14px;
}

.share-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.quote-builder-notes-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-builder-notes-grid .full-width {
    grid-column: 1 / -1;
}

.quote-afterpanels {
    display: grid;
    gap: 18px;
    grid-template-columns: 1.1fr 1fr 1fr;
}

.quote-status-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotes-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-3);
    z-index: 2;
}

.quote-public-shell {
    max-width: 1240px;
}

.quote-public-hero {
    margin-bottom: 22px;
}

.quote-public-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1.2fr 0.8fr;
    margin-bottom: 22px;
}

.luxury-quote-body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #f1f5f9 48%, #e2eef4 100%);
    color: #0f172a;
    font-family: Inter, Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.luxury-quote-body *,
.luxury-quote-body *::before,
.luxury-quote-body *::after {
    box-sizing: border-box;
}

.luxury-quote-shell {
    min-height: 100vh;
    padding: 42px 20px;
}

.luxury-quote-document {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 40px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
}

.luxury-quote-header,
.luxury-quote-footer,
.luxury-quote-brand,
.luxury-quote-meta,
.luxury-quote-actions,
.luxury-decision-actions {
    display: flex;
    align-items: center;
}

.luxury-quote-header {
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(15, 118, 110, 0.14);
}

.luxury-quote-brand {
    gap: 16px;
    min-width: 0;
}

.luxury-quote-brand img,
.luxury-quote-brand > span {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 16px 30px rgba(20, 184, 166, 0.22);
}

.luxury-quote-brand > span {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f766e, #22d3ee);
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.luxury-quote-brand h2,
.luxury-quote-hero h1,
.luxury-section-title h2,
.luxury-component-card h3,
.luxury-terms-card h2 {
    margin: 0;
    color: #0f172a;
}

.luxury-quote-brand h2 {
    font-size: 24px;
    letter-spacing: -0.03em;
}

.luxury-quote-brand p,
.luxury-quote-meta small,
.luxury-quote-hero p,
.luxury-copy,
.luxury-component-card p,
.luxury-quote-footer p {
    margin: 5px 0 0;
    color: #64748b;
    line-height: 1.65;
}

.luxury-kicker,
.luxury-section-title p {
    margin: 0 0 8px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.luxury-quote-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    min-width: 180px;
    padding: 18px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 22px;
    background: #f8fafc;
    text-align: right;
}

.luxury-quote-meta strong {
    font-size: 22px;
    letter-spacing: -0.03em;
}

.luxury-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.luxury-quote-hero {
    position: relative;
    padding: 36px 0 26px;
}

.luxury-quote-hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 28px;
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.34), rgba(20, 184, 166, 0.06), transparent);
}

.luxury-quote-hero h1 {
    font-size: clamp(44px, 6vw, 78px);
    line-height: 0.95;
    letter-spacing: -0.07em;
}

.luxury-quote-hero p {
    font-size: 20px;
}

.luxury-quote-actions {
    position: sticky;
    top: 16px;
    z-index: 5;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.luxury-quote-actions a,
.luxury-quote-actions button,
.luxury-decision-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(15, 118, 110, 0.24);
    border-radius: 15px;
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    transition: all 0.2s ease;
}

.luxury-quote-actions a:hover,
.luxury-quote-actions button:hover,
.luxury-decision-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 18px 34px rgba(15, 118, 110, 0.16);
}

.luxury-quote-actions a:nth-child(3),
.luxury-decision-actions button:first-child {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
}

.luxury-quote-body.is-print-mode .luxury-quote-actions {
    display: none;
}

.luxury-quote-body.is-save-pdf-mode .luxury-quote-actions,
.luxury-quote-body.is-save-pdf-mode .luxury-decision-actions,
.luxury-quote-body.is-save-pdf-mode .toast-stack {
    display: none;
}

.luxury-info-grid,
.luxury-component-grid {
    display: grid;
    gap: 16px;
}

.luxury-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 26px;
}

.luxury-info-grid article,
.luxury-card,
.luxury-component-card,
.luxury-terms-card {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.luxury-info-grid article {
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 22px;
    background: #f8fafc;
}

.luxury-info-grid span,
.luxury-component-card > span,
.luxury-terms-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    font-weight: 900;
}

.luxury-info-grid small {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.luxury-info-grid strong {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.luxury-price-hero {
    margin-bottom: 28px;
    padding: 34px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.35), transparent 34%),
        linear-gradient(135deg, #0f766e 0%, #14b8a6 52%, #22d3ee 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 24px 52px rgba(20, 184, 166, 0.28);
}

.luxury-price-hero p,
.luxury-price-hero span {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.luxury-price-hero strong {
    display: block;
    margin: 8px 0;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1;
    letter-spacing: -0.07em;
}

.luxury-price-hero span {
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: none;
}

.luxury-two-column {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 20px;
}

.luxury-card {
    padding: 24px;
    border-radius: 24px;
}

.luxury-section-title {
    margin-bottom: 18px;
}

.luxury-section-title h2 {
    font-size: 22px;
    letter-spacing: -0.04em;
}

.luxury-price-table {
    display: grid;
    gap: 9px;
}

.luxury-price-table div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.32);
    color: #64748b;
}

.luxury-price-table strong {
    color: #0f172a;
}

.luxury-price-table .total {
    margin-top: 8px;
    padding: 16px;
    border: 0;
    border-radius: 18px;
    background: rgba(20, 184, 166, 0.1);
    color: #0f766e;
    font-weight: 900;
}

.luxury-price-table .total strong {
    color: #0f766e;
    font-size: 20px;
}

.luxury-decision-actions {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.luxury-decision-actions button:last-child {
    border-color: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

.luxury-component-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.luxury-component-card {
    padding: 20px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.luxury-component-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
}

.luxury-component-card h3 {
    margin-top: 16px;
    font-size: 18px;
    letter-spacing: -0.03em;
}

.luxury-component-card strong {
    display: block;
    margin-top: 12px;
    color: #0f766e;
    font-size: 18px;
}

.luxury-check-list,
.luxury-cross-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.luxury-check-list li,
.luxury-cross-list li {
    display: flex;
    gap: 10px;
    color: #334155;
    line-height: 1.55;
}

.luxury-check-list span,
.luxury-cross-list span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    font-weight: 900;
}

.luxury-check-list span {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.luxury-cross-list span {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.luxury-terms-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 20px 0;
    padding: 22px;
    border-color: rgba(245, 158, 11, 0.22);
    border-radius: 24px;
    background: #fffbeb;
}

.luxury-terms-card > span {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.luxury-terms-card p {
    margin: 8px 0 0;
    color: #92400e;
    line-height: 1.7;
}

.luxury-quote-footer {
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.luxury-quote-footer .luxury-quote-brand img,
.luxury-quote-footer .luxury-quote-brand > span {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 16px;
    font-size: 15px;
}

.luxury-quote-footer > p {
    max-width: 280px;
    text-align: right;
    font-size: 12px;
}

@media (max-width: 980px) {
    .luxury-quote-document {
        padding: 28px;
        border-radius: 24px;
    }

    .luxury-quote-header,
    .luxury-quote-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .luxury-quote-meta,
    .luxury-quote-footer > p {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    .luxury-info-grid,
    .luxury-component-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .luxury-two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .luxury-quote-shell {
        padding: 14px;
    }

    .luxury-quote-document {
        padding: 20px;
        border-radius: 22px;
    }

    .luxury-quote-brand {
        align-items: flex-start;
    }

    .luxury-quote-brand img,
    .luxury-quote-brand > span {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 17px;
    }

    .luxury-quote-actions {
        top: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .luxury-quote-actions a,
    .luxury-quote-actions button,
    .luxury-decision-actions button {
        width: 100%;
        padding: 0 12px;
    }

    .luxury-info-grid,
    .luxury-component-grid {
        grid-template-columns: 1fr;
    }

    .luxury-price-hero {
        padding: 26px 18px;
    }
}

@media print {
    @page {
        size: A4;
        margin: 8mm;
    }

    .luxury-quote-body {
        background: #f1f5f9 !important;
    }

    .luxury-quote-shell {
        min-height: auto;
        padding: 0;
    }

    .luxury-quote-document {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 22px;
        box-shadow: none;
    }

    .luxury-quote-header {
        padding-bottom: 18px;
    }

    .luxury-quote-hero {
        padding: 22px 0 16px;
    }

    .luxury-quote-hero h1 {
        font-size: 42px;
    }

    .luxury-info-grid,
    .luxury-component-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .luxury-two-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .luxury-quote-actions,
    .toast-stack,
    .luxury-decision-actions {
        display: none !important;
    }

    .luxury-card,
    .luxury-component-card,
    .luxury-info-grid article,
    .luxury-price-hero,
    .luxury-terms-card,
    .luxury-quote-header,
    .luxury-quote-footer {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .luxury-quote-body,
    .luxury-quote-document,
    .luxury-price-hero,
    .luxury-terms-card {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

@media (max-width: 1340px) {
    .quote-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-pricing-layout,
    .quote-preview-grid {
        grid-template-columns: 1fr;
    }

    .quote-pricing-sticky {
        position: static;
    }

    .quote-workspace-grid {
        grid-template-columns: 250px minmax(0, 1fr) 320px;
    }

    .quote-header-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .quote-workspace-grid,
    .quote-afterpanels,
    .quote-public-grid {
        grid-template-columns: 1fr;
    }

    .quote-pricing-panel {
        position: static;
    }

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

    .quote-step-grid {
        grid-template-columns: 1fr;
    }

    .quote-builder-notes-grid,
    .quote-status-grid,
    .quote-item-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .quote-stepper {
        grid-template-columns: 1fr;
    }

    .quote-item-step-toolbar,
    .quote-step-footer,
    .quote-item-toolbar,
    .quote-preview-line {
        display: grid;
        grid-template-columns: 1fr;
    }

    .quote-header-grid,
    .quote-builder-notes-grid,
    .quote-status-grid,
    .quote-item-price-grid,
    .compact-grid,
    .quote-public-grid {
        grid-template-columns: 1fr;
    }

    .quote-final-actions .premium-button {
        width: 100%;
        justify-content: center;
    }
}

.alert-strip {
    border-radius: 20px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(127, 29, 29, 0.2);
    padding: 16px 18px;
}

.alert-strip h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.alert-strip p,
.alert-strip li {
    color: var(--text-secondary);
    line-height: 1.65;
}

.alert-strip ul {
    margin: 10px 0 0;
    padding-left: 18px;
}

.table-stack,
.follow-up-list,
.mini-stack,
.form-stack {
    display: grid;
    gap: 10px;
}

.table-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.table-subtitle,
.table-note,
.helper-copy {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.table-note {
    margin-top: 6px;
}

.follow-up-list {
    margin-top: 18px;
}

.follow-up-item {
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 16px;
}

.follow-up-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

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

.form-grid.single {
    grid-template-columns: 1fr;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

textarea.form-input-dark {
    min-height: 108px;
    padding: 14px;
    resize: vertical;
}

.mini-form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.mini-form .premium-button,
.drawer-fields .premium-button {
    width: 100%;
}

.surface-divider {
    height: 1px;
    margin: 18px 0;
    background: var(--divider-soft);
}

.section-footnote {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.desktop-only {
    display: block;
}

.toast-stack {
    position: sticky;
    top: 18px;
    z-index: 20;
}

.toast-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: var(--surface-3);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
}

.toast-card p {
    margin: 6px 0 0;
    color: var(--text-secondary);
}

.toast-card.success {
    border-color: rgba(16, 185, 129, 0.24);
}

.toast-card.danger {
    border-color: rgba(239, 68, 68, 0.24);
}

.toast-card.accent {
    border-color: rgba(45, 212, 191, 0.24);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.8);
    outline-offset: 2px;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}

.dashboard-widget {
    overflow: hidden;
}

.dashboard-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.dashboard-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 16px 18px;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

a.dashboard-row {
    color: inherit;
    text-decoration: none;
}

.dashboard-row:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 212, 191, 0.22);
    box-shadow: var(--shadow-soft);
}

.dashboard-row.is-alert {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.82));
}

.dark .dashboard-row.is-alert {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.88));
}

.dashboard-row-main,
.dashboard-row-side,
.dashboard-row-meta-group,
.dashboard-inline-actions,
.dashboard-reschedule-form {
    display: flex;
}

.dashboard-row-main,
.dashboard-row-side,
.dashboard-row-meta-group {
    flex-direction: column;
    gap: 6px;
}

.dashboard-row-main strong {
    font-size: 15px;
}

.dashboard-row-main span,
.dashboard-row-meta {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.dashboard-row-side {
    align-items: flex-end;
    text-align: right;
}

.dashboard-row-stack {
    display: grid;
    gap: 12px;
}

.dashboard-action-list .dashboard-row:hover {
    transform: none;
}

.dashboard-inline-actions {
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-reschedule-form {
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-reschedule-form .form-input-dark {
    min-width: 220px;
}

.dashboard-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    margin-top: 24px;
    min-height: 240px;
}

.dashboard-bar-col {
    display: grid;
    gap: 10px;
    align-items: end;
    justify-items: center;
}

.dashboard-bar-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 190px;
    border-radius: 18px;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(45, 212, 191, 0.08), transparent),
        var(--surface-2);
    border: 1px solid var(--border-soft);
}

.dashboard-bar-fill {
    width: 100%;
    max-width: 44px;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    box-shadow: 0 12px 30px rgba(45, 212, 191, 0.18);
}

.dashboard-bar-label,
.dashboard-bar-value {
    text-align: center;
}

.dashboard-bar-label {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.dashboard-bar-value {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.dashboard-conversion-grid,
.dashboard-workload-grid {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

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

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

.dashboard-workload-grid .mini-data-card,
.dashboard-conversion-grid .mini-data-card {
    padding: 18px;
}

.dashboard-simple-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    padding: 22px;
    border-color: rgba(20, 184, 166, 0.22);
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.72), transparent 28%),
        linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.10) 56%, rgba(255, 255, 255, 0.92));
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.dashboard-live-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-simple-hero h1 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--text-strong);
    font-size: clamp(1.75rem, 2.5vw, 2.35rem);
}

.dashboard-simple-hero p {
    max-width: 620px;
    color: #334155;
    font-size: 15px;
    font-weight: 700;
}

.dashboard-quick-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.dashboard-quick-actions .premium-button {
    min-height: 44px;
    padding-inline: 18px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

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

.dashboard-priority-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-color: rgba(148, 163, 184, 0.22);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.dashboard-priority-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.28);
    box-shadow: var(--shadow-soft);
}

.dashboard-business-overview,
.dashboard-today-priority {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.09), transparent 34%);
}

.dashboard-business-grid {
    margin-top: 12px;
}

.dashboard-business-card.success {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.11), rgba(255, 255, 255, 0.92));
}

.dashboard-business-card.warning {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.92));
}

.dashboard-business-card.accent {
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.92));
}

.dashboard-business-card.danger {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.11), rgba(255, 255, 255, 0.92));
}

.dashboard-priority-top,
.dashboard-priority-foot,
.dashboard-work-main,
.dashboard-item-badge-row,
.dashboard-team-identity {
    display: flex;
    align-items: center;
}

.dashboard-priority-top,
.dashboard-priority-foot,
.dashboard-item-badge-row {
    justify-content: space-between;
    gap: 12px;
}

.dashboard-priority-icon,
.dashboard-item-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(20, 184, 166, 0.1));
    border: 1px solid rgba(45, 212, 191, 0.18);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

.dashboard-priority-icon.small {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
    font-size: 12px;
}

.dashboard-item-avatar.small {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 12px;
    font-size: 14px;
}

.dashboard-priority-card .metric-label {
    font-size: 12px;
    letter-spacing: 0.08em;
}

.dashboard-priority-card .metric-value {
    font-size: clamp(1.5rem, 1.8vw, 1.95rem);
    margin: 0;
    color: var(--text-strong);
    letter-spacing: -0.04em;
}

.dashboard-card-action,
.dashboard-row-link {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dashboard-simple-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

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

.dashboard-main-column,
.dashboard-side-column {
    display: grid;
    gap: 16px;
    align-content: start;
}

.dashboard-chart-card {
    min-height: 270px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.84)),
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.08), transparent 32%);
}

.dashboard-mini-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    min-height: 180px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.04), transparent 62%),
        repeating-linear-gradient(
            to top,
            rgba(148, 163, 184, 0.12) 0,
            rgba(148, 163, 184, 0.12) 1px,
            transparent 1px,
            transparent 48px
        );
}

.dashboard-mini-bar {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-mini-bar-value {
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-mini-bar-fill {
    width: min(42px, 70%);
    height: var(--bar-height);
    min-height: 14px;
    border-radius: 14px 14px 9px 9px;
    background: linear-gradient(180deg, #14b8a6, #0f766e);
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.22);
    transition: transform 180ms ease, filter 180ms ease;
}

.dashboard-leads-chart .dashboard-mini-bar-fill {
    background: linear-gradient(180deg, #3b82f6, #14b8a6);
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.18);
}

.dashboard-mini-bar:hover .dashboard-mini-bar-fill {
    transform: translateY(-3px);
    filter: saturate(1.08);
}

.dashboard-mini-bar-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.dashboard-funnel {
    display: grid;
    grid-template-columns: 1.25fr 1fr 0.78fr;
    gap: 10px;
    align-items: end;
    margin-top: 18px;
}

.dashboard-funnel-step {
    min-height: 132px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(255, 255, 255, 0.92));
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.dashboard-funnel-step:nth-child(2) {
    min-height: 112px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.92));
}

.dashboard-funnel-step:nth-child(3) {
    min-height: 92px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.13), rgba(255, 255, 255, 0.92));
}

.dashboard-funnel-step span {
    color: var(--text-strong);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.06em;
}

.dashboard-funnel-step strong {
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-payment-status {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.dashboard-payment-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.82);
}

.dashboard-payment-pill span {
    color: var(--text-strong);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.dashboard-payment-pill strong {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-payment-pill.success {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.1);
}

.dashboard-payment-pill.warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(245, 158, 11, 0.11);
}

.dashboard-payment-pill.danger {
    border-color: rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.1);
}

.dashboard-attention-grid,
.dashboard-work-today-list,
.dashboard-team-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.dashboard-attention-card {
    align-items: center;
    min-height: 78px;
}

.dashboard-attention-card .dashboard-row-main strong,
.dashboard-work-today-list .dashboard-row-main strong {
    font-size: 16px;
    line-height: 1.2;
}

.dashboard-work-item {
    border-left: 4px solid var(--accent);
}

.dashboard-work-item.priority-overdue {
    border-left-color: var(--warning);
}

.dashboard-work-main {
    gap: 14px;
    align-items: flex-start;
}

.dashboard-priority-center-grid,
.dashboard-insight-grid,
.dashboard-bottom-grid {
    display: grid;
    gap: 12px;
}

.dashboard-priority-center-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.dashboard-priority-center-card {
    display: grid;
    gap: 8px;
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 13px;
}

.dashboard-priority-center-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dashboard-priority-center-head strong {
    display: block;
    font-size: 14px;
    line-height: 1.25;
}

.dashboard-priority-center-head p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

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

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

.dashboard-item-badge-row {
    flex-wrap: wrap;
}

.dashboard-task-actions {
    margin-top: 2px;
}

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

.dashboard-snapshot-grid .mini-data-card {
    padding: 14px;
}

.dashboard-snapshot-grid .mini-data-card strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    line-height: 1.2;
}

.dashboard-chart-simple {
    margin-top: 10px;
    min-height: 210px;
    padding: 4px 2px 0;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(45, 212, 191, 0.04), transparent 55%),
        repeating-linear-gradient(
            to top,
            rgba(148, 163, 184, 0.12) 0,
            rgba(148, 163, 184, 0.12) 1px,
            transparent 1px,
            transparent 56px
        );
}

.dashboard-chart-simple .dashboard-bar-track {
    min-height: 162px;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.dashboard-chart-simple .dashboard-bar-fill {
    max-width: 44px;
    border-radius: 14px 14px 10px 10px;
}

.dashboard-chart-simple .dashboard-bar-track:hover {
    transform: translateY(-2px);
    border-color: rgba(45, 212, 191, 0.28);
    box-shadow: var(--shadow-soft);
}

.dashboard-chart-simple .dashboard-bar-value {
    font-size: 13px;
}

.dashboard-chart-caption {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

.dashboard-team-card {
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 14px;
}

.dashboard-team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-team-identity {
    gap: 12px;
}

.dashboard-team-head strong {
    font-size: 15px;
}

.dashboard-team-head span,
.dashboard-team-metrics span {
    color: var(--text-secondary);
    font-size: 13px;
}

.dashboard-team-progress {
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

.dashboard-team-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.dashboard-team-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
}

.dashboard-mobile-dock {
    display: none;
}

.dashboard-side-summary-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.dashboard-priority-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.dashboard-priority-compact-card {
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-height: 164px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 38%);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.dashboard-priority-compact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.22);
    box-shadow: var(--shadow-soft);
}

.dashboard-priority-compact-card.success {
    box-shadow: inset 0 4px 0 rgba(34, 197, 94, 0.92);
}

.dashboard-priority-compact-card.warning {
    box-shadow: inset 0 4px 0 rgba(245, 158, 11, 0.92);
}

.dashboard-priority-compact-card.danger {
    box-shadow: inset 0 4px 0 rgba(239, 68, 68, 0.92);
}

.dashboard-priority-compact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-priority-compact-body {
    display: grid;
    gap: 8px;
}

.dashboard-priority-compact-body strong {
    color: var(--text-strong);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.dashboard-priority-compact-body span {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.dashboard-side-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 11px 13px;
}

.dashboard-priority-status-row {
    text-decoration: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.76));
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.dashboard-priority-status-row:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.22);
    box-shadow: var(--shadow-soft);
}

.dashboard-priority-status-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dashboard-priority-status-row.success {
    border-left: 4px solid var(--success);
}

.dashboard-priority-status-row.warning {
    border-left: 4px solid var(--warning);
}

.dashboard-priority-status-row.danger {
    border-left: 4px solid var(--danger);
}

.dashboard-priority-status-row > .status-badge {
    display: inline-flex;
    margin-top: 0;
    white-space: nowrap;
}

.dashboard-side-summary-row strong {
    font-size: 14px;
}

.dashboard-side-summary-row span {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.dashboard-activity-compact {
    gap: 8px;
}

.dashboard-timeline-list {
    position: relative;
    display: grid;
    gap: 10px;
}

.dashboard-timeline-item {
    position: relative;
    min-height: 64px;
    border-left: 3px solid rgba(20, 184, 166, 0.42);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.72));
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.dashboard-timeline-item:hover {
    transform: translateY(-2px);
    border-left-color: var(--accent);
    box-shadow: var(--shadow-soft);
}

html.dark .dashboard-simple-hero {
    background:
        radial-gradient(circle at 14% 10%, rgba(45, 212, 191, 0.20), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(20, 184, 166, 0.12));
}

html.dark .dashboard-business-overview,
html.dark .dashboard-today-priority,
html.dark .dashboard-chart-card,
html.dark .dashboard-timeline-item,
html.dark .dashboard-priority-compact-card {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.68)),
        radial-gradient(circle at top right, rgba(45, 212, 191, 0.10), transparent 34%);
}

html.dark .dashboard-priority-status-row,
html.dark .dashboard-payment-pill {
    background: rgba(15, 23, 42, 0.72);
}

.dashboard-activity-row {
    align-items: center;
    padding: 12px 14px;
}

.saas-logs-shell {
    gap: 18px;
}

.saas-logs-toolbar {
    position: sticky;
    top: 16px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-1) 92%, transparent);
    backdrop-filter: blur(12px);
}

.saas-logs-search {
    flex: 1 1 620px;
}

.saas-logs-filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.saas-logs-filter-pills .status-badge {
    text-decoration: none;
    transition: all 0.2s ease;
}

.saas-logs-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.saas-log-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 68px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    border-left-width: 3px;
    background: var(--surface-1);
    transition: all 0.2s ease;
}

.saas-log-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.saas-log-row.success {
    border-left-color: #22c55e;
}

.saas-log-row.warning {
    border-left-color: #f59e0b;
}

.saas-log-row.danger {
    border-left-color: #ef4444;
}

.saas-log-row.info {
    border-left-color: #3b82f6;
}

.saas-log-row.accent,
.saas-log-row.subtle {
    border-left-color: #14b8a6;
}

.saas-log-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-primary);
}

.saas-log-row.success .saas-log-icon {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.saas-log-row.warning .saas-log-icon {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.saas-log-row.danger .saas-log-icon {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.saas-log-row.info .saas-log-icon {
    background: rgba(59, 130, 246, 0.14);
    color: #2563eb;
}

.saas-log-row.accent .saas-log-icon,
.saas-log-row.subtle .saas-log-icon {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.saas-log-icon svg {
    width: 18px;
    height: 18px;
}

.saas-log-content {
    flex: 1 1 auto;
    min-width: 0;
}

.saas-log-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.saas-log-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.saas-log-heading strong {
    font-size: 13px;
    line-height: 1.35;
}

.saas-log-time {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.saas-log-description {
    margin: 5px 0 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}

.saas-log-meta {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.saas-logs-pagination {
    margin-top: 16px;
}

.saas-logs-empty {
    min-height: 120px;
}

.lead-toolbar,
.lead-search-form,
.lead-toolbar-actions,
.lead-filter-row,
.pagination-row,
.table-actions,
.lead-mobile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lead-toolbar {
    align-items: center;
    justify-content: space-between;
}

.lead-search-form {
    flex: 1 1 680px;
    align-items: center;
}

.lead-search-box {
    flex: 1 1 420px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    padding: 0 16px;
}

.lead-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
}

.lead-toolbar-actions {
    align-items: center;
    justify-content: flex-end;
}

.booking-profile-shell {
    margin-top: 24px;
}

.booking-metrics-grid .metric-card {
    min-height: 144px;
}

.booking-table-wrap {
    margin-top: 16px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.98));
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.06);
    overflow: auto;
}

html.dark .booking-table-wrap {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.98));
}

.booking-table {
    min-width: 1180px;
    table-layout: auto;
}

.booking-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(248, 250, 252, 0.92);
    backdrop-filter: blur(14px);
}

html.dark .booking-table th {
    background: rgba(15, 23, 42, 0.94);
}

.booking-table th,
.booking-table td {
    vertical-align: middle;
}

.booking-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}

.booking-table tr:hover td {
    background: rgba(45, 212, 191, 0.045);
}

.booking-table td:nth-child(4),
.booking-table td:nth-child(12) {
    white-space: nowrap;
}

.booking-table td:last-child,
.booking-table th:last-child {
    white-space: nowrap;
}

.booking-profile-header,
.booking-header-actions,
.booking-status-row,
.booking-status-form,
.booking-payment-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.booking-profile-header,
.booking-status-row {
    align-items: center;
    justify-content: space-between;
}

.booking-header-actions {
    justify-content: flex-end;
}

.booking-header-actions--compact {
    gap: 10px;
    max-width: 640px;
}

.booking-status-form {
    align-items: end;
    flex: 1 1 420px;
}

.booking-status-form label {
    display: grid;
    gap: 8px;
    min-width: 240px;
}

.booking-status-actions {
    flex: 0 1 auto;
}

.booking-profile-overview {
    gap: 12px;
    margin-top: 18px;
}

.booking-mini-card {
    min-height: 88px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.78));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

html.dark .booking-mini-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.96));
}

.booking-mini-card strong {
    display: block;
    margin-top: 8px;
    font-size: 1.02rem;
    color: var(--text-primary);
}

.booking-content-grid {
    margin-top: 24px;
}

.booking-summary-sticky {
    position: sticky;
    top: 22px;
}

.booking-document-stack {
    gap: 12px;
}

.booking-document-stack .list-item-card,
.booking-invoice-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

html.dark .booking-document-stack .list-item-card,
html.dark .booking-invoice-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.96));
}

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

.booking-vendor-editor-head {
    margin-bottom: 12px;
}

.booking-vendor-assignment-list {
    gap: 14px;
}

.booking-vendor-row {
    border-radius: 22px;
    border: 1px solid rgba(20, 184, 166, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.92));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

html.dark .booking-vendor-row {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.98));
}

.booking-vendor-actions {
    margin-top: 12px;
    justify-content: flex-start;
}

.booking-vendor-update-form {
    margin-top: 14px;
}

.booking-vendor-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.booking-vendor-summary-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.88));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.booking-vendor-card-list {
    gap: 16px;
}

.booking-vendor-card {
    border-radius: 24px;
    border: 1px solid rgba(20, 184, 166, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.booking-vendor-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.booking-vendor-status-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.booking-vendor-card-grid,
.booking-vendor-contact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.booking-vendor-detail-card,
.booking-vendor-contact-strip > div {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(248, 250, 252, 0.9);
}

.booking-vendor-contact-strip > div strong {
    display: block;
    margin-top: 6px;
    color: var(--text-strong);
    word-break: break-word;
}

.booking-vendor-card-actions {
    margin-top: 14px;
    gap: 10px;
    flex-wrap: wrap;
}

.booking-vendor-card-actions .icon-action,
.booking-vendor-card-actions .inline-form {
    flex: 0 0 auto;
}

.booking-vendor-editor {
    margin-top: 16px;
}

.booking-vendor-editor-shell {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.booking-vendor-editor-headline {
    margin-bottom: 14px;
}

.booking-vendor-editor-actions {
    margin-top: 14px;
    justify-content: flex-start;
}

.booking-vendor-remove-form {
    margin-top: 14px;
}

.booking-vendor-empty-state {
    display: grid;
    gap: 10px;
    justify-items: flex-start;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px dashed rgba(20, 184, 166, 0.26);
    background: rgba(240, 253, 250, 0.7);
}

.booking-vendor-empty-state strong {
    color: var(--text-strong);
    font-size: 18px;
}

.booking-vendor-empty-state p {
    margin: 0;
}

.inline-select {
    min-width: 150px;
}

.booking-row-actions {
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

.booking-row-action-inline {
    min-width: 0;
}

.booking-actions-label-mobile {
    display: none;
}

.booking-actions-menu .quote-actions-dropdown,
.booking-actions-menu .quote-actions-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    display: grid;
    gap: 4px;
    min-width: 188px;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--card-bg);
    box-shadow: var(--shadow-float);
}

.quote-actions-item-form {
    width: 100%;
}

.quote-actions-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--card-fg);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.quote-actions-item:hover {
    background: rgba(45, 212, 191, 0.08);
    transform: translateY(-1px);
}

.quote-actions-item.danger {
    color: var(--danger);
}

.button-reset {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.is-selected-row td {
    background: rgba(45, 212, 191, 0.06);
}

html.dark .is-selected-row td {
    background: rgba(45, 212, 191, 0.08);
}

.lead-filter-row {
    margin-top: 18px;
}

.lead-table-shell {
    margin-top: 18px;
    overflow: auto;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}

html.dark .booking-vendor-summary-card,
html.dark .booking-vendor-card,
html.dark .booking-vendor-editor-shell {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.98));
}

html.dark .booking-vendor-detail-card,
html.dark .booking-vendor-contact-strip > div,
html.dark .booking-vendor-empty-state {
    background: rgba(15, 23, 42, 0.78);
}

@media (max-width: 1200px) {
    .booking-vendor-summary-grid,
    .booking-vendor-card-grid,
    .booking-vendor-contact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .booking-vendor-summary-grid,
    .booking-vendor-card-grid,
    .booking-vendor-contact-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-vendor-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-vendor-status-stack {
        justify-content: flex-start;
    }

    .booking-vendor-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-vendor-card-actions .icon-action,
    .booking-vendor-card-actions .inline-form,
    .booking-vendor-card-actions .inline-form .icon-action {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .booking-vendor-editor-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-vendor-editor-actions .premium-button {
        width: 100%;
    }
}

.lead-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
}

html.dark .lead-table th {
    background: rgba(15, 23, 42, 0.92);
}

.lead-table td {
    vertical-align: top;
}

.lead-table tr:hover td {
    background: rgba(45, 212, 191, 0.04);
}

.lead-table tr.is-overdue td:first-child {
    box-shadow: inset 4px 0 0 var(--danger);
}

.inline-stage-form {
    min-width: 170px;
}

.stage-select {
    min-height: 42px;
    font-size: 13px;
}

.table-actions {
    align-items: center;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 1180px) {
    .booking-profile-header,
    .booking-status-row {
        align-items: flex-start;
    }

    .booking-header-actions--compact,
    .booking-status-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .booking-summary-sticky {
        position: static;
    }
}

@media (max-width: 768px) {
    .booking-profile-shell {
        margin-top: 18px;
    }

    .booking-metrics-grid {
        gap: 12px;
    }

    .booking-metrics-grid .metric-card {
        min-height: 132px;
    }

    .booking-status-form,
    .booking-status-form label,
    .booking-header-actions,
    .booking-row-actions {
        width: 100%;
    }

    .booking-status-form label {
        min-width: 0;
    }

    .booking-row-actions {
        justify-content: flex-end;
    }

    .booking-actions-menu {
        width: auto;
    }

    .booking-actions-menu summary {
        width: auto;
    }

    .booking-actions-menu .quote-actions-dropdown,
    .booking-actions-menu .quote-actions-panel {
        left: 0;
        right: auto;
        width: min(100%, 240px);
    }

    .booking-profile-overview,
    .compact-form-grid {
        grid-template-columns: 1fr;
    }

    .booking-mini-card {
        min-height: auto;
    }

    .booking-row-action-inline {
        display: none;
    }

    .booking-actions-label-desktop {
        display: none;
    }

    .booking-actions-label-mobile {
        display: inline;
    }

    .booking-vendor-row {
        padding: 16px;
    }
}

.table-card {
    width: 100%;
    overflow: hidden;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.saas-agencies-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
    align-items: start;
}

.agency-simplified-layout {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 20px;
}

.agency-list-panel,
.agency-side-panel,
.agency-workspace-panel {
    min-width: 0;
}

.agency-list-panel {
    position: sticky;
    top: 16px;
}

.agency-list-head {
    align-items: center;
}

.agency-filter-toolbar {
    margin-top: 6px;
}

.agency-filter-form {
    gap: 10px;
}

.agency-table-wrap {
    width: 100%;
    padding: 0;
    margin-top: 14px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
}

.agency-table {
    min-width: 1140px;
    width: 100%;
    table-layout: auto;
}

.agency-compact-table {
    min-width: 100%;
}

.agency-table th,
.agency-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: middle;
}

.agency-table .agency-cell-name {
    min-width: 220px;
    white-space: normal;
}

.agency-table .agency-cell-owner {
    min-width: 150px;
}

.agency-table .agency-cell-email {
    min-width: 220px;
}

.agency-table .agency-cell-plan {
    min-width: 120px;
}

.agency-table .agency-cell-status {
    min-width: 110px;
}

.agency-table .agency-cell-trial {
    min-width: 130px;
}

.agency-table .agency-cell-users {
    min-width: 72px;
}

.agency-table .agency-cell-created {
    min-width: 156px;
}

.agency-table .agency-cell-actions {
    min-width: 370px;
    white-space: normal;
}

.agency-table-actions {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-start;
}

.agency-table-actions .inline-form {
    flex: 0 0 auto;
}

.agency-table-actions .table-action-button {
    white-space: nowrap;
}

.agency-side-panel .admin-drawer {
    margin-top: 4px;
}

.agency-side-panel .admin-drawer-summary {
    min-height: auto;
}

.agency-list-row {
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.agency-list-row:hover {
    background: rgba(45, 212, 191, 0.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.agency-list-row.is-selected {
    background: rgba(45, 212, 191, 0.12);
    box-shadow: inset 3px 0 0 var(--teal-500);
}

.agency-workspace-shell {
    display: grid;
    gap: 18px;
}

.agency-workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.workspace-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.agency-workspace-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.agency-workspace-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.agency-workspace-tab.is-active {
    background: rgba(45, 212, 191, 0.14);
    border-color: rgba(45, 212, 191, 0.4);
    color: var(--text-strong);
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.12);
}

.agency-workspace-tab:hover {
    transform: translateY(-1px);
    background: var(--surface-2);
}

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

.agency-summary-grid-billing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agency-summary-grid .mini-data-card {
    padding: 18px;
}

.agency-summary-grid .mini-data-card strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
}

.workspace-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.workspace-stack {
    gap: 14px;
}

.workspace-timeline-list {
    gap: 12px;
}

.workspace-timeline-card {
    padding: 18px;
}

.agency-empty-workspace {
    display: grid;
    gap: 18px;
    min-height: 540px;
    align-content: start;
}

.agency-login-warning {
    margin-bottom: 4px;
}

.saas-billing-layout {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.billing-control-panel {
    min-width: 0;
}

.billing-table-wrap {
    width: 100%;
    padding: 0;
    margin-top: 14px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
}

.billing-table {
    min-width: 1140px;
    width: 100%;
    table-layout: auto;
}

.billing-table-row {
    transition: all 0.2s ease;
}

.billing-table-row:hover {
    background: rgba(20, 184, 166, 0.05);
}

.billing-table-row[data-status="paid"] td:first-child,
.billing-table-row[data-status="part_paid"] td:first-child {
    box-shadow: inset 4px 0 0 var(--success);
}

.billing-table-row[data-status="unpaid"] td:first-child,
.billing-table-row[data-status="pending"] td:first-child,
.billing-table-row[data-status="issued"] td:first-child,
.billing-table-row[data-status="manual_pending"] td:first-child {
    box-shadow: inset 4px 0 0 var(--warning);
}

.billing-table-row[data-status="overdue"] td:first-child,
.billing-table-row[data-status="failed"] td:first-child,
.billing-table-row[data-status="cancelled"] td:first-child {
    box-shadow: inset 4px 0 0 var(--danger);
}

.billing-table th,
.billing-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: middle;
}

.billing-table .billing-cell-invoice {
    min-width: 120px;
}

.billing-table .billing-cell-agency {
    min-width: 180px;
}

.billing-table .billing-cell-plan {
    min-width: 120px;
}

.billing-table .billing-cell-amount {
    min-width: 120px;
}

.billing-table .billing-cell-due,
.billing-table .billing-cell-paid {
    min-width: 130px;
}

.billing-table .billing-cell-status {
    min-width: 120px;
}

.billing-table .billing-cell-actions {
    min-width: 320px;
    white-space: normal;
}

.billing-table-actions {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.billing-table-actions .inline-form {
    flex: 0 0 auto;
}

.billing-table-actions .table-action-button {
    white-space: nowrap;
}

.table-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--card-fg);
    padding: 0 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.table-action-button.primary {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.95), rgba(15, 118, 110, 0.95));
    border-color: rgba(20, 184, 166, 0.32);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.18);
}

.table-action-button.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #15803d;
    font-weight: 800;
}

.quote-actions-menu {
    position: relative;
    display: inline-grid;
}

.quote-actions-menu summary {
    list-style: none;
}

.quote-actions-menu summary::-webkit-details-marker {
    display: none;
}

.quote-actions-trigger::after {
    content: "⌄";
    margin-left: 6px;
    font-size: 11px;
}

.quote-actions-panel {
    margin-top: 8px;
    z-index: 20;
    display: grid;
    gap: 8px;
    min-width: 150px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--card-bg);
    box-shadow: var(--shadow-float);
}

.quote-actions-panel .table-action-button,
.quote-actions-panel .inline-form,
.quote-actions-panel .inline-form button {
    width: 100%;
}

.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--card-fg);
    padding: 0 10px;
    cursor: pointer;
    transition: 180ms ease;
    text-decoration: none;
    font-size: 12px;
}

.table-action-button:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 212, 191, 0.24);
    background: var(--icon-button-hover-bg);
    box-shadow: var(--shadow-soft);
}

.icon-action:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 212, 191, 0.24);
    background: var(--icon-button-hover-bg);
}

.table-action-button.danger {
    background: var(--surface-danger);
    border-color: rgba(239, 68, 68, 0.22);
    color: var(--danger-strong);
}

.lead-search-box span svg {
    width: 18px;
    height: 18px;
}

.icon-action.danger {
    color: var(--danger);
}

button:disabled,
.premium-button:disabled,
.table-action-button:disabled,
.icon-action:disabled,
.icon-button:disabled,
select:disabled,
input:disabled,
textarea:disabled {
    background: var(--disabled-bg);
    color: var(--disabled-fg);
    border-color: var(--disabled-border);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.75;
}

.lead-mobile-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.lead-mobile-card {
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

.lead-mobile-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.28);
}

.lead-mobile-meta {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 13px;
}

.lead-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.lead-kpi-card {
    min-height: 132px;
    padding: 18px 20px;
}

.lead-toolbar--simple {
    display: block;
}

.lead-toolbar--simple .lead-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px auto;
    gap: 12px;
    align-items: center;
}

.lead-filter-dropdown {
    min-width: 0;
}

.lead-toolbar-new {
    white-space: nowrap;
}

.lead-inbox-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.lead-inbox-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.8fr) minmax(220px, 0.62fr);
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lead-inbox-card:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, 0.24);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}

.lead-inbox-card.is-selected {
    border-color: rgba(20, 184, 166, 0.34);
    box-shadow: 0 20px 34px rgba(20, 184, 166, 0.1);
}

.lead-inbox-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.3);
}

.lead-inbox-main,
.lead-inbox-center,
.lead-inbox-side {
    min-width: 0;
}

.lead-inbox-main {
    display: grid;
    gap: 14px;
}

.lead-inbox-contact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.lead-inbox-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.lead-inbox-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
}

.lead-inbox-subline {
    color: var(--text-secondary);
    font-size: 14px;
}

.lead-inbox-phone-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 13px;
}

.lead-inbox-phone {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

.lead-inline-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #15803d;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.lead-inbox-center,
.lead-inbox-side {
    display: grid;
    gap: 12px;
    align-content: center;
}

.lead-stage-summary {
    display: grid;
    gap: 8px;
}

.lead-stage-active {
    width: fit-content;
    min-height: 32px;
    padding-inline: 12px;
    font-weight: 800;
}

.lead-stage-change-form {
    margin: 0;
}

.lead-stage-change-wrap {
    display: grid;
    gap: 6px;
}

.lead-stage-change-wrap span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lead-stage-select-compact {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 12px;
    box-shadow: none;
}

.lead-inbox-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lead-inbox-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 12px;
}

.lead-inbox-meta--stack {
    display: grid;
    gap: 8px;
}

.lead-inbox-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
}

.lead-inbox-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.lead-action-icon {
    min-height: 34px;
    font-size: 12px;
    white-space: nowrap;
}

.lead-inbox-actions .icon-action.whatsapp {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.22);
    color: #15803d;
}

.lead-actions-menu summary {
    min-width: 42px;
    padding: 0 12px;
}

html.dark .lead-inbox-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.96));
}

html.dark .lead-inline-wa,
html.dark .lead-inbox-actions .icon-action.whatsapp {
    color: #4ade80;
}

@media (max-width: 980px) {
    .lead-toolbar--simple .lead-search-form {
        grid-template-columns: 1fr;
    }

    .lead-toolbar-new {
        width: 100%;
        justify-content: center;
    }

    .lead-inbox-card {
        grid-template-columns: 1fr;
    }

    .lead-inbox-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .lead-kpi-grid {
        grid-template-columns: 1fr;
    }

    .lead-kpi-card {
        min-height: 118px;
        padding: 16px 18px;
    }

    .lead-inbox-card {
        gap: 14px;
        padding: 16px;
    }

    .lead-inbox-contact {
        align-items: flex-start;
    }

    .lead-inbox-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-inbox-actions .quote-actions-menu {
        grid-column: span 2;
    }

    .lead-inbox-actions > .icon-action:nth-child(2) {
        display: none;
    }

    .lead-inbox-actions .icon-action,
    .lead-actions-menu summary {
        width: 100%;
        justify-content: center;
    }

    .lead-inbox-main,
    .lead-inbox-center,
    .lead-inbox-side {
        gap: 10px;
    }
}

.pagination-row {
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.pagination-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    color: var(--text-secondary);
    font-weight: 700;
}

.pagination-pill.is-active,
.pagination-pill:hover {
    background: var(--surface-accent);
    color: var(--text-primary);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
}

.drawer-overlay.is-open {
    display: block;
}

.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px);
}

.drawer-sheet {
    position: absolute;
    top: 0;
    right: 0;
    width: min(720px, 100%);
    height: 100%;
    overflow: auto;
    border-left: 1px solid var(--border-soft);
    background: rgba(248, 252, 255, 0.92);
    box-shadow: var(--shadow-float);
    padding: 22px;
}

html.dark .drawer-sheet {
    background: rgba(15, 23, 42, 0.94);
}

.drawer-sheet.modal-style {
    width: min(760px, 100%);
}

.mini-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.permission-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.permission-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-soft);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

html.dark .permission-check {
    background: rgba(15, 23, 42, 0.78);
}

.permission-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.permission-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-permission-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.itinerary-builder-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
}

/* Itinerary Builder UI refresh: scoped premium travel-planning design layer. */
.itinerary-experience {
    display: grid;
    gap: 22px;
    max-width: var(--content-max);
    margin: 0 auto;
}

.itinerary-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 24px;
    overflow: hidden;
    min-height: 0;
    padding: 28px;
    background:
        linear-gradient(115deg, rgba(20, 184, 166, 0.08), transparent 34%, rgba(56, 189, 248, 0.10)),
        radial-gradient(circle at 78% 20%, rgba(20, 184, 166, 0.20), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.82));
    isolation: isolate;
}

.itinerary-hero::before {
    content: "";
    position: absolute;
    inset: auto -8% -42% 52%;
    height: 260px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(56, 189, 248, 0.14));
    filter: blur(4px);
    pointer-events: none;
}

.itinerary-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        radial-gradient(circle at 12px 12px, rgba(15, 118, 110, 0.18) 1px, transparent 1px),
        linear-gradient(110deg, transparent 0 44%, rgba(20, 184, 166, 0.10) 44% 45%, transparent 45% 100%);
    background-size: 28px 28px, 180px 180px;
    pointer-events: none;
    z-index: 0;
}

.itinerary-hero-main {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.itinerary-breadcrumb {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.itinerary-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(34px, 4vw, 58px);
    letter-spacing: -0.055em;
}

.itinerary-hero p {
    max-width: 720px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.65;
}

.itinerary-hero-meta,
.itinerary-save-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.itinerary-hero-meta span,
.itinerary-save-status {
    padding: 8px 11px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.itinerary-trip-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.itinerary-trip-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.itinerary-progress-widget {
    display: grid;
    gap: 8px;
    max-width: 470px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.70);
    box-shadow: var(--shadow-soft);
}

.itinerary-progress-widget > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.itinerary-progress-widget strong {
    color: var(--accent-strong);
    font-size: 24px;
    letter-spacing: -0.05em;
}

.itinerary-progress-widget span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.itinerary-progress-track,
.itinerary-sparkline {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
}

.itinerary-progress-track span,
.itinerary-sparkline span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #38bdf8);
    box-shadow: 0 0 22px rgba(20, 184, 166, 0.36);
    transition: width 0.7s ease;
}

.itinerary-live-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent-strong);
}

.itinerary-live-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.12);
}

.itinerary-hero-actions {
    margin-top: 6px;
}

.itinerary-hero-art {
    position: relative;
    z-index: 1;
    min-height: 260px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 18%),
        linear-gradient(135deg, rgba(15, 118, 110, 0.95), rgba(20, 184, 166, 0.72) 46%, rgba(14, 165, 233, 0.48) 100%),
        radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.24), transparent 26%);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

.itinerary-hero-art::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px);
    background-size: 34px 34px;
}

.itinerary-hero-art::after {
    content: "";
    position: absolute;
    inset: auto -12% -18% 36%;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(186, 230, 253, 0.26), rgba(186, 230, 253, 0) 72%);
    filter: blur(10px);
}

.itinerary-map-card {
    position: absolute;
    top: 24px;
    left: 24px;
    width: min(290px, calc(100% - 48px));
    display: grid;
    gap: 10px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));
    color: #ffffff;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.14);
}

.itinerary-map-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.itinerary-map-card strong {
    display: block;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.itinerary-map-card small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
    line-height: 1.45;
}

.itinerary-canvas-stats,
.itinerary-share-analytics {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

.itinerary-canvas-stats span,
.itinerary-share-analytics span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.17);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 900;
}

.itinerary-map-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f766e;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.itinerary-map-pin svg {
    width: 20px;
    height: 20px;
}

.itinerary-map-visual {
    position: absolute;
    inset: 96px 24px 18px 34%;
    min-height: 154px;
    pointer-events: none;
}

.itinerary-india-map {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.itinerary-india-map-outline {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(255, 255, 255, 0.30);
    stroke-width: 2.2;
}

.itinerary-india-map-inner {
    fill: rgba(255, 255, 255, 0.05);
    stroke: rgba(191, 219, 254, 0.14);
    stroke-width: 1.1;
}

.itinerary-route-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.86);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 2 10;
    filter: drop-shadow(0 0 10px rgba(153, 246, 228, 0.32));
}

.itinerary-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12), 0 0 22px rgba(255, 255, 255, 0.40);
    animation: itineraryPulse 2.4s ease-in-out infinite;
}

.itinerary-node.node-a {
    left: 52px;
    top: 123px;
}

.itinerary-node.node-b {
    left: 50%;
    top: 123px;
    animation-delay: 0.35s;
}

.itinerary-node.node-c {
    right: 58px;
    top: 123px;
    animation-delay: 0.7s;
}

@keyframes itineraryPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.16);
    }
}

.itinerary-route-dot {
    fill: #ffffff;
    stroke: rgba(20, 184, 166, 0.56);
    stroke-width: 4;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.34));
}

.itinerary-route-pin {
    fill: rgba(255, 255, 255, 0.96);
    stroke: rgba(15, 118, 110, 0.16);
    stroke-width: 1;
    filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.14));
}

.itinerary-route-pin circle {
    fill: #14b8a6;
    stroke: none;
}

.itinerary-route-legend {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.itinerary-route-legend strong,
.itinerary-route-legend small {
    display: block;
}

.itinerary-route-legend strong {
    font-size: 12px;
    line-height: 1.1;
}

.itinerary-route-legend small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 800;
}

.itinerary-route-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.itinerary-route-legend-dot.destination {
    background: #99f6e4;
}

.itinerary-route-legend.legend-start {
    left: 34px;
    bottom: 30px;
}

.itinerary-route-legend.legend-end {
    right: 30px;
    bottom: 66px;
}

.itinerary-mini-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 42px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    transition: transform 0.2s ease;
}

.itinerary-mini-card:hover,
.itinerary-weather-card:hover {
    transform: translateY(-3px);
}

.itinerary-mini-card.one {
    left: 168px;
    bottom: 26px;
}

.itinerary-mini-card.two {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) rotate(-2deg);
}

.itinerary-mini-card.three {
    right: 28px;
    bottom: 24px;
}

.itinerary-weather-card {
    position: absolute;
    right: 28px;
    top: 24px;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    transition: transform 0.2s ease;
}

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

.itinerary-metric-card {
    position: relative;
    min-height: 158px;
    overflow: hidden;
    border-color: rgba(20, 184, 166, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.82)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.13), transparent 42%);
    transition: all 0.2s ease;
}

.itinerary-metric-card::after {
    content: "";
    position: absolute;
    inset: auto 18px 16px 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.34), transparent);
}

.itinerary-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
}

.itinerary-metric-card .metric-value {
    animation: itineraryCountIn 0.55s ease both;
}

@keyframes itineraryCountIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.itinerary-metric-icon,
.itinerary-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.12);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.12), 0 12px 26px rgba(20, 184, 166, 0.08);
}

.itinerary-metric-icon.warning {
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning-strong);
}

.itinerary-metric-icon.info {
    background: rgba(59, 130, 246, 0.14);
    color: var(--info-strong);
}

.itinerary-metric-icon.success,
.itinerary-metric-icon.done {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success-strong);
}

.itinerary-sparkline {
    margin-top: 12px;
    height: 6px;
}

.itinerary-sparkline.warning span {
    background: linear-gradient(90deg, var(--warning), #fbbf24);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.28);
}

.itinerary-sparkline.info span {
    background: linear-gradient(90deg, var(--info), #38bdf8);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.28);
}

.itinerary-sparkline.success span,
.itinerary-sparkline.done span {
    background: linear-gradient(90deg, var(--success), #14b8a6);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.28);
}

.itinerary-list-panel,
.itinerary-builder-shell,
.itinerary-profile-shell {
    border-color: rgba(148, 163, 184, 0.18);
}

.itinerary-section-head {
    margin-bottom: 18px;
}

.itinerary-filter-bar {
    position: sticky;
    top: 88px;
    z-index: 6;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.itinerary-table-shell {
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.itinerary-table th {
    position: sticky;
    top: 154px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.14);
}

.itinerary-table tbody tr {
    transition: all 0.2s ease;
}

.itinerary-table tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.48);
}

.itinerary-table tbody tr:hover {
    background: rgba(20, 184, 166, 0.045);
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.42);
}

.itinerary-table tbody tr.is-selected {
    background: rgba(20, 184, 166, 0.08);
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.72);
}

.itinerary-row-check {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.itinerary-duration-pill,
.itinerary-time-chip,
.itinerary-day-weather {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.08);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.itinerary-day-weather {
    background: rgba(59, 130, 246, 0.10);
    color: var(--info-strong);
}

.itinerary-actions-menu .quote-actions-panel {
    min-width: 132px;
}

.itinerary-mobile-card {
    border-left: 4px solid rgba(20, 184, 166, 0.55);
}

.itinerary-builder-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 36%);
}

.itinerary-form-grid {
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.62);
}

.itinerary-details-drawer {
    border: 1px dashed rgba(20, 184, 166, 0.26);
    border-radius: 22px;
    padding: 16px;
    background: rgba(20, 184, 166, 0.035);
}

.itinerary-days-panel {
    position: relative;
}

.itinerary-toolbar {
    z-index: 8;
    top: 90px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
}

.itinerary-day-card {
    position: relative;
    cursor: grab;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.90)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 34%);
    box-shadow: var(--shadow-soft);
    transition: all 0.2s ease;
}

.itinerary-day-card::before {
    content: "";
    position: absolute;
    inset: 28px auto 28px -1px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), rgba(56, 189, 248, 0.72));
}

.itinerary-day-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

.itinerary-day-card.is-dragging {
    opacity: 0.45;
    transform: scale(0.99);
}

.itinerary-item-row {
    border-style: dashed;
    background: rgba(15, 23, 42, 0.015);
}

.itinerary-day-builder-head {
    align-items: flex-start;
}

.itinerary-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 34px;
    margin-right: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    font-weight: 900;
    vertical-align: middle;
}

.itinerary-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 34px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #38bdf8);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.itinerary-image-wrap {
    margin-top: 16px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    box-shadow: var(--shadow-soft);
    position: relative;
}

.itinerary-image-wrap::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.18));
    pointer-events: none;
}

.itinerary-image-wrap.small {
    max-width: 320px;
}

.itinerary-image-wrap img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform 0.25s ease;
}

.itinerary-image-wrap:hover img {
    transform: scale(1.035);
}

.itinerary-preview-card {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 130px);
    overflow: auto;
}

.itinerary-preview-thumbnail {
    display: grid;
    gap: 5px;
    min-height: 112px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(20, 184, 166, 0.72)),
        radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.40), transparent 28%);
    color: #ffffff;
}

.itinerary-preview-thumbnail span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.8;
}

.itinerary-preview-thumbnail strong {
    font-size: 22px;
    letter-spacing: -0.04em;
}

.itinerary-preview-summary,
.itinerary-preview-day,
.itinerary-note-card {
    border-radius: 18px;
}

.itinerary-sticky-actions {
    position: sticky;
    bottom: 18px;
    z-index: 7;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(18px);
}

.itinerary-overview-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.itinerary-info-card,
.itinerary-chip-card {
    display: grid;
    gap: 7px;
    min-height: 124px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.90));
    box-shadow: var(--shadow-soft);
    transition: all 0.2s ease;
}

.itinerary-info-card:hover,
.itinerary-chip-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.22);
    box-shadow: var(--shadow-float);
}

.itinerary-info-card strong,
.itinerary-chip-card strong {
    color: var(--text-primary);
    line-height: 1.35;
}

.itinerary-timeline-shell {
    overflow: hidden;
}

.itinerary-timeline-list {
    position: relative;
    gap: 18px;
    padding-left: 22px;
}

.itinerary-timeline-list::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 8px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.78), rgba(56, 189, 248, 0.20));
}

.itinerary-timeline-day {
    position: relative;
    border-radius: 28px;
    border-color: rgba(20, 184, 166, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.09), transparent 34%);
    transition: all 0.2s ease;
}

.itinerary-timeline-day:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

.itinerary-timeline-day::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -21px;
    width: 15px;
    height: 15px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.14);
    animation: itineraryPulse 2.8s ease-in-out infinite;
}

.itinerary-day-summary {
    position: sticky;
    top: 92px;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    margin: -2px -2px 12px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
}

.itinerary-day-summary::-webkit-details-marker {
    display: none;
}

.itinerary-day-summary strong {
    display: block;
    color: var(--text-primary);
    font-size: 18px;
    letter-spacing: -0.03em;
}

.itinerary-day-summary small {
    color: var(--text-secondary);
    font-weight: 800;
}

.itinerary-day-highlights {
    margin-top: 16px;
}

.itinerary-activity-list {
    gap: 12px;
}

.itinerary-activity-card {
    border-radius: 22px;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.78);
    transition: all 0.2s ease;
}

.itinerary-activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.11);
    color: var(--accent-strong);
    font-size: 10px;
    font-weight: 900;
    vertical-align: middle;
}

.itinerary-activity-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.22);
    box-shadow: var(--shadow-soft);
}

.itinerary-share-card,
.itinerary-notes-card {
    border-radius: 28px;
}

.itinerary-share-link-card {
    display: grid;
    gap: 12px;
    border-color: rgba(20, 184, 166, 0.18);
    background:
        linear-gradient(180deg, rgba(236, 253, 245, 0.78), rgba(255, 255, 255, 0.92));
}

.itinerary-share-status {
    display: grid;
    gap: 4px;
}

.itinerary-share-status small {
    color: var(--text-secondary);
    font-weight: 800;
}

.itinerary-share-analytics span {
    background: rgba(20, 184, 166, 0.10);
    color: var(--accent-strong);
}

.itinerary-share-analytics strong {
    margin-right: 4px;
    color: var(--text-primary);
}

.itinerary-qr-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border: 1px dashed rgba(15, 118, 110, 0.32);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 900;
    position: relative;
    overflow: hidden;
}

.itinerary-qr-placeholder::before {
    content: "";
    position: absolute;
    inset: 14px;
    background:
        linear-gradient(90deg, currentColor 45%, transparent 45% 55%, currentColor 55%),
        linear-gradient(currentColor 45%, transparent 45% 55%, currentColor 55%);
    opacity: 0.16;
    background-size: 18px 18px;
}

.itinerary-note-form textarea {
    min-height: 132px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 251, 235, 0.38), rgba(255, 255, 255, 0.92));
}

html.dark .itinerary-hero,
html.dark .itinerary-metric-card,
html.dark .itinerary-builder-shell,
html.dark .itinerary-day-card,
html.dark .itinerary-timeline-day,
html.dark .itinerary-info-card,
html.dark .itinerary-chip-card,
html.dark .itinerary-activity-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.72));
}

html.dark .itinerary-filter-bar,
html.dark .itinerary-toolbar,
html.dark .itinerary-sticky-actions {
    background: rgba(15, 23, 42, 0.86);
}

html.dark .itinerary-day-summary,
html.dark .itinerary-trip-summary span,
html.dark .itinerary-progress-widget {
    background: rgba(15, 23, 42, 0.78);
}

@media (prefers-reduced-motion: reduce) {
    .itinerary-node,
    .itinerary-timeline-day::before,
    .itinerary-metric-card .metric-value {
        animation: none;
    }
}

.lead-drawer-form {
    padding-right: 4px;
}

.view-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
}

.view-item {
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 14px;
}

.view-item strong {
    display: block;
    margin-top: 8px;
    font-size: 16px;
}

.view-item.full {
    grid-column: 1 / -1;
}

.document-preview-frame {
    width: 100%;
    min-height: 520px;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background: var(--surface-1);
}

.document-preview-image {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background: var(--surface-1);
    padding: 12px;
}

.document-meta-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    color: var(--text-secondary);
}

.document-meta-card strong {
    color: var(--text-primary);
    font-size: 16px;
}

.document-dropzone {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px dashed var(--border-soft);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.06), rgba(255, 255, 255, 0.6));
}

html.dark .document-dropzone {
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.08), rgba(15, 23, 42, 0.6));
}

.document-dropzone small {
    color: var(--text-secondary);
}

/* Activity Feed UI polish: scoped visual refresh; PHP filters, actions, and columns remain unchanged. */
.activity-feed-page {
    display: grid;
    gap: 14px;
}

.activity-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-color: rgba(20, 184, 166, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.84)),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.10), transparent 36%);
}

.activity-hero h1 {
    max-width: 760px;
    margin-top: 10px;
    margin-bottom: 8px;
    color: var(--text-strong);
    font-size: 30px;
}

.activity-hero p {
    max-width: 820px;
    color: #475569;
}

.activity-hero-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-top: 0;
}

.activity-metrics-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.activity-metric-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 126px;
    padding: 14px;
    border-color: rgba(148, 163, 184, 0.20);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82));
}

.activity-metric-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    background: var(--surface-accent);
    color: var(--accent-strong);
}

.activity-metric-icon svg {
    width: 17px;
    height: 17px;
}

.activity-metric-card .metric-value {
    margin-top: 4px;
    color: var(--text-strong);
    font-size: 30px;
}

.activity-metric-card .metric-meta {
    line-height: 1.4;
}

.activity-audit-panel {
    padding: 14px;
}

.activity-filter-toolbar {
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.68);
}

.activity-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr)) repeat(2, minmax(140px, 0.8fr)) auto;
    gap: 10px;
    align-items: center;
    flex: 1 1 auto;
}

.activity-search-box {
    min-height: 44px;
    border-radius: 12px;
    background: #fff;
    padding-inline: 12px;
}

.activity-search-box span {
    display: inline-flex;
    color: var(--text-secondary);
}

.activity-filter-field {
    min-width: 0;
}

.activity-filter-form .form-input-dark,
.activity-filter-form .premium-button,
.activity-filter-toolbar .premium-button {
    min-height: 44px;
    border-radius: 12px;
}

.activity-filter-toolbar .lead-toolbar-actions {
    flex: 0 0 auto;
}

.activity-table-wrap {
    margin-top: 14px;
    padding: 0;
    border-radius: 16px;
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.78);
}

.activity-audit-table {
    min-width: 1120px;
    border-spacing: 0;
}

.activity-audit-table th {
    top: 0;
    padding: 13px 14px;
    background: rgba(248, 250, 252, 0.96);
    color: #475569;
    font-size: 11px;
    letter-spacing: 0.12em;
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.16);
}

.activity-audit-table td {
    padding: 15px 14px;
    border-bottom-color: rgba(226, 232, 240, 0.82);
    vertical-align: middle;
}

.activity-audit-table tbody tr {
    transition: background 160ms ease, box-shadow 160ms ease;
}

.activity-audit-table tbody tr:hover td {
    background: rgba(20, 184, 166, 0.045);
}

.activity-audit-table .status-badge {
    min-height: 26px;
    border-radius: 999px;
    letter-spacing: 0.06em;
}

.activity-time {
    display: inline-flex;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.activity-actor {
    display: inline-flex;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 800;
}

.activity-record,
.activity-ip {
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.activity-description {
    display: block;
    max-width: 430px;
    color: #334155;
    line-height: 1.45;
}

.activity-mobile-list {
    gap: 10px;
    margin-top: 14px;
}

.activity-mobile-card {
    border-left: 3px solid var(--accent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.78));
}

/* Notifications UI refresh: lighter, compact inbox for agency users. */
.notifications-page {
    display: grid;
    gap: 16px;
}

.notifications-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
}

.notifications-hero p {
    max-width: 760px;
}

.notifications-hero-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.notifications-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.notifications-metric-card {
    min-height: 124px;
}

.notifications-feed-panel {
    padding: 16px;
}

.notifications-feed-head {
    align-items: flex-start;
    gap: 12px;
}

.notifications-tabs {
    margin-top: 0;
    justify-content: flex-end;
}

.notifications-alert-list {
    gap: 10px;
}

.notifications-alert-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.notifications-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(45, 212, 191, 0.1);
    color: var(--accent-strong);
    font-size: 20px;
    font-weight: 800;
}

.notifications-alert-icon.warning {
    background: var(--surface-warning);
    color: var(--warning-strong);
}

.notifications-alert-icon.danger {
    background: var(--surface-danger);
    color: var(--danger-strong);
}

.notifications-alert-icon.success,
.notifications-alert-icon.accent,
.notifications-alert-icon.info {
    background: var(--surface-accent);
    color: var(--accent-strong);
}

.notifications-alert-copy {
    min-width: 0;
}

.notifications-alert-head {
    gap: 10px;
    align-items: flex-start;
}

.notifications-alert-meta {
    flex: 0 0 auto;
}

.notifications-alert-card .timeline-title {
    margin-bottom: 6px;
}

.notifications-alert-card .timeline-copy {
    margin-top: 8px;
    color: #475569;
}

.notifications-empty-state {
    min-height: 0;
    max-height: 220px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.notifications-empty-actions {
    justify-content: center;
    margin-top: 4px;
}

/* Shared shell refinement used by the Activity Feed page and the rest of the CRM shell. */
.sidebar {
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
}

.sidebar-group-title {
    margin-bottom: 6px;
}

.sidebar-links {
    gap: 5px;
}

.sidebar-link {
    border-radius: 12px;
    min-height: 38px;
}

.sidebar-link.is-active {
    border-color: rgba(20, 184, 166, 0.24);
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.14), rgba(255, 255, 255, 0.72));
    box-shadow: inset 3px 0 0 var(--accent);
}

.topbar {
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.command-bar,
.user-pill,
.topbar-action,
.icon-button {
    border-radius: 12px;
}

html.dark .activity-hero,
html.dark .activity-metric-card,
html.dark .activity-audit-panel,
html.dark .activity-table-wrap,
html.dark .activity-mobile-card {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.68)),
        radial-gradient(circle at top right, rgba(45, 212, 191, 0.10), transparent 34%);
}

html.dark .notifications-alert-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.96));
}

html.dark .activity-filter-toolbar {
    background: rgba(15, 23, 42, 0.58);
}

html.dark .activity-search-box,
html.dark .activity-audit-table th {
    background: rgba(15, 23, 42, 0.92);
}

html.dark .activity-description,
html.dark .activity-hero p {
    color: var(--text-muted);
}

.mobile-only {
    display: none;
}

@media (max-width: 720px) {
    .itinerary-experience {
        gap: 16px;
    }

    .itinerary-hero {
        padding: 20px;
        border-radius: 24px;
    }

    .itinerary-hero-art {
        min-height: 356px;
    }

    .itinerary-metrics-grid,
    .itinerary-overview-grid {
        grid-template-columns: 1fr;
    }

    .itinerary-filter-bar,
    .itinerary-form-grid,
    .itinerary-details-drawer,
    .itinerary-sticky-actions {
        border-radius: 18px;
        padding: 10px;
    }

    .itinerary-day-summary {
        position: static;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .itinerary-timeline-list {
        padding-left: 16px;
    }

    .itinerary-timeline-day::before {
        left: -18px;
    }

    .itinerary-map-card {
        left: 16px;
        width: calc(100% - 32px);
        padding: 16px;
    }

    .itinerary-map-card-head {
        align-items: flex-start;
    }

    .itinerary-map-visual {
        inset: 146px 12px 90px 12px;
        min-height: 132px;
    }

    .itinerary-route-legend {
        padding: 9px 10px;
    }

    .itinerary-route-legend.legend-start {
        left: 16px;
        bottom: 46px;
    }

    .itinerary-route-legend.legend-end {
        right: 16px;
        bottom: 46px;
    }

    .itinerary-mini-card.one {
        left: 16px;
        bottom: 14px;
    }

    .itinerary-mini-card.two {
        left: 50%;
        bottom: 14px;
    }

    .itinerary-mini-card.three {
        right: 16px;
        bottom: 14px;
    }

    .itinerary-weather-card {
        right: 16px;
        top: 16px;
    }
}

@media (max-width: 1040px) {
    .itinerary-map-visual {
        inset: 104px 20px 18px 30%;
    }

    .itinerary-route-legend.legend-start {
        left: 24px;
    }

    .itinerary-route-legend.legend-end {
        right: 24px;
    }
}

@media (max-width: 1280px) {
    .itinerary-hero,
    .itinerary-builder-grid {
        grid-template-columns: 1fr;
    }

    .itinerary-metrics-grid,
    .itinerary-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itinerary-preview-card,
    .itinerary-filter-bar,
    .itinerary-toolbar,
    .itinerary-sticky-actions {
        position: static;
        max-height: none;
    }

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

    .content-grid,
    .panel-grid.sidebar-layout,
    .studio-shell,
    .profile-shell,
    .itinerary-builder-grid {
        grid-template-columns: 1fr;
    }

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

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

    .activity-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .activity-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .activity-search-box {
        grid-column: 1 / -1;
    }

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

    .notifications-feed-head {
        flex-direction: column;
    }

    .notifications-tabs {
        justify-content: flex-start;
    }

    .chart-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .topbar {
        grid-template-columns: 1fr;
    }

    .topbar-center {
        justify-content: flex-start;
    }

    .dashboard-layout,
    .dashboard-simple-layout,
    .dashboard-analytics-grid,
    .dashboard-insight-grid,
    .dashboard-bottom-grid,
    .dashboard-priority-center-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        min-height: auto;
        padding: 14px;
    }
}

@media (max-width: 768px) {
    .site-shell {
        width: min(100% - 20px, 100%);
        padding: 12px 0 24px;
    }

    .sidebar {
        display: none;
    }

    .topbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .topbar-left,
    .topbar-right,
    .topbar-center {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .command-bar {
        width: 100%;
    }

    .topbar-action {
        flex: 1 1 calc(50% - 8px);
    }

    .metrics-grid,
    .triple-grid,
    .duo-grid,
    .mini-metric-grid,
    .saas-usage-summary-grid,
    .profile-permission-columns,
    .permission-checklist,
    .dashboard-snapshot-grid,
    .dashboard-conversion-grid,
    .dashboard-chart {
        grid-template-columns: 1fr;
    }

    .notifications-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .notifications-hero-actions {
        justify-content: flex-start;
    }

    .notifications-metrics-grid {
        grid-template-columns: 1fr;
    }

    .notifications-alert-card {
        grid-template-columns: 1fr;
    }

    .notifications-alert-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        font-size: 18px;
    }

    .notifications-alert-head {
        flex-direction: column;
    }

    .notifications-alert-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .notifications-empty-state {
        max-height: none;
        min-height: 180px;
    }

    .saas-usage-layout,
    .saas-overview-grid,
    .support-workspace {
        grid-template-columns: 1fr;
    }

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

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

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

    .dashboard-simple-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-quick-actions {
        justify-content: stretch;
    }

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

    .dashboard-funnel-step,
    .dashboard-funnel-step:nth-child(2),
    .dashboard-funnel-step:nth-child(3) {
        min-height: 94px;
    }

    .activity-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-hero-actions {
        justify-content: flex-start;
    }

    .activity-metrics-grid,
    .activity-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-filter-toolbar {
        flex-direction: column;
    }

    .table-toolbar,
    .section-head,
    .hero-actions,
    .page-actions,
    .sticky-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kanban-board {
        grid-template-columns: repeat(7, minmax(280px, 280px));
    }

    .sidebar-links {
        grid-template-columns: 1fr;
    }

    .sidebar-group {
        margin-top: 18px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .lead-toolbar,
    .lead-search-form,
    .lead-toolbar-actions,
    .pagination-row,
    .table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .view-grid {
        grid-template-columns: 1fr;
    }

    .pipeline-detail-grid,
    .pipeline-card-meta-grid {
        grid-template-columns: 1fr;
    }

    .pipeline-card-footer,
    .pipeline-rule-row,
    .pipeline-mini-form,
    .booking-status-row,
    .booking-status-form,
    .booking-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pipeline-select-wrap {
        flex: 1 1 100%;
    }

    .dashboard-row,
    .dashboard-reschedule-form {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-work-main,
    .dashboard-priority-foot,
    .dashboard-item-badge-row {
        align-items: flex-start;
    }

    .dashboard-row-side {
        align-items: flex-start;
        text-align: left;
    }

    .dashboard-bar-track {
        min-height: 120px;
    }

    .dashboard-chart-simple .dashboard-bar-track {
        min-height: 150px;
    }

    .dashboard-team-head,
    .dashboard-team-metrics {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-mobile-dock {
        position: sticky;
        bottom: 14px;
        z-index: 30;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
        padding: 12px;
        border-radius: 24px;
        border: 1px solid var(--border-soft);
        background: rgba(15, 23, 42, 0.92);
        backdrop-filter: blur(18px);
    }

    .dashboard-mobile-dock .premium-button {
        justify-content: center;
        padding-inline: 14px;
    }

    .drawer-sheet {
        width: 100%;
        padding: 18px;
    }

    .saas-usage-table {
        min-width: 760px;
    }
}

@media (max-width: 480px) {
    .site-shell {
        width: min(100% - 16px, 100%);
    }

    .topbar-right {
        gap: 8px;
    }

    .icon-button {
        width: 38px;
        height: 38px;
    }

    .topbar-action {
        flex: 1 1 100%;
    }

    .activity-hero {
        padding: 16px;
    }

    .activity-hero h1 {
        font-size: 26px;
    }

    .activity-metrics-grid,
    .activity-filter-form {
        grid-template-columns: 1fr;
    }

    .activity-filter-toolbar .lead-toolbar-actions,
    .activity-filter-toolbar .premium-button {
        width: 100%;
    }

    .activity-metric-card {
        min-height: 104px;
    }

    .dashboard-priority-grid,
    .dashboard-snapshot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-priority-card,
    .section-card,
    .metric-card {
        padding: 18px;
    }

    .dashboard-priority-card .metric-value {
        font-size: 1.9rem;
    }

    .dashboard-mobile-dock {
        padding: 10px;
        bottom: 10px;
    }

    .support-message-head,
    .button-row,
    .checkbox-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .saas-usage-table-wrap {
        margin-inline: -4px;
    }

    .saas-usage-table {
        min-width: 680px;
    }

    .saas-empty-state,
    .saas-error-state {
        padding: 18px;
    }

}

.saas-admin-hero {
    padding: 28px 30px;
}

.saas-admin-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
}

.saas-admin-banner-copy h1 {
    margin-bottom: 10px;
}

.saas-admin-inline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
}

.saas-quickbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.saas-switcher-card {
    padding: 10px 12px;
}

.saas-switcher {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.saas-switcher-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: var(--pill-bg);
    color: var(--pill-fg);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
}

.saas-switcher-pill:hover {
    border-color: rgba(20, 184, 166, 0.28);
    color: var(--table-row-fg);
    transform: translateY(-1px);
}

.saas-switcher-pill.is-active {
    background: var(--pill-active-bg);
    border-color: var(--pill-border);
    color: var(--pill-active-fg);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.06);
}

.saas-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.saas-kpi-card {
    min-height: 156px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    border-color: rgba(148, 163, 184, 0.18);
    transition: all 0.2s ease;
}

.saas-kpi-card strong {
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.saas-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    opacity: 0.95;
}

.saas-kpi-card::after {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 16px;
    opacity: 0.75;
}

.saas-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
}

.saas-kpi-card[data-kpi="mrr"] {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.10), var(--card-bg));
}

.saas-kpi-card[data-kpi="mrr"]::before,
.saas-kpi-card[data-kpi="subscriptions"]::before,
.saas-kpi-card[data-kpi="agencies"]::before,
.saas-kpi-card[data-kpi="users"]::before {
    background: linear-gradient(90deg, var(--success), rgba(34, 197, 94, 0.2));
}

.saas-kpi-card[data-kpi="trials"] {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), var(--card-bg));
}

.saas-kpi-card[data-kpi="trials"]::before,
.saas-kpi-card[data-kpi="renewals"]::before {
    background: linear-gradient(90deg, var(--warning), rgba(245, 158, 11, 0.2));
}

.saas-kpi-card[data-kpi="failed"],
.saas-kpi-card[data-kpi="overdue"] {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.10), var(--card-bg));
}

.saas-kpi-card[data-kpi="failed"]::before,
.saas-kpi-card[data-kpi="overdue"]::before {
    background: linear-gradient(90deg, var(--danger), rgba(239, 68, 68, 0.2));
}

.saas-kpi-card[data-kpi="growth"],
.saas-kpi-card[data-kpi="arr"] {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.10), var(--card-bg));
}

.saas-kpi-card[data-kpi="growth"]::before,
.saas-kpi-card[data-kpi="arr"]::before {
    background: linear-gradient(90deg, var(--info), rgba(59, 130, 246, 0.2));
}

.saas-kpi-card[data-kpi="mrr"]::after {
    content: "↗";
    color: var(--success-strong);
}

.saas-kpi-card[data-kpi="agencies"]::after,
.saas-kpi-card[data-kpi="subscriptions"]::after {
    content: "◎";
    color: var(--success-strong);
}

.saas-kpi-card[data-kpi="trials"]::after,
.saas-kpi-card[data-kpi="renewals"]::after {
    content: "◔";
    color: var(--warning-strong);
}

.saas-kpi-card[data-kpi="failed"]::after,
.saas-kpi-card[data-kpi="overdue"]::after {
    content: "!";
    color: var(--danger-strong);
}

.saas-kpi-card[data-kpi="growth"]::after,
.saas-kpi-card[data-kpi="arr"]::after {
    content: "≈";
    color: var(--info-strong);
}

.saas-kpi-card[data-kpi="users"]::after {
    content: "◌";
    color: var(--success-strong);
}

.saas-overview-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 18px;
}

.saas-chart-bars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
    min-height: 220px;
    padding-top: 8px;
}

.saas-chart-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.saas-chart-column strong {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.saas-chart-column span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.saas-chart-bar-wrap {
    width: 100%;
    min-height: 170px;
    display: flex;
    align-items: flex-end;
}

.saas-chart-bar {
    width: 100%;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.92) 0%, rgba(15, 118, 110, 0.92) 100%);
    box-shadow: 0 14px 34px rgba(20, 184, 166, 0.18);
}

.saas-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.saas-mini-stats span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.9);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.saas-usage-track {
    margin-top: 12px;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.72);
    overflow: hidden;
}

.saas-usage-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.88) 0%, rgba(59, 130, 246, 0.78) 100%);
}

.saas-usage-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.saas-usage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
    gap: 18px;
    align-items: start;
}

.saas-usage-sidebar {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.saas-usage-table-wrap {
    margin-top: 18px;
    padding: 0;
    border-radius: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.88);
}

.saas-usage-table {
    min-width: 980px;
    table-layout: auto;
}

.saas-usage-table th,
.saas-usage-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.saas-usage-table tbody tr td {
    transition: background 180ms ease;
}

.saas-usage-table tbody tr:hover td {
    background: rgba(20, 184, 166, 0.05);
}

.saas-usage-cell {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.saas-usage-cell strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.saas-usage-cell span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.saas-usage-meter {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
    overflow: hidden;
}

.saas-usage-meter.thick {
    height: 12px;
    background: rgba(148, 163, 184, 0.22);
}

.saas-usage-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.92) 0%, rgba(59, 130, 246, 0.82) 100%);
}

.saas-usage-meter.warning span {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.94) 0%, rgba(251, 191, 36, 0.84) 100%);
}

.saas-usage-meter.danger span {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.94) 0%, rgba(248, 113, 113, 0.84) 100%);
}

.saas-empty-state,
.saas-error-state {
    padding: 22px;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.82);
    border: 1px dashed rgba(148, 163, 184, 0.32);
}

.saas-empty-state strong {
    display: block;
    font-size: 1rem;
    color: var(--text-primary);
}

.announcements-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
    gap: 18px;
    align-items: start;
}

.announcements-feed-panel,
.announcements-composer-panel {
    min-width: 0;
}

.announcement-feed {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.announcement-card,
.announcement-preview-card {
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    padding: 18px 20px;
}

.announcement-card.is-pinned {
    border-color: rgba(20, 184, 166, 0.24);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.06);
}

.announcement-card-top,
.announcement-actions,
.announcement-badges,
.announcement-inline-actions,
.announcement-stats,
.announcement-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.announcement-card-top {
    justify-content: space-between;
    align-items: flex-start;
}

.announcement-badges {
    gap: 8px;
}

.announcement-title {
    margin: 14px 0 8px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-primary);
}

.announcement-preview {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.65;
}

.announcement-meta-grid {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.announcement-meta-grid span {
    min-width: 220px;
}

.announcement-stats {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--divider-soft);
    color: var(--text-secondary);
    font-size: 13px;
}

.announcement-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}

.announcement-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--divider-soft);
}

.announcement-actions .table-action-button,
.announcement-inline-actions .table-action-button,
.announcement-more summary.table-action-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.announcement-more {
    position: relative;
}

.announcement-more summary {
    list-style: none;
    cursor: pointer;
}

.announcement-more summary::-webkit-details-marker {
    display: none;
}

.announcement-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 140px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: var(--surface-3);
    box-shadow: var(--shadow-soft);
    z-index: 12;
}

.announcements-composer-panel .admin-drawer {
    margin-top: 8px;
}

.announcement-preview-card {
    margin-top: 16px;
}

.saas-usage-meter-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.saas-usage-meter-meta strong,
.saas-usage-percent-label {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.saas-usage-percent-label {
    color: var(--accent);
}

.saas-usage-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.saas-empty-state .premium-button {
    margin-top: 14px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.checkbox-row input {
    width: 16px;
    height: 16px;
}

.support-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
    align-items: start;
}

.support-queue-list {
    display: grid;
    gap: 12px;
}

.support-ticket-card {
    text-decoration: none;
    color: inherit;
}

.support-ticket-card.is-active {
    border-color: rgba(20, 184, 166, 0.28);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.08);
}

.support-chat-thread {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    max-height: 620px;
    overflow-y: auto;
    padding-right: 4px;
}

.support-message-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.82);
}

.support-message-card.is-staff {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.2);
}

.support-message-card.is-note {
    background: rgba(15, 23, 42, 0.04);
    border-style: dashed;
}

.support-message-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.support-detail-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--divider-soft);
}

.saas-support-dashboard {
    display: grid;
    gap: 18px;
}

.admin-drawer {
    margin-top: 12px;
    border-radius: 22px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    overflow: hidden;
}

.admin-drawer-summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
}

.admin-drawer-summary::-webkit-details-marker {
    display: none;
}

.admin-drawer-summary strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.admin-drawer-summary p {
    margin: 5px 0 0;
    color: var(--card-muted);
    font-size: 0.84rem;
}

.admin-drawer[open] .admin-drawer-summary {
    border-bottom: 1px solid var(--border-soft);
}

.admin-drawer-body {
    padding: 18px 20px 20px;
}

.timeline-card.compact {
    padding: 16px 18px;
}

.sidebar {
    width: min(100%, 214px);
}

.sidebar-group-title {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sidebar-link {
    min-height: 40px;
    padding: 8px 10px;
}

.sidebar-link.is-active {
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.96);
}

.segmented-control {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.segmented-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.segmented-link:hover {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.segmented-link.is-active {
    background: var(--pill-active-bg);
    color: var(--pill-active-fg);
    border-color: var(--accent);
}

.full-span {
    grid-column: 1 / -1;
}

@media (max-width: 1280px) {
    .saas-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .saas-overview-grid,
    .saas-admin-banner,
    .announcements-layout {
        grid-template-columns: 1fr;
    }

    .saas-usage-chart-grid {
        grid-template-columns: 1fr;
    }

    .saas-quickbar {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .saas-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saas-chart-bars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .saas-usage-layout {
        grid-template-columns: 1fr;
    }

    .admin-drawer-summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .saas-admin-hero {
        padding: 22px 18px;
    }

    .saas-kpi-grid {
        grid-template-columns: 1fr;
    }

    .saas-chart-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saas-switcher {
        overflow-x: auto;
        padding-bottom: 4px;
        flex-wrap: nowrap;
    }

    .saas-switcher-pill {
        white-space: nowrap;
    }

    .saas-usage-summary-grid,
    .saas-usage-chart-grid {
        grid-template-columns: 1fr;
    }

    .announcement-title {
        font-size: 19px;
    }

    .announcement-meta-grid span {
        min-width: 0;
        width: 100%;
    }

    .announcement-actions {
        gap: 8px;
    }
}

/* Global UI repair layer */
.topbar,
.sidebar,
.section-card,
.metric-card,
.glass-card,
.glass-panel,
.crm-table-wrap,
.timeline-card,
.drawer-panel,
.modal-panel {
    overflow: hidden;
}

.icon-button,
.table-action-button,
.icon-action,
.premium-button,
.topbar-action,
.segmented-link,
.filter-chip,
.tab-pill,
.status-badge {
    line-height: 1;
}

.icon-button svg,
.sidebar-icon svg,
.command-bar-icon svg,
.table-action-button svg,
.icon-action svg,
.premium-button svg {
    width: 16px !important;
    height: 16px !important;
}

.sidebar-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.crm-table,
.saas-usage-table,
.lead-table,
.contacts-table {
    width: 100%;
}

.crm-table th,
.crm-table td,
.saas-usage-table th,
.saas-usage-table td,
.lead-table th,
.lead-table td,
.contacts-table th,
.contacts-table td {
    overflow-wrap: normal;
    word-break: normal;
}

.section-head,
.table-toolbar,
.form-actions,
.button-row,
.page-actions,
.hero-actions {
    gap: 10px;
}

.form-input-dark,
.toolbar-search,
.command-bar,
.lead-search-box {
    max-width: 100%;
}

.lead-search-box,
.toolbar-search,
.command-bar {
    min-height: 40px;
}

.quote-step-card,
.quote-item-card,
.quote-components-panel,
.quote-builder-canvas,
.quote-pricing-card,
.quote-share-card,
.settings-card,
.chart-card,
.list-item-card,
.dashboard-row,
.dashboard-priority-center-card,
.dashboard-team-card,
.support-message-card,
.saas-kpi-card,
.saas-switcher-card {
    box-shadow: var(--shadow-soft);
}

.dashboard-priority-card .metric-value,
.saas-kpi-card strong,
.mini-data-card strong {
    line-height: 1.05;
}

/* Agencies table stability overrides */
.agency-table,
.agency-table th,
.agency-table td {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.agency-table td,
.agency-table th {
    white-space: nowrap;
}

.agency-table .agency-cell-name,
.agency-table .agency-cell-actions,
.billing-table .billing-cell-actions {
    white-space: normal;
}

.billing-table .billing-cell-invoice .table-title,
.billing-table .billing-cell-amount .table-title,
.agency-table .table-title {
    white-space: nowrap;
}

.saas-usage-table .saas-usage-cell,
.crm-table .table-stack {
    min-width: 0;
}

@media (max-width: 1024px) {
    .sidebar {
        width: 100%;
    }

    .metrics-grid,
    .saas-kpi-grid,
    .saas-usage-summary-grid,
    .saas-agencies-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saas-agencies-layout {
        grid-template-columns: 1fr;
    }

    .agency-simplified-layout {
        grid-template-columns: 1fr;
    }

    .agency-list-panel {
        position: static;
    }

    .agency-summary-grid,
    .agency-summary-grid-billing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saas-billing-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .topbar {
        gap: 10px;
        padding: 10px;
    }

    .topbar-left,
    .topbar-right,
    .topbar-center {
        gap: 8px;
    }

    .metrics-grid,
    .saas-kpi-grid,
    .saas-usage-summary-grid,
    .dashboard-priority-grid,
    .dashboard-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agency-table-wrap {
        margin-inline: -2px;
    }

    .billing-table-wrap,
    .saas-usage-table-wrap {
        margin-inline: -2px;
    }

    .section-card,
    .metric-card,
    .glass-card,
    .glass-panel,
    .timeline-card {
        padding: 14px;
    }

    .agency-workspace-header {
        flex-direction: column;
    }

    .workspace-toolbar {
        justify-content: flex-start;
    }

    .saas-logs-toolbar {
        position: static;
    }

    .saas-log-row {
        gap: 12px;
        padding: 12px;
    }

    .saas-log-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .saas-log-time {
        white-space: normal;
    }

    .page-hero h1,
    .dashboard-hero h1 {
        font-size: clamp(24px, 8vw, 32px);
    }
}

@media (max-width: 480px) {
    .metrics-grid,
    .saas-kpi-grid,
    .saas-usage-summary-grid,
    .dashboard-priority-grid,
    .dashboard-snapshot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .premium-button,
    .topbar-action,
    .table-action-button,
    .icon-action,
    .segmented-link {
        min-height: 36px;
        padding-inline: 10px;
        font-size: 11px;
    }

    .icon-button {
        width: 34px;
        height: 34px;
    }

    .agency-table {
        min-width: 980px;
    }

    .agency-summary-grid,
    .agency-summary-grid-billing {
        grid-template-columns: 1fr;
    }

    .saas-log-row {
        align-items: flex-start;
    }

    .saas-log-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .saas-log-description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .billing-table,
    .crm-table,
    .saas-usage-table {
        min-width: 960px;
    }

    .user-pill {
        width: 100%;
        justify-content: flex-start;
    }
}

/* UI fix: keep itinerary rows as a true table on desktop; card layout starts only below 768px. */
.itinerary-table-shell {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.itinerary-table {
    display: table !important;
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.itinerary-table thead {
    display: table-header-group !important;
}

.itinerary-table tbody {
    display: table-row-group !important;
}

.itinerary-table tr {
    display: table-row !important;
}

.itinerary-table th,
.itinerary-table td {
    display: table-cell !important;
    vertical-align: middle;
    white-space: normal;
}

.itinerary-table th {
    top: 0;
    white-space: nowrap;
}

.itinerary-table th::before,
.itinerary-table th::after,
.itinerary-table td::before,
.itinerary-table td::after,
.itinerary-table [data-label]::before,
.itinerary-table [data-label]::after {
    display: none !important;
    content: none !important;
}

.itinerary-table th:first-child,
.itinerary-table td:first-child {
    width: 46px;
    min-width: 46px;
    text-align: center;
}

.itinerary-table th:nth-child(6),
.itinerary-table td:nth-child(6),
.itinerary-table th:nth-child(8),
.itinerary-table td:nth-child(8) {
    white-space: nowrap;
}

.itinerary-table td:nth-child(8) {
    width: 330px;
    min-width: 330px;
}

.itinerary-table .table-stack {
    display: grid;
    gap: 3px;
    min-width: 170px;
}

.itinerary-table .table-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 100%;
}

.itinerary-table .inline-form,
.itinerary-table .itinerary-actions-menu {
    flex: 0 0 auto;
}

.itinerary-table .table-action-button {
    white-space: nowrap;
}

.itinerary-table .quote-actions-panel {
    right: 0;
    left: auto;
}

@media (min-width: 768px) {
    .itinerary-list-panel .desktop-only.itinerary-table-shell {
        display: block !important;
    }

    .itinerary-list-panel .mobile-only.lead-mobile-list {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .itinerary-list-panel .desktop-only.itinerary-table-shell {
        display: none !important;
    }

    .itinerary-list-panel .mobile-only.lead-mobile-list {
        display: grid !important;
    }

    .itinerary-mobile-card .table-actions {
        flex-direction: column;
        align-items: stretch;
    }
}