/* =========================================================
   SMS Command Center shared shell styles
   Version: 23.1-nav-css-split

   Keep this file focused on layout, navigation, and shared UI styling.
   Page logic and BigCommerce/Pricing helpers stay in shared.py.
   ========================================================= */

:root {
    --brand-primary: #082944;
    --brand-accent: #0B5E8E;
    --brand-primary-rgb: 8, 41, 68;
    --brand-accent-rgb: 11, 94, 142;
    --sms-app-font-family: "proxima-nova", "Inter", "Segoe UI", Arial, sans-serif;

    --sms-shell-sidebar: 300px;
    --sms-shell-topbar: 72px;

    --sms-page-bg: #ffffff;
    --sms-dark-blue: #082944;
    --sms-dark-blue-2: #06233A;
    --sms-medium-blue: #163A58;
    --sms-medium-blue-2: #102E49;
    --sms-medium-blue-3: #1D4668;
    --sms-light-blue: #7EC8FF;
    --sms-line-blue: #2695C1;

    --sms-white: #ffffff;
    --sms-soft-white: rgba(255, 255, 255, .82);
    --sms-muted-white: rgba(255, 255, 255, .64);
    --sms-field-text: #0f172a;
    --sms-field-muted: #6b7280;

    --sms-dark-border: rgba(126, 200, 255, .30);
    --sms-dark-border-strong: rgba(126, 200, 255, .52);
    --sms-shadow: 0 22px 52px rgba(8, 41, 68, .18);
    --sms-card-shadow: 0 16px 36px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.04);

    --sms-sidebar-bg: #082944;
    --sms-sidebar-hover-bg: rgba(255, 255, 255, .10);
    --sms-sidebar-text: #ffffff;
    --sms-sidebar-muted-text: rgba(255, 255, 255, .64);
    --sms-sidebar-accent-text: #7EC8FF;
    --sms-sidebar-border: rgba(255, 255, 255, .14);
    --sms-sidebar-radius: 10px;
    --sms-sidebar-item-radius: 6px;
    --sms-sidebar-font-family: var(--sms-app-font-family);
    --sms-sidebar-group-font-size: 11px;
    --sms-sidebar-link-font-size: 13px;
    --sms-sidebar-brand-font-size: 15px;
    --sms-sidebar-group-font-weight: 700;
    --sms-sidebar-link-font-weight: 700;
    --sms-sidebar-brand-font-weight: 700;
    --sms-sidebar-shadow: 0 18px 42px rgba(8, 41, 68, .28);
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sms-page-bg) !important;
}

body,
.container,
input,
select,
textarea,
button,
.button-link,
table,
th,
td,
label,
p,
div,
span {
    font-family: var(--sms-app-font-family) !important;
}

body {
    color: var(--sms-field-text) !important;
}

/* Main content shell */
.container {
    width: auto !important;
    max-width: none !important;
    min-height: calc(100vh - 42px);
    margin: 18px 18px 18px calc(var(--sms-shell-sidebar) + 18px) !important;
    padding: calc(var(--sms-shell-topbar) + 26px) 28px 32px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, var(--sms-dark-blue), var(--sms-dark-blue-2)) !important;
    border: 1px solid var(--sms-dark-border) !important;
    box-shadow: var(--sms-shadow) !important;
    color: var(--sms-white) !important;
}

.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
    color: var(--sms-white) !important;
    letter-spacing: -.025em;
}

.container p,
.container li,
.container td,
.container label,
.container .small,
.container .sub,
.container .help,
.container .sales-help,
.container .source-meta,
.container .section-note,
.container .form-note,
.container .description-note,
.container .price-note,
.container .gp-note,
.container .tiny-note,
.container [style*="color: #333"],
.container [style*="color:#333"],
.container [style*="color: rgb(51, 51, 51)"],
.container [style*="color: #555"],
.container [style*="color:#555"] {
    color: var(--sms-soft-white) !important;
    opacity: 1 !important;
}

.container strong,
.container b,
.container .value,
.container .summary-value,
.container .metric-value,
.container .stat-value,
.container .kpi-value,
.container .status-percent,
.container [id*="statusPercent"],
.container [id*="StatusPercent"] {
    color: var(--sms-white) !important;
}

.container a {
    color: var(--sms-light-blue) !important;
}

/* Hide old top-tab deck after the sidebar shell is active. */
.tabs,
.nav-deck {
    display: none !important;
}

/* Sidebar */
.sms-cc-sidebar {
    position: fixed;
    left: 16px;
    top: 16px;
    bottom: 16px;
    width: calc(var(--sms-shell-sidebar) - 32px);
    z-index: 999;
    display: flex;
    flex-direction: column;
    background: var(--sms-sidebar-bg);
    color: var(--sms-sidebar-text);
    font-family: var(--sms-sidebar-font-family);
    border: 1px solid var(--sms-sidebar-border);
    border-radius: var(--sms-sidebar-radius);
    box-shadow: var(--sms-sidebar-shadow);
    overflow: hidden;
}

.sms-cc-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 13px 10px;
    min-height: 72px;
    border-bottom: 1px solid var(--sms-sidebar-border);
    background: transparent;
}

.sms-cc-logo {
    width: 190px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    border-radius: 0;
}

.sms-cc-brand-title {
    margin-left: 34px;
    font-size: var(--sms-sidebar-brand-font-size);
    line-height: 1.15;
    font-weight: var(--sms-sidebar-brand-font-weight);
    letter-spacing: -.01em;
    color: var(--sms-sidebar-text);
    white-space: nowrap;
}

.sms-cc-nav {
    flex: 1 1 auto;
    padding: 8px 10px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 200, 255, .42) transparent;
}

.sms-cc-nav::-webkit-scrollbar {
    width: 7px;
}

.sms-cc-nav::-webkit-scrollbar-thumb {
    background: rgba(126, 200, 255, .34);
    border-radius: 999px;
}

.sms-cc-dashboard-link {
    margin-bottom: 2px;
}

.sms-cc-nav-divider {
    height: 1px;
    margin: 7px 4px 10px;
    background: var(--sms-sidebar-border);
}

.sms-cc-nav-group {
    margin-bottom: 9px;
    border-radius: 14px;
}

.sms-cc-nav-summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 9px;
    border-radius: var(--sms-sidebar-item-radius);
    color: var(--sms-sidebar-accent-text);
    font-size: var(--sms-sidebar-group-font-size);
    font-weight: var(--sms-sidebar-group-font-weight);
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: transparent;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sms-cc-nav-summary::-webkit-details-marker {
    display: none;
}

.sms-cc-nav-summary:hover,
.sms-cc-nav-group.active > .sms-cc-nav-summary:hover,
.sms-cc-nav-group[open] > .sms-cc-nav-summary:hover {
    background: var(--sms-sidebar-hover-bg) !important;
    border-color: var(--sms-sidebar-border) !important;
    color: var(--sms-sidebar-text) !important;
    box-shadow: none !important;
}

.sms-cc-nav-group.active > .sms-cc-nav-summary,
.sms-cc-nav-group[open] > .sms-cc-nav-summary {
    background: transparent;
    border-color: transparent;
    color: var(--sms-sidebar-accent-text);
    box-shadow: none;
}

.sms-cc-summary-icon,
.sms-cc-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.sms-cc-summary-icon {
    width: 22px;
    height: 22px;
    color: var(--sms-sidebar-accent-text);
}

.sms-cc-summary-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.sms-cc-nav-summary:hover .sms-cc-summary-icon {
    color: var(--sms-sidebar-text);
}

.sms-cc-summary-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sms-cc-summary-arrow {
    font-size: 16px;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform .15s ease;
    opacity: .85;
}

.sms-cc-nav-group[open] .sms-cc-summary-arrow {
    transform: rotate(0deg);
}

.sms-cc-nav-items {
    display: grid;
    gap: 4px;
    padding: 8px 0 0 22px;
}

.sms-cc-nav-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: var(--sms-sidebar-item-radius);
    color: var(--sms-sidebar-text) !important;
    text-decoration: none !important;
    font-size: var(--sms-sidebar-link-font-size);
    font-weight: var(--sms-sidebar-link-font-weight);
    border: 1px solid transparent;
    background: transparent;
    transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.sms-cc-nav-items .sms-cc-nav-link {
    min-height: 32px;
    padding-left: 4px;
}

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

.sms-cc-nav-link.active {
    color: var(--sms-sidebar-text) !important;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.sms-cc-nav-link.disabled {
    opacity: .54;
    cursor: not-allowed;
}

.sms-cc-nav-link.disabled:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
}

.sms-cc-nav-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--sms-sidebar-text);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
}

.sms-cc-nav-icon svg,
.sms-cc-nav-icon svg path,
.sms-cc-summary-icon svg path {
    fill: currentColor !important;
    color: currentColor !important;
    stroke: none !important;
}

.sms-cc-nav-icon svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    flex: 0 0 auto;
    overflow: visible;
}

.sms-cc-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
}

.sms-cc-dashboard-link .sms-cc-nav-label,
.sms-cc-nav-summary .sms-cc-summary-title {
    text-transform: uppercase;
}

.sms-cc-nav-items .sms-cc-nav-link .sms-cc-nav-label {
    text-transform: none !important;
}

.sms-cc-coming-soon {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sms-sidebar-muted-text);
    background: transparent;
    border-radius: 999px;
    padding: 3px 0;
    font-weight: 700;
}

.sms-cc-icon-fallback {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    color: currentColor !important;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", var(--sms-app-font-family) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Top bar */
.sms-cc-topbar {
    position: fixed;
    left: calc(var(--sms-shell-sidebar) + 18px);
    right: 18px;
    top: 18px;
    height: var(--sms-shell-topbar);
    z-index: 998;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 0 18px;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--sms-dark-blue), var(--sms-dark-blue-2)) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(8, 41, 68, .22) !important;
    backdrop-filter: blur(10px);
}

.sms-cc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sms-cc-search input,
.sms-cc-topbar input[type="search"] {
    margin: 0 !important;
    height: 42px;
    font-size: 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    border: 1px solid rgba(126, 200, 255, .58) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.80) !important;
}

.sms-cc-search input::placeholder,
.sms-cc-topbar input[type="search"]::placeholder {
    color: var(--sms-field-muted) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--sms-field-muted) !important;
}

.sms-cc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--sms-dark-border) !important;
    color: var(--sms-white) !important;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.sms-cc-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

.sms-cc-store-switcher {
    display: grid;
    grid-template-columns: auto 150px;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 7px 9px;
    border-radius: 13px;
    background: linear-gradient(180deg, #dff1ff 0%, #bfe3fb 100%) !important;
    border: 1px solid rgba(126,200,255,.86) !important;
    color: #0f2f4a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.60), 0 8px 18px rgba(8,41,68,.16) !important;
}

.sms-cc-store-switcher label {
    margin: 0;
    font-size: 11px;
    color: #0f2f4a !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 900;
    opacity: 1 !important;
}

.sms-cc-store-switcher select {
    margin: 0 !important;
    height: 36px;
    padding: 0 10px !important;
    font-weight: 900;
    background: #ffffff !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    border: 1px solid rgba(126,200,255,.72) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06) !important;
}

/* Shared field styling. Editable fields stay light unless explicitly styled as dark helper bubbles. */
input,
select,
textarea,
.container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container select,
.container textarea,
.container .wysiwyg,
.container [contenteditable="true"] {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    border: 1px solid rgba(126, 200, 255, .58) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.80) !important;
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

.container input::placeholder,
.container textarea::placeholder {
    color: var(--sms-field-muted) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--sms-field-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), .18), inset 0 1px 2px rgba(15,23,42,.06) !important;
}

.container input:disabled,
.container select:disabled,
.container textarea:disabled,
.container input[readonly],
.container textarea[readonly] {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
}

input[type="checkbox"],
input[type="radio"],
.container input[type="checkbox"],
.container input[type="radio"] {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 7px 0 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    accent-color: var(--sms-line-blue);
}

select option,
.container select option {
    color: var(--sms-field-text) !important;
    background: #ffffff !important;
}

/* Buttons */
button,
.button-link,
input[type=submit],
input[type=button] {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 62%, var(--sms-line-blue) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(126,200,255,.18) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 26px rgba(8,41,68,.25) !important;
    font-family: var(--sms-app-font-family) !important;
    transition: transform .14s ease, box-shadow .14s ease;
}

button:hover,
.button-link:hover,
input[type=submit]:hover,
input[type=button]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(var(--brand-primary-rgb), .24) !important;
}

.button-secondary {
    background: linear-gradient(135deg, #475569, #64748b) !important;
}

/* Price comparison subtabs */
.price-mode-tabs {
    display: flex;
    gap: 10px;
    margin: -6px 0 24px;
    flex-wrap: wrap;
}

.price-mode-tab,
.tab {
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--sms-dark-border) !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--sms-white) !important;
    text-decoration: none !important;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(15,23,42,.06);
}

.price-mode-tab.active,
.tab.active,
.category-toggle {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.price-mode-tab:hover,
.tab:hover {
    background: rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.22) !important;
}

/* Dark cards and panels */
.container .card:not(.warning):not(.success):not(.error),
.container .summary-card:not(.warning):not(.success):not(.error),
.container .metric-card:not(.warning):not(.success):not(.error),
.container .stat-card:not(.warning):not(.success):not(.error),
.container .kpi-card:not(.warning):not(.success):not(.error),
.container .dashboard-card:not(.warning):not(.success):not(.error),
.container .site-sales-panel,
.container .site-sales-mini,
.container .detail-panel:not(.warning):not(.success):not(.error),
.container .result:not(.warning):not(.success):not(.error),
.container .quote-card:not(.warning):not(.success):not(.error),
.container .price-card:not(.warning):not(.success):not(.error),
.container .utility-card:not(.warning):not(.success):not(.error),
.container .snapshot-card:not(.warning):not(.success):not(.error),
.container .money-card:not(.warning):not(.success):not(.error),
.container .overview-card:not(.warning):not(.success):not(.error),
.container .revenue-card:not(.warning):not(.success):not(.error),
.container .lookup-card:not(.warning):not(.success):not(.error),
.container .summary-box:not(.warning):not(.success):not(.error),
.container .status-card:not(.warning):not(.success):not(.error),
.container .status-box:not(.warning):not(.success):not(.error),
.container .run-status:not(.warning):not(.success):not(.error),
.container .progress-card:not(.warning):not(.success):not(.error),
.container .progress-panel:not(.warning):not(.success):not(.error),
.container .editor-card:not(.warning):not(.success):not(.error),
.container .editor-panel:not(.warning):not(.success):not(.error),
.container .content-card:not(.warning):not(.success):not(.error),
.container .content-panel:not(.warning):not(.success):not(.error),
.container .data-card:not(.warning):not(.success):not(.error),
.container .data-panel:not(.warning):not(.success):not(.error),
.container .info-card:not(.warning):not(.success):not(.error),
.container .info-box:not(.warning):not(.success):not(.error),
.container > section,
.container > article,
.container > fieldset,
.container > details {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}

.container .card:not(.warning):not(.success):not(.error)::after,
.container .summary-card:not(.warning):not(.success):not(.error)::after,
.container .metric-card:not(.warning):not(.success):not(.error)::after,
.container .stat-card:not(.warning):not(.success):not(.error)::after,
.container .kpi-card:not(.warning):not(.success):not(.error)::after,
.container .dashboard-card:not(.warning):not(.success):not(.error)::after,
.container .site-sales-mini::after,
.container .detail-panel:not(.warning):not(.success):not(.error)::after,
.container .result:not(.warning):not(.success):not(.error)::after,
.container .quote-card:not(.warning):not(.success):not(.error)::after,
.container .price-card:not(.warning):not(.success):not(.error)::after,
.container .utility-card:not(.warning):not(.success):not(.error)::after,
.container .snapshot-card:not(.warning):not(.success):not(.error)::after,
.container .money-card:not(.warning):not(.success):not(.error)::after,
.container .overview-card:not(.warning):not(.success):not(.error)::after,
.container .revenue-card:not(.warning):not(.success):not(.error)::after,
.container .lookup-card:not(.warning):not(.success):not(.error)::after,
.container .summary-box:not(.warning):not(.success):not(.error)::after,
.container .status-card:not(.warning):not(.success):not(.error)::after,
.container .status-box:not(.warning):not(.success):not(.error)::after,
.container .run-status:not(.warning):not(.success):not(.error)::after,
.container .progress-card:not(.warning):not(.success):not(.error)::after,
.container .progress-panel:not(.warning):not(.success):not(.error)::after,
.container .editor-card:not(.warning):not(.success):not(.error)::after,
.container .editor-panel:not(.warning):not(.success):not(.error)::after,
.container .content-card:not(.warning):not(.success):not(.error)::after,
.container .content-panel:not(.warning):not(.success):not(.error)::after,
.container .data-card:not(.warning):not(.success):not(.error)::after,
.container .data-panel:not(.warning):not(.success):not(.error)::after,
.container .info-card:not(.warning):not(.success):not(.error)::after,
.container .info-box:not(.warning):not(.success):not(.error)::after,
.container > section::after,
.container > article::after,
.container > fieldset::after,
.container > details::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent) 0%, var(--sms-light-blue) 58%, var(--sms-line-blue) 100%);
    opacity: .98;
    pointer-events: none;
}

.container .label,
.container .summary-label,
.container .metric-label,
.container .stat-label,
.container .kpi-label,
.container .card-label,
.container .site-sales-heading,
.container .section-label,
.container .eyebrow,
.container [class*="label"],
.container [class*="heading"] {
    color: var(--sms-light-blue) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
}

/* Run/status cards: force all text white/readable. */
.container .run-status,
.container .run-status *,
.container .status-card,
.container .status-card *,
.container .status-box,
.container .status-box *,
.container .progress-card,
.container .progress-card *,
.container .progress-panel,
.container .progress-panel *,
.container [id*="RunStatus"],
.container [id*="RunStatus"] *,
.container [id*="runStatus"],
.container [id*="runStatus"] *,
.container [id*="Status"] *,
.container [id*="status"] * {
    color: var(--sms-white) !important;
    opacity: 1 !important;
}

/* Utilities tabs should read like white buttons. */
.container .utility-tabs,
.container .api-tabs,
.container .feed-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.container .utility-tabs .utility-tab,
.container .api-tabs .api-tab,
.container .feed-tabs .feed-tab,
.container a.utility-tab,
.container button.utility-tab,
.container a.api-tab,
.container button.api-tab {
    background: #ffffff !important;
    color: #1687bd !important;
    -webkit-text-fill-color: #1687bd !important;
    border: 1px solid rgba(126,200,255,.62) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(8,41,68,.12) !important;
}

.container .utility-tabs .utility-tab.active,
.container .api-tabs .api-tab.active,
.container .feed-tabs .feed-tab.active,
.container a.utility-tab.active,
.container button.utility-tab.active,
.container a.api-tab.active,
.container button.api-tab.active {
    background: #ffffff !important;
    color: #0f6091 !important;
    -webkit-text-fill-color: #0f6091 !important;
    border-left: 4px solid var(--sms-line-blue) !important;
}

/* BC API Pulls helper/filter bubbles and product scope bubbles. */
.container .filter-help > div,
.container .filter-help .filter-bubble,
.container .filter-strip > div,
.container .api-filter-strip > div,
.container .api-filter-row > div,
.container .scope-grid > div,
.container .scope-grid > label,
.container .big-check,
.container .all-check-panel,
.container .mode-pill,
.container .upload-skip-container,
.container .bc-api-bubble,
.container .utility-bubble {
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    border: 1px solid rgba(126,200,255,.40) !important;
    border-radius: 14px !important;
    color: var(--sms-white) !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.18) !important;
}

.container .filter-help > div *,
.container .filter-help .filter-bubble *,
.container .filter-strip > div *,
.container .api-filter-strip > div *,
.container .api-filter-row > div *,
.container .scope-grid > div *,
.container .scope-grid > label *,
.container .big-check *,
.container .all-check-panel *,
.container .mode-pill *,
.container .upload-skip-container * {
    color: var(--sms-white) !important;
    opacity: 1 !important;
}

/* If the BC API helper bubbles are actual filter fields, keep them dark with readable text. */
.container .filter-help input,
.container .filter-help select,
.container .filter-strip input,
.container .api-filter-strip input,
.container .api-filter-row input {
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    border: 1px solid rgba(126,200,255,.40) !important;
    box-shadow: none !important;
}

.container .filter-help input::placeholder,
.container .filter-strip input::placeholder,
.container .api-filter-strip input::placeholder,
.container .api-filter-row input::placeholder {
    color: rgba(255,255,255,.78) !important;
    -webkit-text-fill-color: rgba(255,255,255,.78) !important;
    opacity: 1 !important;
}

.container .filter-help code {
    color: var(--sms-white) !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 6px !important;
    padding: 1px 4px !important;
}

/* Export field cards in Utilities / API Pulls. */
.container .api-field-card,
.container .upload-api-field-card,
.container .export-field-card,
.container .field-export-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.16) !important;
}

.container .api-field-card *,
.container .upload-api-field-card *,
.container .export-field-card *,
.container .field-export-card * {
    color: var(--sms-white) !important;
    opacity: 1 !important;
}

.container .api-field-title,
.container .api-include-row,
.container .api-include-row span,
.container .advanced-fields-panel summary,
.container .upload-api-field-card label,
.container .api-field-card label {
    color: var(--sms-white) !important;
    opacity: 1 !important;
}

.container .api-field-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container .api-field-card select,
.container .upload-api-field-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container .upload-api-field-card select,
.container .export-field-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container .export-field-card select,
.container .field-export-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container .field-export-card select {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    border: 1px solid rgba(126, 200, 255, .58) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.80) !important;
}

.container .api-field-card input::placeholder,
.container .upload-api-field-card input::placeholder,
.container .export-field-card input::placeholder,
.container .field-export-card input::placeholder {
    color: var(--sms-field-muted) !important;
    -webkit-text-fill-color: var(--sms-field-muted) !important;
    opacity: 1 !important;
}

/* Tables */
.container table {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 14px;
    overflow: hidden;
}

.container th {
    background: linear-gradient(135deg, #082944, #0B5E8E) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--sms-dark-border) !important;
}

.container td {
    background: rgba(255,255,255,.035) !important;
    border-bottom: 1px solid rgba(126,200,255,.14) !important;
    color: var(--sms-soft-white) !important;
}

.container tr:hover td {
    background: rgba(126,200,255,.08) !important;
}

/* Progress bars */
.container .bar,
.container .progress,
.container .progress-track {
    background: rgba(255,255,255,.15) !important;
    border-radius: 999px !important;
}

.container .bar-fill,
.container .progress-fill {
    background: linear-gradient(90deg, #0B5E8E, #7EC8FF) !important;
    border-radius: 999px !important;
}

/* Alerts / notes: readable, not white-on-yellow.
   Keep these styles on the alert container only. Do not apply background/border
   to child elements, or dark card pages like B2B Quotes get cream blocks behind text. */
.container .warning {
    background-color: #fff8eb !important;
    border-color: #f0d19a !important;
    border-left-color: #b36b00 !important;
    color: #331f00 !important;
}

.container .success {
    background-color: #eef9f0 !important;
    border-color: #b8dfbf !important;
    border-left-color: #1f7a33 !important;
    color: #0f351a !important;
}

.container .error {
    background-color: #fff5f5 !important;
    border-color: #f0b8b8 !important;
    border-left-color: #b00020 !important;
    color: #3b0a0a !important;
}

.container .warning *,
.container .success *,
.container .error * {
    background-color: transparent !important;
    border-color: inherit;
}

.container .notice:not(.warning):not(.success):not(.error),
.container .alert:not(.warning):not(.success):not(.error) {
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    color: var(--sms-white) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 14px !important;
}

/* Category combobox menu */
.category-combobox {
    position: relative;
}

.category-combobox input {
    padding-right: 44px !important;
}

.category-toggle {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 16px !important;
    line-height: 34px !important;
}

.category-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 9999;
    max-height: 385px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(15,23,42,.18);
}

.category-option,
.category-empty {
    padding: 10px 12px;
    font-size: 14px;
}

.category-option {
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.category-option:hover,
.category-option.active {
    background: #eef5ff;
}

.category-option-path {
    font-weight: 700;
    color: #111827;
}

.category-option-meta,
.category-empty {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
}

/* Sales lookup layout helpers retained from the older inline CSS. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.sales-form-grid { display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(220px, .85fr) minmax(200px, .8fr) auto; gap: 14px; align-items: end; }
.sales-button-cell { align-self: end; padding-bottom: 15px; }
.sales-button-cell button { height: 46px; white-space: nowrap; }
.lookup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lookup-grid input { margin-bottom: 0; }
.lookup-grid .small { margin-top: 8px; }
.lookup-button-cell { align-self: start; padding-top: 28px; }
.lookup-button-cell button { height: 46px; margin: 0; white-space: nowrap; }
.sales-table-wrap { overflow-x: auto; }
.sales-orders-table { min-width: 1160px; }
.sales-breakdown-table { max-width: 900px; }
.nowrap { white-space: nowrap; }
.custom-date-grid { display: none; }
.custom-date-grid.show { display: grid; }



/* =========================================================
   PERFORMANCE PAGE STYLES
   Controls /performance and the modules rendered by
   dashboard/tabs/performance/template.py.

   The template no longer has its own <style> block. Keep all
   Performance page colors, cards, tabs, status boxes, charts,
   score pills, and tables here.

   Quick edits:
   - Main Performance bubble color: --sms-medium-blue / --sms-medium-blue-2
   - Performance tab buttons: .perf-tab
   - Date buttons: .date-range-button
   - Metric cards: .perf-card
   - Insight cards: .insight-card
   - Chart/table panels: .chart-card / .perf-table
   ========================================================= */

/* Performance top tab row: Overview, GA4, Search Console, etc. */
.container .perf-tabs {
    display: flex;
    gap: 10px;
    margin: 14px 0 24px;
    flex-wrap: wrap;
}

/* Inactive Performance module tabs stay white so they look clickable. */
.container .perf-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 12px;
    background: #ffffff !important;
    color: #1687bd !important;
    -webkit-text-fill-color: #1687bd !important;
    border: 1px solid rgba(126,200,255,.62) !important;
    box-shadow: 0 8px 18px rgba(8,41,68,.12) !important;
    text-decoration: none !important;
    font-weight: 900;
    cursor: pointer;
}

/* Active Performance module tab uses the SMS dark-blue gradient. */
.container .perf-tab.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(126,200,255,.30) !important;
}

