/* 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] {
    --rx-brand: #4f46e5;
    --rx-link: #b6b1ff;
    --rx-bg: #151923;
    --rx-surface: #202635;
    --rx-raised: #293143;
    --rx-border: #3c465b;
    --rx-text: #eef1f7;
    --rx-muted: #b1bbcc;
    --rx-subtle: #929fb5;
    --rx-tint: #303052;
    --rx-success: #75d6ad;
    --rx-warning: #f4c56b;
    --rx-danger: #ff9aab;
    --rx-font: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    /* 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: #ffffff08; --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: #173f34;
    --warning: var(--rx-warning); --warn: var(--rx-warning); --warn-soft: #46391e;
    --error: var(--rx-danger); --danger: var(--rx-danger); --danger-soft: #492a36;
    --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: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body[data-rx-surface][data-theme="light"] {
    --rx-link: #4338ca; --rx-bg: #f5f6fa; --rx-surface: #ffffff; --rx-raised: #eef0f6;
    --rx-border: #d4d9e4; --rx-text: #202637; --rx-muted: #505e73; --rx-subtle: #626f82;
    --rx-tint: #eeedff; --rx-success: #176344; --rx-warning: #805300; --rx-danger: #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; }
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: #4338ca !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-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: #202635; border: 1px solid #4f46e5; }
body[data-rx-surface="portal"] .theme-option[data-theme="light"] .theme-preview { background: #f5f6fa; border: 1px solid #4f46e5; }
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"] .dashboard-grid > .dashboard-section:first-child { grid-row: span 2; }
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:1024px) { body[data-rx-surface="staff"] .dashboard-grid > .dashboard-section:first-child { grid-row: auto; } }
@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 {
/* Invoices stay legible as white paper within the application chrome. Print styles are untouched. */
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: #4338ca;
    --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; }
}
}