/* Reparix interface. Screen-only so printed invoices, receipts and labels retain their layout.
   Legacy screens still own their layout and behaviours; these shared components own appearance. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&display=swap');

@media screen {
body[data-rx-surface] {
    /* Reparix brand: the logo's deep navy and teal. */
    --rx-brand: #0d7d74;
    --rx-brand-hover: #0f9085;
    --rx-link: #3fd6c4;
    --rx-bg: #070c14;
    --rx-surface: #0e1520;
    --rx-raised: #162030;
    --rx-border: #213044;
    --rx-text: #e8edf3;
    --rx-muted: #a3afbd;
    --rx-subtle: #7c8999;
    --rx-tint: #0e2a2c;
    --rx-success: #4fd6a3;
    --rx-warning: #f2b84b;
    --rx-danger: #ff8d97;
    --rx-font: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --rx-success-solid: #176344; --rx-warning-solid: #805300; --rx-danger-solid: #b42340;
    /* Bridge existing component tokens without changing their behaviour. */
    --primary-gradient: linear-gradient(var(--rx-brand), var(--rx-brand));
    --background-start: var(--rx-bg); --background-end: var(--rx-bg);
    --glass-bg: var(--rx-surface); --glass-border: var(--rx-border);
    --text-primary: var(--rx-text); --text-secondary: var(--rx-muted); --text-muted: var(--rx-subtle);
    --hover-overlay: #ffffff07; --active-overlay: var(--rx-tint);
    --accent: var(--rx-link); --accent-soft: var(--rx-tint);
    --trace: var(--rx-link); --trace-soft: var(--rx-tint);
    --success: var(--rx-success); --ok: var(--rx-success); --ok-soft: #0e2b22;
    --warning: var(--rx-warning); --warn: var(--rx-warning); --warn-soft: #2d2412;
    --error: var(--rx-danger); --danger: var(--rx-danger); --danger-soft: #331820;
    --info: var(--rx-link); --font-display: var(--rx-font); --font-mono: var(--rx-font);
    color-scheme: dark;
    background: var(--rx-bg) !important;
    color: var(--rx-text);
    font-family: var(--rx-font) !important;
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body[data-rx-surface][data-theme="light"] {
    --rx-link: #0b6e66; --rx-bg: #f5f6f5; --rx-surface: #ffffff; --rx-raised: #f0f2f1;
    --rx-border: #d4d9e4; --rx-text: #202637; --rx-muted: #505e73; --rx-subtle: #626f82;
    --rx-tint: #e5f3f1; --rx-success: #176344; --rx-warning: #805300; --rx-danger: #b42340;
    --rx-success-solid: #176344; --rx-warning-solid: #805300; --rx-danger-solid: #b42340;
    --hover-overlay: #15192305; --ok-soft: #e6f5ee; --warn-soft: #fff4da; --danger-soft: #fff0f3;
    color-scheme: light;
}
body[data-rx-surface] *, body[data-rx-surface] *::before, body[data-rx-surface] *::after { box-sizing: border-box; }
/* SweetAlert positions the animated tick inside a content-box icon. Including
   its border in the width makes the two strokes overlap into a cross in toasts. */