/* Performance tab content sections. JS toggles .active. */
.container .perf-section { display: none; }
.container .perf-section.active { display: block; }

/* Main Performance module bubble/card. This is the big dashboard bubble under the H1. */
.container .option-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
    padding: 16px;
    margin-bottom: 18px;
}

.container .option-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent) 0%, var(--sms-light-blue) 58%, var(--sms-line-blue) 100%);
    opacity: .98;
    pointer-events: none;
}

.container .option-card h1,
.container .option-card h2,
.container .option-card h3,
.container .option-card h4,
.container .option-card label,
.container .option-card strong,
.container .option-card b,
.container .option-card .perf-status-title,
.container .option-card .perf-card-value {
    color: var(--sms-white) !important;
}

.container .option-card p,
.container .option-card li,
.container .option-card .small,
.container .option-card .tiny-note,
.container .option-card .perf-card-sub,
.container .option-card .legend,
.container .option-card .legend-item {
    color: var(--sms-soft-white) !important;
    opacity: 1 !important;
}

/* Gold/notice note inside Performance cards. Keeps the warning accent without the white/yellow washout. */
.container .section-note {
    background: rgba(255, 183, 77, .10) !important;
    border: 1px solid rgba(255, 183, 77, .48) !important;
    border-left: 5px solid #DCA24A !important;
    color: var(--sms-white) !important;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 13px;
}

.container .section-note * {
    color: var(--sms-white) !important;
}

/* Tiny helper text under controls and tables. */
.container .tiny-note {
    font-size: 11px;
    color: var(--sms-soft-white) !important;
    margin-top: 4px;
    font-weight: 500;
}

/* Date range control row: 7 Days, 30 Days, 90 Days. */
.container .date-range-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Inactive date range buttons are white/clickable. */
.container .date-range-button {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(126,200,255,.62) !important;
    background: #ffffff !important;
    color: var(--brand-primary) !important;
    -webkit-text-fill-color: var(--brand-primary) !important;
    font-weight: 900 !important;
    box-shadow: 0 5px 12px rgba(15,23,42,.08) !important;
    min-width: 88px;
    cursor: pointer;
}

/* Active date range button uses the Command Center gradient. */
.container .date-range-button.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: transparent !important;
}

/* Layout grid used by the top Performance controls. */
.container .perf-control-grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(260px, 1fr);
    gap: 14px;
    align-items: end;
    margin: 12px 0;
}

/* Generic row used for run/refresh buttons. */
.container .top-run-row {
    margin: 10px 0 12px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.container .run-performance-button { min-width: 320px; }

/* Run status box shown while the Performance refresh job runs. */
.container .perf-status {
    display: none;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid var(--sms-dark-border) !important;
    border-left: 5px solid var(--sms-light-blue) !important;
    border-radius: 12px;
    background: rgba(255,255,255,.08) !important;
    color: var(--sms-white) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.container .perf-status.active { display: block; }

/* Progress bar inside the run status box. */
.container .perf-progress-track {
    height: 12px;
    background: rgba(255,255,255,.16) !important;
    border-radius: 999px;
    overflow: hidden;
}
.container .perf-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue)) !important;
    border-radius: 999px;
    transition: width .25s ease;
}

/* Metric card grid used throughout Performance. */
.container .perf-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

/* Individual metric card. */
.container .perf-card {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    color: var(--sms-white) !important;
}