body[data-rx-surface] .swal2-icon,
body[data-rx-surface] .swal2-success-ring { box-sizing: content-box; }
body[data-rx-surface] :is(h1,h2,h3,h4,h5,h6,input,select,textarea,button,.btn) { font-family: var(--rx-font) !important; }
body[data-rx-surface] :is(h1,h2,h3,h4) { color: var(--rx-text); letter-spacing: -.025em; text-transform: none; }
body[data-rx-surface] :is(h1,.page-title) { font-size: clamp(24px,2.3vw,32px); font-weight: 600; line-height: 1.2; background: none; -webkit-text-fill-color: currentColor; }
body[data-rx-surface] :is(h2,.section-title) { font-weight: 600; }
body[data-rx-surface] :is(.section-title,.card-header h2) { font-size: 18px; }
body[data-rx-surface] a { text-underline-offset: 3px; }
body[data-rx-surface] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--rx-link) !important; outline-offset: 3px; }
body[data-rx-surface] :is(button,.btn) { cursor: pointer; }
body[data-rx-surface] :is(button:disabled,.btn[aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }
body[data-rx-surface] :is(.gradient-bg,.main-content,.content-wrapper) { background: var(--rx-bg) !important; }
body[data-rx-surface] :is(.glass-card,.card,.stat-card,.dashboard-section,.login-card,.auth-card,.panel,.settings-section,.filter-section,.filters-section,.filter-bar,.table-container,.ticket-card,.modal-content,.modal-dialog,.swal2-popup) {
    background: var(--rx-surface) !important; border: 1px solid var(--rx-border) !important;
    border-radius: 8px !important; box-shadow: none !important; backdrop-filter: none !important;
    color: var(--rx-text); transform: none !important;
}
body[data-rx-surface] :is(.glass-card,.stat-card,.dashboard-section,.card,.btn,.action-btn)::before,
body[data-rx-surface] :is(.glass-card,.stat-card,.dashboard-section,.card,.btn,.action-btn)::after { background-image: none !important; box-shadow: none !important; }
body[data-rx-surface] :is(.btn,.action-btn,.pay-btn,.submit-btn,.login-btn) {
    border-radius: 5px !important; padding: 9px 15px; font-size: 14px; font-weight: 500;
    letter-spacing: 0 !important; text-transform: none !important; line-height: 1.4;
    box-shadow: none !important; background-image: none !important; transform: none !important;
    animation: none !important; min-height: 38px; text-decoration: none;
    transition: background-color .12s ease,border-color .12s ease;
}
body[data-rx-surface] :is(.btn-primary,.pay-btn,.submit-btn,.login-btn) { background: var(--rx-brand) !important; border: 1px solid var(--rx-brand) !important; color: #fff !important; }
body[data-rx-surface] :is(.btn-secondary,.btn-outline,.action-btn) { background: var(--rx-surface) !important; border: 1px solid var(--rx-border) !important; color: var(--rx-text) !important; }
body[data-rx-surface] :is(.btn-primary,.pay-btn):hover { background: var(--rx-brand-hover) !important; border-color: var(--rx-brand-hover) !important; }
body[data-rx-surface] :is(.btn-secondary,.btn-outline,.action-btn):hover { background: var(--rx-raised) !important; border-color: var(--rx-subtle) !important; }
body[data-rx-surface] :is(.btn-success) { background: #176344 !important; border-color: #176344 !important; color: #fff !important; }
body[data-rx-surface] :is(.btn-danger) { background: #b42340 !important; border-color: #b42340 !important; color: #fff !important; }
body[data-rx-surface] :is(.btn-warning) { background: #805300 !important; border-color: #805300 !important; color: #fff !important; }
body[data-rx-surface] :is(.btn-sm,.btn-small) { padding: 6px 10px; min-height: 32px; font-size: 13px; }
body[data-rx-surface] :is(.form-input,.form-control,.form-select,.search-input,input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="number"],input[type="tel"],input[type="date"],input[type="datetime-local"],select,textarea) {
    background: var(--rx-bg) !important; color: var(--rx-text) !important; border: 1px solid var(--rx-border) !important;
    border-radius: 5px !important; box-shadow: none; font-size: 14px; min-height: 40px;
}
body[data-rx-surface] input::placeholder, body[data-rx-surface] textarea::placeholder { color: var(--rx-subtle); opacity: 1; }
body[data-rx-surface] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--rx-brand); }
body[data-rx-surface] :is(.form-label,.form-group label) { font-weight: 500; font-size: 14px; color: var(--rx-text); text-transform: none; letter-spacing: 0; }
body[data-rx-surface] :is(.form-help,.text-muted,.page-subtitle) { color: var(--rx-muted); }
body[data-rx-surface] table { border-collapse: collapse; font-size: 14px; width: 100%; }
body[data-rx-surface] :is(th,td) { border-color: var(--rx-border) !important; padding: 12px 16px; text-align: left; }
body[data-rx-surface] th { background: var(--rx-raised) !important; color: var(--rx-muted) !important; font-weight: 500; font-size: 13px; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; }
body[data-rx-surface] tbody tr { border-bottom: 1px solid var(--rx-border); }
body[data-rx-surface] tbody tr:hover { background: var(--hover-overlay) !important; }
body[data-rx-surface] :is(.table-container,.table-responsive,.table-wrapper) { overflow-x: auto; }
body[data-rx-surface] :is(.page-header,.dashboard-welcome) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
body[data-rx-surface] :is(.page-actions,.header-buttons,.filter-controls,.search-controls) { flex-wrap: wrap; gap: 10px; }
body[data-rx-surface] :is(.badge,.status-badge,.ticket-status,.priority-badge,.welcome-role) { border-radius: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body[data-rx-surface] :is(.empty-state,.no-results) { padding: 36px 24px; color: var(--rx-muted); text-align: center; }
body[data-rx-surface] :is(.empty-icon,.stat-icon) { display: none; }
body[data-rx-surface] :is(.alert,.notice) { border-radius: 6px; box-shadow: none; }
body[data-rx-surface] :is(.alert-success) { background: var(--ok-soft); color: var(--rx-success); }
body[data-rx-surface] :is(.alert-danger,.alert-error) { background: var(--danger-soft); color: var(--rx-danger); }
body[data-rx-surface] :is(.alert-warning) { background: var(--warn-soft); color: var(--rx-warning); }
body[data-rx-surface] :is(.modal-content,.modal-dialog,.swal2-popup) { box-shadow: 0 18px 60px #0005 !important; max-width: calc(100vw - 24px); }
body[data-rx-surface] :is(.modal-header,.modal-footer,.card-header,.section-footer) { border-color: var(--rx-border); background: transparent; }
body[data-rx-surface] :is(.modal-title) { font-size: 20px; }
body[data-rx-surface] .rx-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-block; vertical-align: middle; }
body[data-rx-surface] .rx-skip { position: fixed; left: 16px; top: -80px; z-index: 99999; background: var(--rx-brand); color: white; padding: 12px; border-radius: 4px; }
body[data-rx-surface] .rx-skip:focus { top: 12px; }
.rx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Staff shell */
body[data-rx-surface="staff"] .header-unified { padding: 0 !important; border: 0 !important; margin-bottom: 28px; }
body[data-rx-surface="staff"] .header-top { background: var(--rx-surface) !important; border: 0 !important; border-bottom: 1px solid var(--rx-border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 24px; min-height: 72px; }
body[data-rx-surface="staff"] .app-title { font-size: 18px !important; font-weight: 600; background: none; -webkit-text-fill-color: currentColor; }
body[data-rx-surface="staff"] .app-title img { height: 36px !important; }
body[data-rx-surface="staff"] :is(.notification-button,.user-button,.time-clock-button,.hamburger-btn) { background: var(--rx-surface) !important; color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 5px; box-shadow: none !important; }
body[data-rx-surface="staff"] :is(.app-sidebar,.mobile-nav-drawer,.nav-dropdown,.notification-dropdown,.user-dropdown) { background: var(--rx-surface) !important; border-color: var(--rx-border); border-radius: 6px; box-shadow: none; backdrop-filter: none; }
body[data-rx-surface="staff"] :is(.sb-item,.sb-subitem,.mobile-nav-link,.mobile-nav-sublink,.mobile-nav-group-header,.nav-tab) { color: var(--rx-muted); font-size: 14px; font-weight: 500; border-radius: 5px; }
body[data-rx-surface="staff"] :is(.sb-item,.sb-subitem,.mobile-nav-link,.mobile-nav-sublink,.nav-tab).active { color: var(--rx-link) !important; background: var(--rx-tint) !important; box-shadow: none !important; }
body[data-rx-surface="staff"] :is(.sb-item,.sb-subitem):hover { background: var(--rx-raised); color: var(--rx-text); }
body[data-rx-surface="staff"] .sb-sub { border-color: var(--rx-border); }
body[data-rx-surface="staff"] .sidebar-collapse-btn { color: var(--rx-muted); background: transparent; }
body[data-rx-surface="staff"] .dashboard-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); gap: 20px; align-items: start; }
body[data-rx-surface="staff"] .dashboard-column { display: grid; gap: 20px; min-width: 0; }
body[data-rx-surface="staff"] .dashboard-section { padding: 22px; min-width: 0; }
body[data-rx-surface="staff"] .quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body[data-rx-surface="staff"] .action-btn { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; min-height: 46px; padding: 10px 12px; }
body[data-rx-surface="staff"] .action-icon { font-size: 18px; margin: 0; }
body[data-rx-surface="staff"] .ticket-item { background: transparent; border: 0; border-bottom: 1px solid var(--rx-border); border-radius: 0; padding: 14px 0; box-shadow: none; transform: none; }
body[data-rx-surface="staff"] .stats-grid { gap: 16px; }
body[data-rx-surface="staff"] .stat-card { padding: 20px; }
body[data-rx-surface="staff"] .stat-number { font-size: 26px; font-weight: 600; color: var(--rx-text); background: none; -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums; }
body[data-rx-surface="staff"] .rx-desk-toolbar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 20px 0; }
body[data-rx-surface="staff"] .rx-desk-search { display: flex; gap: 8px; flex: 1; max-width: 560px; }
body[data-rx-surface="staff"] .rx-desk-search input { width: 100%; min-width: 120px; padding: 10px 12px; }
body[data-rx-surface="staff"] .rx-queue { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 0 24px; border: 1px solid var(--rx-border); border-radius: 8px; overflow: hidden; background: var(--rx-surface); }
body[data-rx-surface="staff"] .rx-queue a { padding: 20px 24px; border-right: 1px solid var(--rx-border); text-decoration: none; color: var(--rx-text); }
body[data-rx-surface="staff"] .rx-queue a:last-child { border-right: 0; }
body[data-rx-surface="staff"] .rx-queue a:hover { background: var(--rx-raised); }
body[data-rx-surface="staff"] .rx-queue strong { display: block; font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
body[data-rx-surface="staff"] .rx-queue span { color: var(--rx-muted); }
body[data-rx-surface="staff"] .rx-business-summary { margin-top: 24px; }
body[data-rx-surface="staff"] .ticket-tabs-bar { background: var(--rx-surface) !important; border-bottom: 1px solid var(--rx-border); gap: 4px; overflow-x: auto; }
body[data-rx-surface="staff"] .ticket-tab-btn { background: transparent !important; color: var(--rx-muted); border-radius: 0 !important; box-shadow: none !important; font-weight: 500; white-space: nowrap; padding: 12px 16px; }
body[data-rx-surface="staff"] .ticket-tab-btn.active { color: var(--rx-link) !important; border-bottom: 2px solid var(--rx-link) !important; }
body[data-rx-surface="staff"] :is(.ticket-sticky-header,.ticket-info-section,.ticket-details-header) { background: var(--rx-surface) !important; border-color: var(--rx-border); box-shadow: none !important; border-radius: 6px; }
@media (min-width: 1025px) {
    body[data-rx-surface="staff"] { --sidebar-w: 224px; --sidebar-rail: 62px; --topbar-h: 72px; }
    body[data-rx-surface="staff"].has-sidebar .app-sidebar { top: 88px; bottom: 16px; left: 16px; border: 1px solid var(--rx-border); }
    body[data-rx-surface="staff"].has-sidebar .gradient-bg { padding-top: 112px; }
}
/* Customer portal, public forms and authentication */
body[data-rx-surface="portal"] { font-size: 15px; }
body[data-rx-surface="portal"] .container { max-width: 1200px; padding: 32px 24px; }
body[data-rx-surface="portal"] .portal-nav { background: var(--rx-surface); backdrop-filter: none; border-bottom: 1px solid var(--rx-border); box-shadow: none; }
body[data-rx-surface="portal"] .nav-container { max-width: 1440px; gap: 24px; padding: 16px 24px; flex-wrap: wrap; }
body[data-rx-surface="portal"] .nav-links { gap: 4px; flex-wrap: wrap; }
body[data-rx-surface="portal"] .nav-link { font-size: 14px; padding: 8px 10px; border-radius: 4px; color: var(--rx-muted); }
body[data-rx-surface="portal"] .nav-link.active { background: var(--rx-tint); color: var(--rx-link); }
body[data-rx-surface="portal"] :is(.service-tag,.detail-header) { background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: 8px; box-shadow: none; padding: 28px; margin-bottom: 24px; }
body[data-rx-surface="portal"] .tag-main { padding: 0; }
body[data-rx-surface="portal"] .tag-greeting { font-size: 28px; font-weight: 500; }
body[data-rx-surface="portal"] .tag-greeting span { color: var(--rx-text); }
body[data-rx-surface="portal"] .tag-eyebrow { color: var(--rx-muted); font-family: var(--rx-font); font-size: 14px; text-transform: none; letter-spacing: 0; }
body[data-rx-surface="portal"] .tag-perf { display: none; }
body[data-rx-surface="portal"] .tag-manifest { background: transparent; border-left: 1px solid var(--rx-border); padding: 0 0 0 28px; margin-left: 28px; }
body[data-rx-surface="portal"] :is(.manifest-label,.manifest-value,.info-label,.ticket-number) { font-family: var(--rx-font); text-transform: none; letter-spacing: 0; }
body[data-rx-surface="portal"] .ticket-item { background: var(--rx-surface); border-radius: 6px; box-shadow: none; transform: none; }
body[data-rx-surface="portal"] .ticket-link { color: var(--rx-link); }
body[data-rx-surface="portal"] .rx-repair-summary { border-left: 3px solid var(--rx-brand); padding: 20px 24px; background: var(--rx-surface); margin-bottom: 24px; }
body[data-rx-surface="portal"] .rx-repair-summary p { color: var(--rx-muted); margin: 6px 0 0; max-width: 72ch; }
body[data-rx-surface="auth"] .login-container { max-width: 440px; }
body[data-rx-surface="auth"] :is(.login-header,.auth-header) { text-align: left; }
body[data-rx-surface="auth"] :is(.login-card,.auth-card) { padding: 28px !important; }
body[data-rx-surface="auth"] :is(.login-title,.auth-title) { background: none; -webkit-text-fill-color: currentColor; color: var(--rx-text); }
body[data-rx-surface="auth"] .login-footer a { color: var(--rx-link); }
body[data-rx-surface="admin"] :is(.header,.sidebar,.content,.main-content,.stat-box,.section) { background: var(--rx-surface); color: var(--rx-text); border-color: var(--rx-border); box-shadow: none; }
@media (max-width: 1024px) {
    body[data-rx-surface="staff"] .dashboard-grid { grid-template-columns: minmax(0,1fr); }
    body[data-rx-surface="staff"] .header-top { padding: 12px 16px; }
}
@media (max-width: 600px) {
    body[data-rx-surface] .page-header { align-items: flex-start; }
    body[data-rx-surface] :is(.form-row,.form-grid) { grid-template-columns: minmax(0,1fr); }
    body[data-rx-surface] :is(.btn,.nav-link) { min-height: 42px; }
    body[data-rx-surface="staff"] .rx-queue { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body[data-rx-surface="staff"] .rx-queue a { padding: 16px; border-bottom: 1px solid var(--rx-border); }
    body[data-rx-surface="staff"] .rx-queue a:nth-child(2) { border-right: 0; }
    body[data-rx-surface="staff"] .rx-queue a:nth-child(n+3) { border-bottom: 0; }
    body[data-rx-surface="staff"] .dashboard-section { padding: 16px; }
    body[data-rx-surface="portal"] .container { padding: 20px 16px; }
    body[data-rx-surface="portal"] .service-tag { display: block; padding: 20px; }
    body[data-rx-surface="portal"] .tag-manifest { border-left: 0; border-top: 1px solid var(--rx-border); padding: 20px 0 0; margin: 20px 0 0; }
    body[data-rx-surface="portal"] .nav-container { padding: 12px 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-rx-surface] *, body[data-rx-surface] *::before, body[data-rx-surface] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
}

@media screen {
body[data-rx-surface="staff"] .glass-card.main-content { background: var(--rx-bg) !important; border: 0 !important; padding: 12px 24px 32px; }
body[data-rx-surface="staff"] .rx-desk-search .btn { white-space: nowrap; }
body[data-rx-surface="staff"] .rx-recent-table { min-width: 570px; }
body[data-rx-surface="staff"] .rx-recent-table td { vertical-align: middle; padding: 14px 12px; }
body[data-rx-surface="staff"] .rx-recent-table a { color: var(--rx-link); font-weight: 500; }
body[data-rx-surface="staff"] .rx-device-name { display: block; color: var(--rx-muted); font-size: 13px; margin-top: 3px; }
body[data-rx-surface="staff"] .rx-recent-table .status-badge { background: var(--rx-raised); color: var(--rx-text); font-size: 12px; padding: 3px 7px; white-space: nowrap; }
body[data-rx-surface="staff"] .rx-queue-filter { margin: 0 0 16px; padding: 12px 16px; background: var(--rx-tint); color: var(--rx-text); border-radius: 5px; }
body[data-rx-surface="staff"] .rx-queue-filter a { color: var(--rx-link); margin-left: 8px; }
body[data-rx-surface="staff"] .mobile-nav-group-header { width: 100%; border: 0; background: none; text-align: left; }
body[data-rx-surface="staff"] :is(.board-column,.board-ticket-card,.ticket-info-section,.ticket-sticky-header,.ticket-sticky-controls) { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; box-shadow: none !important; border-radius: 6px !important; backdrop-filter: none; }
body[data-rx-surface="staff"] .board-column-header { background: var(--rx-raised) !important; border-color: var(--rx-border); }
body[data-rx-surface="staff"] .board-ticket-card:hover { transform: none !important; border-color: var(--rx-link) !important; }
@media(max-width:600px) { body[data-rx-surface="staff"] .glass-card.main-content { padding: 8px 0 24px; } }
}

@media screen {
body[data-rx-surface]::before, body[data-rx-surface]::after { content: none !important; }
body[data-rx-surface] :is(.header-shine,.shop-hero,.card-header-strip,.device-card)::before,
body[data-rx-surface] :is(.header-shine,.shop-hero,.card-header-strip,.device-card)::after { content: none !important; }
body[data-rx-surface] :is(.pos-left,.pos-right,.product-card,.cart-item,.totals-section,.invoice-item,.invoices-summary,.info-grid,.info-item,.error-card,.login-box,.auth-container,.device-card,.enquiry-modal,.modal-box,.status-section,.pos-display,.ticket-display,.ticket-input-form,.passcode-capture-form) {
    background: var(--rx-surface) !important; color: var(--rx-text); border-color: var(--rx-border) !important; border-radius: 8px; box-shadow: none !important; backdrop-filter: none !important;
}
body[data-rx-surface] :is(.product-card,.device-card):hover { transform: none !important; border-color: var(--rx-link) !important; }
body[data-rx-surface] :is(.shop-hero,.shop-footer,.card-header-strip,.display-header,.welcome-screen) { background: var(--rx-surface) !important; color: var(--rx-text); box-shadow: none !important; border-color: var(--rx-border); }
body[data-rx-surface] :is(.device-price,.device-info h3,.ticket-number,.shop-hero h1) { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--rx-text); }
body[data-rx-surface] :is(.buy-button,.btn-submit,.device-cta,.btn-accept,.passcode-confirm-btn) { background: var(--rx-brand) !important; color: white !important; border-radius: 5px; box-shadow: none !important; transform: none !important; }
body[data-rx-surface] :is(.shop-feature,.device-specs span,.device-manufacturer,.info-row,.issue-description,.contact-option,.deposit-amount) { background: var(--rx-raised) !important; color: var(--rx-text); border-color: var(--rx-border); box-shadow: none; }
body[data-rx-surface] :is(.ticket-input-form,.passcode-capture-form) :is(h1,h2,h3,p,label) { color: var(--rx-text) !important; }
body[data-rx-surface="portal"] .rx-portal-logo { width: 36px; height: 36px; object-fit: contain; }
body[data-rx-surface="portal"] .rx-repair-summary .btn { display: inline-flex; margin-top: 16px; }
body[data-rx-surface="portal"] .theme-option[data-theme="default"] .theme-preview { background: #0e1520; border: 1px solid #0d7d74; }
body[data-rx-surface="portal"] .theme-option[data-theme="light"] .theme-preview { background: #f5f6f5; border: 1px solid #0d7d74; }
body[data-rx-surface="portal"] .theme-option input:checked + .theme-content { border-color: var(--rx-link); background: var(--rx-tint); }
body[data-rx-surface="admin"] .navbar { background: var(--rx-surface); color: var(--rx-text); border-bottom: 1px solid var(--rx-border); box-shadow: none; }
body[data-rx-surface="admin"] :is(.section,.info-item,.stat-card,.card) { color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 8px; }
body[data-rx-surface="admin"] :is(.stat-label,.info-label,.info-value,.section-title,.card-title,.table td) { color: var(--rx-text); }
body[data-rx-surface="admin"] :is(.navbar-brand,.navbar a) { color: var(--rx-text); }
body[data-rx-surface="admin"] .stat-value { color: var(--rx-link); }
body[data-rx-surface="public"] :is(.muted,.shop-description,.device-description) { color: var(--rx-muted); }
}
@media screen {
body[data-rx-surface] {
    --primary-color: var(--rx-brand); --primary: var(--rx-brand); --primary-light: var(--rx-link);
    --bg-primary: var(--rx-bg); --bg-secondary: var(--rx-surface); --bg-tertiary: var(--rx-raised);
    --border-color: var(--rx-border); --hover-bg: var(--rx-raised); --card-bg: var(--rx-surface);
}
body[data-rx-surface="staff"] .dashboard-welcome { padding: 0; margin: 0 0 20px; }
body[data-rx-surface="staff"] .dashboard-welcome .page-title { margin: 0; }
body[data-rx-surface="staff"] .dashboard-welcome .page-subtitle { margin: 8px 0 0; }
body[data-rx-surface="staff"] :is(.board-ticket-card,.board-column)::before,
body[data-rx-surface="staff"] :is(.board-ticket-card,.board-column)::after { content: none !important; }
body[data-rx-surface="staff"] :is(.board-ticket-card,.board-column) { border-width: 1px !important; animation: none !important; }
body[data-rx-surface="staff"] .board-ticket-number { color: var(--rx-link); }
body[data-rx-surface="staff"] .board-ticket-customer { color: var(--rx-text); }
body[data-rx-surface="staff"] :is(.board-ticket-device,.board-ticket-issue,.board-ticket-date) { color: var(--rx-muted); }
body[data-rx-surface="staff"] .board-ticket-cost { color: var(--rx-success); }
body[data-rx-surface="staff"] :is(.board-ticket-priority,.board-urgency-badge,.board-paid-badge) { border-radius: 4px; animation: none !important; box-shadow: none !important; text-transform: none; font-weight: 500; }
body[data-rx-surface="staff"] .board-ticket-priority { background: var(--rx-raised) !important; color: var(--rx-text); border: 1px solid var(--rx-border); }
body[data-rx-surface="staff"] :is(.board-urgency-badge.overdue,.board-paid-badge--unpaid,.board-paid-badge--invoice-overdue) { background: var(--danger-soft); color: var(--rx-danger); }
body[data-rx-surface="staff"] :is(.board-urgency-badge.urgent,.board-urgency-badge.soon) { background: var(--warn-soft); color: var(--rx-warning); }
body[data-rx-surface="staff"] .board-paid-badge--paid { background: var(--ok-soft); color: var(--rx-success); }
body[data-rx-surface="staff"] .board-paid-badge--partial { background: var(--rx-tint); color: var(--rx-link); }
body[data-rx-surface="staff"] .rx-filtered-board .board-columns { width: 100%; }
body[data-rx-surface="staff"] .rx-filtered-board .board-column { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
body[data-rx-surface="staff"] .rx-filtered-board .board-column-content { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 16px; align-content: start; max-height: none; }
body[data-rx-surface="staff"] .rx-filtered-board .board-ticket-card { margin: 0; }
body[data-rx-surface="staff"] .rx-board-empty { padding: 20px 12px; color: var(--rx-muted); font-size: 14px; }
body[data-rx-surface="staff"] :is(.ticket-modal-content,.ticket-details-content) { background: var(--rx-surface) !important; color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 8px !important; }
@media(max-width:600px) {
    body[data-rx-surface="staff"] .rx-filtered-board .board-column-content { grid-template-columns: minmax(0,1fr); }
    body[data-rx-surface="staff"] #board-search-container { flex-basis: 100% !important; max-width: none !important; margin: 0 !important; order: 3; }
}
}
@media screen and (max-width:1024px) {
    body[data-rx-surface="staff"] .header-top { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px; min-height: 64px; }
    body[data-rx-surface="staff"] .app-title { flex: 1; min-width: 0; max-width: none !important; overflow: hidden; font-size: 16px !important; gap: 8px !important; }
    body[data-rx-surface="staff"] .app-title > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body[data-rx-surface="staff"] .app-title > span > span { display: none; }
    body[data-rx-surface="staff"] .header-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: auto !important; gap: 6px !important; flex-shrink: 0; }
    body[data-rx-surface="staff"] :is(.hamburger-btn,.notification-button,.user-button) { min-width: 36px; width: 36px; height: 36px; padding: 6px !important; justify-content: center; margin: 0 !important; }
    body[data-rx-surface="staff"] .user-button { font-size: 0; gap: 0; }
    body[data-rx-surface="staff"] .user-button > span { display: none; }
    body[data-rx-surface="staff"] .user-avatar { width: 24px; height: 24px; font-size: 12px; }
    body[data-rx-surface="staff"] .hamburger-btn { order: 3; }
    body[data-rx-surface="staff"] .gradient-bg { padding-top: 100px !important; }
    body[data-rx-surface="staff"] .header-unified { margin-bottom: 0; }
    body[data-rx-surface="staff"] .welcome-message { text-align: left; justify-content: flex-start; }
}
@media screen {
body[data-rx-surface="auth"] :is(.login-container,.auth-container,.reset-container,.forgot-container) { width: calc(100% - 32px); max-width: 440px; background: var(--rx-surface) !important; color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 8px !important; box-shadow: none !important; padding: 28px !important; }
body[data-rx-surface="auth"] .login-container :is(.glass-card,.login-card) { background: transparent !important; border: 0 !important; padding: 0 !important; }
body[data-rx-surface="auth"] :is(.login-header,.header) :is(h1,h2) { color: var(--rx-text); text-align: left; }
body[data-rx-surface="auth"] :is(.subtitle,.login-header p,.header p,.feature-text) { color: var(--rx-muted); }
body[data-rx-surface="auth"] :is(.btn-login,button[type="submit"]) { background: var(--rx-brand) !important; color: #fff !important; border: 0; border-radius: 5px; padding: 12px 18px; box-shadow: none !important; }
body[data-rx-surface="auth"] .feature-icon { display: none; }
body[data-rx-surface="auth"] :is(.features,.login-footer) { border-color: var(--rx-border); }
body[data-rx-surface="auth"] a { color: var(--rx-link); }
body[data-rx-surface="portal"] .info-label { color: var(--rx-muted) !important; }
body[data-rx-surface="portal"] .info-value { color: var(--rx-text) !important; }
}
@media screen {
body[data-rx-surface="auth"] :is(.logo p,.feature) { color: var(--rx-muted); }
body[data-rx-surface="auth"] .logo { text-align: left; }
body[data-rx-surface="staff"] .customers-table .info-icon { display: none; }
body[data-rx-surface="staff"] .customers-table .action-buttons { display: flex; gap: 4px; flex-wrap: wrap; min-width: 190px; }
body[data-rx-surface="staff"] .customers-table .action-buttons .btn { padding: 6px; min-width: 32px; background: var(--rx-raised) !important; color: var(--rx-text) !important; border: 1px solid var(--rx-border) !important; }
body[data-rx-surface="staff"] .customers-table .action-buttons .btn-danger { color: var(--rx-danger) !important; }
body[data-rx-surface="staff"] .customers-table .action-buttons .rx-icon { width: 16px; height: 16px; }
body[data-rx-surface="portal"] .action-card { display: grid; grid-template-columns: 28px 1fr; gap: 4px 16px; padding: 20px; border: 1px solid var(--rx-border); border-radius: 6px; box-shadow: none; transform: none; }
body[data-rx-surface="portal"] .action-card .action-icon { grid-row: span 2; margin: 0; font-size: 20px; color: var(--rx-link); }
body[data-rx-surface="portal"] .action-card .action-title { margin: 0; font-size: 17px; }
body[data-rx-surface="portal"] .action-card .action-description { margin: 0; font-size: 14px; }
}
@media screen {
body[data-rx-surface="portal"] .ticket-link { opacity: 1; text-decoration: underline; }
body[data-rx-surface="portal"] .action-card .action-desc { margin: 0; font-size: 14px; }
body[data-rx-surface="portal"] .ticket-info { min-width: 0; overflow-wrap: anywhere; }
body[data-rx-surface="portal"] .nav-brand { min-width: 0; }
body[data-rx-surface="portal"] .brand-name { overflow-wrap: anywhere; }
}
@media screen {
body[data-rx-surface="portal"] .detail-header p { color: var(--rx-muted) !important; margin-top: 8px; }
body[data-rx-surface="portal"] .rx-portal-menu { display: none; border: 1px solid var(--rx-border); border-radius: 5px; padding: 8px 12px; background: var(--rx-surface); color: var(--rx-text); font-size: 14px; min-height: 42px; }
body[data-rx-surface="portal"] .tag-greeting { margin: 12px 0; }
@media(max-width:760px) {
    body[data-rx-surface="portal"] .nav-container { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    body[data-rx-surface="portal"] .nav-brand { font-size: 16px; flex: 1; }
    body[data-rx-surface="portal"] .rx-menu-ready .rx-portal-menu { display: inline-flex; align-items: center; gap: 12px; }
    body[data-rx-surface="portal"] .rx-menu-ready .nav-links { display: none; }
    body[data-rx-surface="portal"] .rx-menu-ready.rx-nav-open .nav-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex-basis: 100%; border-top: 1px solid var(--rx-border); padding-top: 12px; text-align: left; }
    body[data-rx-surface="portal"] .rx-menu-ready .nav-link { display: flex; align-items: center; }
}
}
@media screen {
body[data-rx-surface] .btn:where(:not(.btn-primary,.btn-secondary,.btn-outline,.btn-success,.btn-danger,.btn-warning)) { background: var(--rx-raised) !important; color: var(--rx-text) !important; border: 1px solid var(--rx-border); }
body[data-rx-surface] .btn-info { background: var(--rx-tint) !important; color: var(--rx-link) !important; }
body[data-rx-surface] { --primary-rgb: 79,70,229; --text-inverse: var(--rx-text); --line: var(--rx-border); }
}
@media screen {
body[data-rx-surface] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
}
@media screen {
body[data-rx-surface] * { text-shadow: none !important; }
body[data-rx-surface] table { box-shadow: none !important; border-radius: 0 !important; }
body[data-rx-surface] :is(.empty-state p,.empty-state h3,.stat-label,.welcome-text,.notification-message,.notification-time) { color: var(--rx-muted) !important; }
body[data-rx-surface] :is(.welcome-text strong,.notification-title) { color: var(--rx-text) !important; }
body[data-rx-surface] .welcome-role { color: var(--rx-link); background: var(--rx-tint); }
body[data-rx-surface] .profit-positive { color: var(--rx-success); }
body[data-rx-surface] .profit-negative { color: var(--rx-danger); }
}
@media screen {
/* Customer invoices match the portal on screen; print uses the original page styles. */
body.rx-portal-invoice .invoice-container { background: var(--rx-surface); color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 8px; box-shadow: none; overflow-wrap: anywhere; }
body.rx-portal-invoice .actions { max-width: 900px; margin: 0 auto 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
body.rx-portal-invoice :is(.invoice-header,.work-note,.footer,.totals-row) { border-color: var(--rx-border); }
body.rx-portal-invoice .invoice-header { border-bottom-width: 1px; }
body.rx-portal-invoice :is(.company-info h1,.invoice-number,.party p,.totals-row,.work-note-text,.payment-amount) { color: var(--rx-text); }
body.rx-portal-invoice :is(.company-info p,.invoice-date,.party h3,.work-note-date,.footer,.payment-info) { color: var(--rx-muted); }
body.rx-portal-invoice :is(.work-notes,.ticket-info,.payment-item,.section-title) { background: var(--rx-raised); color: var(--rx-text); border-color: var(--rx-border); }
body.rx-portal-invoice :is(.work-notes h3,.ticket-info h3,.payments-section h3) { color: var(--rx-link) !important; }
body.rx-portal-invoice .text-right { text-align: right; font-variant-numeric: tabular-nums; }
body.rx-portal-invoice .invoice-container td { color: var(--rx-text); }
body.rx-portal-invoice .invoice-container tbody tr:hover { background: var(--rx-raised); }
body.rx-portal-invoice .invoice-container td small { color: var(--rx-muted) !important; }
body.rx-portal-invoice .invoice-container td small[style*="#059669"] { color: var(--rx-success) !important; }
body.rx-portal-invoice .totals > div[style*="#666"] { color: var(--rx-muted) !important; }
body.rx-portal-invoice .totals-row.paid span { color: var(--rx-success) !important; }
body.rx-portal-invoice .totals-row.refunded span { color: var(--rx-warning) !important; }
body.rx-portal-invoice .status-paid { background: var(--ok-soft); color: var(--rx-success); }
body.rx-portal-invoice .status-pending { background: var(--warn-soft); color: var(--rx-warning); }
body.rx-portal-invoice .invoice-container > .no-print[style],
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) > div { background: var(--rx-surface) !important; color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 8px !important; }
body.rx-portal-invoice .invoice-container > .no-print[style] { background: var(--rx-raised) !important; }
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) > div { max-height: calc(100dvh - 40px) !important; box-sizing: border-box; }
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) :is(h2,p,label,div,span,strong),
body.rx-portal-invoice .invoice-container > .no-print[style] :is(h3,p,div,strong) { color: var(--rx-text) !important; }
body.rx-portal-invoice .invoice-payment-heading { margin-bottom: 15px; font-size: 24px; font-weight: 600; }
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) div[style*="linear-gradient"],
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) div[style*="background: #f3f4f6"] { background: var(--rx-raised) !important; border-radius: 6px !important; }
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) button,
body.rx-portal-invoice .invoice-container > .no-print[style] button { background: var(--rx-brand) !important; color: white !important; border-radius: 5px !important; font-size: 15px !important; box-shadow: none !important; transform: none !important; }
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) > div > button:first-child { background: transparent !important; color: var(--rx-muted) !important; font-size: 26px !important; }
body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) h2 { padding-right: 40px; }
body.rx-portal-invoice #card-container { background: white; }
body.rx-portal-invoice :is(#paymentError,#pointsError) { background: var(--danger-soft) !important; color: var(--rx-danger) !important; }
body.rx-portal-invoice :is(#processingPayment,#processingPoints) { background: var(--rx-tint) !important; }
@media(max-width:640px) {
    body.rx-portal-invoice :is(th,td) { padding: 10px 6px; font-size: 13px; }
    body.rx-portal-invoice :is(#paymentModal,#rewardPointsModal) > div { padding: 20px 16px !important; }
}
/* Staff invoice documents retain their white paper preview. */
body[data-rx-surface="document"] .invoice-container {
    --rx-bg: #f5f6fa; --rx-surface: #fff; --rx-raised: #eef0f6; --rx-border: #d4d9e4;
    --rx-text: #202637; --rx-muted: #505e73; --rx-subtle: #626f82; --rx-link: #0b6e66;
    --text-primary: #202637; --text-secondary: #505e73; --text-muted: #626f82;
    color: #202637; background: white; border-radius: 6px; color-scheme: light;
}
body[data-rx-surface="staff"] .customers-table tbody tr { color: var(--rx-text); }
/* Invoice dialogs use application colours, independently of the white invoice sheet. */
body[data-rx-surface="document"] .modal-content { width: calc(100% - 24px); max-width: 600px; max-height: calc(100dvh - 24px); }
body[data-rx-surface="document"] .payment-summary { background: var(--rx-raised) !important; color: var(--rx-text); border: 1px solid var(--rx-border) !important; border-radius: 6px; }
body[data-rx-surface="document"] .summary-row { border-color: var(--rx-border); gap: 16px; }
body[data-rx-surface="document"] .balance-row { border-top-color: var(--rx-brand); }
body[data-rx-surface="document"] .balance-row strong { color: var(--rx-danger) !important; }
body[data-rx-surface="document"] .modal-close { color: var(--rx-muted); }
body[data-rx-surface="document"] .modal-close:hover { color: var(--rx-text); }
body[data-rx-surface="document"] .payment-line .form-group { min-width: 0; }
body[data-rx-surface="document"] .form-actions { flex-wrap: wrap; }
@media (max-width: 480px) {
    body[data-rx-surface="document"] :is(.modal-header,.modal-body) { padding: 16px; }
    body[data-rx-surface="document"] .split-amount-group { width: 100px !important; }
}
}

@media screen {
/* Follow-up audit: page-specific components that do not use the shared card classes. */
body[data-rx-surface="staff"] :is(.rx-service-dialog,.invoices-table-container,.summary-card,.invoice-modal-content,.register-status,.admin-registers-section,.register-notes,.transactions-table-wrapper,.device-listing) {
    background: var(--rx-surface) !important; color: var(--rx-text); border: 1px solid var(--rx-border);
    border-radius: 8px; backdrop-filter: none; box-shadow: none; transform: none;
}
body[data-rx-surface="staff"] .rx-service-dialog { box-shadow: 0 18px 60px #0005; }
body[data-rx-surface="staff"] .rx-service-dialog :is(label,h3,button:not(.btn)) { color: var(--rx-text) !important; }
body[data-rx-surface="staff"] .rx-service-dialog small { color: var(--rx-muted) !important; }
body[data-rx-surface="staff"] .invoices-table-container { overflow-x: auto; }
body[data-rx-surface="staff"] .invoices-table td { color: var(--rx-text); }
body[data-rx-surface="staff"] :is(.summary-card h3,.detail-item label,.payment-item small) { color: var(--rx-muted); text-transform: none; letter-spacing: 0; }
body[data-rx-surface="staff"] :is(.summary-card .value,.detail-item .value,.invoice-modal-header h3,.payments-list h4) { color: var(--rx-text); }
body[data-rx-surface="staff"] :is(.detail-item,.payment-item,.register-stats .stat-box) { background: var(--rx-raised); color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 6px; backdrop-filter: none; }
body[data-rx-surface="staff"] .invoice-modal-content { max-width: min(800px,calc(100vw - 24px)); box-shadow: 0 18px 60px #0005; }
body[data-rx-surface="staff"] .invoice-modal-header { border-color: var(--rx-border); }
body[data-rx-surface="staff"] .actions-btn { background: var(--rx-raised); color: var(--rx-text); border: 1px solid var(--rx-border); min-height: 36px; border-radius: 5px; }
body[data-rx-surface="staff"] .actions-btn.btn-delete { color: var(--rx-danger); }
body[data-rx-surface="staff"] .actions-btn:hover { opacity: 1; border-color: var(--rx-link); }
body[data-rx-surface="staff"] .register-status { padding: 24px; border-left: 4px solid var(--rx-link); }
body[data-rx-surface="staff"] .register-status.open { border-left-color: var(--rx-success); }
body[data-rx-surface="staff"] .register-status.closed { border-left-color: var(--rx-danger); }
body[data-rx-surface="staff"] .register-status .status-subtitle { color: var(--rx-muted); opacity: 1; }
body[data-rx-surface="staff"] .register-status .status-icon { display: none; }
body[data-rx-surface="staff"] .summary-item.highlight { background: var(--warn-soft); border-color: var(--rx-warning); }
body[data-rx-surface="staff"] .summary-item.highlight :is(span,strong) { color: var(--rx-warning); }
body[data-rx-surface="staff"] .device-image { background: var(--rx-raised); color: var(--rx-link); }
body[data-rx-surface="staff"] .sell-button { background: var(--rx-brand); color: white; border-radius: 5px; min-height: 40px; }
body[data-rx-surface="staff"] .sell-button:hover { background: var(--rx-brand-hover); }
body[data-rx-surface="staff"] .condition-excellent { background: var(--ok-soft); color: var(--rx-success); }
body[data-rx-surface="staff"] .condition-good { background: var(--rx-tint); color: var(--rx-link); }
body[data-rx-surface="staff"] .condition-fair { background: var(--warn-soft); color: var(--rx-warning); }
body[data-rx-surface="staff"] .condition-poor { background: var(--danger-soft); color: var(--rx-danger); }
body[data-rx-surface="portal"] :is(.rewards-hero,.rewards-stat,.rewards-how) { background: var(--rx-surface); color: var(--rx-text); border: 1px solid var(--rx-border); border-radius: 8px; }
body[data-rx-surface="portal"] .rewards-hero .hero-label { color: var(--rx-muted); text-transform: none; letter-spacing: 0; opacity: 1; }
body[data-rx-surface="portal"] .rewards-hero .hero-points { color: var(--rx-link); font-weight: 600; }
body[data-rx-surface="portal"] .rewards-hero .hero-sub { color: var(--rx-muted); opacity: 1; }
/* Tracking has a separate legacy theme and animated progress system. */
body[data-rx-surface="portal"].rx-tracking { --primary-color: var(--rx-brand); --card-bg: var(--rx-surface); --card-text: var(--rx-text); --estimate-gradient-start: var(--rx-brand); --estimate-gradient-end: var(--rx-brand); }
/* Public tracking invoices use the same surfaces and controls as the portal. */
body.rx-tracking .rx-tracking-invoice,
body.rx-tracking .rx-tracking-payment > div {
    background: var(--rx-surface) !important; color: var(--rx-text);
    border: 1px solid var(--rx-border) !important; border-radius: 8px !important;
    box-sizing: border-box;
}
body.rx-tracking .rx-tracking-invoice { border-top: 3px solid var(--rx-warning) !important; }
body.rx-tracking .rx-tracking-invoice[data-payment-state="paid"] { border-top-color: var(--rx-success) !important; }
body.rx-tracking .rx-tracking-invoice :is(p,span,strong,div),
body.rx-tracking .rx-tracking-payment :is(p,label,span,strong,div) { color: var(--rx-text) !important; }
body.rx-tracking .rx-tracking-invoice h3 { color: var(--rx-warning) !important; }
body.rx-tracking .rx-tracking-invoice[data-payment-state="paid"] h3 { color: var(--rx-success) !important; }
body.rx-tracking .rx-tracking-invoice > div > div:first-child { display: none; }
body.rx-tracking .rx-tracking-payment { padding: 16px !important; background: rgb(8 12 20 / 72%) !important; }
body.rx-tracking .rx-tracking-payment > div { padding: 24px !important; max-height: calc(100dvh - 32px) !important; box-shadow: 0 20px 60px rgb(0 0 0 / 28%); overscroll-behavior: contain; }
body.rx-tracking .rx-tracking-payment h2 { color: var(--rx-text) !important; padding-right: 40px; font-size: 22px !important; }
body.rx-tracking .rx-tracking-payment > div > p { color: var(--rx-muted) !important; padding-right: 28px; }
body.rx-tracking .rx-tracking-payment div[style*="linear-gradient"],
body.rx-tracking .rx-tracking-invoice [style*="background: rgba"],
body.rx-tracking .rx-tracking-payment [style*="background: #f3f4f6"] { background: var(--rx-raised) !important; border-color: var(--rx-border) !important; border-radius: 6px !important; }
body.rx-tracking :is(.rx-tracking-invoice,.rx-tracking-payment) :is(button,a) {
    background: var(--rx-brand) !important; color: white !important; border: 1px solid transparent !important;
    border-radius: 5px !important; box-shadow: none !important; transform: none !important;
    font: inherit !important; font-weight: 600 !important; padding: 10px 16px !important;
}
body.rx-tracking :is(.rx-tracking-invoice,.rx-tracking-payment) :is(button,a):hover { background: var(--rx-brand-hover) !important; }
body.rx-tracking .rx-tracking-payment > div > button:first-child { background: transparent !important; color: var(--rx-muted) !important; padding: 0 !important; font-size: 26px !important; }
body.rx-tracking .rx-tracking-payment > div > button:first-child:hover { background: var(--rx-raised) !important; }
/* Square owns the card iframe; keep its default light input surface intact. */
body.rx-tracking .rx-tracking-payment #card-container { background: white !important; border-color: var(--rx-border) !important; border-radius: 5px !important; }
body.rx-tracking .rx-tracking-payment :is(#paymentError,#pointsErrorTrack) { background: var(--danger-soft) !important; color: var(--rx-danger) !important; }
body.rx-tracking .rx-tracking-payment :is(#processingPayment,#processingPointsTrack) { background: var(--rx-tint) !important; }
@media(max-width:480px) {
    body.rx-tracking .rx-tracking-payment { padding: 10px !important; }
    body.rx-tracking .rx-tracking-payment > div { padding: 20px 16px !important; max-height: calc(100dvh - 20px) !important; }
    body.rx-tracking .rx-tracking-invoice :is(button,a) { box-sizing: border-box; width: 100%; }
}
body[data-rx-surface="portal"].rx-tracking :is(.steps-bar,.ticket-customer,.tracking-events) { background: var(--rx-raised) !important; color: var(--rx-text); border-color: var(--rx-border); backdrop-filter: none; box-shadow: none; }
body[data-rx-surface="portal"].rx-tracking :is(.ticket-number,.status-badge) { animation: none; box-shadow: none; transform: none; }
body[data-rx-surface="portal"].rx-tracking :is(.step-circle,.step-connector) { box-shadow: none; transform: none; }
body[data-rx-surface="portal"].rx-tracking .status-badge { background: var(--rx-tint); color: var(--rx-link); border: 1px solid var(--rx-border); border-radius: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
body[data-rx-surface="portal"].rx-tracking :is(.status-completed,.status-resolved,.status-invoiced) { background: var(--ok-soft); color: var(--rx-success); }
body[data-rx-surface="portal"].rx-tracking :is(.status-in-progress,.status-waiting-for-parts,.status-waiting-on-customer,.status-estimate-sent) { background: var(--warn-soft); color: var(--rx-warning); }
body[data-rx-surface="portal"].rx-tracking .status-estimate-denied { background: var(--danger-soft); color: var(--rx-danger); }
body[data-rx-surface="portal"].rx-tracking :is(.status-label,.step-label) { color: var(--rx-muted); text-transform: none; letter-spacing: 0; }
body[data-rx-surface="portal"].rx-tracking .step-circle { background: var(--rx-surface); color: var(--rx-muted); border-color: var(--rx-border); }
body[data-rx-surface="portal"].rx-tracking .step.done .step-circle { background: var(--ok-soft); color: var(--rx-success); border-color: var(--rx-success); }
body[data-rx-surface="portal"].rx-tracking .step.active .step-circle { background: var(--rx-tint); color: var(--rx-link); border-color: var(--rx-link); }
body[data-rx-surface="portal"].rx-tracking .step:is(.done,.active) .step-label { color: var(--rx-text); }
body[data-rx-surface="portal"].rx-tracking .step-connector { background: var(--rx-border); }
body[data-rx-surface="portal"].rx-tracking .step-connector.done { background: var(--rx-success); }
@media(max-width:600px) {
    body[data-rx-surface="staff"] .invoice-detail-grid { grid-template-columns: minmax(0,1fr); }
    body[data-rx-surface="staff"] :is(.invoice-modal-header,.invoice-modal-body,.register-status) { padding: 16px; }
    body[data-rx-surface="staff"] .payment-item { flex-wrap: wrap; gap: 12px; }
    body[data-rx-surface="staff"] .register-status .status-header { flex-wrap: wrap; gap: 12px; }
    body[data-rx-surface="portal"].rx-tracking .steps-bar { overflow-x: auto; gap: 4px; }
}
}
@media screen {
body[data-rx-surface="staff"] .rx-pos-notice { background: var(--rx-surface) !important; color: var(--rx-text) !important; border: 1px solid var(--rx-border); border-radius: 8px !important; box-shadow: none !important; flex-wrap: wrap; }
body[data-rx-surface="staff"] .rx-pos-warning { background: var(--warn-soft) !important; color: var(--rx-warning) !important; }
body[data-rx-surface="staff"] .rx-pos-success { background: var(--ok-soft) !important; color: var(--rx-success) !important; }
body[data-rx-surface="staff"] :is(.pos-left,.pos-right,.cart-item,.totals-section,.product-card) { border-width: 1px !important; }
body[data-rx-surface="staff"] .device-badge { background: var(--rx-tint); color: var(--rx-link); text-transform: none; letter-spacing: 0; }
}

@media screen {
/* Leads SMS composer: constrain the reading width and remove legacy modal effects. */
body[data-rx-surface="staff"] .rx-lead-sms { padding: 24px 12px; align-items: center; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
body[data-rx-surface="staff"] .rx-lead-sms .modal-content { width: 100%; max-width: 560px; max-height: calc(100dvh - 48px); padding: 24px; animation: none; -webkit-backdrop-filter: none; }
body[data-rx-surface="staff"] .rx-lead-sms .modal-content::before { content: none; }
body[data-rx-surface="staff"] .rx-lead-sms .modal-header { margin-bottom: 20px; }
body[data-rx-surface="staff"] .rx-lead-sms .rx-sms-recipient { color: var(--rx-muted); font-size: 14px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] .rx-lead-sms .modal-body > p { margin: 0 0 8px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] .rx-lead-sms .form-group { margin-bottom: 20px; }
body[data-rx-surface="staff"] .rx-lead-sms label { display: block; margin-bottom: 8px; }
body[data-rx-surface="staff"] .rx-lead-sms .form-input { width: 100%; padding: 10px 12px; }
body[data-rx-surface="staff"] .rx-lead-sms textarea { min-height: 150px; resize: vertical; }
body[data-rx-surface="staff"] .rx-lead-sms .form-help { display: block; margin-top: 8px; }
body[data-rx-surface="staff"] .rx-lead-sms .form-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
@media(max-width:600px) {
    body[data-rx-surface="staff"] .rx-lead-sms { padding: 12px; }
    body[data-rx-surface="staff"] .rx-lead-sms .modal-content { padding: 16px; max-height: calc(100dvh - 24px); }
}
}

@media screen {
/* Repair board: quieter lanes, readable cards and restrained operational accents. */
body[data-rx-surface="staff"] #board-view .board-columns { gap: 18px; padding: 4px 2px 16px; align-items: flex-start; }
body[data-rx-surface="staff"] #board-view .board-column { --rx-lane-accent: var(--rx-link); background: var(--rx-bg) !important; border: 1px solid var(--rx-border) !important; border-radius: 8px !important; overflow: hidden; }
body[data-rx-surface="staff"] #board-view .board-column[data-status="Waiting for Parts"],
body[data-rx-surface="staff"] #board-view .board-column[data-status="Waiting on Customer"] { --rx-lane-accent: var(--rx-warning); }
body[data-rx-surface="staff"] #board-view .board-column[data-status="Completed"],
body[data-rx-surface="staff"] #board-view .board-column[data-status="Resolved"] { --rx-lane-accent: var(--rx-success); }
body[data-rx-surface="staff"] #board-view .board-column-header { background: var(--rx-surface) !important; padding: 14px; gap: 10px; border-top: 3px solid var(--rx-lane-accent); border-bottom: 1px solid var(--rx-border); }
body[data-rx-surface="staff"] #board-view .board-column-header h3 { color: var(--rx-text); font-size: 14px; line-height: 1.4; font-weight: 600; }
body[data-rx-surface="staff"] #board-view .board-column-count { background: var(--rx-raised); color: var(--rx-muted); border: 1px solid var(--rx-border); border-radius: 5px; padding: 2px 8px; min-width: 28px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
body[data-rx-surface="staff"] #board-view .board-column-content { padding: 10px; min-height: 110px; scrollbar-width: thin; scrollbar-color: var(--rx-border) transparent; }
body[data-rx-surface="staff"] #board-view .board-ticket-card { background: var(--rx-surface) !important; border: 1px solid var(--rx-border) !important; border-radius: 7px !important; padding: 14px; margin-bottom: 10px; animation: none !important; transition: border-color .12s ease; }
body[data-rx-surface="staff"] #board-view .board-ticket-card:last-child { margin-bottom: 0; }
body[data-rx-surface="staff"] #board-view .board-ticket-card:hover { border-color: var(--rx-link) !important; }
body[data-rx-surface="staff"] #board-view .board-ticket-card:is(.urgency-4,.urgency-5) { border-left: 3px solid var(--rx-danger) !important; }
body[data-rx-surface="staff"] #board-view .board-ticket-card.urgency-3 { border-left: 3px solid var(--rx-warning) !important; }
body[data-rx-surface="staff"] #board-view .board-ticket-card::before,
body[data-rx-surface="staff"] #board-view .board-ticket-card::after { content: none !important; }
body[data-rx-surface="staff"] #board-view .board-ticket-header { gap: 8px; align-items: flex-start; margin-bottom: 12px; }
body[data-rx-surface="staff"] #board-view .board-ticket-number { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #board-view .board-ticket-priority { padding: 2px 6px; font-size: 11px; flex-shrink: 0; }
body[data-rx-surface="staff"] #board-view .board-ticket-customer { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 8px 0 4px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #board-view .board-ticket-device { font-size: 13px; line-height: 1.45; margin-bottom: 8px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #board-view .board-ticket-issue { font-size: 12px; line-height: 1.55; margin: 8px 0 12px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #board-view .board-ticket-technician { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--rx-raised); color: var(--rx-muted); border-radius: 4px; padding: 4px 7px; font-size: 11px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #board-view .board-ticket-footer { gap: 8px; flex-wrap: wrap; border-color: var(--rx-border); padding-top: 10px; }
body[data-rx-surface="staff"] #board-view .board-ticket-cost { color: var(--rx-text); font-variant-numeric: tabular-nums; }
body[data-rx-surface="staff"] #board-view :is(.board-expedited-badge,.board-dispatch-badge,.board-reply-badge) { background: var(--rx-tint); color: var(--rx-link); border: 1px solid var(--rx-border); border-radius: 4px; padding: 3px 6px; font-size: 11px; font-weight: 500; animation: none !important; box-shadow: none !important; }
body[data-rx-surface="staff"] #board-view .board-column-content.drag-over { background: var(--rx-tint) !important; outline: 2px dashed var(--rx-link); outline-offset: -5px; }
body[data-rx-surface="staff"] #board-view .board-ticket-card.dragging { opacity: .55; border-style: dashed !important; }
body[data-rx-surface="staff"] #board-view .rx-board-empty { border: 1px dashed var(--rx-border); border-radius: 6px; margin: 0; padding: 24px 12px; font-size: 13px; }
body[data-rx-surface="staff"] #board-view.rx-filtered-board .board-ticket-card { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    body[data-rx-surface="staff"] #board-view .board-ticket-card { transition: none; }
}
}

@media screen {
body[data-rx-surface="staff"] .rx-customer-display-prompt { padding: 16px; margin-bottom: 24px; background: var(--rx-raised); border: 1px solid var(--rx-border); border-radius: 6px; }
body[data-rx-surface="staff"] .rx-customer-display-prompt .btn { justify-content: flex-start; text-align: left; max-width: 100%; white-space: normal; }
body[data-rx-surface="staff"] .rx-customer-display-prompt p { color: var(--rx-muted); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
body[data-rx-surface="public"] .ticket-input-form { -webkit-backdrop-filter: none; }
body[data-rx-surface="public"] .ticket-input-form .form-title { color: var(--rx-text); text-align: left; font-size: clamp(24px,3vw,32px); font-weight: 600; }
body[data-rx-surface="public"] .ticket-input-form .form-subtitle { color: var(--rx-muted); text-align: left; }
body[data-rx-surface="public"] .ticket-input-form :is(.form-input,.form-textarea) { font-size: 16px; min-height: 44px; }
body[data-rx-surface="public"] .ticket-input-form .submit-btn { min-height: 44px; }
}

@media screen {
/* Customer entry uses the display width instead of stacking every group vertically. */
body[data-rx-surface="public"] .ticket-input-form:has(#customerInputForm) { padding: 16px 20px; }
body[data-rx-surface="public"] .ticket-input-form:has(#customerInputForm) .form-title { margin-bottom: 4px; font-size: 24px; }
body[data-rx-surface="public"] .ticket-input-form:has(#customerInputForm) .form-subtitle { margin-bottom: 16px; font-size: 14px; }
body[data-rx-surface="public"] #customerInputForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; text-align: left; }
body[data-rx-surface="public"] #customerInputForm .form-row { display: contents; }
body[data-rx-surface="public"] #customerInputForm .form-group { margin: 0; min-width: 0; }
body[data-rx-surface="public"] #customerInputForm .form-label { margin-bottom: 6px; }
body[data-rx-surface="public"] #customerInputForm :is(.form-input,.form-textarea) { padding: 10px 12px; }
body[data-rx-surface="public"] #customerInputForm .form-group:has(textarea) { grid-column: 1 / -1; }
body[data-rx-surface="public"] #customerInputForm .form-textarea { min-height: 76px; height: 76px; }
body[data-rx-surface="public"] #customerInputForm .submit-btn { grid-column: 1 / -1; margin-top: 0; padding: 10px 16px; font-size: 16px; }
/* Keep enough scroll clearance when the touch keyboard is open. */
body[data-rx-surface="public"].osk-open .ticket-input-form:has(#customerInputForm) { padding-bottom: 40vh; }
@media(min-width:900px) {
    body[data-rx-surface="public"] #customerInputForm { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:540px) {
    body[data-rx-surface="public"] #customerInputForm { grid-template-columns: minmax(0,1fr); }
    body[data-rx-surface="public"] .ticket-input-form:has(#customerInputForm) { padding: 16px; }
}
}

@media screen {
/* Staff check-in fills the available viewport rather than starting 80px below it. */
body[data-rx-surface="staff"] #add-ticket-modal { padding: 12px; align-items: center; overflow: hidden; }
body[data-rx-surface="staff"] #add-ticket-modal > .modal-content { width: min(1400px,100%); max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px); min-height: 0; margin: 0; padding: 18px 20px; overflow: hidden; }
body[data-rx-surface="staff"] #add-ticket-modal .modal-header { margin-bottom: 12px; padding-bottom: 10px; flex-shrink: 0; }
body[data-rx-surface="staff"] #add-ticket-modal .modal-body { overflow-y: auto; padding: 0 4px 0 0; }
body[data-rx-surface="staff"] #add-ticket-form .rx-customer-display-prompt { display: flex; align-items: center; gap: 16px; padding: 10px 12px; margin-bottom: 12px; }
body[data-rx-surface="staff"] #add-ticket-form .rx-customer-display-prompt p { margin: 0; flex: 1; }
body[data-rx-surface="staff"] #add-ticket-form .form-group { margin-bottom: 10px; min-width: 0; }
body[data-rx-surface="staff"] #add-ticket-form .form-group > label { margin-bottom: 5px; }
body[data-rx-surface="staff"] #add-ticket-form .form-help { font-size: 12px; line-height: 1.35; }
body[data-rx-surface="staff"] #add-ticket-form .rx-checkin-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 16px; align-items: start; }
body[data-rx-surface="staff"] #add-ticket-form .rx-checkin-fields .form-group { margin-bottom: 0; }
body[data-rx-surface="staff"] #add-ticket-form .rx-checkin-fields > .form-group:has(#assigned-to) { grid-column: auto !important; }
body[data-rx-surface="staff"] #add-ticket-form #issue { min-height: 64px; height: 64px; resize: vertical; }
body[data-rx-surface="staff"] #add-ticket-form .rx-checkin-fields + .form-group { margin-top: 12px; }
body[data-rx-surface="staff"] #add-ticket-form .form-actions { position: sticky; bottom: 0; background: var(--rx-surface); border-top: 1px solid var(--rx-border); margin-top: 12px; padding: 10px 0 0; display: flex; justify-content: flex-end; gap: 10px; z-index: 2; }
@media(max-width:1000px) {
    body[data-rx-surface="staff"] #add-ticket-form .rx-checkin-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
    body[data-rx-surface="staff"] #add-ticket-modal > .modal-content { padding: 14px; }
    body[data-rx-surface="staff"] #add-ticket-form .rx-checkin-fields { grid-template-columns: minmax(0,1fr); }
    body[data-rx-surface="staff"] #add-ticket-form .rx-customer-display-prompt { flex-direction: column; align-items: flex-start; gap: 8px; }
}
}

@media screen {
/* The legacy .form rule capped the check-in contents at 600px inside a 1400px dialog. */
body[data-rx-surface="staff"] #add-ticket-form { width: 100%; max-width: none; }
body[data-rx-surface="staff"] #add-ticket-form :is(select,input.form-input) { min-width: 0; }
body[data-rx-surface="staff"] #add-ticket-form .rx-device-controls { align-items: center; }
body[data-rx-surface="staff"] #add-ticket-form .rx-device-controls select { flex: 1 1 0 !important; }
body[data-rx-surface="staff"] #add-ticket-form .form-help { display: block; margin-top: 5px; font-style: normal; }
body[data-rx-surface="staff"] #add-ticket-form .form-group:has(#passcode) > div { flex-wrap: wrap; }
body[data-rx-surface="staff"] #add-ticket-form #passcode { flex: 1 1 140px !important; }
body[data-rx-surface="staff"] #add-ticket-form .customer-clear-btn { min-width: 38px; min-height: 38px; padding: 6px; background: var(--rx-surface); color: var(--rx-muted); border: 1px solid var(--rx-border); border-radius: 5px; font-size: 22px; }
}

@media screen {
/* Board card hierarchy: identity, issue, operational signals, then ownership and cost. */
body[data-rx-surface="staff"] #board-view .board-column { border-color: transparent !important; background: var(--rx-raised) !important; }
body[data-rx-surface="staff"] #board-view .board-column-header { background: var(--rx-raised) !important; padding: 14px 12px; }
body[data-rx-surface="staff"] #board-view .board-column-count { background: var(--rx-surface); color: var(--rx-text); }
body[data-rx-surface="staff"] #board-view .board-ticket-card { padding: 16px; border-radius: 8px !important; }
body[data-rx-surface="staff"] #board-view .board-ticket-header { margin-bottom: 10px; }
body[data-rx-surface="staff"] #board-view .board-ticket-customer { margin-top: 0; font-size: 16px; letter-spacing: -.015em; }
body[data-rx-surface="staff"] #board-view .board-ticket-device { color: var(--rx-text); font-size: 13px; font-weight: 500; }
body[data-rx-surface="staff"] #board-view .board-ticket-issue { margin: 6px 0 12px; color: var(--rx-muted); }
body[data-rx-surface="staff"] #board-view .rx-board-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 12px; }
body[data-rx-surface="staff"] #board-view .rx-board-signals:not(:has(> *)) { display: none; }
body[data-rx-surface="staff"] #board-view .rx-board-signals > * { margin: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
body[data-rx-surface="staff"] #board-view .board-ticket-technician { background: transparent; padding: 0; margin: 0 0 12px; }
body[data-rx-surface="staff"] #board-view .board-ticket-footer { margin-top: 2px; padding-top: 12px; }
body[data-rx-surface="staff"] #board-view .board-ticket-date { font-size: 12px; }
body[data-rx-surface="staff"] #board-view .board-ticket-card:focus-visible { outline-offset: -3px; }
}

@media screen {
/* Selected tabs must remain obvious alongside shared button overrides. */
body[data-rx-surface="staff"] .ticket-tabs-bar .ticket-tab-btn { border-bottom: 3px solid transparent !important; }
body[data-rx-surface="staff"] .ticket-tabs-bar .ticket-tab-btn.active,
body[data-rx-surface="staff"] .photo-tab.active,
body[data-rx-surface="staff"] .nav-tabs .nav-tab.active {
    background: var(--rx-tint) !important; color: var(--rx-link) !important;
    border-bottom: 3px solid var(--rx-link) !important; font-weight: 600;
}
body[data-rx-surface="staff"] .ticket-tabs-bar .ticket-tab-btn:not(.active):hover { background: var(--rx-raised) !important; color: var(--rx-text) !important; }
body[data-rx-surface="staff"] .app-sidebar :is(.sb-item,.sb-subitem).active { background: var(--rx-tint) !important; color: var(--rx-link) !important; box-shadow: inset 3px 0 var(--rx-link) !important; font-weight: 600; }
}

@media screen {
body[data-rx-surface="staff"] .rx-lead-delete { align-items: center; padding: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
body[data-rx-surface="staff"] .rx-lead-delete .modal-content { width: 100%; max-width: 440px; max-height: calc(100dvh - 24px); padding: 24px; animation: none; -webkit-backdrop-filter: none; }
body[data-rx-surface="staff"] .rx-lead-delete .modal-content::before { content: none; }
body[data-rx-surface="staff"] .rx-lead-delete .modal-header { margin-bottom: 16px; padding-bottom: 14px; gap: 16px; }
body[data-rx-surface="staff"] .rx-lead-delete .modal-body > p { margin: 0 0 14px; line-height: 1.5; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] .rx-lead-delete .warning-text { color: var(--rx-danger); background: var(--danger-soft); border-radius: 5px; padding: 10px 12px; font-size: 14px; }
body[data-rx-surface="staff"] .rx-lead-delete .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media(max-width:480px) {
    body[data-rx-surface="staff"] .rx-lead-delete .modal-content { padding: 18px; }
}
}

@media screen {
/* Keep the payment watermark visible over solid ticket panels, without intercepting clicks. */
body[data-rx-surface="staff"] .ticket-modal-content[data-payment-status]::before {
    z-index: 30;
    pointer-events: none;
    opacity: .14;
    font-size: clamp(36px,8vw,96px);
    letter-spacing: .08em;
    line-height: 1;
    font-weight: 700;
}
body[data-rx-surface="staff"] .ticket-modal-content[data-payment-status="paid"]::before { color: var(--rx-success); }
body[data-rx-surface="staff"] .ticket-modal-content[data-payment-status="unpaid"]::before { color: var(--rx-danger); }
body[data-rx-surface="staff"] .ticket-modal-content[data-payment-status="partially_paid"]::before { color: var(--rx-link); font-size: clamp(24px,5vw,60px); letter-spacing: .04em; }
body[data-rx-surface="staff"][data-theme="light"] .ticket-modal-content[data-payment-status]::before { opacity: .12; }
}

@media screen {
/* Lead conversion dialog stays above navigation and fits small viewports. */
body[data-rx-surface="staff"] #convert-ticket-modal { position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 12px; overflow: auto; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
body[data-rx-surface="staff"] #convert-ticket-modal > .modal-content { width: 100%; max-width: 560px; max-height: calc(100dvh - 24px); margin: 0; padding: 24px; overflow-y: auto; animation: none; -webkit-backdrop-filter: none; }
body[data-rx-surface="staff"] #convert-ticket-modal > .modal-content::before { content: none; }
body[data-rx-surface="staff"] #convert-ticket-modal .modal-header { margin-bottom: 20px; gap: 16px; }
body[data-rx-surface="staff"] #convert-ticket-modal .modal-body > p { margin: 0 0 12px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #convert-ticket-modal .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media(max-width:480px) {
    body[data-rx-surface="staff"] #convert-ticket-modal > .modal-content { padding: 18px; }
}
}

@media screen {
/* Priority is a persistent card heading, distinct from due-date and payment signals. */
body[data-rx-surface="staff"] #board-view .board-ticket-card.board-priority-high { --board-priority-accent: #fb7185; --board-priority-fill: #ffe4e6; --board-priority-text: #881337; }
body[data-rx-surface="staff"] #board-view .board-ticket-card.board-priority-expedited { --board-priority-accent: #f59e0b; --board-priority-fill: #fef3c7; --board-priority-text: #78350f; }
body[data-rx-surface="staff"] #board-view .board-ticket-card:is(.board-priority-high,.board-priority-expedited) { border-left: 5px solid var(--board-priority-accent) !important; }
body[data-rx-surface="staff"] #board-view .board-priority-banner { display: flex; align-items: center; gap: 7px; padding: 7px 10px; margin: -4px -4px 12px; border-radius: 4px; background: var(--board-priority-fill); color: var(--board-priority-text); font-size: 13px; font-weight: 700; line-height: 1.4; }
body[data-rx-surface="staff"] #board-view .board-priority-banner > span { font-size: 16px; line-height: 1; }
}

@media screen {
/* Lead email dialog stays above navigation and fits small viewports. */
body[data-rx-surface="staff"] #email-modal { position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 12px; overflow: auto; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
body[data-rx-surface="staff"] #email-modal > .modal-content { width: 100%; max-width: 640px; max-height: calc(100dvh - 24px); margin: 0; padding: 24px; overflow-y: auto; animation: none; -webkit-backdrop-filter: none; }
body[data-rx-surface="staff"] #email-modal > .modal-content::before { content: none; }
body[data-rx-surface="staff"] #email-modal .modal-header { margin-bottom: 20px; gap: 16px; }
body[data-rx-surface="staff"] #email-modal .modal-body > p { margin: 0 0 12px; overflow-wrap: anywhere; }
body[data-rx-surface="staff"] #email-modal .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media(max-width:480px) {
    body[data-rx-surface="staff"] #email-modal > .modal-content { padding: 18px; }
}

}

/* Line icons that replace decorative emoji (assets/js/rx-icons.js). Sized to the surrounding text. */
.rx-i { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rx-i + .rx-i { margin-left: .15em; }
.rx-i--ok { color: var(--rx-success, #75d6ad); }
.rx-i--warn { color: var(--rx-warning, #f4c56b); }
.rx-i--danger { color: var(--rx-danger, #ff9aab); }
.rx-i--muted { color: var(--rx-subtle, #929fb5); }
.rx-i--star { color: var(--rx-warning, #f4c56b); fill: currentColor; }
.rx-i--ok-fill, .rx-i--warn-fill, .rx-i--danger-fill { width: .7em; height: .7em; vertical-align: .05em; fill: currentColor; stroke: none; }
.rx-i--ok-fill { color: var(--rx-success, #75d6ad); }
.rx-i--warn-fill { color: var(--rx-warning, #f4c56b); }
.rx-i--danger-fill { color: var(--rx-danger, #ff9aab); }
@media print { .rx-i { stroke: #000; color: #000; } }

/* Row actions in tables and lists stay neutral; colour only signals intent on hover. */
@media screen {
body[data-rx-surface] :is(td, .actions, .item-actions, .action-buttons, .row-actions, .table-actions) > :is(.btn, button):is(.btn-warning, .btn-danger, .btn-info, .btn-success, .btn-secondary, .btn-outline) {
    background: transparent !important; border: 1px solid var(--rx-border) !important; color: var(--rx-muted) !important;
}
body[data-rx-surface] :is(td, .actions, .item-actions, .action-buttons, .row-actions, .table-actions) > :is(.btn, button):is(.btn-warning, .btn-info, .btn-success, .btn-secondary, .btn-outline):hover {
    background: var(--rx-raised) !important; color: var(--rx-text) !important; border-color: var(--rx-subtle) !important;
}
body[data-rx-surface] :is(td, .actions, .item-actions, .action-buttons, .row-actions, .table-actions) > :is(.btn, button).btn-danger:hover {
    background: var(--danger-soft) !important; color: var(--rx-danger) !important; border-color: var(--rx-danger) !important;
}
}

/* Repair board, calmer pass: one card style, status shown as a small dot on the lane,
   priority as a short label rather than a banner and stripe. */
@media screen {
body[data-rx-surface="staff"] #board-view .board-column-header { border-top: 0 !important; }
body[data-rx-surface="staff"] #board-view .board-column-header h3 { display: flex; align-items: center; gap: 8px; }
body[data-rx-surface="staff"] #board-view .board-column-header h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rx-lane-accent, var(--rx-subtle)); flex: none; }
body[data-rx-surface="staff"] #board-view .board-ticket-card,
body[data-rx-surface="staff"] #board-view .board-ticket-card:is(.urgency-3,.urgency-4,.urgency-5,.board-priority-high,.board-priority-expedited,.board-invoice-overdue) {
    border: 1px solid var(--rx-border) !important; box-shadow: none !important;
}
body[data-rx-surface="staff"] #board-view .board-ticket-card:hover { border-color: var(--rx-subtle) !important; }
body[data-rx-surface="staff"] #board-view .board-ticket-card.ticket-flash-urgent { animation: none !important; }
body[data-rx-surface="staff"] #board-view .board-priority-banner {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 0; background: none;
    color: var(--rx-danger); font-size: 12px; font-weight: 600; line-height: 1.3;
}
body[data-rx-surface="staff"] #board-view .board-priority-expedited .board-priority-banner { color: var(--rx-warning); }
body[data-rx-surface="staff"] #board-view .board-priority-banner > span { font-size: 13px; }
body[data-rx-surface="staff"] #board-view .board-ticket-priority { background: transparent !important; border: 1px solid var(--rx-border); color: var(--rx-muted); }
body[data-rx-surface="staff"] #board-view :is(.board-urgency-badge,.board-paid-badge,.board-expedited-badge,.board-dispatch-badge,.board-reply-badge) {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
body[data-rx-surface="staff"] #board-view .board-ticket-cost { color: var(--rx-text) !important; font-weight: 600; }
}

/* Structure: panels sit on the page by tone rather than heavy outlines; dialogs use the brand. */
@media screen {
body[data-rx-surface] { --rx-panel-border: #16202e; }
body[data-rx-surface][data-theme="light"] { --rx-panel-border: #e4e7e5; }
body[data-rx-surface] :is(.glass-card,.card,.stat-card,.dashboard-section,.panel,.settings-section,.filter-section,.filters-section,.filter-bar,.table-container,.invoices-table-container,.inv-stats,.summary-card) {
    border-color: var(--rx-panel-border) !important;
}
body[data-rx-surface="staff"] .header-top { background: var(--rx-bg) !important; border-bottom-color: var(--rx-panel-border) !important; }
body[data-rx-surface="staff"] .app-sidebar { background: var(--rx-bg) !important; border-color: var(--rx-panel-border) !important; }
body[data-rx-surface] .swal2-popup { background: var(--rx-surface) !important; color: var(--rx-text) !important; }
body[data-rx-surface] .swal2-styled.swal2-confirm { background: var(--rx-brand) !important; border: 0 !important; box-shadow: none !important; }
body[data-rx-surface] .swal2-styled.swal2-cancel { background: transparent !important; color: var(--rx-text) !important; border: 1px solid var(--rx-border) !important; box-shadow: none !important; }
body[data-rx-surface] .swal2-styled.swal2-deny { background: var(--rx-danger-solid) !important; box-shadow: none !important; }
body[data-rx-surface] .swal2-styled:focus { box-shadow: 0 0 0 3px var(--rx-tint) !important; }
}

/* Tracking page: a plain, left-aligned status page rather than a centred landing card. */
@media screen {
body[data-rx-surface="portal"].rx-tracking .container { max-width: 680px !important; padding: 24px 16px 48px !important; }
body[data-rx-surface="portal"].rx-tracking .header { display: flex !important; align-items: center; gap: 14px; text-align: left !important; margin: 0 0 20px !important; padding-bottom: 16px; border-bottom: 1px solid var(--rx-panel-border, var(--rx-border)); flex-wrap: wrap; }
body[data-rx-surface="portal"].rx-tracking .header-logo-wrap { width: 44px !important; height: 44px !important; margin: 0 !important; flex: none; }
body[data-rx-surface="portal"].rx-tracking .header-logo { width: 100% !important; height: 100% !important; border-radius: 8px !important; box-shadow: none !important; }
body[data-rx-surface="portal"].rx-tracking .track-brand { flex: 1; min-width: 0; }
body[data-rx-surface="portal"].rx-tracking .track-brand h1 { font-size: 18px !important; margin: 0 !important; line-height: 1.3; }
body[data-rx-surface="portal"].rx-tracking .track-brand p { margin: 2px 0 0 !important; font-size: 13px !important; color: var(--rx-muted) !important; }
body[data-rx-surface="portal"].rx-tracking .lang-switcher { position: static !important; order: 3; }
body[data-rx-surface="portal"].rx-tracking .lang-select { min-height: 34px !important; font-size: 13px !important; padding: 4px 8px !important; }
body[data-rx-surface="portal"].rx-tracking .portal-link-btn { order: 2; background: transparent !important; border: 1px solid var(--rx-border) !important; color: var(--rx-text) !important; border-radius: 5px !important; padding: 7px 12px !important; font-size: 13px !important; box-shadow: none !important; text-decoration: none; }
body[data-rx-surface="portal"].rx-tracking .portal-link-btn:hover { background: var(--rx-raised) !important; }

body[data-rx-surface="portal"].rx-tracking .card { padding: 24px !important; border-radius: 8px !important; }
body[data-rx-surface="portal"].rx-tracking .card-header-strip { margin: 0 0 16px !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: left !important; border-radius: 0 !important; }
body[data-rx-surface="portal"].rx-tracking .header-shine { display: none !important; }
body[data-rx-surface="portal"].rx-tracking .ticket-number { font-size: 26px !important; font-weight: 600 !important; letter-spacing: -.01em; margin: 0 0 2px !important; background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--rx-text) !important; }
body[data-rx-surface="portal"].rx-tracking .ticket-device { font-size: 15px !important; color: var(--rx-muted) !important; margin: 0 !important; }
body[data-rx-surface="portal"].rx-tracking .ticket-customer { display: inline-block; margin-top: 6px; padding: 0 !important; background: none !important; border: 0 !important; font-size: 14px !important; color: var(--rx-muted) !important; }

body[data-rx-surface="portal"].rx-tracking .status-section { display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 8px !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: left !important; }
body[data-rx-surface="portal"].rx-tracking .status-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-rx-surface="portal"].rx-tracking .status-badge { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; background: var(--rx-tint) !important; color: var(--rx-link) !important; border: 0 !important; box-shadow: none !important; }
body[data-rx-surface="portal"].rx-tracking .status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

body[data-rx-surface="portal"].rx-tracking .info-section { display: grid !important; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--rx-panel-border, var(--rx-border)); text-align: left !important; }
body[data-rx-surface="portal"].rx-tracking .info-label { font-size: 14px !important; font-weight: 400 !important; color: var(--rx-muted) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; }
body[data-rx-surface="portal"].rx-tracking .info-value { background: none !important; border: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 400 !important; color: var(--rx-text) !important; box-shadow: none !important; overflow-wrap: anywhere; }
body[data-rx-surface="portal"].rx-tracking .divider { display: none !important; }

body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice { border: 1px solid var(--rx-panel-border, var(--rx-border)) !important; border-top-width: 1px !important; background: var(--rx-raised) !important; padding: 16px !important; border-radius: 8px !important; }
body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice > div { text-align: left !important; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; }
body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice > div > :not(div:first-child) { grid-column: 1; }
body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice h3 { margin: 0 !important; font-size: 16px !important; }
body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice > div > div:has(.track-invoice-link) { grid-column: 2; grid-row: 1 / span 3; margin: 0 !important; }
body[data-rx-surface="portal"].rx-tracking .track-invoice-link { display: inline-block; padding: 8px 14px; border-radius: 5px; background: var(--rx-brand) !important; color: #fff !important; text-decoration: none; font-weight: 500; font-size: 14px; }
body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice p { margin: 2px 0 0 !important; font-size: 14px !important; }

body[data-rx-surface="portal"].rx-tracking .footer { text-align: left !important; color: var(--rx-muted) !important; font-size: 13px; padding: 16px 0 0 !important; }
@media (max-width: 560px) {
    body[data-rx-surface="portal"].rx-tracking .info-section { grid-template-columns: 1fr; gap: 2px; }
    body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice > div { grid-template-columns: 1fr; }
    body[data-rx-surface="portal"].rx-tracking .rx-tracking-invoice > div > div:has(.track-invoice-link) { grid-column: 1; grid-row: auto; margin-top: 10px !important; }
}
}
@media screen {
body[data-rx-surface="portal"].rx-tracking .card-header-strip, body[data-rx-surface="portal"].rx-tracking .ticket-number { text-align: left !important; }
body[data-rx-surface="portal"].rx-tracking .steps-bar { background: none !important; border: 0 !important; margin: 8px 0 20px !important; padding: 12px 0 !important; border-top: 1px solid var(--rx-panel-border, var(--rx-border)) !important; border-bottom: 1px solid var(--rx-panel-border, var(--rx-border)) !important; }
body[data-rx-surface="portal"].rx-tracking :is(button,.btn,input[type="submit"]) { box-shadow: none !important; }
}
@media screen {
body[data-rx-surface="portal"].rx-tracking .status-section > div { width: 100%; text-align: left !important; }
body[data-rx-surface="portal"].rx-tracking .status-section > div > div { margin-top: 0 !important; }
body[data-rx-surface="portal"].rx-tracking .status-section [role="button"] { background: transparent !important; border-color: var(--rx-border) !important; backdrop-filter: none !important; }
body[data-rx-surface="portal"].rx-tracking .tracking-events { margin: 10px 0 0 !important; max-width: none !important; background: var(--rx-raised) !important; border: 1px solid var(--rx-panel-border, var(--rx-border)) !important; border-radius: 8px !important; backdrop-filter: none !important; }
}
@media screen {
/* Tracking summary centred; lists, tables and details stay left-aligned for reading. */
body[data-rx-surface="portal"].rx-tracking .card-header-strip,
body[data-rx-surface="portal"].rx-tracking .ticket-number { text-align: center !important; }
body[data-rx-surface="portal"].rx-tracking .status-section { align-items: center !important; }
body[data-rx-surface="portal"].rx-tracking .status-section > div { text-align: center !important; }
body[data-rx-surface="portal"].rx-tracking .status-section .tracking-events { text-align: left !important; }
}

/* Portal repair lists: one row style, status carried by the badge, the whole row opens the repair. */
@media screen {
body[data-rx-surface="portal"] .ticket-item { position: relative; border-left: 1px solid var(--rx-panel-border, var(--rx-border)) !important; box-shadow: none !important; transform: none !important; }
body[data-rx-surface="portal"] .ticket-item:hover { background: var(--rx-raised) !important; border-color: var(--rx-border) !important; }
body[data-rx-surface="portal"] .ticket-link { color: var(--rx-muted) !important; text-decoration: none !important; font-size: 13px; }
body[data-rx-surface="portal"] .ticket-link::after { content: ""; position: absolute; inset: 0; }
body[data-rx-surface="portal"] .ticket-item:hover .ticket-link { color: var(--rx-link) !important; }
body[data-rx-surface="portal"] .ticket-number { color: var(--rx-muted); font-weight: 500; }
}
@media screen {
body[data-rx-surface="portal"] .card:has(> .log-row, > .empty-log) { padding: 20px !important; }
}

/* Estimate approval on the tracking page. */
@media screen {
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel { background: var(--rx-raised) !important; border: 1px solid var(--rx-panel-border, var(--rx-border)) !important; border-radius: 8px !important; padding: 20px !important; box-shadow: none !important; text-align: left !important; }
body[data-rx-surface="portal"].rx-tracking .estimate-review-header { text-align: left !important; margin-bottom: 4px !important; }
body[data-rx-surface="portal"].rx-tracking .estimate-review-icon { display: none !important; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel h3 { color: var(--rx-text) !important; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel .estimate-review-copy { color: var(--rx-muted) !important; text-align: left !important; }
body[data-rx-surface="portal"].rx-tracking .estimate-option-card { background: var(--rx-surface) !important; border: 1px solid var(--rx-border) !important; box-shadow: none !important; }
body[data-rx-surface="portal"].rx-tracking .estimate-option-card:hover { border-color: var(--rx-subtle) !important; box-shadow: none !important; }
body[data-rx-surface="portal"].rx-tracking .estimate-option-card.selected { border-color: var(--rx-link) !important; background: var(--rx-tint) !important; box-shadow: inset 0 0 0 1px var(--rx-link) !important; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-option-card .estimate-option-price { color: var(--rx-text) !important; font-variant-numeric: tabular-nums; }
body[data-rx-surface="portal"].rx-tracking .estimate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel .estimate-approve-button { background: var(--rx-brand) !important; border: 1px solid var(--rx-brand) !important; color: #fff !important; border-radius: 6px !important; padding: 11px 20px !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel .estimate-approve-button:hover { background: var(--rx-brand-hover) !important; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel .estimate-decline-button { background: transparent !important; border: 1px solid var(--rx-border) !important; color: var(--rx-text) !important; border-radius: 6px !important; padding: 11px 20px !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: none !important; }
body[data-rx-surface="portal"].rx-tracking .card .estimate-review-panel .estimate-decline-button:hover { border-color: var(--rx-danger) !important; color: var(--rx-danger) !important; }
}

/* Repair board: warranty returns and open supplier returns stand out. */
@media screen {
body[data-rx-surface="staff"] #board-view .board-ticket-card.board-rma,
body[data-rx-surface="staff"] #board-view .board-ticket-card.board-rma:is(.urgency-3,.urgency-4,.urgency-5,.board-priority-high,.board-priority-expedited,.board-invoice-overdue) {
    border-color: var(--rx-warning) !important; box-shadow: inset 0 0 0 1px var(--rx-warning) !important;
}
body[data-rx-surface="staff"] #board-view .board-rma-banner {
    display: flex; align-items: center; gap: 6px; margin: -4px -4px 10px; padding: 6px 8px; border-radius: 4px;
    background: var(--warn-soft); color: var(--rx-warning); font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
body[data-rx-surface="staff"] #board-view .board-supplier-return-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px;
    background: var(--warn-soft); color: var(--rx-warning); border: 1px solid transparent; font-size: 11.5px; font-weight: 600;
}
}

/* Parcel tracking sits under each part in the cost table. */
@media screen {
body[data-rx-surface="portal"].rx-tracking .parcel-tracking { margin-top: 8px; text-align: left; text-transform: none; letter-spacing: 0; }
body[data-rx-surface="portal"].rx-tracking .parcel-tracking > div:first-child { background: transparent !important; border: 1px solid var(--rx-border) !important; backdrop-filter: none !important; font-size: 12.5px !important; padding: 4px 10px !important; }
body[data-rx-surface="portal"].rx-tracking .parcel-tracking .tracking-events { font-size: 13px !important; }
body[data-rx-surface="portal"].rx-tracking .parcel-tracking > div:not(:first-child):not(.tracking-events) { margin: 8px 0 0 !important; max-width: none !important; background: var(--rx-tint) !important; border: 0 !important; border-radius: 6px !important; }
}
@media screen {
body[data-rx-surface="staff"] #board-view .board-capped-note { display: block; width: 100%; margin-top: 4px; padding: 10px 8px; background: none; border: 1px dashed var(--rx-border); border-radius: 6px; color: var(--rx-muted); font: inherit; font-size: 12.5px; line-height: 1.4; text-align: center; cursor: pointer; }
body[data-rx-surface="staff"] #board-view .board-capped-note:hover { color: var(--rx-text); border-color: var(--rx-subtle); }
}