/* Metric-card top accent line. */
.container .perf-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-line-blue));
}
.container .perf-card.good::before { background: linear-gradient(90deg,#16a34a,#22c55e); }
.container .perf-card.warn::before { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.container .perf-card.bad::before { background: linear-gradient(90deg,#dc2626,#f97316); }
.container .perf-card.purple::before { background: linear-gradient(90deg,#7c3aed,#a855f7); }

.container .perf-card-label {
    color: var(--sms-light-blue) !important;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.container .perf-card-value {
    color: var(--sms-white) !important;
    font-size: 28px;
    font-weight: 950;
    margin-top: 4px;
}
.container .perf-card-sub {
    color: var(--sms-soft-white) !important;
    font-size: 12px;
    margin-top: 4px;
}

/* Main Performance two-column and even-grid layouts. */
.container .perf-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(280px, .8fr);
    gap: 16px;
    align-items: start;
    margin-top: 12px;
}
.container .perf-grid-even {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 16px;
    align-items: start;
    margin-top: 12px;
}

/* Chart/table panel card. */
.container .chart-card {
    min-width: 0;
    overflow-x: auto;
    position: relative;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 14px;
    padding: 14px;
    color: var(--sms-white) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.container .chart-card h3 {
    margin-top: 0;
    color: var(--sms-white) !important;
}

/* Insight cards used for quick-read text boxes. */
.container .insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}
.container .insight-card {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-left: 5px solid var(--sms-light-blue) !important;
    border-radius: 12px;
    padding: 12px;
    color: var(--sms-soft-white) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.container .insight-card.good { border-left-color:#16a34a !important; }
.container .insight-card.warn { border-left-color:#f59e0b !important; }
.container .insight-card.bad { border-left-color:#dc2626 !important; }
.container .insight-card.purple { border-left-color:#7c3aed !important; }
.container .insight-card strong {
    color: var(--sms-white) !important;
    display: block;
    margin-bottom: 4px;
}

/* Bar-list mini chart components. */
.container .bar-list { display: flex; flex-direction: column; gap: 10px; }
.container .bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 240px) 1fr minmax(70px, auto);
    gap: 10px;
    align-items: center;
    font-size: 12px;
}
.container .bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sms-soft-white) !important;
}
.container .bar-track {
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.16) !important;
    overflow: hidden;
}
.container .bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand-accent),var(--sms-line-blue)) !important;
    min-width: 2px;
}
.container .bar-fill.green { background:linear-gradient(90deg,#16a34a,#22c55e) !important; }
.container .bar-fill.orange { background:linear-gradient(90deg,#f59e0b,#fbbf24) !important; }
.container .bar-fill.red { background:linear-gradient(90deg,#dc2626,#f97316) !important; }
.container .bar-fill.purple { background:linear-gradient(90deg,#7c3aed,#a855f7) !important; }

/* Merchant Center stacked status bar. */
.container .stacked-bar {
    display: flex;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.16) !important;
    margin: 12px 0 8px;
}
.container .stack-seg { height: 100%; min-width: 2px; }
.container .stack-approved { background:#16a34a; }
.container .stack-limited { background:#f59e0b; }
.container .stack-disapproved { background:#dc2626; }
.container .stack-pending { background:#7c3aed; }
.container .legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--sms-soft-white) !important;
    margin-top: 8px;
}
.container .legend-item { display:flex; gap:5px; align-items:center; }
.container .legend-swatch { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* Export/action row inside Performance modules. */
.container .export-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}
.container .small-action-button,
.container .section-refresh-button {
    min-width: 0 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}
.container .section-refresh-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.container .section-refresh-row h2 { margin: 0; }

/* Placeholder boxes before data loads. */
.container .coming-soon {
    background: rgba(255,255,255,.08) !important;
    border: 1px dashed var(--sms-dark-border-strong) !important;
    border-radius: 14px;
    padding: 18px;
    color: var(--sms-soft-white) !important;
}
.container .coming-soon strong { color: var(--sms-white) !important; }

/* Small status/score pills used by CWV and schema checks. */
.container .score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    background: rgba(126,200,255,.18) !important;
    color: var(--sms-white) !important;
}
.container .score-pill.good { background:#dcfce7 !important; color:#166534 !important; }
.container .score-pill.warn { background:#fef3c7 !important; color:#92400e !important; }
.container .score-pill.bad { background:#fee2e2 !important; color:#991b1b !important; }

/* URL list boxes used by CWV/Rich Results. */
.container .url-list-box {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 12px;
    padding: 10px;
    margin: 10px 0;
    font-size: 12px;
    color: var(--sms-soft-white) !important;
}
.container .url-list-box strong { color: var(--sms-white) !important; }

/* Performance tables. */
.container .perf-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 12px;
    overflow: hidden;
}
.container .perf-table th,
.container .perf-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(126,200,255,.14) !important;
    font-size: 12px;
    vertical-align: top;
    overflow-wrap: break-word;
}
.container .perf-table th {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: #fff !important;
    text-align: left;
    font-weight: 900;
}
.container .perf-table td {
    background: rgba(255,255,255,.035) !important;
    color: var(--sms-soft-white) !important;
}
.container .perf-table td.num {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.container .perf-path {
    word-break: break-word;
    max-width: 560px;
}

/* Google Ads term bucket grid. */
.container .ads-term-bucket-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(520px,1fr));
    gap: 16px;
    align-items: start;
    margin-top: 12px;
}
.container .ads-term-bucket-grid .chart-card { overflow-x: auto; }
.container .ads-term-bucket-grid .perf-table { min-width: 620px; table-layout: fixed; }
.container .ads-term-bucket-grid .perf-table th:nth-child(1),
.container .ads-term-bucket-grid .perf-table td:nth-child(1) { width: 22%; }
.container .ads-term-bucket-grid .perf-table th:nth-child(2),
.container .ads-term-bucket-grid .perf-table td:nth-child(2) { width: 18%; }
.container .ads-term-bucket-grid .perf-table th:nth-child(3),
.container .ads-term-bucket-grid .perf-table td:nth-child(3) { width: 12%; }
.container .ads-term-bucket-grid .perf-table th:nth-child(4),
.container .ads-term-bucket-grid .perf-table td:nth-child(4) { width: 10%; }
.container .ads-term-bucket-grid .perf-table th:nth-child(5),
.container .ads-term-bucket-grid .perf-table td:nth-child(5) { width: 10%; }
.container .ads-term-bucket-grid .perf-table th:nth-child(6),
.container .ads-term-bucket-grid .perf-table td:nth-child(6) { width: 28%; }

/* Performance responsive layout. */
@media (max-width: 1150px) {
    .container .ads-term-bucket-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
    .container .perf-control-grid,
    .container .perf-grid,
    .container .perf-grid-even { grid-template-columns: 1fr; }
    .container .bar-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 1100px) {
    :root { --sms-shell-sidebar: 94px; }
    .sms-cc-sidebar { width: 76px; }
    .sms-cc-brand { align-items: center; padding: 15px 10px; }
    .sms-cc-logo { width: 52px; border-radius: 6px; }
    .sms-cc-brand-title,
    .sms-cc-summary-title,
    .sms-cc-coming-soon,
    .sms-cc-nav-label { display: none; }
    .sms-cc-nav-summary { grid-template-columns: 1fr; justify-items: center; padding: 10px 7px; }
    .sms-cc-nav-link { grid-template-columns: 1fr; justify-items: center; padding: 8px 7px; }
    .grid-2,
    .grid-3,
    .grid-4,
    .sales-form-grid,
    .sales-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .lookup-grid { grid-template-columns: 1fr; }
    .lookup-button-cell { padding-top: 0; }
}

@media (max-width: 760px) {
    .sms-cc-sidebar {
        position: static;
        width: auto;
        margin: 12px;
        max-height: none;
    }

    .sms-cc-topbar {
        position: static;
        margin: 12px;
        height: auto;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .container {
        margin: 12px !important;
        padding: 20px !important;
    }

    .sms-cc-brand { align-items: flex-start; }
    .sms-cc-logo { width: 176px; }
    .sms-cc-brand-title,
    .sms-cc-summary-title,
    .sms-cc-nav-label { display: block; }
    .sms-cc-nav-link { grid-template-columns: 34px minmax(0, 1fr) auto; justify-items: stretch; }
}

/* =========================================================
   SAFE UNIVERSAL MODULE BUTTON OVERRIDES
   Added after the Performance page cleanup.

   Purpose:
   - Inactive module buttons use medium blue.
   - Active/selected module buttons use the brighter SMS gradient.
   - This only affects tab/date/filter-style controls, not the page bubbles.
   ========================================================= */
.container .perf-tab:not(.active),
.container .date-range-button:not(.active),
.container .price-mode-tab:not(.active),
.container .utility-tab:not(.active),
.container .api-tab:not(.active),
.container .feed-tab:not(.active),
.container .module-tab:not(.active),
.container .section-tab:not(.active) {
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    box-shadow: 0 8px 18px rgba(8,41,68,.18) !important;
}

.container .perf-tab.active,
.container .date-range-button.active,
.container .price-mode-tab.active,
.container .utility-tab.active,
.container .api-tab.active,
.container .feed-tab.active,
.container .module-tab.active,
.container .section-tab.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent), var(--sms-line-blue)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(126,200,255,.55) !important;
    box-shadow: 0 10px 22px rgba(8,41,68,.24) !important;
}

.container .perf-tab:hover,
.container .date-range-button:hover,
.container .price-mode-tab:hover,
.container .utility-tab:hover,
.container .api-tab:hover,
.container .feed-tab:hover,
.container .module-tab:hover,
.container .section-tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(8,41,68,.26) !important;
}



/* =========================================================
   QUICK READ SUMMARY METRICS
   Used by Performance > Overview quick-read cards.
   Keeps Search Console summary values compact so cards do not overlap.
   ========================================================= */
.container .insight-card {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.28;
}

.container .insight-card .insight-title,
.container .insight-card .insight-reason {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.container .insight-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.container .insight-metrics span {
    display: block;
    min-width: 0;
    padding: 6px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: var(--sms-white) !important;
    overflow: hidden;
}

.container .insight-metrics b {
    display: block;
    color: var(--sms-light-blue) !important;
    font-size: 9px;
    line-height: 1;
    margin-bottom: 3px;
    letter-spacing: .05em;
    text-transform: uppercase;
}


/* =========================================================
   COMPARE PRICING PAGE CLEANUP
   Formerly named Price Check in the UI.
   Keep all Compare Pricing visual styling here, not inside page templates.
   ========================================================= */

/* Rename/template note: the page HTML may still use price-mode classes.
   These styles make that page match the newer Command Center layout. */

.container .price-mode-tabs {
    display: flex;
    gap: 10px;
    margin: -6px 0 24px;
    flex-wrap: wrap;
}

.container .price-mode-tab,
.container a.price-mode-tab,
.container button.price-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    box-shadow: 0 8px 18px rgba(8,41,68,.18) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    cursor: pointer;
}

.container .price-mode-tab.active,
.container a.price-mode-tab.active,
.container button.price-mode-tab.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent), var(--sms-line-blue)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(126,200,255,.55) !important;
    box-shadow: 0 10px 22px rgba(8,41,68,.24) !important;
}

/* Main Compare Pricing form area. This intentionally targets the legacy
   compare-pricing screen by its known controls without requiring a template edit. */
.container:has(.price-mode-tabs) > form,
.container:has(.price-mode-tabs) .price-compare-form,
.container:has(.price-mode-tabs) .compare-pricing-form {
    position: relative;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Inputs/selects are intentionally light so Craig can immediately see editable fields. */
.container:has(.price-mode-tabs) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container:has(.price-mode-tabs) select,
.container:has(.price-mode-tabs) textarea {
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    border: 1px solid rgba(126, 200, 255, .62) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.80) !important;
}

.container:has(.price-mode-tabs) input::placeholder,
.container:has(.price-mode-tabs) textarea::placeholder {
    color: var(--sms-field-muted) !important;
    -webkit-text-fill-color: var(--sms-field-muted) !important;
    opacity: 1 !important;
}

/* Price/check comparison helper panels and result cards should use the same card language as Performance. */
.container:has(.price-mode-tabs) .result:not(.warning):not(.success):not(.error),
.container:has(.price-mode-tabs) .price-card:not(.warning):not(.success):not(.error),
.container:has(.price-mode-tabs) .comparison-card:not(.warning):not(.success):not(.error),
.container:has(.price-mode-tabs) .competitor-card:not(.warning):not(.success):not(.error),
.container:has(.price-mode-tabs) .run-status:not(.warning):not(.success):not(.error),
.container:has(.price-mode-tabs) .status-box:not(.warning):not(.success):not(.error) {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}

.container:has(.price-mode-tabs) .run-status,
.container:has(.price-mode-tabs) .run-status *,
.container:has(.price-mode-tabs) .status-box,
.container:has(.price-mode-tabs) .status-box *,
.container:has(.price-mode-tabs) [id*="runStatus"],
.container:has(.price-mode-tabs) [id*="runStatus"] *,
.container:has(.price-mode-tabs) [id*="RunStatus"],
.container:has(.price-mode-tabs) [id*="RunStatus"] * {
    color: var(--sms-white) !important;
    opacity: 1 !important;
}

/* Small notes on the Compare Pricing page were previously dark gray on dark blue. */
.container:has(.price-mode-tabs) .small,
.container:has(.price-mode-tabs) .tiny-note,
.container:has(.price-mode-tabs) .gp-note,
.container:has(.price-mode-tabs) .price-note,
.container:has(.price-mode-tabs) .muted,
.container:has(.price-mode-tabs) p {
    color: var(--sms-soft-white) !important;
    opacity: 1 !important;
}

/* Labels and main headings stay bright white/readable. */
.container:has(.price-mode-tabs) label,
.container:has(.price-mode-tabs) h1,
.container:has(.price-mode-tabs) h2,
.container:has(.price-mode-tabs) h3,
.container:has(.price-mode-tabs) strong,
.container:has(.price-mode-tabs) b {
    color: var(--sms-white) !important;
}

/* Keep the run-status/progress bubble compact like the Performance status card. */
.container:has(.price-mode-tabs) .run-status,
.container:has(.price-mode-tabs) .status-box,
.container:has(.price-mode-tabs) [id*="runStatus"],
.container:has(.price-mode-tabs) [id*="RunStatus"] {
    padding: 14px !important;
    border-left: 5px solid var(--sms-light-blue) !important;
}

/* Legacy progress bars on Compare Pricing. */
.container:has(.price-mode-tabs) progress {
    width: 100%;
    height: 10px;
    accent-color: var(--sms-line-blue);
}

.container:has(.price-mode-tabs) .progress-track,
.container:has(.price-mode-tabs) .run-progress,
.container:has(.price-mode-tabs) .bar {
    background: rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

.container:has(.price-mode-tabs) .progress-fill,
.container:has(.price-mode-tabs) .run-bar-fill,
.container:has(.price-mode-tabs) .bar-fill {
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue)) !important;
    border-radius: 999px !important;
}

@media (max-width: 1000px) {
    .container:has(.price-mode-tabs) .grid-2,
    .container:has(.price-mode-tabs) .grid-3,
    .container:has(.price-mode-tabs) .lookup-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   COMPARE PRICING LAYOUT FIX
   Added after moving SKU/Category inline styles into CSS.
   This restores the two-column form layout and keeps the run
   status card docked on the right.
   ========================================================= */

/* Topbar search should fill the available topbar space without relying on page-level input width rules. */
.sms-cc-search {
    width: 100%;
}
.sms-cc-search input,
.sms-cc-topbar input[type="search"] {
    width: 100% !important;
    min-width: 240px !important;
    box-sizing: border-box !important;
}

/* Header row used on Compare Pricing SKU and Category pages. */
.container:has(.price-mode-tabs) .top-row {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) 300px !important;
    gap: 22px !important;
    align-items: start !important;
    margin: 0 0 18px !important;
}

.container:has(.price-mode-tabs) .top-row > div:first-child {
    min-width: 0 !important;
}

.container:has(.price-mode-tabs) .top-row h1 {
    margin: 0 0 18px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
}

.container:has(.price-mode-tabs) .top-row p {
    margin: 0 0 20px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* Run Status card belongs in the top-right, not stretched across the page. */
.container:has(.price-mode-tabs) .status-box {
    width: 260px !important;
    min-width: 260px !important;
    justify-self: end !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

.container:has(.price-mode-tabs) .status-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    color: var(--sms-white) !important;
    margin: 0 0 4px !important;
}

.container:has(.price-mode-tabs) .status-percent {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: var(--sms-white) !important;
    margin: 0 0 8px !important;
}

.container:has(.price-mode-tabs) .status-sub {
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: var(--sms-white) !important;
    margin: 7px 0 0 !important;
}

.container:has(.price-mode-tabs) .bar-wrap {
    width: 100% !important;
    height: 10px !important;
    background: rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 8px 0 0 !important;
}

.container:has(.price-mode-tabs) .bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue)) !important;
    border-radius: 999px !important;
}

/* SKU search form: product field + competitor group row. */
.container:has(.price-mode-tabs) .lookup-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 1fr) !important;
    gap: 16px !important;
    align-items: end !important;
    margin: 10px 0 14px !important;
}

/* SKU search form: current price + cost + note row. */
.container:has(.price-mode-tabs) .pricing-grid {
    display: grid !important;
    grid-template-columns: minmax(180px, 300px) minmax(180px, 300px) minmax(360px, 1fr) !important;
    gap: 16px !important;
    align-items: end !important;
    margin: 0 0 12px !important;
}

.container:has(.price-mode-tabs) .lookup-grid label,
.container:has(.price-mode-tabs) .pricing-grid label,
.container:has(.price-mode-tabs) .category-controls label,
.container:has(.price-mode-tabs) .batch-controls label {
    display: block !important;
    margin: 0 0 8px !important;
    font-weight: 900 !important;
    color: var(--sms-white) !important;
}

.container:has(.price-mode-tabs) .lookup-grid input,
.container:has(.price-mode-tabs) .lookup-grid select,
.container:has(.price-mode-tabs) .pricing-grid input,
.container:has(.price-mode-tabs) .pricing-grid select,
.container:has(.price-mode-tabs) .category-controls input,
.container:has(.price-mode-tabs) .category-controls select,
.container:has(.price-mode-tabs) .batch-controls input,
.container:has(.price-mode-tabs) .batch-controls select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.container:has(.price-mode-tabs) .field-help,
.container:has(.price-mode-tabs) .category-help,
.container:has(.price-mode-tabs) .category-count,
.container:has(.price-mode-tabs) .summary-sub {
    color: var(--sms-soft-white) !important;
    opacity: 1 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.container:has(.price-mode-tabs) .field-help {
    margin: 0 0 12px !important;
}

.container:has(.price-mode-tabs) .button-row,
.container:has(.price-mode-tabs) .batch-button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 8px !important;
}

.container:has(.price-mode-tabs) .button-row button,
.container:has(.price-mode-tabs) .button-row .button-link,
.container:has(.price-mode-tabs) .batch-button-row button,
.container:has(.price-mode-tabs) .batch-button-row .button-link {
    margin: 0 !important;
    min-height: 42px !important;
}

/* Category mode layout. */
.container:has(.price-mode-tabs) .category-controls {
    display: grid !important;
    grid-template-columns: minmax(420px, 1fr) minmax(160px, 220px) minmax(140px, 180px) !important;
    gap: 16px !important;
    align-items: start !important;
    margin: 14px 0 14px !important;
}

.container:has(.price-mode-tabs) .batch-controls {
    display: grid !important;
    grid-template-columns: minmax(240px, 300px) minmax(150px, 190px) auto !important;
    gap: 16px !important;
    align-items: start !important;
    margin: 18px 0 0 !important;
}

.container:has(.price-mode-tabs) .readonly-field {
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    border: 1px solid rgba(126, 200, 255, .62) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
    color: var(--sms-field-text) !important;
    box-sizing: border-box !important;
    font-weight: 900 !important;
}

@media (max-width: 1000px) {
    .container:has(.price-mode-tabs) .top-row,
    .container:has(.price-mode-tabs) .lookup-grid,
    .container:has(.price-mode-tabs) .pricing-grid,
    .container:has(.price-mode-tabs) .category-controls,
    .container:has(.price-mode-tabs) .batch-controls {
        grid-template-columns: 1fr !important;
    }

    .container:has(.price-mode-tabs) .status-box {
        width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }
}

/* =========================================================
   COMPARE PRICING CATEGORY MODE
   Added after moving category_tab.py inline styles into CSS.
   ========================================================= */
.container:has(.price-mode-tabs) .note {
    margin-top: 15px !important;
    padding: 14px !important;
    background: rgba(255, 183, 77, .10) !important;
    border: 1px solid rgba(255, 183, 77, .48) !important;
    border-left: 5px solid #DCA24A !important;
    border-radius: 12px !important;
    color: var(--sms-white) !important;
}

.container:has(.price-mode-tabs) .pill {
    display: inline-block !important;
    background: rgba(126,200,255,.14) !important;
    border: 1px solid rgba(126,200,255,.38) !important;
    color: var(--sms-white) !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    margin: 2px 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.container:has(.price-mode-tabs) .pill-leaf {
    background: rgba(34,197,94,.16) !important;
    border-color: rgba(34,197,94,.42) !important;
}

.container:has(.price-mode-tabs) .muted,
.container:has(.price-mode-tabs) .small {
    color: var(--sms-soft-white) !important;
    opacity: 1 !important;
}

.container:has(.price-mode-tabs) .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.container:has(.price-mode-tabs) .summary-card,
.container:has(.price-mode-tabs) .decision-card {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    color: var(--sms-white) !important;
}

.container:has(.price-mode-tabs) .summary-label {
    font-size: 12px !important;
    color: var(--sms-light-blue) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-weight: 900 !important;
}

.container:has(.price-mode-tabs) .summary-value {
    font-size: 20px !important;
    font-weight: 950 !important;
    color: var(--sms-white) !important;
    margin-top: 4px !important;
}

.container:has(.price-mode-tabs) .category-result-table {
    table-layout: fixed !important;
    min-width: 1180px !important;
}

.container:has(.price-mode-tabs) .category-result-table th:nth-child(1) { width: 15%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(2) { width: 13%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(3) { width: 10%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(4) { width: 7%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(5) { width: 6%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(6) { width: 10%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(7) { width: 8%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(8) { width: 6%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(9) { width: 11%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(10) { width: 5%; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(11) { width: 9%; }

.container:has(.price-mode-tabs) .category-result-table td,
.container:has(.price-mode-tabs) .competitor-detail-table td {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.container:has(.price-mode-tabs) .category-result-table td:nth-child(10),
.container:has(.price-mode-tabs) .category-result-table td:nth-child(11) {
    text-align: center !important;
    white-space: nowrap !important;
}

.container:has(.price-mode-tabs) .product-cell { line-height: 1.25 !important; }
.container:has(.price-mode-tabs) .sku-cell,
.container:has(.price-mode-tabs) .search-cell { font-size: 13px !important; overflow-wrap: anywhere !important; }

.container:has(.price-mode-tabs) .action-pill {
    display: inline-block !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.container:has(.price-mode-tabs) .action-raise { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #86efac !important; }
.container:has(.price-mode-tabs) .action-keep { background: #dbeafe !important; color: #1e40af !important; border: 1px solid #93c5fd !important; }
.container:has(.price-mode-tabs) .action-lower { background: #ffedd5 !important; color: #9a3412 !important; border: 1px solid #fdba74 !important; }
.container:has(.price-mode-tabs) .action-review { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; }

.container:has(.price-mode-tabs) .detail-row td {
    background: rgba(255,255,255,.035) !important;
    padding: 0 !important;
}

.container:has(.price-mode-tabs) .detail-panel {
    padding: 18px !important;
    border-left: 5px solid var(--sms-light-blue) !important;
}

.container:has(.price-mode-tabs) .detail-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--sms-white) !important;
    margin-bottom: 12px !important;
}

.container:has(.price-mode-tabs) .detail-subtitle {
    font-weight: 900 !important;
    color: var(--sms-white) !important;
    margin-top: 16px !important;
}

.container:has(.price-mode-tabs) .detail-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 10px !important;
}

.container:has(.price-mode-tabs) .competitor-detail-table {
    margin-top: 10px !important;
    font-size: 13px !important;
    table-layout: fixed !important;
    min-width: 980px !important;
}

.container:has(.price-mode-tabs) .competitor-detail-table th { position: static !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(1) { width: 20%; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(2) { width: 10%; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(3) { width: 14%; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(4) { width: 13%; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(5) { width: 11%; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(6) { width: 32%; }

.container:has(.price-mode-tabs) .button-small {
    min-width: 78px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.container:has(.price-mode-tabs) .likely,
.container:has(.price-mode-tabs) .opened { color: #86efac !important; font-weight: 900 !important; }
.container:has(.price-mode-tabs) .review,
.container:has(.price-mode-tabs) .blocked { color: #fbbf24 !important; font-weight: 900 !important; }
.container:has(.price-mode-tabs) .notfound,
.container:has(.price-mode-tabs) .no { color: rgba(255,255,255,.72) !important; font-weight: 900 !important; }
.container:has(.price-mode-tabs) .error { color: #fecaca !important; font-weight: 900 !important; }

@media (max-width: 1000px) {
    .container:has(.price-mode-tabs) .summary-grid,
    .container:has(.price-mode-tabs) .detail-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   COMPARE PRICING READABILITY PASS
   Keeps the completed SKU results easier for Craig/Darren to scan.
   ========================================================= */
.container:has(.price-mode-tabs) #liveMessage,
.container:has(.price-mode-tabs) #liveBC,
.container:has(.price-mode-tabs) #liveSummary,
.container:has(.price-mode-tabs) #liveTable {
    margin-top: 14px !important;
}

.container:has(.price-mode-tabs) .compare-run-message,
.container:has(.price-mode-tabs) .bc-card,
.container:has(.price-mode-tabs) .compare-product-card {
    padding: 16px !important;
    border-radius: 16px !important;
    line-height: 1.35 !important;
}

.container:has(.price-mode-tabs) .compare-run-title,
.container:has(.price-mode-tabs) .compare-product-title {
    color: var(--sms-light-blue) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin: 0 0 8px !important;
}

.container:has(.price-mode-tabs) .compare-run-note,
.container:has(.price-mode-tabs) .compare-product-note {
    margin-top: 10px !important;
    color: var(--sms-soft-white) !important;
    line-height: 1.45 !important;
}

.container:has(.price-mode-tabs) .compare-product-name {
    color: var(--sms-white) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    margin: 0 0 12px !important;
    overflow-wrap: anywhere !important;
}

.container:has(.price-mode-tabs) .compare-run-grid,
.container:has(.price-mode-tabs) .compare-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.container:has(.price-mode-tabs) .compare-run-grid > div,
.container:has(.price-mode-tabs) .compare-product-grid > div {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(126,200,255,.24) !important;
}

.container:has(.price-mode-tabs) .compare-run-grid span,
.container:has(.price-mode-tabs) .compare-product-grid span {
    display: block !important;
    color: var(--sms-light-blue) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    margin-bottom: 4px !important;
}

.container:has(.price-mode-tabs) .compare-run-grid strong,
.container:has(.price-mode-tabs) .compare-product-grid strong {
    display: block !important;
    color: var(--sms-white) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

/* Decision cards below the 4-card market summary should also be real cards,
   not full-width horizontal bands. */
.container:has(.price-mode-tabs) .decision-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

.container:has(.price-mode-tabs) .decision-card {
    min-height: 102px !important;
    overflow: hidden !important;
}

.container:has(.price-mode-tabs) .decision-card .summary-value {
    font-size: 24px !important;
    line-height: 1.1 !important;
}

.container:has(.price-mode-tabs) .decision-card .summary-value.review,
.container:has(.price-mode-tabs) .decision-card .summary-value.blocked,
.container:has(.price-mode-tabs) .summary-value.review,
.container:has(.price-mode-tabs) .summary-value.blocked {
    color: #fbbf24 !important;
}

/* SKU result table rules that were previously only in sku_tab.py. */
.container:has(.price-mode-tabs) .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    margin-top: 16px !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}

.container:has(.price-mode-tabs) .result-table {
    table-layout: fixed !important;
    min-width: 1120px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.container:has(.price-mode-tabs) .result-table th:nth-child(1) { width: 15%; }
.container:has(.price-mode-tabs) .result-table th:nth-child(2) { width: 9%; }
.container:has(.price-mode-tabs) .result-table th:nth-child(3) { width: 12%; }
.container:has(.price-mode-tabs) .result-table th:nth-child(4) { width: 11%; }
.container:has(.price-mode-tabs) .result-table th:nth-child(5),
.container:has(.price-mode-tabs) .result-table th:nth-child(6),
.container:has(.price-mode-tabs) .result-table th:nth-child(7) { width: 10%; }
.container:has(.price-mode-tabs) .result-table th:nth-child(8) { width: 12%; }
.container:has(.price-mode-tabs) .result-table th:nth-child(9) { width: 26%; }

.container:has(.price-mode-tabs) .result-table th,
.container:has(.price-mode-tabs) .result-table td {
    padding: 10px 12px !important;
    line-height: 1.32 !important;
    vertical-align: top !important;
}

.container:has(.price-mode-tabs) .result-table td {
    overflow-wrap: anywhere !important;
}

.container:has(.price-mode-tabs) .result-table .link-title,
.container:has(.price-mode-tabs) .result-table a {
    color: var(--sms-light-blue) !important;
    font-weight: 800 !important;
}

.container:has(.price-mode-tabs) .nowrap {
    white-space: nowrap !important;
}

@media (max-width: 1000px) {
    .container:has(.price-mode-tabs) .decision-grid,
    .container:has(.price-mode-tabs) .compare-run-grid,
    .container:has(.price-mode-tabs) .compare-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 650px) {
    .container:has(.price-mode-tabs) .decision-grid,
    .container:has(.price-mode-tabs) .summary-grid,
    .container:has(.price-mode-tabs) .compare-run-grid,
    .container:has(.price-mode-tabs) .compare-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   COMPARE PRICING - SKU lookup cleanup
   Removes editable price/cost inputs from the SKU form and
   improves the BigCommerce lookup confirmation bubble.
   ========================================================= */
.container .compare-form-note {
    max-width: 820px;
    margin: 10px 0 14px;
    color: var(--sms-soft-white) !important;
    font-size: 12px;
    line-height: 1.35;
}

.container .compare-lookup-result {
    margin-top: 18px !important;
    padding: 18px 24px 18px 28px !important;
    border-left: 5px solid var(--sms-light-blue) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    color: var(--sms-white) !important;
}

.container .compare-lookup-result::after {
    left: 24px !important;
    right: 24px !important;
}

.container .compare-lookup-title {
    color: var(--sms-white) !important;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.2;
    margin-bottom: 4px;
}

.container .compare-lookup-sub {
    color: var(--sms-soft-white) !important;
    font-size: 13px;
    line-height: 1.35;
}

/* =========================================================
   COMPARE PRICING RESULT READABILITY TWEAKS
   Keeps Compare Pricing aligned with the shared Command Center font
   and turns long result titles into compact "Result Link" cells.
   ========================================================= */
.container:has(.price-mode-tabs),
.container:has(.price-mode-tabs) *,
.sms-cc-sidebar,
.sms-cc-sidebar *,
.sms-cc-topbar,
.sms-cc-topbar * {
    font-family: var(--sms-app-font-family) !important;
}

.container:has(.price-mode-tabs) .compare-run-message {
    padding: 18px 20px !important;
    margin: 16px 0 18px !important;
}

.container:has(.price-mode-tabs) .compare-run-message-start {
    max-width: none !important;
}

.container:has(.price-mode-tabs) .compare-run-message-start .compare-run-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

.container:has(.price-mode-tabs) .result-table {
    min-width: 1040px !important;
}

.container:has(.price-mode-tabs) .result-table th:nth-child(1) { width: 16% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(2) { width: 9% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(3) { width: 12% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(4) { width: 11% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(5) { width: 10% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(6) { width: 10% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(7) { width: 10% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(8) { width: 12% !important; }
.container:has(.price-mode-tabs) .result-table th:nth-child(9) { width: 10% !important; }

.container:has(.price-mode-tabs) .result-table td:nth-child(9) {
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.container:has(.price-mode-tabs) .result-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px !important;
    max-width: 100% !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: rgba(126, 200, 255, .13) !important;
    border: 1px solid rgba(126, 200, 255, .34) !important;
    color: var(--sms-light-blue) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.container:has(.price-mode-tabs) .result-link:hover {
    background: rgba(126, 200, 255, .22) !important;
    color: var(--sms-white) !important;
}

@media (max-width: 900px) {
    .container:has(.price-mode-tabs) .compare-run-message-start .compare-run-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   COMPARE PRICING CATEGORY READABILITY PASS
   Aligns category controls, trims product/result tables, and
   uses compact result links like the SKU comparison page.
   ========================================================= */
.container:has(.price-mode-tabs) .category-controls {
    align-items: start !important;
    margin-top: 22px !important;
}

.container:has(.price-mode-tabs) .category-help,
.container:has(.price-mode-tabs) .category-count {
    display: block !important;
    margin: 5px 0 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
}

.container:has(.price-mode-tabs) .category-count {
    margin-top: 2px !important;
}

.container:has(.price-mode-tabs) .batch-controls {
    align-items: start !important;
    margin-top: 20px !important;
}

.container:has(.price-mode-tabs) .batch-button-row {
    align-self: start !important;
    padding-top: 28px !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
}

.container:has(.price-mode-tabs) .batch-button-row button {
    height: 46px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.container:has(.price-mode-tabs) .compare-category-message,
.container:has(.price-mode-tabs) .compare-category-run-message,
.container:has(.price-mode-tabs) .compare-category-summary-intro {
    padding: 18px 20px !important;
    margin: 16px 0 18px !important;
    line-height: 1.38 !important;
}

.container:has(.price-mode-tabs) .compare-category-selected-name {
    color: var(--sms-white) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    margin: 4px 0 10px !important;
    overflow-wrap: anywhere !important;
}

.container:has(.price-mode-tabs) .compare-category-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    margin-top: 10px !important;
}

.container:has(.price-mode-tabs) .category-products-wrap,
.container:has(.price-mode-tabs) .category-results-wrap,
.container:has(.price-mode-tabs) .category-subcategory-wrap {
    margin-top: 18px !important;
}

.container:has(.price-mode-tabs) .category-products-table,
.container:has(.price-mode-tabs) .category-subcategory-table {
    table-layout: fixed !important;
    min-width: 1040px !important;
    margin-top: 0 !important;
    border: 0 !important;
}

.container:has(.price-mode-tabs) .category-products-table th:nth-child(1) { width: 6% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(2) { width: 8% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(3) { width: 31% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(4) { width: 22% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(5) { width: 16% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(6) { width: 7% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(7) { width: 7% !important; }
.container:has(.price-mode-tabs) .category-products-table th:nth-child(8) { width: 7% !important; }

.container:has(.price-mode-tabs) .category-products-table th,
.container:has(.price-mode-tabs) .category-products-table td,
.container:has(.price-mode-tabs) .category-result-table th,
.container:has(.price-mode-tabs) .category-result-table td,
.container:has(.price-mode-tabs) .competitor-detail-table th,
.container:has(.price-mode-tabs) .competitor-detail-table td {
    padding: 10px 12px !important;
    line-height: 1.28 !important;
    vertical-align: top !important;
}

.container:has(.price-mode-tabs) .category-products-table td,
.container:has(.price-mode-tabs) .category-result-table td,
.container:has(.price-mode-tabs) .competitor-detail-table td {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.container:has(.price-mode-tabs) .category-products-table .search-cell,
.container:has(.price-mode-tabs) .category-result-table .sku-cell .small {
    color: var(--sms-soft-white) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.container:has(.price-mode-tabs) .category-result-table {
    min-width: 1200px !important;
    table-layout: fixed !important;
    margin-top: 0 !important;
    border: 0 !important;
}

.container:has(.price-mode-tabs) .category-result-table th:nth-child(1) { width: 18% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(2) { width: 19% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(3) { width: 8% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(4) { width: 7% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(5) { width: 10% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(6) { width: 10% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(7) { width: 9% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(8) { width: 12% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(9) { width: 5% !important; }
.container:has(.price-mode-tabs) .category-result-table th:nth-child(10) { width: 6% !important; }

.container:has(.price-mode-tabs) .category-result-table td:nth-child(9),
.container:has(.price-mode-tabs) .category-result-table td:nth-child(10) {
    text-align: center !important;
    white-space: nowrap !important;
}

.container:has(.price-mode-tabs) .detail-row > td {
    padding: 0 !important;
    background: rgba(255,255,255,.035) !important;
}

.container:has(.price-mode-tabs) .compare-category-detail-panel {
    padding: 18px 22px 22px !important;
    border-left: 5px solid var(--sms-light-blue) !important;
}

.container:has(.price-mode-tabs) .detail-title,
.container:has(.price-mode-tabs) .detail-subtitle {
    color: var(--sms-white) !important;
    font-weight: 950 !important;
    line-height: 1.3 !important;
}

.container:has(.price-mode-tabs) .detail-title {
    font-size: 16px !important;
    margin-bottom: 14px !important;
}

.container:has(.price-mode-tabs) .detail-subtitle {
    font-size: 15px !important;
    margin: 18px 0 10px !important;
}

.container:has(.price-mode-tabs) .detail-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}

.container:has(.price-mode-tabs) .competitor-detail-table {
    min-width: 1120px !important;
    table-layout: fixed !important;
    margin-top: 0 !important;
}

.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(1) { width: 16% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(2) { width: 9% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(3) { width: 12% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(4) { width: 12% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(5) { width: 10% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(6) { width: 11% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(7) { width: 9% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(8) { width: 12% !important; }
.container:has(.price-mode-tabs) .competitor-detail-table th:nth-child(9) { width: 9% !important; }

.container:has(.price-mode-tabs) .competitor-detail-table td:nth-child(9) {
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.container:has(.price-mode-tabs) .action-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

@media (max-width: 1000px) {
    .container:has(.price-mode-tabs) .batch-button-row {
        padding-top: 0 !important;
    }
}

/* =========================================================
   COMPETITORS TAB
   Keep competitor maintenance screen aligned with Command Center styling.
   ========================================================= */
.container:has(.competitors-table) {
    font-family: var(--sms-app-font-family, "proxima-nova", "Inter", "Segoe UI", Arial, sans-serif) !important;
}

.container:has(.competitors-table) > p {
    color: var(--sms-soft-white) !important;
    max-width: 980px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
}

.container:has(.competitors-table) .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 16px !important;
}

.container:has(.competitors-table) .summary-card {
    min-width: 0 !important;
}

.container:has(.competitors-table) .competitors-help-note,
.container:has(.competitors-table) .result {
    margin: 14px 0 16px !important;
    padding: 14px 16px !important;
    background: rgba(255, 183, 77, .10) !important;
    border: 1px solid rgba(255, 183, 77, .48) !important;
    border-left: 5px solid #DCA24A !important;
    border-radius: 12px !important;
    color: var(--sms-white) !important;
    line-height: 1.5 !important;
}

.container:has(.competitors-table) .success {
    margin: 14px 0 16px !important;
    padding: 14px 16px !important;
    background: rgba(34,197,94,.12) !important;
    border: 1px solid rgba(34,197,94,.38) !important;
    border-left: 5px solid #38B247 !important;
    border-radius: 12px !important;
    color: var(--sms-white) !important;
}

.container:has(.competitors-table) .button-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 16px 0 18px !important;
}

.container:has(.competitors-table) .competitors-table-wrap {
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

.container:has(.competitors-table) .competitors-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-top: 16px !important;
    border: 1px solid rgba(126,200,255,.28) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.045) !important;
}

.container:has(.competitors-table) .competitors-table th,
.container:has(.competitors-table) .competitors-table td {
    padding: 8px 8px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(0,0,0,.20) !important;
    border-right: 1px solid rgba(0,0,0,.20) !important;
    color: var(--sms-white) !important;
    overflow: hidden !important;
}

.container:has(.competitors-table) .competitors-table th {
    background: linear-gradient(180deg, rgba(13, 97, 141, .95), rgba(8, 74, 112, .95)) !important;
    color: var(--sms-white) !important;
    font-weight: 900 !important;
    position: sticky !important;
    top: var(--sms-shell-topbar, 72px) !important;
    z-index: 2 !important;
}

.container:has(.competitors-table) .competitors-table th:nth-child(1) { width: 6.5% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(2) { width: 12% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(3) { width: 17% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(4) { width: 20% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(5) { width: 13% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(6) { width: 25% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(7) { width: 6.5% !important; text-align: center !important; }

.container:has(.competitors-table) .competitors-table input,
.container:has(.competitors-table) .competitors-table select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    color: #0f172a !important;
    background: #f8fbff !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
    box-sizing: border-box !important;
}

.container:has(.competitors-table) .competitors-table .name-input {
    font-weight: 900 !important;
}

.container:has(.competitors-table) .delete-cell {
    text-align: center !important;
}

.container:has(.competitors-table) .delete-cell input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 auto !important;
    transform: none !important;
    accent-color: var(--brand-accent, #2695C1) !important;
}

.container:has(.competitors-table) .delete-cell .small {
    color: var(--sms-soft-white) !important;
    font-weight: 800 !important;
}

.container:has(.competitors-table) .button-secondary {
    background: rgba(148, 163, 184, .55) !important;
    color: var(--sms-soft-white) !important;
}

@media (max-width: 1200px) {
    .container:has(.competitors-table) .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .container:has(.competitors-table) .competitors-table th,
    .container:has(.competitors-table) .competitors-table td {
        padding: 7px 6px !important;
    }
    .container:has(.competitors-table) .competitors-table input,
    .container:has(.competitors-table) .competitors-table select {
        font-size: 12px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}


/* =========================================================
   COMPETITORS TAB - table alignment polish
   ========================================================= */
.container:has(.competitors-table) .button-row {
    margin: 18px 0 18px !important;
}

.container:has(.competitors-table) .button-row button,
.container:has(.competitors-table) .button-row .button-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
}

.container:has(.competitors-table) .button-row .button-secondary {
    background: rgba(148, 163, 184, .56) !important;
    color: var(--sms-white) !important;
    border: 1px solid rgba(226, 232, 240, .28) !important;
}

.container:has(.competitors-table) .competitors-table-wrap {
    overflow-x: hidden !important;
}

.container:has(.competitors-table) .competitors-table th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

.container:has(.competitors-table) .competitors-table thead th {
    height: 42px !important;
    vertical-align: middle !important;
}

.container:has(.competitors-table) .competitors-table th:nth-child(1) { width: 5% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(2) { width: 16% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(3) { width: 17% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(4) { width: 20% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(5) { width: 14% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(6) { width: 21% !important; }
.container:has(.competitors-table) .competitors-table th:nth-child(7) { width: 7% !important; text-align: center !important; }

.container:has(.competitors-table) .competitors-table td:nth-child(1),
.container:has(.competitors-table) .competitors-table th:nth-child(1),
.container:has(.competitors-table) .competitors-table td:nth-child(7),
.container:has(.competitors-table) .competitors-table th:nth-child(7) {
    text-align: center !important;
}

.container:has(.competitors-table) .competitors-table .active-select {
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center !important;
}

.container:has(.competitors-table) .competitors-table .template-input,
.container:has(.competitors-table) .competitors-table input[name^="template_"] {
    text-overflow: ellipsis !important;
}

.container:has(.competitors-table) .competitors-table input.name-input {
    font-size: 13px !important;
}

/* =========================================================
   GLOBAL SHELL POLISH - topbar scrolls with page
   ========================================================= */
.sms-cc-topbar {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 0 28px !important;
}

.container {
    padding-top: 18px !important;
}

/* Keep the search field full width after switching the topbar out of fixed mode. */
.sms-cc-topbar .sms-cc-search,
.sms-cc-topbar .sms-cc-search input[type="search"] {
    width: 100% !important;
}

/* =========================================================
   COMPETITORS TAB - summary cards and action buttons polish
   ========================================================= */
.container:has(.competitors-table) .summary-grid {
    align-items: stretch !important;
    gap: 14px !important;
    margin: 20px 0 18px !important;
}

.container:has(.competitors-table) .summary-card {
    min-height: 78px !important;
    padding: 15px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
}

.container:has(.competitors-table) .summary-label {
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: .08em !important;
    margin: 0 0 5px !important;
    color: var(--sms-light-blue) !important;
}

.container:has(.competitors-table) .summary-value {
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    color: var(--sms-white) !important;
}

.container:has(.competitors-table) .button-row {
    margin: 18px 0 22px !important;
    gap: 10px !important;
}

.container:has(.competitors-table) .button-row button,
.container:has(.competitors-table) .button-row .button-link {
    min-height: 40px !important;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.container:has(.competitors-table) .button-row .button-secondary,
.container:has(.competitors-table) .button-row a.button-secondary {
    background: rgba(8, 41, 68, .42) !important;
    color: var(--sms-light-blue) !important;
    border: 1px solid rgba(126, 200, 255, .38) !important;
    box-shadow: none !important;
}

.container:has(.competitors-table) .button-row .button-secondary:hover,
.container:has(.competitors-table) .button-row a.button-secondary:hover {
    background: rgba(126, 200, 255, .12) !important;
    color: var(--sms-white) !important;
}

/* =========================================================
   REVENUE TAB - Command Center dark style cleanup
   ========================================================= */
.container:has(.revenue-tabs),
.container:has(.revenue-tabs) * {
    font-family: var(--sms-app-font-family) !important;
}

.container:has(.revenue-tabs) .revenue-hero {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(440px, 620px) !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin: 0 0 18px !important;
}

.container:has(.revenue-tabs) .revenue-hero h1 {
    margin: 0 0 10px !important;
    color: var(--sms-white) !important;
}

.container:has(.revenue-tabs) .revenue-subtitle {
    max-width: 780px !important;
    color: var(--sms-soft-white) !important;
    font-size: 16px !important;
    line-height: 1.42 !important;
}

.container:has(.revenue-tabs) .revenue-subtitle strong {
    color: var(--sms-white) !important;
}

.container:has(.revenue-tabs) .revenue-snapshot-panel {
    background: linear-gradient(135deg, var(--sms-medium-blue-3), #1473bd) !important;
    color: var(--sms-white) !important;
    border: 1px solid rgba(126, 200, 255, .42) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.container:has(.revenue-tabs) .revenue-snapshot-heading {
    color: var(--sms-light-blue) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
}

.container:has(.revenue-tabs) .revenue-snapshot-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.container:has(.revenue-tabs) .revenue-mini {
    min-height: 88px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(201, 232, 255, .34) !important;
    background: linear-gradient(180deg, rgba(126, 200, 255, .25), rgba(38, 149, 193, .20)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.container:has(.revenue-tabs) .revenue-mini span {
    display: block !important;
    color: rgba(255,255,255,.82) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

.container:has(.revenue-tabs) .revenue-mini strong {
    display: block !important;
    color: var(--sms-white) !important;
    font-size: clamp(20px, 1.6vw, 27px) !important;
    line-height: 1.05 !important;
    margin: 5px 0 3px !important;
    font-weight: 950 !important;
}

.container:has(.revenue-tabs) .revenue-mini em,
.container:has(.revenue-tabs) .revenue-mini .source-lines,
.container:has(.revenue-tabs) .revenue-mini .source-lines b {
    color: var(--sms-white) !important;
    font-style: normal !important;
    opacity: .96 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.container:has(.revenue-tabs) .revenue-snapshot-footer {
    color: rgba(255,255,255,.88) !important;
    text-align: right !important;
    font-size: 11px !important;
    margin-top: 10px !important;
}

.container:has(.revenue-tabs) .revenue-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 16px 0 22px !important;
}

.container:has(.revenue-tabs) .revenue-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126, 200, 255, .44) !important;
    background: #ffffff !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 7px 15px rgba(8, 41, 68, .16) !important;
}

.container:has(.revenue-tabs) .revenue-tab.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    border-color: rgba(126, 200, 255, .60) !important;
}

.container:has(.revenue-tabs) .revenue-section {
    display: none !important;
}

.container:has(.revenue-tabs) .revenue-section.active {
    display: block !important;
}

.container:has(.revenue-tabs) .revenue-card,
.container:has(.revenue-tabs) .chart-card {
    position: relative !important;
    background: linear-gradient(180deg, rgba(29, 70, 104, .94), rgba(16, 46, 73, .96)) !important;
    color: var(--sms-white) !important;
    border: 1px solid var(--sms-dark-border-strong) !important;
    border-radius: 14px !important;
    box-shadow: var(--sms-card-shadow) !important;
}

.container:has(.revenue-tabs) .revenue-card {
    padding: 18px !important;
    margin-bottom: 18px !important;
}

.container:has(.revenue-tabs) .chart-card {
    padding: 16px !important;
}

.container:has(.revenue-tabs) .revenue-card h2,
.container:has(.revenue-tabs) .chart-card h3 {
    color: var(--sms-white) !important;
    margin-top: 0 !important;
}

.container:has(.revenue-tabs) .revenue-note {
    background: rgba(255, 245, 225, .94) !important;
    border: 1px solid #f0d8a8 !important;
    border-left: 5px solid #f0a737 !important;
    color: #33210a !important;
    padding: 11px 13px !important;
    border-radius: 10px !important;
    margin: 10px 0 14px !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
}

.container:has(.revenue-tabs) .revenue-note *,
.container:has(.revenue-tabs) .revenue-note .source-meta {
    color: #33210a !important;
}

.container:has(.revenue-tabs) .revenue-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
    gap: 12px !important;
    margin: 14px 0 !important;
}

.container:has(.revenue-tabs) .revenue-kpi {
    min-width: 0 !important;
    min-height: 96px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(126, 200, 255, .44) !important;
    background: linear-gradient(180deg, rgba(29, 70, 104, .96), rgba(16, 46, 73, .94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    border-top: 4px solid var(--sms-line-blue) !important;
}

.container:has(.revenue-tabs) .revenue-kpi.green { border-top-color: #38B247 !important; }
.container:has(.revenue-tabs) .revenue-kpi.orange { border-top-color: #f59e0b !important; }
.container:has(.revenue-tabs) .revenue-kpi.purple { border-top-color: #8b5cf6 !important; }
.container:has(.revenue-tabs) .revenue-kpi.red { border-top-color: #ef4444 !important; }

.container:has(.revenue-tabs) .revenue-kpi .label,
.container:has(.revenue-tabs) .revenue-kpi .summary-label,
.container:has(.revenue-tabs) .revenue-kpi .metric-label {
    color: var(--sms-light-blue) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin: 0 0 6px !important;
}

.container:has(.revenue-tabs) .revenue-kpi .value {
    color: var(--sms-white) !important;
    font-size: clamp(22px, 1.65vw, 30px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
}

.container:has(.revenue-tabs) .revenue-kpi .sub,
.container:has(.revenue-tabs) .source-meta,
.container:has(.revenue-tabs) .sales-help,
.container:has(.revenue-tabs) .small {
    color: var(--sms-soft-white) !important;
}

.container:has(.revenue-tabs) .chart-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

.container:has(.revenue-tabs) .bar-row {
    display: grid !important;
    grid-template-columns: minmax(165px, 300px) minmax(160px, 1fr) minmax(84px, auto) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 10px 0 !important;
    color: var(--sms-white) !important;
    font-size: 13px !important;
}

.container:has(.revenue-tabs) .bar-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.container:has(.revenue-tabs) .bar-label strong,
.container:has(.revenue-tabs) .nowrap strong {
    color: var(--sms-white) !important;
}

.container:has(.revenue-tabs) .bar-track {
    height: 14px !important;
    background: rgba(201, 232, 255, .22) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.container:has(.revenue-tabs) .bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-line-blue)) !important;
    border-radius: 999px !important;
}

.container:has(.revenue-tabs) .source-sales-rep .bar-fill { background: linear-gradient(90deg,#0f766e,#14b8a6) !important; }
.container:has(.revenue-tabs) .source-direct .bar-fill { background: linear-gradient(90deg,#0B5E8E,#2695C1) !important; }
.container:has(.revenue-tabs) .source-quote .bar-fill { background: linear-gradient(90deg,#8b5cf6,#a78bfa) !important; }
.container:has(.revenue-tabs) .source-other .bar-fill { background: linear-gradient(90deg,#64748b,#94a3b8) !important; }

.container:has(.revenue-tabs) .coming-soon,
.container:has(.revenue-tabs) .revenue-status {
    background: rgba(16, 46, 73, .92) !important;
    border: 1px dashed rgba(126, 200, 255, .44) !important;
    color: var(--sms-white) !important;
    border-radius: 14px !important;
    padding: 16px !important;
}

.container:has(.revenue-tabs) .revenue-status.active {
    display: block !important;
}

.container:has(.revenue-tabs) .revenue-progress-track {
    height: 12px !important;
    background: rgba(201, 232, 255, .22) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.container:has(.revenue-tabs) .revenue-progress-fill {
    height: 100% !important;
    width: 0%;
    background: linear-gradient(135deg,var(--brand-primary),var(--brand-accent)) !important;
    border-radius: 999px !important;
    transition: width .25s ease !important;
}

.container:has(.revenue-tabs) .sales-form-grid {
    display: grid !important;
    grid-template-columns: minmax(300px, 1.35fr) minmax(230px, .8fr) minmax(230px, .8fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}

.container:has(.revenue-tabs) .sales-form-grid input,
.container:has(.revenue-tabs) .sales-form-grid select,
.container:has(.revenue-tabs) .top-products-control select {
    margin-bottom: 0 !important;
}

.container:has(.revenue-tabs) .top-products-control {
    display: flex !important;
    gap: 10px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
    margin: 12px 0 !important;
}

.container:has(.revenue-tabs) .top-products-control select {
    width: 180px !important;
}

.container:has(.revenue-tabs) .sales-table-wrap {
    overflow-x: auto !important;
}

.container:has(.revenue-tabs) .sales-orders-table,
.container:has(.revenue-tabs) .sales-breakdown-table,
.container:has(.revenue-tabs) .revenue-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 16px !important;
    background: rgba(16, 46, 73, .72) !important;
    border: 1px solid rgba(126, 200, 255, .28) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.container:has(.revenue-tabs) .sales-orders-table th,
.container:has(.revenue-tabs) .sales-breakdown-table th,
.container:has(.revenue-tabs) .revenue-table th {
    background: #0B5E8E !important;
    color: var(--sms-white) !important;
    text-align: left !important;
    padding: 10px !important;
    position: static !important;
}

.container:has(.revenue-tabs) .sales-orders-table td,
.container:has(.revenue-tabs) .sales-breakdown-table td,
.container:has(.revenue-tabs) .revenue-table td {
    border-bottom: 1px solid rgba(126, 200, 255, .18) !important;
    color: var(--sms-white) !important;
    padding: 10px !important;
    vertical-align: top !important;
}

.container:has(.revenue-tabs) .quote-opportunities-table {
    table-layout: fixed !important;
}

.container:has(.revenue-tabs) .lookup-result-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.container:has(.revenue-tabs) .custom-date-grid {
    display: none !important;
    margin-top: 10px !important;
}

.container:has(.revenue-tabs) .custom-date-grid.show {
    display: grid !important;
}

.container:has(.revenue-tabs) .result {
    background: rgba(16, 46, 73, .92) !important;
    border: 1px solid rgba(126, 200, 255, .42) !important;
    border-left: 5px solid var(--sms-line-blue) !important;
    color: var(--sms-white) !important;
    border-radius: 12px !important;
}

.container:has(.revenue-tabs) .result.warning {
    background: rgba(255, 250, 240, .94) !important;
    border-color: #f0d8a8 !important;
    border-left-color: #f0a737 !important;
    color: #33210a !important;
}

.container:has(.revenue-tabs) .result.error {
    background: rgba(255, 245, 245, .96) !important;
    border-color: #f0b8b8 !important;
    border-left-color: #b00020 !important;
    color: #3b0a0a !important;
}

@media (max-width: 1100px) {
    .container:has(.revenue-tabs) .revenue-hero,
    .container:has(.revenue-tabs) .chart-grid,
    .container:has(.revenue-tabs) .sales-form-grid {
        grid-template-columns: 1fr !important;
    }
    .container:has(.revenue-tabs) .revenue-snapshot-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   REVENUE TAB - dark Command Center styling
   ========================================================= */
.container:has(.revenue-hero),
.container:has(.revenue-hero) * {
    font-family: var(--sms-app-font-family) !important;
}

.container:has(.revenue-hero) .revenue-hero {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(440px, 620px) !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin: 0 0 18px !important;
}

.container:has(.revenue-hero) .revenue-hero h1 {
    margin: 0 0 8px !important;
    color: var(--sms-white) !important;
}

.container:has(.revenue-hero) .revenue-subtitle {
    max-width: 780px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.38 !important;
    color: var(--sms-soft-white) !important;
}

.container:has(.revenue-hero) .revenue-snapshot-panel {
    position: relative !important;
    overflow: hidden !important;
    min-height: 165px !important;
    padding: 18px !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3) 0%, #125C92 100%) !important;
    border: 1px solid var(--sms-dark-border-strong) !important;
    box-shadow: var(--sms-card-shadow) !important;
}

.container:has(.revenue-hero) .revenue-snapshot-panel::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
}

.container:has(.revenue-hero) .revenue-snapshot-heading {
    margin: 0 0 10px !important;
    color: var(--sms-light-blue) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.container:has(.revenue-hero) .revenue-snapshot-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.container:has(.revenue-hero) .revenue-mini {
    min-height: 86px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    color: var(--sms-white) !important;
    background: linear-gradient(145deg, rgba(126, 200, 255, .24), rgba(38, 149, 193, .18)) !important;
    border: 1px solid rgba(218, 239, 255, .34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.container:has(.revenue-hero) .revenue-mini span,
.container:has(.revenue-hero) .revenue-mini .source-lines,
.container:has(.revenue-hero) .revenue-mini em {
    color: var(--sms-white) !important;
}

.container:has(.revenue-hero) .revenue-mini span {
    display: block !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    opacity: .92 !important;
}

.container:has(.revenue-hero) .revenue-mini strong {
    display: block !important;
    margin: 5px 0 2px !important;
    color: var(--sms-white) !important;
    font-size: clamp(20px, 1.6vw, 27px) !important;
    line-height: 1.02 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

.container:has(.revenue-hero) .revenue-mini em,
.container:has(.revenue-hero) .revenue-mini .source-lines {
    display: block !important;
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
    opacity: .95 !important;
}

.container:has(.revenue-hero) .revenue-snapshot-footer {
    margin-top: 10px !important;
    color: rgba(255,255,255,.88) !important;
    text-align: right !important;
    font-size: 11px !important;
}

.container:has(.revenue-hero) .revenue-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 18px 0 22px !important;
}

.container:has(.revenue-hero) .revenue-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1px solid var(--sms-dark-border) !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--sms-light-blue) !important;
    text-decoration: none !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 12px rgba(15,23,42,.06) !important;
}

.container:has(.revenue-hero) .revenue-tab.active {
    background: linear-gradient(135deg,var(--brand-primary),var(--brand-accent)) !important;
    color: var(--sms-white) !important;
    border-color: transparent !important;
}

.container:has(.revenue-hero) .revenue-tab:hover {
    color: var(--sms-white) !important;
    background: rgba(255,255,255,.14) !important;
}

.container:has(.revenue-hero) .revenue-section {
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}

.container:has(.revenue-hero) .revenue-section::after {
    display: none !important;
}

.container:has(.revenue-hero) .revenue-section.active {
    display: block !important;
}

.container:has(.revenue-hero) .revenue-card,
.container:has(.revenue-hero) .chart-card,
.container:has(.revenue-hero) .coming-soon,
.container:has(.revenue-hero) .revenue-status {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}

.container:has(.revenue-hero) .revenue-card {
    padding: 16px !important;
    margin-bottom: 18px !important;
}

.container:has(.revenue-hero) .chart-card,
.container:has(.revenue-hero) .coming-soon {
    padding: 14px !important;
}

.container:has(.revenue-hero) .revenue-card::after,
.container:has(.revenue-hero) .chart-card::after,
.container:has(.revenue-hero) .coming-soon::after,
.container:has(.revenue-hero) .revenue-status::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
    pointer-events: none;
}

.container:has(.revenue-hero) .revenue-card h2,
.container:has(.revenue-hero) .chart-card h3 {
    margin-top: 0 !important;
    color: var(--sms-white) !important;
}

.container:has(.revenue-hero) .revenue-note {
    margin: 10px 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: var(--sms-white) !important;
    background: rgba(255, 250, 240, .08) !important;
    border: 1px solid rgba(240, 216, 168, .60) !important;
    border-left: 5px solid #d69a2d !important;
}

.container:has(.revenue-hero) .revenue-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
    gap: 12px !important;
    margin: 14px 0 !important;
}

.container:has(.revenue-hero) .revenue-kpi {
    position: relative !important;
    overflow: hidden !important;
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(29,70,104,.96), rgba(16,46,73,.98)) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-top: 4px solid var(--brand-accent) !important;
    color: var(--sms-white) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.container:has(.revenue-hero) .revenue-kpi::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue));
}

.container:has(.revenue-hero) .revenue-kpi.green { border-top-color: #16a34a !important; }
.container:has(.revenue-hero) .revenue-kpi.orange { border-top-color: #f59e0b !important; }
.container:has(.revenue-hero) .revenue-kpi.purple { border-top-color: #8b5cf6 !important; }
.container:has(.revenue-hero) .revenue-kpi.red { border-top-color: #ef4444 !important; }

.container:has(.revenue-hero) .revenue-kpi .label,
.container:has(.revenue-hero) .quote-summary-label {
    color: var(--sms-light-blue) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

.container:has(.revenue-hero) .revenue-kpi .value,
.container:has(.revenue-hero) .quote-summary-value {
    color: var(--sms-white) !important;
    font-size: clamp(20px, 1.6vw, 28px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    margin-top: 4px !important;
    letter-spacing: -.02em !important;
    overflow-wrap: anywhere !important;
}

.container:has(.revenue-hero) .revenue-kpi .sub,
.container:has(.revenue-hero) .source-meta,
.container:has(.revenue-hero) .sales-help,
.container:has(.revenue-hero) .coming-soon,
.container:has(.revenue-hero) .quote-summary-sub {
    color: var(--sms-soft-white) !important;
}

.container:has(.revenue-hero) .chart-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important;
    gap: 16px !important;
    margin-top: 14px !important;
}

.container:has(.revenue-hero) .bar-row {
    display: grid !important;
    grid-template-columns: minmax(150px, 300px) minmax(160px, 1fr) minmax(78px, auto) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 10px 0 !important;
    font-size: 13px !important;
}

.container:has(.revenue-hero) .bar-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--sms-white) !important;
}

.container:has(.revenue-hero) .bar-track,
.container:has(.revenue-hero) .revenue-progress-track {
    height: 14px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(226,232,240,.28) !important;
}

.container:has(.revenue-hero) .bar-fill,
.container:has(.revenue-hero) .revenue-progress-fill {
    height: 100% !important;
    width: 0%;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-line-blue)) !important;
}

.container:has(.revenue-hero) .source-sales-rep .bar-fill { background: linear-gradient(90deg,#0f766e,#14b8a6) !important; }
.container:has(.revenue-hero) .source-direct .bar-fill { background: linear-gradient(90deg,var(--brand-primary),var(--brand-accent)) !important; }
.container:has(.revenue-hero) .source-quote .bar-fill { background: linear-gradient(90deg,#8b5cf6,#a78bfa) !important; }
.container:has(.revenue-hero) .source-other .bar-fill { background: linear-gradient(90deg,#64748b,#94a3b8) !important; }

.container:has(.revenue-hero) .sales-form-grid {
    display: grid !important;
    grid-template-columns: minmax(300px, 1.35fr) minmax(230px, .8fr) minmax(230px, .8fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}

.container:has(.revenue-hero) .sales-form-grid input,
.container:has(.revenue-hero) .sales-form-grid select,
.container:has(.revenue-hero) .top-products-control select {
    margin-bottom: 0 !important;
}

.container:has(.revenue-hero) .sales-button-cell button,
.container:has(.revenue-hero) #refreshTopProductsButton,
.container:has(.revenue-hero) #refreshFunnelButton,
.container:has(.revenue-hero) #refreshQuotesPipelineButton {
    min-height: 46px !important;
    white-space: nowrap !important;
}

.container:has(.revenue-hero) .custom-date-grid {
    display: none !important;
    margin-top: 10px !important;
}

.container:has(.revenue-hero) .custom-date-grid.show {
    display: grid !important;
}

.container:has(.revenue-hero) .lookup-result-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.container:has(.revenue-hero) .top-products-control {
    display: flex !important;
    gap: 10px !important;
    align-items: end !important;
    flex-wrap: wrap !important;
    margin: 12px 0 !important;
}

.container:has(.revenue-hero) .top-products-control select {
    width: 180px !important;
}

.container:has(.revenue-hero) .revenue-status {
    display: none !important;
    margin: 14px 0 !important;
    padding: 12px !important;
}

.container:has(.revenue-hero) .revenue-status.active {
    display: block !important;
}

.container:has(.revenue-hero) .sales-table-wrap {
    overflow-x: auto !important;
}

.container:has(.revenue-hero) .sales-orders-table,
.container:has(.revenue-hero) .sales-breakdown-table,
.container:has(.revenue-hero) .revenue-table {
    width: 100% !important;
    margin-top: 16px !important;
    border-collapse: collapse !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(29,70,104,.76) !important;
}

.container:has(.revenue-hero) .sales-orders-table th,
.container:has(.revenue-hero) .sales-breakdown-table th,
.container:has(.revenue-hero) .revenue-table th {
    position: static !important;
    padding: 10px !important;
    color: var(--sms-white) !important;
    background: linear-gradient(180deg, #0D5E88, #0A4B70) !important;
    border-bottom: 1px solid rgba(126,200,255,.26) !important;
}

.container:has(.revenue-hero) .sales-orders-table td,
.container:has(.revenue-hero) .sales-breakdown-table td,
.container:has(.revenue-hero) .revenue-table td {
    padding: 10px !important;
    vertical-align: top !important;
    color: var(--sms-white) !important;
    border-bottom: 1px solid rgba(126,200,255,.18) !important;
}

.container:has(.revenue-hero) .quote-opportunities-table {
    table-layout: fixed !important;
}

.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(1) { width:24% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(2) { width:20% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(3) { width:13% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(4) { width:15% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(5) { width:12% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(6) { width:16% !important; }

.container:has(.revenue-hero) .quote-opportunities-table td {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.container:has(.revenue-hero) .nowrap {
    white-space: nowrap !important;
}

@media (max-width: 1100px) {
    .container:has(.revenue-hero) .revenue-hero,
    .container:has(.revenue-hero) .chart-grid,
    .container:has(.revenue-hero) .sales-form-grid {
        grid-template-columns: 1fr !important;
    }
    .container:has(.revenue-hero) .revenue-snapshot-grid {
        grid-template-columns: 1fr !important;
    }
}


/* --------------------------------------------------------------------------
   Revenue polish pass - snapshot sizing, lookup spacing, and table widths
   -------------------------------------------------------------------------- */
.container:has(.revenue-hero) .revenue-hero {
    grid-template-columns: minmax(320px, .78fr) minmax(650px, 1.22fr) !important;
}

.container:has(.revenue-hero) .revenue-snapshot-panel {
    min-width: 650px !important;
}

.container:has(.revenue-hero) .revenue-snapshot-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.22fr) minmax(0, 1.06fr) !important;
}

.container:has(.revenue-hero) .revenue-mini strong {
    font-size: clamp(21px, 1.42vw, 27px) !important;
    white-space: nowrap !important;
}

.container:has(.revenue-hero) .revenue-mini .source-lines {
    font-size: 11.5px !important;
    line-height: 1.34 !important;
}

.container:has(.revenue-hero) .sales-help {
    margin: 12px 0 14px !important;
    line-height: 1.42 !important;
}

.container:has(.revenue-hero) #revenue-top-products .revenue-table {
    table-layout: fixed !important;
}

.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(1),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(1) { width: 18% !important; }
.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(2),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(2) { width: 35% !important; }
.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(3),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(3) { width: 11% !important; }
.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(4),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(4) { width: 5% !important; }
.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(5),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(5) { width: 6% !important; }
.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(6),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(6) { width: 9% !important; }
.container:has(.revenue-hero) #revenue-top-products .revenue-table th:nth-child(7),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(7) { width: 16% !important; }

.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(2),
.container:has(.revenue-hero) #revenue-top-products .revenue-table td:nth-child(7) {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(1) { width: 23% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(2) { width: 19% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(3) { width: 12% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(4) { width: 15% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(5) { width: 14% !important; }
.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(6) { width: 17% !important; }

.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(5),
.container:has(.revenue-hero) .quote-opportunities-table td:nth-child(5) {
    padding-right: 20px !important;
    white-space: nowrap !important;
}

.container:has(.revenue-hero) .quote-opportunities-table th:nth-child(6),
.container:has(.revenue-hero) .quote-opportunities-table td:nth-child(6) {
    padding-left: 18px !important;
}

@media (max-width: 1300px) {
    .container:has(.revenue-hero) .revenue-hero {
        grid-template-columns: 1fr !important;
    }
    .container:has(.revenue-hero) .revenue-snapshot-panel {
        min-width: 0 !important;
    }
}

/* =========================================================
   B2B Quotes Page
   Keep all B2B Quotes visual styling in shared CSS.
   ========================================================= */
.quotes-page,
.quotes-page * {
    font-family: var(--sms-app-font-family, "proxima-nova", "Inter", "Segoe UI", Arial, sans-serif) !important;
}

.quotes-page .quotes-top {
    display: block;
    margin-bottom: 18px;
}

.quotes-page .quotes-top-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 16px;
}

.quotes-page .quotes-top-title h1 {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.1;
}

.quotes-page .snapshot-range-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 210px;
}

.quotes-page .snapshot-range-form label {
    display: block;
    margin-bottom: 8px;
    color: #bfe6ff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.quotes-page .snapshot-range-form select {
    width: 205px;
    min-width: 205px;
    height: 46px;
    margin: 0;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(147, 197, 253, .65);
    background: #f8fbff;
    color: #0f172a;
    font-weight: 800;
}

.quotes-page .quote-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.quotes-page .quote-summary-card,
.quotes-page .quote-status-mini {
    position: relative;
    min-height: 92px;
    padding: 14px 16px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(20, 61, 91, .92) !important;
    border: 1px solid rgba(96, 165, 250, .46) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.10);
}

.quotes-page .quote-summary-card::after,
.quotes-page .quote-status-mini::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    opacity: .95;
}

.quotes-page .quote-summary-card.warning::after,
.quotes-page .quote-status-mini.warning-card::after {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.quotes-page .quote-summary-card.success-card::after,
.quotes-page .quote-status-mini.success-card::after {
    background: linear-gradient(90deg, #22c55e, #86efac);
}

.quotes-page .quote-summary-card.highlight::after,
.quotes-page .quote-status-mini.last-month-mini::after {
    background: linear-gradient(90deg, #60a5fa, #38bdf8);
}

.quotes-page .quote-summary-label,
.quotes-page .quote-status-mini span {
    display: block;
    color: #7dccff !important;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.quotes-page .quote-summary-value,
.quotes-page .quote-status-mini b {
    display: block;
    margin-top: 6px;
    color: #ffffff !important;
    font-size: clamp(21px, 1.75vw, 28px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.02em;
}

.quotes-page .quote-summary-sub,
.quotes-page .quote-muted {
    color: rgba(255,255,255,.84) !important;
    font-size: 12px;
    line-height: 1.35;
}

.quotes-page .quote-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.quotes-page .quote-status-mini {
    min-height: 78px;
    padding: 12px 14px;
}

.quotes-page .result,
.quotes-page .quote-pagination {
    position: relative;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(20, 61, 91, .92) !important;
    border: 1px solid rgba(96, 165, 250, .46) !important;
    color: #ffffff !important;
    overflow: hidden;
}

.quotes-page .result::after,
.quotes-page .quote-pagination::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

.quotes-page .result.success::after {
    background: linear-gradient(90deg, #22c55e, #86efac);
}

.quotes-page .result.warning::after {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.quotes-page .result.error::after {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.quotes-page .quote-filters {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 190px 150px auto;
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.quotes-page .quote-filters label {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 8px;
}

.quotes-page .quote-filters input,
.quotes-page .quote-filters select {
    height: 50px;
    margin: 0;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(147, 197, 253, .65);
    background: #f8fbff;
    color: #0f172a;
    font-size: 15px;
}

.quotes-page .quote-filters button {
    height: 50px;
    white-space: nowrap;
}

.quotes-page .table-wrap {
    width: 100%;
    overflow-x: hidden;
    margin-top: 18px;
}

.quotes-page .quote-table,
.quotes-page .quote-products-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    overflow: hidden;
    border-radius: 14px;
}

.quotes-page .quote-table th,
.quotes-page .quote-products-table th {
    position: static !important;
    padding: 12px 10px;
    background: linear-gradient(180deg, #0b638e, #064b76) !important;
    color: #ffffff;
    border-right: 1px solid rgba(4, 31, 52, .8);
    font-size: 13px;
    text-align: left;
}

.quotes-page .quote-table td,
.quotes-page .quote-products-table td {
    padding: 12px 10px;
    background: rgba(26, 64, 93, .95);
    color: #ffffff;
    border-bottom: 1px solid rgba(125, 211, 252, .16);
    border-right: 1px solid rgba(4, 31, 52, .48);
    vertical-align: top;
    overflow-wrap: anywhere;
}

.quotes-page .quote-table th:nth-child(1),
.quotes-page .quote-table td:nth-child(1) { width: 17%; }
.quotes-page .quote-table th:nth-child(2),
.quotes-page .quote-table td:nth-child(2) { width: 15%; }
.quotes-page .quote-table th:nth-child(3),
.quotes-page .quote-table td:nth-child(3) { width: 12%; }
.quotes-page .quote-table th:nth-child(4),
.quotes-page .quote-table td:nth-child(4) { width: 11%; }
.quotes-page .quote-table th:nth-child(5),
.quotes-page .quote-table td:nth-child(5) { width: 12%; }
.quotes-page .quote-table th:nth-child(6),
.quotes-page .quote-table td:nth-child(6) { width: 10%; }
.quotes-page .quote-table th:nth-child(7),
.quotes-page .quote-table td:nth-child(7) { width: 8%; }
.quotes-page .quote-table th:nth-child(8),
.quotes-page .quote-table td:nth-child(8) { width: 12%; }
.quotes-page .quote-table th:nth-child(9),
.quotes-page .quote-table td:nth-child(9) { width: 6%; text-align: center; }

.quotes-page .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 10px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.quotes-page .status-new { background: #ef4444; }
.quotes-page .status-opened { background: #2f86c9; }
.quotes-page .status-ordered { background: #16a34a; }
.quotes-page .status-cancelled { background: #64748b; }
.quotes-page .status-draft { background: #f59e0b; }
.quotes-page .status-unknown { background: #475569; }

.quotes-page .response-time-cell strong,
.quotes-page .response-ok,
.quotes-page .response-late,
.quotes-page .response-warning,
.quotes-page .response-estimated,
.quotes-page .response-missing {
    display: block;
    font-size: 14px;
    font-weight: 950 !important;
}

.quotes-page .response-ok { color: #6ee7a5 !important; }
.quotes-page .response-late,
.quotes-page .response-warning,
.quotes-page .response-missing { color: #ff6b6b !important; }
.quotes-page .response-estimated { color: #fbbf24 !important; }

.quotes-page .likely-ordered { color: #6ee7a5 !important; font-weight: 950; }
.quotes-page .possible-ordered { color: #fbbf24 !important; font-weight: 950; }
.quotes-page .not-ordered { color: #e2e8f0 !important; font-weight: 950; }

.quotes-page .quote-action-link {
    color: #6bc7ff !important;
    font-weight: 950;
    text-decoration: none;
}

.quotes-page .quote-action-link:hover {
    text-decoration: underline;
}

.quotes-page .quote-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    min-height: 62px;
}

.quotes-page .quote-pagination-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.quotes-page .quote-pagination .button-link {
    min-width: 110px;
    text-align: center;
    color: #ffffff !important;
}

.quotes-page .quote-pagination .disabled {
    opacity: .42;
    pointer-events: none;
}

.quotes-page .quote-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 20, 34, .72);
    backdrop-filter: blur(2px);
}

.quotes-page .quote-loading-box {
    width: min(360px, 92vw);
    background: rgba(20, 61, 91, .96);
    border: 1px solid rgba(96, 165, 250, .46);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
    text-align: center;
    color: #ffffff;
}

.quotes-page .quote-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 999px;
    border: 5px solid rgba(255,255,255,.2);
    border-top-color: #38bdf8;
    animation: quoteSpin .8s linear infinite;
}

.quotes-page .quote-loading-title {
    font-weight: 950;
    color: #ffffff;
    font-size: 18px;
}

.quotes-page .quote-loading-sub {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.35;
}

.quotes-page .quote-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.quotes-page .quote-detail-card {
    background: rgba(20, 61, 91, .92);
    border: 1px solid rgba(96, 165, 250, .46);
    border-radius: 14px;
    padding: 16px;
    color: #ffffff;
}

.quotes-page .quote-kv {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 12px;
    margin-top: 8px;
}

.quotes-page .quote-kv div:nth-child(odd) {
    color: #7dccff;
    font-weight: 900;
}

.quotes-page pre.raw-json {
    white-space: pre-wrap;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    padding: 14px;
    border-radius: 10px;
    max-height: 500px;
}

@keyframes quoteSpin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
    .quotes-page .quotes-top-title,
    .quotes-page .quote-pagination {
        display: block;
    }
    .quotes-page .snapshot-range-form,
    .quotes-page .quote-pagination-actions {
        margin-top: 12px;
    }
    .quotes-page .quote-summary-grid,
    .quotes-page .quote-status-grid,
    .quotes-page .quote-filters,
    .quotes-page .quote-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Catalog Editor cleanup
   ========================================================= */
.catalog-card {
    margin: 22px 0 22px;
    padding: 20px;
    color: #ffffff;
    background: rgba(18, 61, 93, 0.92);
    border: 1px solid rgba(96, 175, 226, 0.42);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.14);
    position: relative;
    overflow: hidden;
}
.catalog-card::after,
.catalog-panel::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 4px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, rgba(38,149,193,.95), rgba(96,195,255,.7));
}
.catalog-card h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.15;
}
.catalog-note {
    margin: 12px 0 16px;
    padding: 12px 14px;
    color: #ffffff;
    background: rgba(255, 175, 55, 0.08);
    border: 1px solid rgba(245, 180, 72, 0.78);
    border-left: 5px solid #f5b448;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.35;
}
.catalog-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 0;
}
.catalog-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(96, 175, 226, 0.55);
    background: rgba(18, 61, 93, 0.9);
    color: #7cc7ff !important;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.catalog-tab:hover {
    transform: translateY(-1px);
    color: #ffffff !important;
}
.catalog-tab.active {
    color: #ffffff !important;
    border-color: rgba(110, 205, 255, 0.9);
    background: linear-gradient(135deg, #064f7c, #1f98ca);
    box-shadow: 0 12px 28px rgba(5, 78, 155, 0.24);
}
.catalog-panel {
    margin-top: 18px;
    color: #ffffff;
    background: rgba(18, 61, 93, 0.92);
    border: 1px solid rgba(96, 175, 226, 0.42);
    border-radius: 18px;
    overflow: visible;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.14);
}
.catalog-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(96, 175, 226, 0.26);
    background: rgba(7, 42, 70, 0.45);
    border-radius: 18px 18px 0 0;
}
.catalog-panel-title {
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
}
.catalog-panel-header a {
    color: #7cc7ff !important;
    font-weight: 800;
}
.catalog-panel-body {
    padding: 22px 24px 30px;
    color: #ffffff;
}
.catalog-panel-body > h1:first-child {
    display: none;
}
.catalog-panel-body p,
.catalog-panel-body li,
.catalog-panel-body .small,
.catalog-panel-body .source-meta {
    color: rgba(255,255,255,.88);
}
.catalog-panel-body h2,
.catalog-panel-body h3 {
    color: #ffffff;
}
.catalog-panel-body ul {
    margin-top: 8px;
    margin-bottom: 18px;
}
.catalog-panel-body .tabs,
.catalog-panel-body .store-switcher,
.catalog-panel-body .top-nav,
.catalog-panel-body nav {
    display: none !important;
}
.catalog-panel-body .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.catalog-panel-body .lookup-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-top: 14px;
}
.catalog-panel-body .lookup-button-cell {
    padding-top: 0;
}
.catalog-panel-body label {
    color: #ffffff;
    font-weight: 900;
}
.catalog-panel-body input,
.catalog-panel-body select,
.catalog-panel-body textarea {
    max-width: 100%;
}
.catalog-panel-body button,
.catalog-panel-body .button-link {
    color: #ffffff !important;
}
.catalog-panel-body .button-secondary {
    color: #ffffff !important;
    background: rgba(71, 95, 120, 0.95) !important;
}
.catalog-panel-body .result {
    background: rgba(18, 61, 93, 0.9);
    border: 1px solid rgba(96, 175, 226, 0.42);
    border-left: 5px solid #35b8ee;
    color: #ffffff;
    border-radius: 12px;
}
.catalog-panel-body .toolbar {
    background: rgba(7, 42, 70, 0.62);
    border: 1px solid rgba(96, 175, 226, 0.32);
    border-bottom: 0;
}
.catalog-panel-body .wysiwyg,
.catalog-panel-body .bc-wysiwyg-shell {
    color: #111827;
}
.catalog-panel-body .wysiwyg {
    background: #ffffff;
    min-height: 220px;
}
.catalog-panel-body .grid-2,
.catalog-panel-body .grid-3,
.catalog-panel-body .grid-4 {
    gap: 14px;
}
@media (max-width: 900px) {
    .catalog-panel-header { display: block; }
    .catalog-panel-header a { display: inline-block; margin-top: 8px; }
    .catalog-panel-body { padding: 18px; }
    .catalog-panel-body .lookup-grid { grid-template-columns: 1fr; }
}


/* Catalog Editor lookup alignment + embedded editor polish */
.catalog-panel-body .lookup-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}
.catalog-panel-body .lookup-button-cell {
    align-self: end !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.catalog-panel-body .lookup-button-cell button {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.catalog-panel-body form:first-of-type input[type="text"],
.catalog-panel-body form:first-of-type input:not([type]),
.catalog-panel-body form:first-of-type input[name="query"],
.catalog-panel-body form:first-of-type input[name="category_search"] {
    margin-bottom: 0 !important;
}
.catalog-panel-body .bc-wysiwyg-shell {
    margin-top: 10px !important;
}
.catalog-panel-body .toolbar {
    margin-top: 10px !important;
}
@media (max-width: 900px) {
    .catalog-panel-body .lookup-grid {
        grid-template-columns: 1fr !important;
    }
    .catalog-panel-body .lookup-button-cell button {
        width: 100% !important;
    }
}


/* Catalog Editor tightening - lookup first, guidelines after lookup */
.catalog-card {
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
}
.catalog-card .catalog-note {
    display: none !important;
}
.catalog-tabs {
    margin: 12px 0 0 !important;
}
.catalog-panel-header {
    padding: 14px 18px !important;
}
.catalog-panel-header a {
    display: none !important;
}
.catalog-panel-body {
    padding: 22px 24px 28px !important;
}
.catalog-panel-body .catalog-lookup-form {
    margin: 0 0 16px !important;
}
.catalog-panel-body .lookup-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}
.catalog-panel-body .lookup-button-cell {
    align-self: end !important;
    padding: 0 !important;
    margin: 0 !important;
}
.catalog-panel-body .lookup-button-cell button {
    height: 46px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.catalog-panel-body .editor-guidelines {
    margin: 12px 0 22px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(126, 199, 255, .35) !important;
    border-radius: 14px !important;
    background: rgba(21, 63, 93, .46) !important;
    color: rgba(255,255,255,.86) !important;
}
.catalog-panel-body .editor-guidelines p {
    margin: 0 0 8px !important;
}
.catalog-panel-body .editor-guidelines ul {
    margin: 8px 0 0 20px !important;
}
.catalog-panel-body .editor-guidelines strong {
    color: #fff !important;
}
@media (max-width: 900px) {
    .catalog-panel-body .lookup-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Catalog Editor: align lookup buttons with the input itself, not the helper text below it. */
.catalog-panel-body .catalog-lookup-form .lookup-button-cell,
.catalog-panel-body form:first-of-type .lookup-button-cell {
    align-self: start !important;
    padding-top: 28px !important;
    margin: 0 !important;
}
.catalog-panel-body .catalog-lookup-form .lookup-button-cell button,
.catalog-panel-body form:first-of-type .lookup-button-cell button {
    height: 46px !important;
    min-height: 46px !important;
    margin-top: 0 !important;
}

/* Catalog Editor: let inline WYSIWYG colors render in visual mode.
   The shared editable-field rule sets -webkit-text-fill-color on all
   contenteditable areas, which makes inline styles like color:#054E9B
   look black in Chrome even though the HTML is correct. */
.container .bc-wysiwyg-shell .bc-editor-body,
.container .bc-wysiwyg-shell .bc-editor-body * {
    -webkit-text-fill-color: currentColor !important;
}
.container .bc-wysiwyg-shell .bc-editor-body {
    color: #111827 !important;
}

/* Catalog Editor: align lookup action buttons with the input control. */
.catalog-panel-body .catalog-lookup-form .lookup-button-cell,
.catalog-panel-body form:first-of-type .lookup-button-cell {
    align-self: start !important;
    padding-top: 0 !important;
    margin: 0 !important;
}
.catalog-panel-body .catalog-lookup-form .lookup-button-cell button,
.catalog-panel-body form:first-of-type .lookup-button-cell button {
    height: 46px !important;
}

/* ---------------------------------------------------------------------------
   Catalog Editor final root fixes
   ---------------------------------------------------------------------------
   The lookup buttons should align with the input control, not the top of the
   grid cell. The WYSIWYG visual editor must be a light editing canvas and must
   respect inline HTML colors such as color:#054E9B. These rules deliberately
   target only the BigCommerce editor canvas so the rest of the dark app chrome
   keeps the Command Center styling.
*/
.catalog-panel-body .catalog-lookup-form .lookup-button-cell,
.catalog-panel-body form:first-of-type .lookup-button-cell {
    align-self: start !important;
    padding-top: 28px !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}
.catalog-panel-body .catalog-lookup-form .lookup-button-cell button,
.catalog-panel-body form:first-of-type .lookup-button-cell button {
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: currentColor !important;
    caret-color: #111827 !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body p,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body div,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body span,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body strong,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body em,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body b,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body i,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body u,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body ul,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body ol,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body li,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body blockquote,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body table,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body td,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body th {
    color: #111827;
    -webkit-text-fill-color: currentColor !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="color"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="COLOR"] {
    -webkit-text-fill-color: currentColor !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body a {
    color: #1f6feb;
    -webkit-text-fill-color: currentColor !important;
}
.catalog-panel-body .bc-source-mode .bc-source-editor {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
}
@media (max-width: 900px) {
    .catalog-panel-body .catalog-lookup-form .lookup-button-cell,
    .catalog-panel-body form:first-of-type .lookup-button-cell {
        padding-top: 0 !important;
    }
    .catalog-panel-body .catalog-lookup-form .lookup-button-cell button,
    .catalog-panel-body form:first-of-type .lookup-button-cell button {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
   Catalog Editor WYSIWYG hard reset
   ---------------------------------------------------------------------------
   Keep the editor canvas independent from the dark Catalog Editor shell.
   The shell intentionally uses white text, but the WYSIWYG body must behave
   like a normal white BigCommerce editor: dark default text, visible links,
   and visible inline brand colors.
*/
.catalog-panel-body .bc-wysiwyg-shell {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body {
    background: #ffffff !important;
    caret-color: #111827 !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body a,
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body a * {
    color: #1f6feb !important;
    -webkit-text-fill-color: #1f6feb !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#054E9B"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#054e9b"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="rgb(5, 78, 155)"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="rgb(5,78,155)"] {
    color: #054E9B !important;
    -webkit-text-fill-color: #054E9B !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#2695C1"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#2695c1"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="rgb(38, 149, 193)"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="rgb(38,149,193)"] {
    color: #2695C1 !important;
    -webkit-text-fill-color: #2695C1 !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#38B247"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#38b247"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="rgb(56, 178, 71)"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="rgb(56,178,71)"] {
    color: #38B247 !important;
    -webkit-text-fill-color: #38B247 !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#000000"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="#111827"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="color: black"],
.catalog-panel-body .bc-wysiwyg-shell .bc-editor-body [style*="color:black"] {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}
.catalog-panel-body .bc-wysiwyg-shell .bc-source-editor {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: #fbfbfc !important;
    caret-color: #111827 !important;
}

/* Align lookup buttons with the white lookup input on Product and Category. */
.catalog-panel-body .catalog-lookup-form .lookup-button-cell,
.catalog-panel-body form:first-of-type .lookup-button-cell {
    align-self: start !important;
    padding-top: 29px !important;
    margin: 0 !important;
}
.catalog-panel-body .catalog-lookup-form .lookup-button-cell button,
.catalog-panel-body form:first-of-type .lookup-button-cell button {
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
}

/* =========================================================
   Utilities / BC API Tools cleanup
   Keeps Utilities visual styling in sms_command_center.css.
   ========================================================= */
.container .utility-tabs {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: -2px 0 22px !important;
}
.container .utility-section { display: none !important; }
.container .utility-section.active { display: block !important; }

.container .utility-tabs .utility-tab,
.container a.utility-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(8,41,68,.14) !important;
}
.container .utility-tabs .utility-tab.active,
.container a.utility-tab.active {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(126,200,255,.62) !important;
}

.container .field-scroll {
    overflow: visible !important;
    max-width: 100% !important;
    padding: 10px !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.04) !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.container .field-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: minmax(96px, auto) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.container .advanced-fields-panel,
.container .field-expander {
    margin-top: 10px !important;
    border: 1px dashed rgba(126,200,255,.50) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
    padding: 8px !important;
    color: var(--sms-white) !important;
}
.container .advanced-fields-panel summary,
.container .field-expander summary {
    cursor: pointer !important;
    font-weight: 900 !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
}
.container .advanced-fields-panel summary::marker,
.container .field-expander summary::marker {
    color: var(--sms-light-blue) !important;
}

/* Prevent checkbox action panels from turning into large white blocks. */
.container .header-actions .big-check,
.container .all-check-panel,
.container .all-check-panel label,
.container .upload-mode-row .mode-pill,
.container .upload-skip-container .big-check,
.container .scope-grid > .big-check {
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.16) !important;
}
.container .header-actions .big-check *,
.container .all-check-panel *,
.container .upload-mode-row .mode-pill *,
.container .upload-skip-container .big-check *,
.container .scope-grid > .big-check * {
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    opacity: 1 !important;
}
.container .big-check input[type="checkbox"],
.container .big-check input[type="radio"],
.container .all-check-panel input[type="checkbox"],
.container .mode-pill input[type="radio"] {
    width: auto !important;
    min-width: 13px !important;
    height: 13px !important;
    margin-top: 3px !important;
    accent-color: var(--brand-accent) !important;
}

/* Utility field cards stay dark, while their filter inputs stay light/readable. */
.container .api-field-card,
.container .upload-api-field-card {
    min-width: 0 !important;
    min-height: 96px !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.16) !important;
    box-sizing: border-box !important;
}
.container .api-field-card .api-field-title,
.container .upload-api-field-card .api-field-title {
    min-height: 28px !important;
    font-size: 11.5px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    overflow-wrap: anywhere !important;
}
.container .api-include-row {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    margin: 5px 0 !important;
    font-size: 11px !important;
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
    font-weight: 800 !important;
}
.container .api-include-row input[type="checkbox"] {
    width: auto !important;
    margin: 0 !important;
    transform: scale(.9) !important;
    accent-color: var(--brand-accent) !important;
}
.container .api-filter-input,
.container .api-field-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container .api-field-card select,
.container .upload-api-field-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.container .upload-api-field-card select {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size: 11.5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    border: 1px solid rgba(126,200,255,.58) !important;
}
.container .api-field-card input::placeholder,
.container .upload-api-field-card input::placeholder {
    color: var(--sms-field-muted) !important;
    -webkit-text-fill-color: var(--sms-field-muted) !important;
    opacity: 1 !important;
}
.container .tiny-note,
.container .muted,
.container .source-meta {
    color: var(--sms-soft-white) !important;
    opacity: 1 !important;
}

.container .filter-help {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
.container .filter-help > div {
    padding: 9px 10px !important;
    min-height: 48px !important;
}
.container .filter-help code {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 6px !important;
    padding: 1px 5px !important;
}

.container .top-run-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 6px 0 14px !important;
    padding: 8px 0 2px !important;
}
.container .run-utility-button,
.container .run-upload-button,
.container .run-google-feed-button {
    min-width: 230px !important;
}

.container .utility-status {
    display: none !important;
    margin: 18px 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    border-left: 5px solid var(--brand-accent) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.16) !important;
}
.container .utility-status.active { display: block !important; }
.container .utility-status * {
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
}
.container .utility-progress-track {
    height: 12px !important;
    background: rgba(255,255,255,.20) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}
.container .utility-progress-fill {
    height: 100% !important;
    width: 0%;
    background: linear-gradient(135deg, var(--brand-accent), var(--sms-light-blue)) !important;
    border-radius: 999px !important;
    transition: width .25s ease !important;
}

.container .file-drop-zone,
.container .file-name-display,
.container .completion-modal {
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    color: var(--sms-white) !important;
}
.container .file-drop-zone *,
.container .file-name-display *,
.container .completion-modal * {
    color: var(--sms-white) !important;
    -webkit-text-fill-color: var(--sms-white) !important;
}
.container .file-choose-button {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.container .exports-table,
.container .google-perf-table {
    width: 100% !important;
    border-collapse: collapse !important;
}
.container .exports-table .button-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    padding: 9px 14px !important;
}

@media (max-width: 1000px) {
    .container .scope-grid,
    .container .google-master-grid,
    .container .filter-help,
    .container .upload-grid,
    .container .google-perf-control-grid,
    .container .google-perf-grid {
        grid-template-columns: 1fr !important;
    }
    .container .header-actions { justify-content: flex-start !important; }
    .container .field-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
}

/* =========================================================
   BigCommerce Categories Tree Page
   Read-only category structure overview at /bc-categories.
   ========================================================= */
.container.bc-categories-page,
.container.bc-categories-page * {
    font-family: var(--sms-app-font-family) !important;
}

.bc-categories-hero {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin: 0 0 18px;
}

.bc-categories-hero h1 {
    margin: 0 0 8px !important;
}

.bc-categories-hero p {
    max-width: 940px;
    margin: 0 !important;
    color: var(--sms-soft-white) !important;
    line-height: 1.45;
}

.bc-categories-actions {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.bc-categories-refresh-form {
    margin: 0 !important;
}

.bc-category-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}

.bc-category-stat-card {
    min-height: 86px;
    padding: 14px 16px;
    border-radius: 14px;
    color: var(--sms-white) !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    box-shadow: 0 10px 24px rgba(8,41,68,.16) !important;
    position: relative;
    overflow: hidden;
}

.bc-category-stat-card::after,
.bc-category-tree-panel::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
}

.bc-category-stat-label {
    color: var(--sms-light-blue) !important;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bc-category-stat-value {
    margin-top: 6px;
    color: var(--sms-white) !important;
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1;
    font-weight: 950;
}

.bc-category-tree-panel {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}

.bc-category-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 12px;
}

.bc-category-toolbar label {
    display: block;
    margin: 0 0 8px !important;
    color: var(--sms-white) !important;
    font-weight: 900 !important;
}

.bc-category-toolbar input[type="search"] {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
}

.bc-category-toolbar-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bc-category-toolbar-buttons button {
    min-height: 42px !important;
    margin: 0 !important;
}

.bc-category-note {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 183, 77, .10) !important;
    border: 1px solid rgba(255, 183, 77, .48) !important;
    border-left: 5px solid #DCA24A !important;
    color: var(--sms-white) !important;
    line-height: 1.38;
}

.bc-category-note strong {
    color: var(--sms-white) !important;
}

.bc-category-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(126,200,255,.30);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

.bc-category-tree-table {
    width: 100%;
    min-width: 1120px;
    margin: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed;
    border: 0 !important;
    border-radius: 0 !important;
}

.bc-category-tree-table th {
    position: static !important;
    padding: 11px 12px !important;
    background: linear-gradient(180deg, #0D5E88, #0A4B70) !important;
    color: var(--sms-white) !important;
    font-size: 13px;
    font-weight: 950;
    text-align: left;
    border-bottom: 1px solid rgba(126,200,255,.26) !important;
}

.bc-category-tree-table td {
    padding: 10px 12px !important;
    color: var(--sms-white) !important;
    background: rgba(255,255,255,.035) !important;
    border-bottom: 1px solid rgba(126,200,255,.16) !important;
    vertical-align: middle;
}

.bc-category-tree-table th:nth-child(1) { width: 38%; }
.bc-category-tree-table th:nth-child(2) { width: 9%; }
.bc-category-tree-table th:nth-child(3) { width: 8%; }
.bc-category-tree-table th:nth-child(4) { width: 10%; }
.bc-category-tree-table th:nth-child(5) { width: 10%; }
.bc-category-tree-table th:nth-child(6) { width: 15%; }
.bc-category-tree-table th:nth-child(7) { width: 10%; }

.bc-category-name-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bc-category-toggle,
.bc-category-toggle-spacer {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 7px !important;
    line-height: 1 !important;
}

.bc-category-toggle {
    background: rgba(126,200,255,.16) !important;
    border: 1px solid rgba(126,200,255,.34) !important;
    color: var(--sms-white) !important;
    box-shadow: none !important;
}

.bc-category-toggle:hover {
    background: rgba(126,200,255,.26) !important;
    transform: none !important;
}

.bc-category-folder {
    color: var(--sms-light-blue) !important;
    font-size: 13px;
}

.bc-category-name {
    color: var(--sms-white) !important;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.bc-category-path {
    margin-top: 3px;
    color: var(--sms-soft-white) !important;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.bc-category-url-cell span {
    display: block;
    color: var(--sms-soft-white) !important;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.bc-category-empty-value {
    color: rgba(255,255,255,.42) !important;
}

.bc-category-visibility {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bc-category-visibility.visible {
    background: rgba(34,197,94,.18) !important;
    color: #86efac !important;
    border: 1px solid rgba(34,197,94,.42);
}

.bc-category-visibility.hidden {
    background: rgba(148,163,184,.18) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(148,163,184,.38);
}

.bc-category-action-cell {
    display: table-cell;
}

.bc-category-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    margin: 2px 4px 2px 0;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(126, 200, 255, .13) !important;
    border: 1px solid rgba(126, 200, 255, .34) !important;
    color: var(--sms-light-blue) !important;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none !important;
}

.bc-category-action-link.secondary {
    color: var(--sms-soft-white) !important;
    background: rgba(255,255,255,.07) !important;
}

.bc-category-action-link:hover {
    background: rgba(126, 200, 255, .22) !important;
    color: var(--sms-white) !important;
}

@media (max-width: 1100px) {
    .bc-categories-hero,
    .bc-category-toolbar,
    .bc-category-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .bc-categories-actions,
    .bc-category-toolbar-buttons {
        justify-content: flex-start;
    }
}

.bc-category-row.depth-1 .bc-category-name-inner { padding-left: 0; }
.bc-category-row.depth-2 .bc-category-name-inner { padding-left: 22px; }
.bc-category-row.depth-3 .bc-category-name-inner { padding-left: 44px; }
.bc-category-row.depth-4 .bc-category-name-inner { padding-left: 66px; }
.bc-category-row.depth-5 .bc-category-name-inner { padding-left: 88px; }
.bc-category-row.depth-6 .bc-category-name-inner { padding-left: 110px; }
.bc-category-row.depth-7 .bc-category-name-inner { padding-left: 132px; }
.bc-category-row.depth-8 .bc-category-name-inner { padding-left: 154px; }
.bc-category-row.depth-9 .bc-category-name-inner { padding-left: 176px; }
.bc-category-row.depth-10 .bc-category-name-inner { padding-left: 198px; }

/* =========================================================
   BC Categories Tree tweak
   - Replaces the empty Products column with Level.
   - Gives the action buttons enough room so View is not cut off.
   - Allows 6 stat cards to wrap cleanly.
   ========================================================= */
.bc-category-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.bc-category-tree-table {
    min-width: 1200px !important;
}

.bc-category-tree-table th:nth-child(1) { width: 39% !important; }
.bc-category-tree-table th:nth-child(2) { width: 9% !important; }
.bc-category-tree-table th:nth-child(3) { width: 6% !important; }
.bc-category-tree-table th:nth-child(4) { width: 10% !important; }
.bc-category-tree-table th:nth-child(5) { width: 10% !important; }
.bc-category-tree-table th:nth-child(6) { width: 14% !important; }
.bc-category-tree-table th:nth-child(7) { width: 12% !important; }

.bc-category-action-cell {
    white-space: nowrap !important;
}

.bc-category-action-link {
    min-width: 58px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* =========================================================
   BigCommerce Orders page
   Read-only order list for Command Center.
   ========================================================= */
.orders-page,
.orders-page * {
    font-family: var(--sms-app-font-family) !important;
}
.orders-page .orders-hero {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 18px !important;
}
.orders-page .orders-hero h1 {
    margin: 0 0 8px !important;
    color: var(--sms-white) !important;
}
.orders-page .orders-hero p {
    max-width: 920px !important;
    margin: 0 !important;
    color: var(--sms-soft-white) !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
}
.orders-page .orders-refresh-form {
    margin: 0 !important;
}
.orders-page .orders-filter-card,
.orders-page .orders-table-card,
.orders-page .orders-summary-card,
.orders-page .orders-detail-panel {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}
.orders-page .orders-filter-card,
.orders-page .orders-table-card {
    padding: 16px !important;
    margin-bottom: 18px !important;
}
.orders-page .orders-summary-card {
    min-height: 96px !important;
    padding: 14px 16px !important;
}
.orders-page .orders-filter-card::after,
.orders-page .orders-table-card::after,
.orders-page .orders-summary-card::after,
.orders-page .orders-detail-panel::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
    pointer-events: none;
}
.orders-page .orders-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(170px, 220px) minmax(210px, 260px) minmax(280px, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}
.orders-page .orders-filter-grid label {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--sms-white) !important;
    font-weight: 900 !important;
}
.orders-page .orders-filter-grid input,
.orders-page .orders-filter-grid select {
    height: 46px !important;
    margin: 0 !important;
}
.orders-page .orders-filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}
.orders-page .orders-filter-actions button,
.orders-page .orders-filter-actions .button-link {
    height: 46px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
.orders-page .orders-note {
    margin-top: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(255, 183, 77, .10) !important;
    border: 1px solid rgba(255, 183, 77, .48) !important;
    border-left: 5px solid #DCA24A !important;
    color: var(--sms-white) !important;
    font-size: 13px !important;
}
.orders-page .orders-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}
.orders-page .orders-summary-label,
.orders-page .orders-detail-label {
    color: var(--sms-light-blue) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}
.orders-page .orders-summary-value {
    color: var(--sms-white) !important;
    font-size: clamp(22px, 1.7vw, 31px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    margin: 5px 0 4px !important;
}
.orders-page .orders-summary-sub,
.orders-page .orders-table-sub,
.orders-page .orders-small {
    color: var(--sms-soft-white) !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
}
.orders-page .orders-table-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}
.orders-page .orders-table-header h2 {
    margin: 0 0 4px !important;
    color: var(--sms-white) !important;
}
.orders-page .orders-pagination {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.orders-page .orders-table-wrap {
    overflow-x: auto !important;
    border-radius: 14px !important;
    border: 1px solid rgba(126,200,255,.28) !important;
}
.orders-page .orders-table {
    width: 100% !important;
    min-width: 1080px !important;
    table-layout: fixed !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
}
.orders-page .orders-table th {
    position: static !important;
    background: linear-gradient(180deg, #0D5E88, #0A4B70) !important;
    color: var(--sms-white) !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    text-align: left !important;
}
.orders-page .orders-table td {
    padding: 11px 12px !important;
    color: var(--sms-white) !important;
    background: rgba(255,255,255,.035) !important;
    border-bottom: 1px solid rgba(126,200,255,.16) !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
}
.orders-page .orders-table th:nth-child(1) { width: 9% !important; }
.orders-page .orders-table th:nth-child(2) { width: 10% !important; }
.orders-page .orders-table th:nth-child(3) { width: 13% !important; }
.orders-page .orders-table th:nth-child(4) { width: 22% !important; }
.orders-page .orders-table th:nth-child(5) { width: 18% !important; }
.orders-page .orders-table th:nth-child(6) { width: 7% !important; }
.orders-page .orders-table th:nth-child(7) { width: 10% !important; }
.orders-page .orders-table th:nth-child(8) { width: 11% !important; }
.orders-page .order-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
}
.orders-page .order-status-good { background: rgba(34,197,94,.18) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,.44) !important; }
.orders-page .order-status-warn { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245,158,11,.48) !important; }
.orders-page .order-status-bad { background: rgba(239,68,68,.18) !important; color: #fecaca !important; border: 1px solid rgba(239,68,68,.48) !important; }
.orders-page .order-status-neutral { background: rgba(126,200,255,.14) !important; color: var(--sms-white) !important; border: 1px solid rgba(126,200,255,.36) !important; }
.orders-page .orders-detail-button {
    min-width: 72px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}
.orders-page .orders-detail-row td {
    padding: 0 !important;
    background: rgba(255,255,255,.035) !important;
}
.orders-page .orders-detail-panel {
    margin: 0 !important;
    padding: 18px 20px 22px !important;
    border-left: 5px solid var(--sms-light-blue) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.orders-page .orders-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
.orders-page .orders-detail-grid div {
    color: var(--sms-soft-white) !important;
    line-height: 1.4 !important;
}
.orders-page .orders-detail-grid strong {
    color: var(--sms-white) !important;
}
.orders-page .orders-empty {
    padding: 18px !important;
    border: 1px dashed rgba(126,200,255,.44) !important;
    border-radius: 14px !important;
    color: var(--sms-soft-white) !important;
    background: rgba(255,255,255,.05) !important;
}
@media (max-width: 1250px) {
    .orders-page .orders-summary-grid,
    .orders-page .orders-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .orders-page .orders-filter-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 760px) {
    .orders-page .orders-hero,
    .orders-page .orders-summary-grid,
    .orders-page .orders-detail-grid,
    .orders-page .orders-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .orders-page .orders-table-header {
        display: block !important;
    }
    .orders-page .orders-pagination {
        margin-top: 10px !important;
    }
}


/* =========================================================
   BIGCOMMERCE CUSTOMERS PAGE
   First read-only customer lookup page for Command Center.
   ========================================================= */
.customers-page,
.customers-page * {
    font-family: var(--sms-app-font-family) !important;
}
.customers-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.customers-hero h1 {
    margin: 0 0 8px !important;
    color: var(--sms-white) !important;
    font-size: 30px !important;
}
.customers-hero p {
    max-width: 980px;
    margin: 0 !important;
    color: var(--sms-soft-white) !important;
    line-height: 1.45;
}
.customers-refresh-form button {
    min-width: 130px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
}
.customers-filter-card,
.customers-summary-card,
.customers-table-card,
.customer-detail-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}
.customers-filter-card,
.customers-table-card,
.customer-detail-panel {
    padding: 16px !important;
    margin-bottom: 18px !important;
}
.customers-filter-card::after,
.customers-summary-card::after,
.customers-table-card::after,
.customer-detail-panel::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
}
.customers-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(420px, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
}
.customers-filter-grid label {
    color: var(--sms-white) !important;
    font-weight: 950 !important;
    margin-bottom: 8px !important;
}
.customers-filter-grid input {
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
}
.customers-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}
.customers-filter-actions button,
.customers-filter-actions .button-link {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}
.customers-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,183,77,.10);
    border: 1px solid rgba(255,183,77,.48);
    border-left: 5px solid #DCA24A;
    color: var(--sms-white) !important;
    line-height: 1.35;
    font-size: 13px;
}
.customers-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 !important;
}
.customers-summary-card {
    min-height: 98px;
    padding: 16px !important;
}
.customers-summary-label {
    color: var(--sms-light-blue) !important;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.customers-summary-value {
    margin-top: 5px;
    color: var(--sms-white) !important;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 950;
}
.customers-summary-sub,
.customers-table-sub {
    color: var(--sms-soft-white) !important;
    font-size: 12px;
    line-height: 1.35;
}
.customers-table-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.customers-table-header h2 {
    margin: 0 0 4px !important;
    color: var(--sms-white) !important;
}
.customers-page-links {
    display: flex;
    gap: 8px;
    align-items: center;
}
.customers-page-links a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(126,200,255,.12);
    border: 1px solid rgba(126,200,255,.35);
    color: var(--sms-light-blue) !important;
    font-weight: 900;
    text-decoration: none !important;
}
.customers-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(126,200,255,.24);
    border-radius: 14px;
}
.customers-table {
    width: 100% !important;
    min-width: 1120px !important;
    table-layout: fixed !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.customers-table th {
    position: static !important;
    background: linear-gradient(180deg, #0D5E88, #0A4B70) !important;
    color: var(--sms-white) !important;
    padding: 10px 12px !important;
    font-weight: 950 !important;
}
.customers-table td {
    padding: 11px 12px !important;
    color: var(--sms-white) !important;
    background: rgba(255,255,255,.035) !important;
    border-bottom: 1px solid rgba(126,200,255,.16) !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
}
.customers-table th:nth-child(1) { width: 17%; }
.customers-table th:nth-child(2) { width: 21%; }
.customers-table th:nth-child(3) { width: 24%; }
.customers-table th:nth-child(4) { width: 9%; }
.customers-table th:nth-child(5) { width: 10%; }
.customers-table th:nth-child(6) { width: 10%; }
.customers-table th:nth-child(7) { width: 9%; text-align:center; }
.customers-table td:nth-child(7) { text-align:center; }
.customers-table span {
    color: var(--sms-soft-white) !important;
    font-size: 12px;
}
.customer-group-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 70px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(126,200,255,.12) !important;
    border: 1px solid rgba(126,200,255,.35) !important;
    color: var(--sms-white) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}
.customer-view-button {
    min-width: 74px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}
.customer-detail-row td {
    padding: 0 !important;
}
.customer-detail-panel {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 5px solid var(--sms-light-blue) !important;
}
.customer-detail-title {
    color: var(--sms-white) !important;
    font-weight: 950;
    font-size: 16px;
    margin-bottom: 12px;
}
.customer-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.customer-detail-card {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(126,200,255,.24);
    color: var(--sms-white) !important;
    line-height: 1.45;
}
.customer-detail-label {
    color: var(--sms-light-blue) !important;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.customer-notes {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(126,200,255,.22);
    color: var(--sms-white) !important;
}
@media (max-width: 1100px) {
    .customers-hero,
    .customers-table-header { display: block; }
    .customers-refresh-form,
    .customers-page-links { margin-top: 12px; }
    .customers-filter-grid,
    .customers-summary-grid,
    .customer-detail-grid { grid-template-columns: 1fr !important; }
    .customers-filter-actions { justify-content: flex-start; }
}


/* =========================================================
   CRM Contacts Page - HighLevel / Local Titans
   First read-only Command Center CRM list view.
   ========================================================= */
.crm-contacts-page,
.crm-contacts-page * {
    font-family: var(--sms-app-font-family) !important;
}
.crm-page-heading-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin: 0 0 18px !important;
}
.crm-page-heading-row h1 { margin: 0 0 8px !important; }
.crm-page-heading-row p {
    max-width: 980px !important;
    margin: 0 !important;
    color: var(--sms-soft-white) !important;
    line-height: 1.42 !important;
}
.crm-refresh-button {
    white-space: nowrap !important;
    align-self: flex-start !important;
}
.crm-filter-card,
.crm-list-card {
    position: relative !important;
    overflow: hidden !important;
    margin: 18px 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
}
.crm-filter-card::after,
.crm-list-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
}
.crm-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(110px, 140px) auto !important;
    gap: 14px !important;
    align-items: end !important;
}
.crm-filter-grid label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--sms-white) !important;
    font-weight: 950 !important;
}
.crm-filter-grid input,
.crm-filter-grid select {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.crm-filter-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
.crm-filter-actions button,
.crm-filter-actions .button-link {
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.crm-note {
    margin-top: 12px !important;
    padding: 11px 13px !important;
    border-radius: 10px !important;
    background: rgba(255, 183, 77, .10) !important;
    border: 1px solid rgba(255, 183, 77, .48) !important;
    border-left: 5px solid #DCA24A !important;
    color: var(--sms-white) !important;
    line-height: 1.35 !important;
}
.crm-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 18px 0 !important;
}
.crm-list-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}
.crm-list-header h2 { margin: 0 0 4px !important; }
.crm-pagination {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
.crm-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid rgba(126,200,255,.28) !important;
    border-radius: 14px !important;
}
.crm-contacts-table {
    width: 100% !important;
    min-width: 1180px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.crm-contacts-table th,
.crm-contacts-table td {
    padding: 11px 12px !important;
    vertical-align: top !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
}
.crm-contacts-table th:nth-child(1) { width: 17% !important; }
.crm-contacts-table th:nth-child(2) { width: 19% !important; }
.crm-contacts-table th:nth-child(3) { width: 22% !important; }
.crm-contacts-table th:nth-child(4) { width: 14% !important; }
.crm-contacts-table th:nth-child(5) { width: 12% !important; }
.crm-contacts-table th:nth-child(6) { width: 10% !important; }
.crm-contacts-table th:nth-child(7) { width: 6% !important; text-align: center !important; }
.crm-contacts-table td:nth-child(7) { text-align: center !important; }
.crm-tag-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(126,200,255,.14) !important;
    border: 1px solid rgba(126,200,255,.42) !important;
    color: var(--sms-white) !important;
    font-weight: 950 !important;
}
.crm-detail-row > td {
    padding: 0 !important;
    background: rgba(255,255,255,.035) !important;
}
.crm-detail-panel {
    padding: 18px 22px 22px !important;
    border-left: 5px solid var(--sms-light-blue) !important;
    background: linear-gradient(145deg, var(--sms-medium-blue-3), var(--sms-medium-blue)) !important;
    color: var(--sms-white) !important;
}
.crm-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
}
.detail-value-small {
    font-size: 15px !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
}
.crm-detail-notes {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(126,200,255,.28) !important;
    color: var(--sms-soft-white) !important;
}
.crm-detail-notes strong { color: var(--sms-white) !important; }
@media (max-width: 1100px) {
    .crm-page-heading-row,
    .crm-list-header { display: block !important; }
    .crm-refresh-button,
    .crm-pagination { margin-top: 12px !important; }
    .crm-filter-grid,
    .crm-summary-grid { grid-template-columns: 1fr !important; }
    .crm-filter-actions { align-items: stretch !important; }
}


/* =========================================================
   CRM Contacts quick polish
   Keeps the Craig demo message concise and fixes Details button wrapping.
   ========================================================= */
.crm-contacts-page .crm-page-heading-row,
.crm-contacts-page .crm-page-heading-row * {
    text-transform: none !important;
    letter-spacing: normal !important;
}
.crm-contacts-page .crm-page-heading-row h1 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    margin-bottom: 8px !important;
    color: var(--sms-white) !important;
}
.crm-contacts-page .crm-page-heading-row .crm-intro,
.crm-contacts-page .crm-page-heading-row p {
    max-width: 1060px !important;
    color: var(--sms-soft-white) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.crm-contacts-page .crm-refresh-button {
    min-height: 42px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
.crm-contacts-page .crm-note {
    font-size: 13px !important;
    line-height: 1.36 !important;
}
.crm-contacts-page .crm-note strong {
    color: var(--sms-white) !important;
}
.crm-contacts-table {
    min-width: 1240px !important;
}
.crm-contacts-table th:nth-child(1) { width: 17% !important; }
.crm-contacts-table th:nth-child(2) { width: 18% !important; }
.crm-contacts-table th:nth-child(3) { width: 22% !important; }
.crm-contacts-table th:nth-child(4) { width: 13% !important; }
.crm-contacts-table th:nth-child(5) { width: 10% !important; }
.crm-contacts-table th:nth-child(6) { width: 12% !important; }
.crm-contacts-table th:nth-child(7) { width: 8% !important; min-width: 96px !important; text-align: center !important; }
.crm-contacts-table td:nth-child(7) {
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.crm-contacts-page .button-small.crm-detail-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px !important;
    width: 72px !important;
    height: 38px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1 !important;
}
.crm-contacts-page .summary-card .summary-value {
    line-height: 1.05 !important;
}


/* =========================================================
   CRM Companies Page
   Reuses CRM contact cards/table styling with company-specific widths.
   ========================================================= */
.crm-companies-page .crm-page-heading-row h1 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
}
.crm-companies-page .crm-companies-table {
    min-width: 1240px !important;
}
.crm-companies-page .crm-companies-table th:nth-child(1) { width: 17% !important; }
.crm-companies-page .crm-companies-table th:nth-child(2) { width: 21% !important; }
.crm-companies-page .crm-companies-table th:nth-child(3) { width: 17% !important; }
.crm-companies-page .crm-companies-table th:nth-child(4) { width: 14% !important; }
.crm-companies-page .crm-companies-table th:nth-child(5) { width: 10% !important; text-align: center !important; }
.crm-companies-page .crm-companies-table th:nth-child(6) { width: 13% !important; }
.crm-companies-page .crm-companies-table th:nth-child(7) { width: 8% !important; min-width: 96px !important; text-align: center !important; }
.crm-companies-page .crm-companies-table td:nth-child(5),
.crm-companies-page .crm-companies-table td:nth-child(7) {
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.crm-gm-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    color: var(--sms-white) !important;
    font-weight: 950 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 1px solid rgba(126,200,255,.36) !important;
    background: rgba(126,200,255,.14) !important;
}
.crm-gm-pill.gm-good {
    background: rgba(34,197,94,.18) !important;
    border-color: rgba(34,197,94,.46) !important;
    color: #86efac !important;
}
.crm-gm-pill.gm-warn {
    background: rgba(245,158,11,.16) !important;
    border-color: rgba(245,158,11,.48) !important;
    color: #fbbf24 !important;
}
.crm-gm-pill.gm-muted {
    background: rgba(148,163,184,.16) !important;
    border-color: rgba(148,163,184,.36) !important;
    color: rgba(255,255,255,.82) !important;
}
.crm-companies-page .button-small.crm-detail-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px !important;
    width: 72px !important;
    height: 38px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1 !important;
}


/* =========================================================
   CRM Projects Page
   First read-only HighLevel / Local Titans project-opportunity view.
   ========================================================= */
.container.crm-projects-page .crm-project-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.container.crm-projects-page .crm-filter-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(180px, 240px) minmax(120px, 160px) auto !important;
}

.container.crm-projects-page .crm-projects-table {
    table-layout: fixed !important;
    min-width: 1220px !important;
}

.container.crm-projects-page .crm-projects-table th:nth-child(1),
.container.crm-projects-page .crm-projects-table td:nth-child(1) { width: 22% !important; }
.container.crm-projects-page .crm-projects-table th:nth-child(2),
.container.crm-projects-page .crm-projects-table td:nth-child(2) { width: 15% !important; }
.container.crm-projects-page .crm-projects-table th:nth-child(3),
.container.crm-projects-page .crm-projects-table td:nth-child(3) { width: 25% !important; }
.container.crm-projects-page .crm-projects-table th:nth-child(4),
.container.crm-projects-page .crm-projects-table td:nth-child(4) { width: 11% !important; }
.container.crm-projects-page .crm-projects-table th:nth-child(5),
.container.crm-projects-page .crm-projects-table td:nth-child(5) { width: 11% !important; }
.container.crm-projects-page .crm-projects-table th:nth-child(6),
.container.crm-projects-page .crm-projects-table td:nth-child(6) { width: 12% !important; }
.container.crm-projects-page .crm-projects-table th:nth-child(7),
.container.crm-projects-page .crm-projects-table td:nth-child(7) { width: 8% !important; text-align:center !important; }

.container.crm-projects-page .crm-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 82px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(126,200,255,.36) !important;
    background: rgba(126,200,255,.16) !important;
    color: var(--sms-white) !important;
}
.container.crm-projects-page .crm-status-pill.status-good {
    background: rgba(34,197,94,.18) !important;
    border-color: rgba(34,197,94,.45) !important;
    color: #86efac !important;
}
.container.crm-projects-page .crm-status-pill.status-bad {
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.45) !important;
    color: #fecaca !important;
}
.container.crm-projects-page .crm-status-pill.status-open {
    background: rgba(14,165,233,.16) !important;
    border-color: rgba(14,165,233,.45) !important;
    color: var(--sms-light-blue) !important;
}
.container.crm-projects-page .crm-status-pill.status-warn {
    background: rgba(245,158,11,.14) !important;
    border-color: rgba(245,158,11,.50) !important;
    color: #fbbf24 !important;
}
.container.crm-projects-page .crm-status-pill.status-muted {
    background: rgba(148,163,184,.14) !important;
    border-color: rgba(148,163,184,.36) !important;
    color: rgba(255,255,255,.76) !important;
}

.container.crm-projects-page .crm-projects-table .button-small,
.container.crm-projects-page .crm-projects-table .crm-detail-toggle {
    min-width: 74px !important;
    width: auto !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
    word-break: normal !important;
}

@media (max-width: 1300px) {
    .container.crm-projects-page .crm-project-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1000px) {
    .container.crm-projects-page .crm-filter-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   CRM Tasks and Activity quick demo pages
   ========================================================= */
.container.crm-tasks-page .crm-tasks-table th:nth-child(1) { width: 25%; }
.container.crm-tasks-page .crm-tasks-table th:nth-child(2) { width: 18%; }
.container.crm-tasks-page .crm-tasks-table th:nth-child(3) { width: 22%; }
.container.crm-tasks-page .crm-tasks-table th:nth-child(4) { width: 12%; }
.container.crm-tasks-page .crm-tasks-table th:nth-child(5) { width: 14%; }
.container.crm-tasks-page .crm-tasks-table th:nth-child(6) { width: 9%; }
.container.crm-activity-page .crm-activity-table th:nth-child(1) { width: 16%; }
.container.crm-activity-page .crm-activity-table th:nth-child(2) { width: 26%; }
.container.crm-activity-page .crm-activity-table th:nth-child(3) { width: 21%; }
.container.crm-activity-page .crm-activity-table th:nth-child(4) { width: 13%; }
.container.crm-activity-page .crm-activity-table th:nth-child(5) { width: 15%; }
.container.crm-activity-page .crm-activity-table th:nth-child(6) { width: 9%; }
.container .crm-status-pill.status-open,
.container .crm-status-pill.status-good,
.container .crm-status-pill.status-warn,
.container .crm-status-pill.status-bad,
.container .crm-status-pill.status-muted {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 86px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}
.container .crm-status-pill.status-good { background: rgba(34,197,94,.20) !important; border: 1px solid rgba(34,197,94,.42) !important; color: #86efac !important; }
.container .crm-status-pill.status-open { background: rgba(14,165,233,.18) !important; border: 1px solid rgba(56,189,248,.44) !important; color: #7dd3fc !important; }
.container .crm-status-pill.status-warn { background: rgba(245,158,11,.18) !important; border: 1px solid rgba(245,158,11,.44) !important; color: #fbbf24 !important; }
.container .crm-status-pill.status-bad { background: rgba(239,68,68,.18) !important; border: 1px solid rgba(239,68,68,.44) !important; color: #fecaca !important; }
.container .crm-status-pill.status-muted { background: rgba(148,163,184,.18) !important; border: 1px solid rgba(148,163,184,.42) !important; color: #e2e8f0 !important; }
.container .crm-message-preview {
    max-width: 520px;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* =========================================================
   CRM Tasks / Activity quick polish before Craig demo
   - Keep filter actions on the same row
   - Make Reset compact and Command Center styled
   - Keep summary cards in one row on wide screens
   ========================================================= */
.container.crm-tasks-page .crm-filter-grid,
.container.crm-activity-page .crm-filter-grid {
    grid-template-columns: minmax(460px, 1fr) minmax(150px, 190px) minmax(100px, 135px) auto !important;
    gap: 14px !important;
    align-items: end !important;
}

.container.crm-tasks-page .crm-filter-actions,
.container.crm-activity-page .crm-filter-actions {
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.container.crm-tasks-page .crm-filter-actions button,
.container.crm-activity-page .crm-filter-actions button {
    min-width: 132px !important;
    height: 48px !important;
    padding: 0 16px !important;
}

.container.crm-tasks-page .crm-filter-actions .button-secondary,
.container.crm-activity-page .crm-filter-actions .button-secondary,
.container.crm-tasks-page .crm-filter-actions a.button-link.button-secondary,
.container.crm-activity-page .crm-filter-actions a.button-link.button-secondary {
    min-width: 72px !important;
    width: auto !important;
    height: 48px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    background: rgba(126, 200, 255, .12) !important;
    border: 1px solid rgba(126, 200, 255, .35) !important;
    color: var(--sms-light-blue) !important;
    box-shadow: none !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.container.crm-tasks-page .crm-filter-actions .button-secondary:hover,
.container.crm-activity-page .crm-filter-actions .button-secondary:hover {
    background: rgba(126, 200, 255, .20) !important;
    color: var(--sms-white) !important;
}

.container.crm-tasks-page .crm-summary-grid,
.container.crm-activity-page .crm-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.container.crm-tasks-page .crm-tasks-table,
.container.crm-activity-page .crm-activity-table {
    width: 100% !important;
    min-width: 1180px !important;
    table-layout: fixed !important;
}

.container.crm-tasks-page .crm-tasks-table th:nth-child(6),
.container.crm-tasks-page .crm-tasks-table td:nth-child(6),
.container.crm-activity-page .crm-activity-table th:nth-child(6),
.container.crm-activity-page .crm-activity-table td:nth-child(6) {
    width: 110px !important;
    text-align: center !important;
}

.container.crm-tasks-page .crm-tasks-table .button-small,
.container.crm-tasks-page .crm-tasks-table .crm-detail-toggle,
.container.crm-activity-page .crm-activity-table .button-small,
.container.crm-activity-page .crm-activity-table .crm-detail-toggle {
    min-width: 72px !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
    word-break: normal !important;
}

@media (max-width: 1300px) {
    .container.crm-tasks-page .crm-summary-grid,
    .container.crm-activity-page .crm-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1000px) {
    .container.crm-tasks-page .crm-filter-grid,
    .container.crm-activity-page .crm-filter-grid {
        grid-template-columns: 1fr !important;
    }
    .container.crm-tasks-page .crm-filter-actions,
    .container.crm-activity-page .crm-filter-actions {
        justify-content: flex-start !important;
    }
}


/* =========================================================
   QUOTE ENGINE BUTTON READABILITY FIX
   Added after Phase 2A/2B Quote Engine testing.
   Problem: shared .container a color rules were stronger than .button-link
   color rules, making working quote action buttons look greyed out.
   ========================================================= */
.container a.button-link,
.container a.button-link:link,
.container a.button-link:visited,
.container .action-row a.button-link,
.container .edit-toolbar a.button-link,
.container .send-card a.button-link,
.container .quote-preview-shell + .action-row a.button-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 62%, var(--sms-line-blue) 100%) !important;
    border: 1px solid rgba(126,200,255,.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    box-shadow: 0 12px 26px rgba(8,41,68,.25) !important;
    cursor: pointer !important;
}

.container a.button-link:hover,
.container .action-row a.button-link:hover,
.container .edit-toolbar a.button-link:hover,
.container .send-card a.button-link:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(var(--brand-primary-rgb), .24) !important;
}

.container a.button-link.button-quiet,
.container a.button-link.button-secondary,
.container a.button-link.button-secondary-link {
    background: linear-gradient(135deg, #0B5E8E, #2695C1) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    border-color: rgba(126,200,255,.46) !important;
}

/* True disabled actions should still look disabled. */
.container a.button-link.disabled,
.container button:disabled,
.container .button-link[aria-disabled="true"] {
    background: rgba(148, 163, 184, .38) !important;
    color: rgba(255,255,255,.62) !important;
    -webkit-text-fill-color: rgba(255,255,255,.62) !important;
    border-color: rgba(148,163,184,.30) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Quote Engine inline cards: keep links/buttons visually active inside dark cards. */
.container .send-shell a.button-link,
.container .edit-shell a.button-link,
.container .option-card a.button-link {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   QUOTE ENGINE
   Quote Dashboard / New Quote / Edit / Preview / Send Workflow

   Moved out of dashboard/tabs/quote_engine/page.py so visual
   editing stays centralized in sms_command_center.css.

   Note: QUOTE_PRINT_PAGE keeps standalone print CSS in page.py so
   clean print/PDF output works independently of the app shell.
   ========================================================= */

/* ---- Quote Engine page styles moved from page.py ---- */
.qe-tabs { display:flex; gap:10px; margin: -6px 0 24px; flex-wrap:wrap; }
        .qe-tab { padding:10px 16px; border-radius:12px; border:1px solid rgba(125,202,255,.55); background:rgba(255,255,255,.06); color:inherit; text-decoration:none; font-weight:900; }
        .qe-tab.active { background:linear-gradient(135deg,rgba(13,104,155,.95),rgba(38,149,193,.95)); color:#fff; border-color:transparent; }
        .option-card { background:rgba(255,255,255,.055); border:1px solid rgba(125,202,255,.45); border-radius:18px; padding:18px; margin:18px 0; }
        .section-note { border:1px solid rgba(251,191,36,.7); border-left:5px solid #f59e0b; border-radius:10px; padding:10px 12px; margin:10px 0; background:rgba(251,191,36,.10); }
        .quote-grid { display:grid; grid-template-columns:repeat(4, minmax(160px, 1fr)); gap:14px; align-items:end; }
        .quote-grid-2 { grid-column:span 2; }
        .quote-grid-4 { grid-column:span 4; }
        .item-row-grid { display:grid; grid-template-columns:minmax(120px,.45fr) minmax(260px,1fr) minmax(90px,.25fr); gap:12px; align-items:end; margin-bottom:10px; }
        .rate-table { width:100%; border-collapse:collapse; margin-top:12px; }
        .rate-table th, .rate-table td { padding:10px; border-bottom:1px solid rgba(125,202,255,.25); vertical-align:top; }
        .rate-table th { text-align:left; background:rgba(14,116,144,.35); }
        .small-muted { font-size:12px; opacity:.78; }
        .pill { display:inline-flex; align-items:center; border:1px solid rgba(125,202,255,.4); border-radius:999px; padding:5px 10px; font-weight:900; background:rgba(255,255,255,.06); }
        .status-Draft { color:#93c5fd; }
        .status-Ready { color:#22c55e; }
        .status-Sent { color:#a78bfa; }
        .status-Submitted { color:#22c55e; }
        .status-Printed { color:#fbbf24; }
        .status-Emailed { color:#a78bfa; }
        .action-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
        .button-quiet { background:linear-gradient(135deg,#0B5E8E,#2695C1) !important; color:#fff !important; opacity:1 !important; }
        .button-secondary-link { background:linear-gradient(135deg,#0B5E8E,#2695C1) !important; color:#fff !important; opacity:1 !important; }
        .button-secondary-link:hover, .button-quiet:hover { filter:brightness(1.08); }
        .edit-select-note { margin-top:-7px; margin-bottom:12px; color:#94a3b8; font-size:12px; }

        .quote-preview-shell { max-width:980px; margin-top:16px; }
        .quote-preview { background:#fff; color:#111827 !important; border-radius:14px; padding:30px 42px 36px; margin-top:16px; max-width:920px; box-shadow:0 18px 48px rgba(0,0,0,.20); font-family:Arial, Helvetica, sans-serif; }
        .quote-preview, .quote-preview * { color:#111827 !important; -webkit-text-fill-color:initial !important; opacity:1 !important; visibility:visible !important; box-sizing:border-box; }
        .sms-template-header { display:grid; grid-template-columns:1fr .72fr; align-items:start; gap:24px; border-bottom:1px solid #d5dbe3; padding-bottom:10px; }
        .sms-template-logo { width:210px; max-height:58px; object-fit:contain; display:block; }
        .sms-template-meta { text-align:right; color:#444 !important; }
        .sms-template-quote-no { font-size:20px; font-weight:900; color:#666 !important; line-height:1.1; }
        .sms-template-date { font-size:12px; color:#666 !important; margin-top:4px; }
        .sms-thank-you { text-align:center; color:#777 !important; font-size:13px; font-style:italic; line-height:1.35; padding:12px 30px; border-bottom:1px solid #e2e8f0; }
        .sms-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px; padding:13px 8px 16px; }
        .sms-info-block { font-size:12px; line-height:1.22; }
        .sms-info-block strong, .sms-info-label { font-weight:900; color:#111827 !important; }
        .sms-info-section { margin-bottom:6px; }
        .sms-products-table { width:100%; border-collapse:collapse; margin-top:24px; font-size:11px; table-layout:fixed; }
        .sms-products-table th { font-size:8px; color:#111827 !important; background:#fff !important; border-bottom:1px solid #d1d5db; padding:3px 4px; text-align:right; }
        .sms-products-table th.product-head { text-align:left; }
        .sms-products-table td { vertical-align:top; padding:8px 5px; border-bottom:1px solid #e5e7eb; color:#111827 !important; background:#fff !important; }
        .sms-product-cell { width:64%; }
        .sms-unit-cell { width:13%; text-align:right; white-space:nowrap; }
        .sms-qty-cell { width:8%; text-align:center; white-space:nowrap; }
        .sms-extended-cell { width:15%; text-align:right; white-space:nowrap; }
        .sms-product-wrap { display:grid; grid-template-columns:64px 1fr; gap:9px; align-items:start; }
        .sms-product-img { width:58px; max-height:58px; object-fit:contain; border:0; display:block; }
        .sms-product-title { color:#2b78a6 !important; font-weight:900; line-height:1.18; font-size:12px; }
        .sms-product-sku { color:#111827 !important; font-weight:800; font-size:10px; margin-top:2px; }
        .sms-product-extra { font-size:10px; color:#555 !important; margin-top:2px; }
        .sms-summary-table { width:100%; border-collapse:collapse; margin-top:14px; font-size:11px; }
        .sms-summary-table td { padding:3px 5px; color:#111827 !important; }
        .sms-summary-label { text-align:right; font-weight:800; border-top:1px solid #111; }
        .sms-summary-dollar { width:20px; text-align:center; border-top:1px solid #111; }
        .sms-summary-value { width:110px; text-align:right; border-top:1px solid #111; }
        .sms-total-row td { font-size:14px; font-style:italic; font-weight:950; background:#f3f4f6 !important; border-top:1px solid #111; border-bottom:1px solid #111; }
        .sms-checkout-row { text-align:right; padding:22px 2px 18px; border-bottom:1px solid #e5e7eb; }
        .sms-checkout-button { display:inline-block; background:#d94242; color:#fff !important; -webkit-text-fill-color:#fff !important; padding:18px 34px; border-radius:3px; font-weight:900; font-size:18px; text-decoration:none; }
        .sms-footer-bullets { margin:14px 42px 16px; color:#666 !important; font-size:12px; line-height:1.24; }
        .sms-footer-bullets li { margin:2px 0; color:#666 !important; }
        .sms-footer-contact { color:#88b7d6 !important; text-decoration:underline; }
        .sms-footer-brand { border-top:1px solid #e5e7eb; margin-top:20px; padding-top:12px; text-align:center; color:#8a8a8a !important; font-size:12px; font-weight:700; }
        .screen-only-note { margin-top:10px; color:#94a3b8 !important; font-size:12px; }


        /* Phase 2A quote edit screen */
        .edit-shell { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(320px, .75fr); gap:16px; align-items:start; }
        .edit-card { background:rgba(255,255,255,.055); border:1px solid rgba(125,202,255,.45); border-radius:18px; padding:18px; margin:0 0 16px; }
        .edit-card h2, .edit-card h3 { margin-top:0; }
        .edit-grid { display:grid; grid-template-columns:repeat(4, minmax(150px,1fr)); gap:12px; align-items:end; }
        .edit-grid-2 { grid-column:span 2; }
        .edit-grid-4 { grid-column:span 4; }
        .edit-table-wrap { overflow-x:visible; border-radius:14px; border:1px solid rgba(125,202,255,.28); }
        .edit-line-table { width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:13px; }
        .edit-line-items-full { width:100%; }
        .edit-line-table th:nth-child(1), .edit-line-table td:nth-child(1) { width:42px; }
        .edit-line-table th:nth-child(2), .edit-line-table td:nth-child(2) { width:82px; }
        .edit-line-table th:nth-child(3), .edit-line-table td:nth-child(3) { width:170px; }
        .edit-line-table th:nth-child(4), .edit-line-table td:nth-child(4) { width:auto; }
        .edit-line-table th:nth-child(5), .edit-line-table td:nth-child(5) { width:76px; }
        .edit-line-table th:nth-child(6), .edit-line-table td:nth-child(6) { width:96px; }
        .edit-line-table th:nth-child(7), .edit-line-table td:nth-child(7) { width:110px; }
        .edit-line-table th:nth-child(8), .edit-line-table td:nth-child(8) { width:98px; }
        .edit-line-table th:nth-child(9), .edit-line-table td:nth-child(9) { width:110px; }
        .edit-line-table td, .edit-line-table th { overflow:hidden; }
        .edit-line-table input, .edit-line-table textarea { max-width:100%; }
        /* Live quote edit totals */
        .edit-line-table .cost-col,
        .edit-line-table th.cost-col {
            display: none !important;
        }
        .edit-line-total-display {
            color: #ffffff !important;
            font-weight: 900 !important;
            white-space: nowrap !important;
        }
        .edit-summary-row strong.live-total-value {
            color: #ffffff !important;
        }

        .edit-no-image-box { color:#94a3b8; font-size:12px; }
        .edit-line-table input[name^="item_name_"] { min-width:100%; }
        .edit-line-table th { background:rgba(14,116,144,.42); color:#fff; padding:9px 8px; text-align:left; white-space:nowrap; }
        .edit-line-table td { padding:8px; border-bottom:1px solid rgba(125,202,255,.18); vertical-align:top; }
        .edit-line-table input, .edit-line-table textarea { margin-bottom:0; font-size:13px; padding:9px; }
        .edit-line-table textarea { min-height:54px; resize:vertical; }
        .edit-num { text-align:right; }
        .edit-small { color:#94a3b8; font-size:12px; line-height:1.35; }
        .edit-summary-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(125,202,255,.2); }
        .edit-summary-row strong { font-size:18px; }
        .edit-toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
        .edit-danger { color:#fecaca; font-weight:800; }
        .edit-section-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }
        @media (max-width: 1150px) {
            .edit-shell { grid-template-columns:1fr; }
            .edit-grid { grid-template-columns:1fr 1fr; }
            .edit-grid-2, .edit-grid-4 { grid-column:span 2; }
        }
        @media (max-width: 720px) {
            .edit-grid { grid-template-columns:1fr; }
            .edit-grid-2, .edit-grid-4 { grid-column:span 1; }
        }


        /* Phase 2B send workflow */
        .send-shell { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:16px; align-items:start; }
        .send-card { background:rgba(255,255,255,.055); border:1px solid rgba(125,202,255,.45); border-radius:18px; padding:18px; margin:0 0 16px; }
        .send-card h2, .send-card h3 { margin-top:0; }
        .send-grid { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:12px; align-items:end; }
        .send-grid-2 { grid-column:span 2; }
        .send-card textarea { min-height:220px; }
        .send-preview-box { border:1px solid rgba(125,202,255,.35); border-radius:14px; padding:14px; background:rgba(255,255,255,.045); white-space:pre-wrap; line-height:1.45; }
        .send-warning { border:1px solid rgba(251,191,36,.7); border-left:5px solid #f59e0b; border-radius:10px; padding:10px 12px; margin:10px 0; background:rgba(251,191,36,.10); }
        .send-success { border:1px solid rgba(34,197,94,.7); border-left:5px solid #22c55e; border-radius:10px; padding:10px 12px; margin:10px 0; background:rgba(34,197,94,.10); }
        .event-list { margin:0; padding:0; list-style:none; }
        .event-list li { border-bottom:1px solid rgba(125,202,255,.18); padding:9px 0; }
        .event-time { color:#94a3b8; font-size:12px; }
        .event-type { font-weight:900; color:#7dd3fc; }
        @media (max-width: 1050px) {
            .send-shell { grid-template-columns:1fr; }
            .send-grid { grid-template-columns:1fr; }
            .send-grid-2 { grid-column:span 1; }
        }

        @media (max-width: 1000px) {
            .quote-grid, .item-row-grid { grid-template-columns:1fr; }
            .quote-grid-2, .quote-grid-4 { grid-column:span 1; }
            .sms-template-header, .sms-info-grid { grid-template-columns:1fr; }
            .sms-template-meta { text-align:left; }
            .sms-thank-you { padding-left:0; padding-right:0; }
        }

        @media print {
            @page { size: letter; margin: 0.45in; }
            html, body { background:#fff !important; color:#111827 !important; margin:0 !important; padding:0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
            .sms-cc-sidebar, .sms-cc-topbar, .qe-tabs, .option-card, .container > h1, button, .button-link, .screen-only-note { display:none !important; }
            .container { max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; background:#fff !important; border:0 !important; box-shadow:none !important; }
            .quote-preview { max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; background:#fff !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; font-size:10.5px !important; }
            .sms-template-logo { width:180px !important; }
            .sms-products-table { font-size:9.5px !important; margin-top:18px !important; }
            .sms-products-table td { padding:5px !important; }
            .sms-product-wrap { grid-template-columns:48px 1fr !important; gap:7px !important; }
            .sms-product-img { width:44px !important; max-height:44px !important; }
            .sms-product-title { font-size:10.5px !important; }
            .sms-checkout-button { padding:12px 24px !important; font-size:14px !important; }
            .sms-footer-bullets { margin-left:38px !important; font-size:10.5px !important; }
        }
/* ---- Quote preview screen fix moved from page.py ---- */
/* Loaded after the shared Command Center CSS from app_tabs().
           This prevents the app shell stylesheet from washing out quote labels,
           unit prices, quantities, extended prices, and totals on the screen view. */
        .quote-preview,
        .quote-preview * {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .quote-preview {
            background: #ffffff !important;
            color: #111827 !important;
            -webkit-text-fill-color: initial !important;
        }

        .quote-preview .sms-info-block,
        .quote-preview .sms-info-block div,
        .quote-preview .sms-info-block span,
        .quote-preview .sms-info-block strong,
        .quote-preview .sms-info-label,
        .quote-preview .sms-info-section,
        .quote-preview .sms-product-title,
        .quote-preview .sms-product-sku,
        .quote-preview .sms-product-extra,
        .quote-preview .sms-products-table,
        .quote-preview .sms-products-table td,
        .quote-preview .sms-products-table td *,
        .quote-preview .sms-summary-table,
        .quote-preview .sms-summary-table td,
        .quote-preview .sms-summary-table td *,
        .quote-preview .sms-footer-bullets,
        .quote-preview .sms-footer-bullets li,
        .quote-preview .sms-footer-contact,
        .quote-preview .sms-footer-contact a {
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .quote-preview .sms-info-block strong,
        .quote-preview .sms-info-label {
            display: inline !important;
            font-weight: 900 !important;
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
        }

        .quote-preview .sms-info-label {
            display: block !important;
            color: #79c2ff !important;
            -webkit-text-fill-color: #79c2ff !important;
            text-transform: uppercase !important;
            letter-spacing: .04em !important;
        }

        .quote-preview .sms-info-block div {
            text-align: left !important;
            line-height: 1.22 !important;
        }

        .quote-preview .sms-products-table {
            width: 100% !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            background: #ffffff !important;
        }

        .quote-preview .sms-products-table th {
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
            background: #ffffff !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .quote-preview .sms-products-table td {
            background: #ffffff !important;
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
        }

        .quote-preview .sms-unit-cell,
        .quote-preview .sms-qty-cell,
        .quote-preview .sms-extended-cell,
        .quote-preview td.sms-unit-cell,
        .quote-preview td.sms-qty-cell,
        .quote-preview td.sms-extended-cell {
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
            font-weight: 700 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .quote-preview .sms-unit-cell { width: 13% !important; text-align: right !important; white-space: nowrap !important; }
        .quote-preview .sms-qty-cell { width: 8% !important; text-align: center !important; white-space: nowrap !important; }
        .quote-preview .sms-extended-cell { width: 15% !important; text-align: right !important; white-space: nowrap !important; }

        .quote-preview .sms-summary-label,
        .quote-preview .sms-summary-dollar,
        .quote-preview .sms-summary-value,
        .quote-preview .sms-total-row td {
            color: #111827 !important;
            -webkit-text-fill-color: #111827 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .quote-preview .sms-summary-label {
            font-weight: 900 !important;
            text-align: right !important;
        }

        .quote-preview .sms-summary-value {
            font-weight: 800 !important;
            text-align: right !important;
            white-space: nowrap !important;
        }

        .quote-preview .sms-total-row td {
            background: #f3f4f6 !important;
            font-weight: 950 !important;
        }

        .quote-preview .sms-checkout-button {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }

        .quote-preview .sms-thank-you {
            color: #777777 !important;
            -webkit-text-fill-color: #777777 !important;
        }

        .quote-preview .sms-quote-title,
        .quote-preview .sms-quote-date {
            color: #555555 !important;
            -webkit-text-fill-color: #555555 !important;
        }

        @media print {
            .quote-preview .sms-products-table th,
            .quote-preview .sms-products-table td,
            .quote-preview .sms-summary-table td {
                color: #111827 !important;
                -webkit-text-fill-color: #111827 !important;
            }
            .quote-preview .sms-checkout-button {
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
            }
        }



/* =========================================================
   QUOTE MANAGER CLOUD REFINEMENTS
   Rep-facing cleanup: white logo, no search bar, centered brand,
   solid buttons/tabs, and medium-solid table headers.
   ========================================================= */
.sms-cc-brand {
    align-items: center;
}

.sms-cc-brand-logo-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 6px 0;
}

.sms-cc-logo-quote-engine {
    width: 214px;
    max-width: 100%;
}

.sms-cc-logo-fallback {
    color: #ffffff;
    font-weight: 950;
    font-size: 18px;
    letter-spacing: -.03em;
    line-height: 1.05;
    text-align: center;
}

.sms-cc-brand-title {
    margin-left: 0;
    width: 100%;
    text-align: center;
}

.sms-cc-topbar.sms-cc-topbar-quote-engine {
    grid-template-columns: 1fr auto auto;
}

.sms-cc-topbar-spacer {
    min-width: 0;
}

.sms-cc-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    padding: 7px 14px;
}

.sms-cc-user-display {
    font-weight: 950;
    color: #0f2f4a;
    white-space: nowrap;
}

.sms-cc-store-switcher.sms-cc-user-pill label {
    margin: 0;
}

button,
.button-link,
input[type=submit],
input[type=button] {
    background: var(--sms-light-blue) !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
    border: 1px solid rgba(126,200,255,.48) !important;
    box-shadow: 0 12px 24px rgba(8,41,68,.18) !important;
}

button:hover,
.button-link:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background: #a5d9ff !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
    box-shadow: 0 14px 28px rgba(8,41,68,.22) !important;
}

.button-secondary {
    background: var(--sms-medium-blue-3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.container a.button-link,
.container a.button-link:link,
.container a.button-link:visited,
.container .action-row a.button-link,
.container .edit-toolbar a.button-link,
.container .send-card a.button-link,
.container .quote-preview-shell + .action-row a.button-link {
    background: var(--sms-light-blue) !important;
    border: 1px solid rgba(126,200,255,.48) !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
    box-shadow: 0 12px 24px rgba(8,41,68,.18) !important;
}

.container a.button-link:hover,
.container .action-row a.button-link:hover,
.container .edit-toolbar a.button-link:hover,
.container .send-card a.button-link:hover {
    background: #a5d9ff !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
    box-shadow: 0 14px 28px rgba(8,41,68,.22) !important;
}

.container a.button-link.button-quiet,
.container a.button-link.button-secondary,
.container a.button-link.button-secondary-link {
    background: var(--sms-medium-blue-3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(126,200,255,.40) !important;
}

.qe-tab {
    background: var(--sms-medium-blue-3) !important;
    color: #ffffff !important;
    border: 1px solid rgba(126,200,255,.40) !important;
}

.qe-tab.active {
    background: var(--sms-light-blue) !important;
    color: var(--sms-dark-blue) !important;
    border-color: rgba(126,200,255,.52) !important;
}

.rate-table th {
    background: var(--sms-medium-blue-3) !important;
    color: #ffffff !important;
}


/* =========================================================
   QUOTE ENGINE CLOUD POLISH PASS 2
   Tighter top area, compact forms, bordered light buttons, and
   add-item row support for quote/shipping line items.
   ========================================================= */
.sms-cc-topbar.sms-cc-topbar-quote-engine {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 0 14px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
}

.sms-cc-status-pill {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
}

.sms-cc-user-pill {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 13px !important;
}

.container {
    padding-top: 14px !important;
}

.container > h1 {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

.qe-tabs {
    margin: -2px 0 18px !important;
}

button,
.button-link,
input[type=submit],
input[type=button],
.container a.button-link,
.container a.button-link:link,
.container a.button-link:visited,
.container .action-row a.button-link,
.container .edit-toolbar a.button-link,
.container .send-card a.button-link,
.container .quote-preview-shell + .action-row a.button-link {
    border: 2px solid var(--sms-medium-blue-3) !important;
}

.qe-tab.active,
button:not(:disabled),
.container a.button-link {
    border-color: var(--sms-medium-blue-3) !important;
}

.qe-tab {
    border: 1px solid rgba(126,200,255,.46) !important;
}

.option-card {
    padding: 16px !important;
    margin: 16px 0 !important;
}

.option-card h2,
.option-card h3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.section-note {
    margin: 8px 0 12px !important;
    padding: 9px 12px !important;
}

.quote-grid {
    gap: 11px 14px !important;
}

.item-row-grid {
    gap: 10px 12px !important;
    margin-bottom: 10px !important;
}

.quote-grid label,
.item-row-grid label,
.container label {
    margin-bottom: 6px !important;
}

.quote-grid input,
.quote-grid select,
.item-row-grid input,
.item-row-grid select,
.container textarea {
    min-height: 40px !important;
}

.qe-add-row-action {
    margin: 4px 0 14px !important;
}

.qe-add-row-action button {
    min-height: 38px !important;
    padding: 8px 14px !important;
}

.rate-table th {
    background: var(--sms-medium-blue-3) !important;
}

.sms-shipping-add-row {
    margin-top: 8px !important;
}


/* =========================================================
   QUOTE MANAGER POLISH PASS 3
   Name update, tighter form cards, stronger active-tab border,
   and rep-friendly section bubbles.
   ========================================================= */
.container {
    padding-top: 12px !important;
}

.sms-cc-topbar.sms-cc-topbar-quote-engine {
    min-height: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
}

.container > h1 {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

.qe-tabs {
    margin: 0 0 18px !important;
}

.qe-tab,
.qe-tab:link,
.qe-tab:visited {
    border: 1px solid rgba(126,200,255,.58) !important;
}

.qe-tab.active,
.qe-tab.active:link,
.qe-tab.active:visited {
    border: 2px solid var(--sms-medium-blue-3) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(8,41,68,.18) !important;
}

button,
.button-link,
input[type=submit],
input[type=button],
.container a.button-link,
.container a.button-link:link,
.container a.button-link:visited,
.container .action-row a.button-link,
.container .edit-toolbar a.button-link,
.container .send-card a.button-link,
.container .quote-preview-shell + .action-row a.button-link {
    border: 2px solid var(--sms-medium-blue-3) !important;
}

.qe-page-intro {
    margin-bottom: 14px !important;
}

.qe-form-shell {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

.qe-form-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--sms-medium-blue) 0%, var(--sms-medium-blue-2) 100%) !important;
    border: 1px solid var(--sms-dark-border) !important;
    border-radius: 18px !important;
    color: var(--sms-white) !important;
    box-shadow: var(--sms-card-shadow) !important;
    padding: 16px 18px 18px !important;
}

.qe-form-section::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--sms-light-blue), var(--sms-line-blue));
    pointer-events: none;
}

.qe-form-section h3 {
    margin: 0 0 12px !important;
    color: var(--sms-white) !important;
}

.qe-form-section label {
    margin-bottom: 5px !important;
    line-height: 1.15 !important;
}

.qe-form-section input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.qe-form-section select,
.qe-form-section textarea {
    min-height: 40px !important;
    height: 40px !important;
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
}

.qe-form-section textarea {
    height: 82px !important;
    min-height: 82px !important;
}

.qe-form-section .quote-grid {
    gap: 10px 14px !important;
}

.qe-form-section .item-row-grid {
    gap: 10px 12px !important;
    margin-bottom: 8px !important;
}

.qe-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.qe-section-heading-row h3 {
    margin: 0 !important;
}

.qe-inline-add-button {
    min-height: 34px !important;
    padding: 7px 14px !important;
    margin: 0 !important;
}

.qe-submit-section {
    display: flex;
    justify-content: flex-start;
}

.qe-submit-section button {
    min-height: 42px !important;
}

.shipping-rates-page .option-card,
.shipping-rates-page .qe-form-section {
    max-width: none;
}

/* =========================================================
   SHIPPING RATES SKU-FIRST POLISH
   ========================================================= */
.shipping-rates-page .shipping-sku-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, .95fr) minmax(420px, 1.8fr) minmax(110px, .35fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

.shipping-rates-page .shipping-item-card {
    margin-bottom: 12px !important;
}

.shipping-rates-page .shipping-title-input[readonly] {
    background: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
    color: #0f2f4a !important;
    -webkit-text-fill-color: #0f2f4a !important;
}

.shipping-rates-page .shipping-zip-grid {
    grid-template-columns: minmax(180px, .65fr) minmax(160px, .55fr) minmax(190px, .65fr) minmax(0, 1fr) !important;
}

.shipping-rates-page .shipping-optional-address {
    margin-top: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.shipping-rates-page .shipping-optional-address::after {
    display: none !important;
}

.shipping-rates-page .shipping-optional-address summary {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: var(--sms-medium-blue-3) !important;
    border: 1px solid rgba(126,200,255,.40) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

.qe-tab.active {
    border: 2px solid var(--sms-medium-blue-3) !important;
}

@media (max-width: 1000px) {
    .shipping-rates-page .shipping-sku-grid,
    .shipping-rates-page .shipping-zip-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   QUOTE MANAGER LINE ITEM BUTTON POLISH
   Add Item stays light-blue with medium border. Delete clears and hides rows.
   ========================================================= */
.qe-inline-add-button,
button.qe-inline-add-button {
    background: var(--sms-light-blue) !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
    border: 2px solid var(--sms-medium-blue-3) !important;
    box-shadow: 0 10px 20px rgba(8,41,68,.18) !important;
    font-weight: 950 !important;
}

.qe-inline-add-button:hover,
button.qe-inline-add-button:hover {
    background: #a5d9ff !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
}

.qe-delete-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.qe-delete-line-button,
button.qe-delete-line-button {
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: var(--sms-medium-blue-3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(126,200,255,.48) !important;
    box-shadow: none !important;
    font-weight: 900 !important;
}

.qe-delete-line-button:hover,
button.qe-delete-line-button:hover {
    background: #23577f !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.qe-delete-line-button:disabled,
button.qe-delete-line-button:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
}

.qe-form-section .item-row-grid {
    grid-template-columns: minmax(150px, .5fr) minmax(260px, 1fr) minmax(90px, .25fr) minmax(88px, .22fr) !important;
}

.shipping-rates-page .shipping-sku-grid {
    grid-template-columns: minmax(260px, .95fr) minmax(420px, 1.8fr) minmax(110px, .35fr) minmax(88px, .22fr) !important;
}

@media (max-width: 1000px) {
    .qe-form-section .item-row-grid,
    .shipping-rates-page .shipping-sku-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   SHIPPING RATES SKU DROPDOWN + DYNAMIC ROW FIX
   Starts with one row, adds rows on demand, and shows SKU-only menu.
   ========================================================= */
.shipping-rates-page .shipping-sku-field {
    position: relative !important;
}

.shipping-rates-page .shipping-sku-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 10050;
    max-height: 265px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(126,200,255,.72);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(8,41,68,.30);
    padding: 6px;
}

.shipping-rates-page .shipping-sku-menu.open {
    display: block;
}

.shipping-rates-page .shipping-sku-menu-item,
.shipping-rates-page button.shipping-sku-menu-item {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--sms-field-text) !important;
    -webkit-text-fill-color: var(--sms-field-text) !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
}

.shipping-rates-page .shipping-sku-menu-item:hover,
.shipping-rates-page button.shipping-sku-menu-item:hover {
    background: #edf6ff !important;
    color: var(--sms-dark-blue) !important;
    -webkit-text-fill-color: var(--sms-dark-blue) !important;
    transform: none !important;
}

.qe-delete-cell-empty {
    visibility: hidden !important;
    pointer-events: none !important;
}

.qe-inline-add-button,
button.qe-inline-add-button {
    border: 2px solid var(--sms-medium-blue-3) !important;
}


/* =========================================================
   QUOTE MANAGER SHIPPING DROPDOWN VISIBILITY FIX
   Keeps SKU suggestions from being clipped by dark card overflow.
   ========================================================= */
.shipping-rates-page .qe-form-shell,
.shipping-rates-page .qe-form-section,
.shipping-rates-page #shippingRateItems,
.shipping-rates-page .shipping-item-card,
.shipping-rates-page .shipping-sku-grid,
.shipping-rates-page .shipping-sku-field-wrap,
.shipping-rates-page .shipping-sku-field {
    overflow: visible !important;
}

.shipping-rates-page .qe-form-section:first-of-type {
    z-index: 40 !important;
}

.shipping-rates-page .shipping-sku-field-wrap {
    position: relative !important;
    z-index: 60 !important;
}

.shipping-rates-page .shipping-sku-field-wrap:focus-within {
    z-index: 5000 !important;
}

.shipping-rates-page .shipping-sku-menu {
    z-index: 99999 !important;
    min-height: 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Top-right signed-in pill alignment cleanup. */
.sms-cc-topbar.sms-cc-topbar-quote-engine {
    align-items: center !important;
}

.sms-cc-user-pill {
    min-height: 38px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
}

.sms-cc-user-pill label {
    line-height: 1 !important;
}

.sms-cc-user-display {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* =========================================================
   QUOTE MANAGER NEW QUOTE SKU LOOKUP + TBD SHIPPING
   Aligns New Quote line items with the Shipping Rates SKU/title pattern.
   ========================================================= */
.qe-form-section {
    overflow: visible !important;
}

#qeQuoteItems .item-row-grid,
#qeQuoteItems .qe-line-item-row {
    display: grid !important;
    grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.5fr) minmax(90px, .25fr) minmax(96px, .22fr) !important;
    gap: 12px !important;
    align-items: end !important;
    margin-bottom: 10px !important;
    position: relative !important;
    overflow: visible !important;
}

#qeQuoteItems .shipping-sku-field-wrap,
#qeQuoteItems .shipping-sku-field {
    position: relative !important;
    overflow: visible !important;
}

#qeQuoteItems .shipping-sku-menu {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 6px) !important;
    width: 100% !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    display: none !important;
    z-index: 2147483000 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(126,200,255,.70) !important;
    border-radius: 12px !important;
    box-shadow: 0 22px 46px rgba(0,0,0,.28) !important;
}

#qeQuoteItems .shipping-sku-menu.open {
    display: block !important;
}

#qeQuoteItems .shipping-sku-menu-item,
#qeQuoteItems button.shipping-sku-menu-item {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e5edf5 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    box-shadow: none !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

#qeQuoteItems .shipping-sku-menu-item:hover,
#qeQuoteItems button.shipping-sku-menu-item:hover {
    background: #e8f5ff !important;
    color: #082944 !important;
    -webkit-text-fill-color: #082944 !important;
    transform: none !important;
}

#qeQuoteItems .qe-delete-line-button:not(:disabled) {
    background: var(--sms-medium-blue-3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(126,200,255,.45) !important;
}

@media (max-width: 1000px) {
    #qeQuoteItems .item-row-grid,
    #qeQuoteItems .qe-line-item-row {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   QUOTE MANAGER HIDDEN ROW FIX
   Keep pre-rendered line item rows hidden until Add Item is clicked.
   Earlier grid !important rules overrode the hidden/style attributes.
   ========================================================= */
#qeQuoteItems .qe-line-item-row[hidden],
#qeQuoteItems .item-row-grid[hidden],
.shipping-rates-page .shipping-line-item-row[hidden],
.shipping-rates-page .shipping-sku-grid[hidden] {
    display: none !important;
}

/* =========================================================
   QUOTE MANAGER CLOUD IMPORT + ACTION BUTTON POLISH
   2026-05-27
   ========================================================= */
.qe-action-toolbar,
.container .action-row {
    align-items: center !important;
}

.qe-action-button,
.container .edit-toolbar .qe-action-button,
.container .action-row .qe-action-button,
.container a.qe-action-button,
.container a.qe-action-button:link,
.container a.qe-action-button:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126,200,255,.58) !important;
    background: rgba(255,255,255,.06) !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.qe-action-button:hover,
.container .edit-toolbar .qe-action-button:hover,
.container .action-row .qe-action-button:hover,
.container a.qe-action-button:hover {
    background: rgba(125,202,255,.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-1px);
}

.qe-danger-button,
.container .edit-toolbar .qe-danger-button,
.container .action-row .qe-danger-button {
    border-color: rgba(248,113,113,.70) !important;
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
}

.qe-danger-button:hover,
.container .edit-toolbar .qe-danger-button:hover,
.container .action-row .qe-danger-button:hover {
    background: rgba(185,28,28,.32) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.qe-inline-delete-form {
    display: inline-flex;
    margin: 0;
}

.import-action-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}

.import-action-grid form {
    margin: 0;
}

.import-action-grid button {
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126,200,255,.58) !important;
    background: rgba(255,255,255,.06) !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.import-action-grid button:hover {
    background: rgba(125,202,255,.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   QUOTE MANAGER ACTION BUTTON SIZE FIX
   Keep edit toolbar buttons consistent with top tab button sizing.
   ========================================================= */
.qe-action-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: center !important;
}

.qe-action-toolbar .qe-action-button,
.qe-action-toolbar a.qe-action-button,
.qe-action-toolbar button.qe-action-button,
.container .edit-toolbar .qe-action-button,
.container .edit-toolbar a.qe-action-button,
.container .edit-toolbar button.qe-action-button {
    width: auto !important;
    min-width: 118px !important;
    max-width: none !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.qe-action-toolbar .qe-danger-button,
.container .edit-toolbar .qe-danger-button {
    min-width: 130px !important;
}

/* =========================================================
   QUOTE MANAGER B2B IMPORT POLISH PASS
   - Compact edit toolbar action buttons
   - Overview now includes assigned rep and time-to-send columns
   ========================================================= */
.qe-action-toolbar .qe-action-button,
.qe-action-toolbar a.qe-action-button,
.qe-action-toolbar button.qe-action-button,
.container .edit-toolbar .qe-action-button,
.container .edit-toolbar a.qe-action-button,
.container .edit-toolbar button.qe-action-button {
    min-width: 116px !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
}

.qe-action-toolbar a.qe-action-button[href*="/send"],
.qe-action-toolbar a.qe-action-button[href$="?store_key=SMS"],
.qe-action-toolbar a.qe-action-button[href*="/quote-engine?"] {
    min-width: 116px !important;
}

.qe-action-toolbar .qe-danger-button,
.container .edit-toolbar .qe-danger-button {
    min-width: 126px !important;
}

.qe-overview-table {
    table-layout: auto !important;
    width: 100% !important;
}

.qe-overview-table th,
.qe-overview-table td {
    padding: 9px 8px !important;
    font-size: 14px !important;
}

.qe-overview-table th:nth-child(1),
.qe-overview-table td:nth-child(1) { width: 14%; }
.qe-overview-table th:nth-child(2),
.qe-overview-table td:nth-child(2) { width: 8%; }
.qe-overview-table th:nth-child(3),
.qe-overview-table td:nth-child(3) { width: 13%; }
.qe-overview-table th:nth-child(4),
.qe-overview-table td:nth-child(4) { width: 15%; }
.qe-overview-table th:nth-child(5),
.qe-overview-table td:nth-child(5) { width: 12%; }
.qe-overview-table th:nth-child(6),
.qe-overview-table td:nth-child(6) { width: 13%; }
.qe-overview-table th:nth-child(7),
.qe-overview-table td:nth-child(7) { width: 9%; }
.qe-overview-table th:nth-child(8),
.qe-overview-table td:nth-child(8),
.qe-overview-table th:nth-child(9),
.qe-overview-table td:nth-child(9),
.qe-overview-table th:nth-child(10),
.qe-overview-table td:nth-child(10) { width: 8%; white-space: nowrap; }


/* =========================================================
   QUOTE MANAGER EDIT TOOLBAR FINAL SIZE OVERRIDE
   2026-05-27
   Keeps edit-page action buttons compact like the top quote tabs.
   ========================================================= */
.container .option-card .edit-toolbar.qe-action-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
}

.container .option-card .edit-toolbar.qe-action-toolbar > .qe-action-button,
.container .option-card .edit-toolbar.qe-action-toolbar > a.qe-action-button,
.container .option-card .edit-toolbar.qe-action-toolbar > button.qe-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 118px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126,200,255,.58) !important;
    background: rgba(255,255,255,.06) !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.container .option-card .edit-toolbar.qe-action-toolbar > .qe-action-button:hover,
.container .option-card .edit-toolbar.qe-action-toolbar > a.qe-action-button:hover,
.container .option-card .edit-toolbar.qe-action-toolbar > button.qe-action-button:hover {
    background: rgba(125,202,255,.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

.container .option-card .edit-toolbar.qe-action-toolbar > .qe-danger-button,
.container .option-card .edit-toolbar.qe-action-toolbar > button.qe-danger-button {
    min-width: 126px !important;
    border-color: rgba(248,113,113,.70) !important;
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
}


/* =========================================================
   QUOTE MANAGER STATUS + RESPONSE TIME POLISH
   2026-05-27
   ========================================================= */
.container .pill.status-New,
.container .qe-overview-table .pill.status-New {
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
    border-color: rgba(239,68,68,.70) !important;
    background: rgba(239,68,68,.22) !important;
}
.container .pill.status-Printed,
.container .qe-overview-table .pill.status-Printed {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    border-color: rgba(251,191,36,.65) !important;
    background: rgba(251,191,36,.18) !important;
}
.container .pill.status-Sent,
.container .qe-overview-table .pill.status-Sent {
    color: #c4b5fd !important;
    -webkit-text-fill-color: #c4b5fd !important;
    border-color: rgba(167,139,250,.62) !important;
    background: rgba(124,58,237,.18) !important;
}
.container .pill.status-Purchased,
.container .pill.status-Ordered,
.container .qe-overview-table .pill.status-Purchased,
.container .qe-overview-table .pill.status-Ordered {
    color: #bbf7d0 !important;
    -webkit-text-fill-color: #bbf7d0 !important;
    border-color: rgba(34,197,94,.72) !important;
    background: rgba(34,197,94,.22) !important;
}
.container .pill.status-Rejected,
.container .pill.status-Expired,
.container .qe-overview-table .pill.status-Rejected,
.container .qe-overview-table .pill.status-Expired {
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
    border-color: rgba(239,68,68,.52) !important;
    background: rgba(239,68,68,.16) !important;
}
.container .pill.status-Archived,
.container .qe-overview-table .pill.status-Archived {
    color: #d1d5db !important;
    -webkit-text-fill-color: #d1d5db !important;
    border-color: rgba(148,163,184,.45) !important;
    background: rgba(148,163,184,.14) !important;
}
.container .qe-time-to-send {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    border: 1px solid rgba(148,163,184,.32) !important;
}
.container .qe-time-to-send.response-ok {
    color: #bbf7d0 !important;
    -webkit-text-fill-color: #bbf7d0 !important;
    background: rgba(34,197,94,.20) !important;
    border-color: rgba(34,197,94,.58) !important;
}
.container .qe-time-to-send.response-late {
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
    background: rgba(239,68,68,.20) !important;
    border-color: rgba(239,68,68,.58) !important;
}
.container .qe-time-to-send.response-missing,
.container .qe-time-to-send:empty {
    display: none !important;
}

/* Force compact edit action buttons after older button rules. */
.container .option-card .edit-toolbar.qe-action-toolbar > .qe-action-button,
.container .option-card .edit-toolbar.qe-action-toolbar > a.qe-action-button,
.container .option-card .edit-toolbar.qe-action-toolbar > button.qe-action-button {
    min-width: 112px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
}
.container .option-card .edit-toolbar.qe-action-toolbar > .qe-danger-button,
.container .option-card .edit-toolbar.qe-action-toolbar > button.qe-danger-button {
    min-width: 120px !important;
}

/* =========================================================
   QUOTE MANAGER FINAL BUTTON/PAGINATION OVERRIDES
   2026-05-27
   Makes quote action buttons and pagination buttons match the compact top tabs.
   ========================================================= */
.container .option-card .action-row,
.container .quote-manager-page .action-row,
.container .qe-action-toolbar,
.container .edit-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

.container .option-card .action-row > a.button-link,
.container .option-card .action-row > button,
.container .option-card .action-row > form > button,
.container .option-card .action-row > .qe-action-button,
.container .qe-action-toolbar > a,
.container .qe-action-toolbar > button,
.container .edit-toolbar > a,
.container .edit-toolbar > button,
.container .edit-toolbar > form > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 112px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126,200,255,.58) !important;
    background: rgba(255,255,255,.06) !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.container .option-card .action-row > a.button-link:hover,
.container .option-card .action-row > button:hover,
.container .option-card .action-row > form > button:hover,
.container .qe-action-toolbar > a:hover,
.container .qe-action-toolbar > button:hover,
.container .edit-toolbar > a:hover,
.container .edit-toolbar > button:hover,
.container .edit-toolbar > form > button:hover {
    background: rgba(125,202,255,.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

.container .option-card .action-row .qe-danger-button,
.container .option-card .action-row form .qe-danger-button,
.container .edit-toolbar .qe-danger-button,
.container .qe-action-toolbar .qe-danger-button {
    min-width: 118px !important;
    border-color: rgba(248,113,113,.70) !important;
    color: #fecaca !important;
    -webkit-text-fill-color: #fecaca !important;
    background: rgba(127,29,29,.08) !important;
}

.container .option-card .action-row .qe-danger-button:hover,
.container .option-card .action-row form .qe-danger-button:hover,
.container .edit-toolbar .qe-danger-button:hover,
.container .qe-action-toolbar .qe-danger-button:hover {
    background: rgba(239,68,68,.18) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keep longer labels readable without making giant buttons. */
.container .option-card .action-row a.button-link[href*="/print"],
.container .option-card .action-row a.button-link[href*="/send"],
.container .option-card .action-row a.button-link.button-quiet,
.container .option-card .action-row button[onclick*="print"] {
    min-width: 132px !important;
}

/* Overview pagination controls: match the quote tab button style and keep layout tidy. */
.container .qe-pagination,
.container .qe-pagination-top,
.container .qe-pagination-bottom,
.container .quote-pagination,
.container .pagination-row,
.container .qe-overview-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 10px 0 14px 0 !important;
}

.container .qe-page-link,
.container a.qe-page-link,
.container .quote-pagination .button-link,
.container .pagination-row .button-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 92px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(126,200,255,.58) !important;
    background: rgba(255,255,255,.06) !important;
    color: var(--sms-light-blue) !important;
    -webkit-text-fill-color: var(--sms-light-blue) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.container .qe-page-link:hover,
.container a.qe-page-link:hover,
.container .quote-pagination .button-link:hover,
.container .pagination-row .button-link:hover {
    background: rgba(125,202,255,.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.container .qe-page-link.disabled,
.container a.qe-page-link.disabled,
.container .quote-pagination .button-link.disabled,
.container .pagination-row .button-link.disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.container .qe-per-page-select,
.container select[name="per_page"],
.container .quote-pagination select {
    max-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
}