/** * TransCity Dispatch Console * * Scoped under .stc-app so nothing leaks into the rest of wp-admin. WordPress * admin styles are neutralised locally rather than globally, for the same * reason. */ /* ============================================================ 1. Design tokens ============================================================ */ /* * Design tokens are declared on :root (not just .stc-app) because the * drawer, dropdown menus, confirm dialogs and toasts are appended directly * to document.body by the JS (so they can use position:fixed reliably and * escape any overflow/stacking-context clipping from the table). CSS custom * properties only cascade down the DOM tree, so those elements — being * siblings of #stc-app rather than descendants — would otherwise never see * these variables and would silently fall back to transparent backgrounds, * no transitions, etc. * * They are ALSO re-declared directly on .stc-menu / .stc-drawer-overlay / * .stc-dialog-overlay / .stc-toasts (not just inherited from :root), because * this plugin's own admin color scheme * (assets/css/admin-color-transcity-premium.css) redeclares --stc-navy, * --stc-text, --stc-surface, etc. with DIFFERENT values on `body.admin- * color-transcity-premium` for operators using that theme. Since these * elements are direct children of , that body-level redeclaration is * a nearer ancestor than :root and wins the inheritance — which is why * .stc-app content (which redeclares the tokens on itself) was fine while * the drawer/menu were not. Redeclaring here closes that gap the same way. */ :root, .stc-app, .stc-menu, .stc-drawer-overlay, .stc-dialog-overlay, .stc-toasts { /* Surfaces */ --stc-bg: #f6f8fb; --stc-surface: #ffffff; --stc-surface-subtle: #f8fafc; --stc-surface-hover: #f1f5f9; /* Text */ --stc-text: #0f172a; --stc-text-secondary: #64748b; --stc-text-muted: #94a3b8; /* Lines */ --stc-border: #e2e8f0; --stc-border-strong: #cbd5e1; /* Brand */ --stc-navy: #0f2747; --stc-yellow: #ffd400; --stc-yellow-hover: #f0c800; /* Semantic */ --stc-success: #15803d; --stc-success-bg: #f0fdf4; --stc-success-border: #bbf7d0; --stc-warning: #b45309; --stc-warning-bg: #fffbeb; --stc-warning-border: #fde68a; --stc-danger: #dc2626; --stc-danger-bg: #fef2f2; --stc-danger-border: #fecaca; --stc-info: #0369a1; --stc-info-bg: #f0f9ff; --stc-info-border: #bae6fd; --stc-neutral-bg: #f1f5f9; --stc-neutral-border: #e2e8f0; --stc-violet: #6d28d9; --stc-violet-bg: #f5f3ff; --stc-violet-border: #ddd6fe; /* Spacing scale */ --stc-s1: 4px; --stc-s2: 8px; --stc-s3: 12px; --stc-s4: 16px; --stc-s5: 20px; --stc-s6: 24px; --stc-s8: 32px; /* Radii */ --stc-r-card: 14px; --stc-r-input: 10px; --stc-r-button: 9px; /* Elevation */ --stc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --stc-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07); --stc-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14); /* Motion */ --stc-t-fast: 120ms; --stc-t-base: 180ms; --stc-t-drawer: 220ms; --stc-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Focus */ --stc-focus: 0 0 0 3px rgba(3, 105, 161, 0.35); } /* * This console is a fixed light-theme surface: every color here assumes a * light background. Without this hint, Chrome's "Auto Dark Mode for web * contents" (and similar browser/OS-level darkening) can repaint our own * dark text (e.g. #0f172a) as a near-white pastel — assuming it needs to * invert for a dark background that was never actually applied — which * makes text unreadable even though every rule above is computing the * intended color. Declaring color-scheme opts this UI out of that repaint. */ :root, .stc-app, .stc-menu, .stc-drawer-overlay, .stc-dialog-overlay, .stc-toasts { color-scheme: light; } @media (prefers-reduced-motion: reduce) { .stc-app, .stc-app *, .stc-menu, .stc-drawer-overlay, .stc-drawer-overlay *, .stc-dialog-overlay, .stc-dialog-overlay *, .stc-toasts, .stc-toasts * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ 2. Shell ============================================================ */ /* The console owns the full admin canvas. */ #wpcontent:has(.stc-app), .stc-page-wrap { background: var(--stc-bg); } .stc-app { font-family: 'City Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--stc-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding: var(--stc-s5) var(--stc-s5) var(--stc-s8); margin-left: -20px; background: var(--stc-bg); min-height: calc(100vh - 32px); box-sizing: border-box; } .stc-app *, .stc-app *::before, .stc-app *::after { box-sizing: border-box; } .stc-shell { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--stc-s4); } .stc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ 3. Buttons ============================================================ */ .stc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--stc-r-button); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--stc-t-fast) var(--stc-ease), border-color var(--stc-t-fast) var(--stc-ease), color var(--stc-t-fast) var(--stc-ease); } .stc-btn:focus-visible { outline: none; box-shadow: var(--stc-focus); } .stc-btn[disabled], .stc-btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; } /* Brand yellow is reserved for the single primary call to action. */ .stc-btn--primary { background: var(--stc-yellow, #ffd400); color: var(--stc-navy, #0f2747); } .stc-btn--primary:hover:not([disabled]) { background: var(--stc-yellow-hover, #f0c800); } .stc-btn--secondary { background: var(--stc-surface, #ffffff); border-color: var(--stc-border-strong, #cbd5e1); color: var(--stc-text, #0f172a); } .stc-btn--secondary:hover:not([disabled]) { background: var(--stc-surface-hover, #f1f5f9); } .stc-btn--ghost { background: transparent; color: var(--stc-text-secondary, #64748b); } .stc-btn--ghost:hover:not([disabled]) { background: var(--stc-surface-hover, #f1f5f9); color: var(--stc-text, #0f172a); } /* Red appears only where an action destroys or reverses something. */ .stc-btn--danger { background: var(--stc-danger, #dc2626); color: #fff; } .stc-btn--danger:hover:not([disabled]) { background: #b91c1c; } .stc-btn--sm { min-height: 30px; padding: 0 10px; font-size: 12px; } .stc-btn--icon { min-height: 32px; width: 32px; padding: 0; background: transparent; border-color: transparent; color: var(--stc-text-secondary, #64748b); } .stc-btn--icon:hover:not([disabled]) { background: var(--stc-surface-hover, #f1f5f9); color: var(--stc-text, #0f172a); } .stc-btn--block { width: 100%; } .stc-btn svg { flex: none; } /* ============================================================ 4. Page header ============================================================ */ .stc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--stc-s4); flex-wrap: wrap; padding: var(--stc-s3) var(--stc-s4); } /* Keep record status beside the title across profile/configuration screens. */ .stc-header__intro { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: var(--stc-s2); min-width: 0; } .stc-header__intro > .stc-header__subtitle { grid-column: 1 / -1; } .stc-header__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--stc-text); line-height: 1.2; } .stc-header__subtitle { margin: var(--stc-s1) 0 0; font-size: 13px; color: var(--stc-text-secondary); } .stc-header__actions { display: flex; align-items: center; gap: var(--stc-s2); flex-wrap: wrap; } .stc-header__updated { font-size: 12px; color: var(--stc-text-muted); width: 100%; text-align: right; } /* ============================================================ 5. Metric cards ============================================================ */ .stc-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stc-s3); } .stc-metric { display: flex; align-items: flex-start; gap: var(--stc-s3); padding: var(--stc-s4); background: var(--stc-surface); border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); box-shadow: var(--stc-shadow-sm); text-align: left; font: inherit; cursor: pointer; transition: border-color var(--stc-t-fast) var(--stc-ease), box-shadow var(--stc-t-fast) var(--stc-ease); } .stc-metric:hover { border-color: var(--stc-border-strong); box-shadow: var(--stc-shadow-md); } .stc-metric:focus-visible { outline: none; box-shadow: var(--stc-focus); } .stc-metric[aria-pressed='true'] { border-color: var(--stc-navy); box-shadow: 0 0 0 1px var(--stc-navy); } .stc-metric__icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; flex: none; color: var(--stc-info); background: var(--stc-info-bg); } .stc-metric--success .stc-metric__icon { color: var(--stc-success); background: var(--stc-success-bg); } .stc-metric--warning .stc-metric__icon { color: var(--stc-warning); background: var(--stc-warning-bg); } .stc-metric--danger .stc-metric__icon { color: var(--stc-danger); background: var(--stc-danger-bg); } .stc-metric--violet .stc-metric__icon { color: var(--stc-violet); background: var(--stc-violet-bg); } .stc-metric__body { min-width: 0; } .stc-metric__label { display: block; font-size: 13px; font-weight: 500; color: var(--stc-text-secondary); } .stc-metric__value { display: block; margin: 2px 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .stc-metric__unit { font-size: 13px; font-weight: 500; color: var(--stc-text-secondary); } .stc-metric__context { display: block; font-size: 12px; color: var(--stc-text-muted); } .stc-metric__context--success { color: var(--stc-success); } .stc-metric__context--warning { color: var(--stc-warning); } .stc-metric__context--danger { color: var(--stc-danger); } /* ============================================================ 6. Attention banner ============================================================ */ .stc-attention { display: flex; align-items: center; gap: var(--stc-s3); padding: var(--stc-s3) var(--stc-s4); background: var(--stc-surface); border: 1px solid var(--stc-warning-border); border-left: 3px solid var(--stc-warning); border-radius: var(--stc-r-card); flex-wrap: wrap; } .stc-attention__title { display: flex; align-items: center; gap: var(--stc-s2); font-size: 13px; font-weight: 700; color: var(--stc-text); flex: none; } .stc-attention__icon { color: var(--stc-warning); } .stc-attention__items { display: flex; align-items: center; gap: var(--stc-s4); flex-wrap: wrap; flex: 1; min-width: 200px; } .stc-attention__item { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--stc-text-secondary); cursor: pointer; text-align: left; } .stc-attention__item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--stc-text-muted); flex: none; } .stc-attention__item:hover { color: var(--stc-text); text-decoration: underline; } .stc-attention__item:focus-visible { outline: none; box-shadow: var(--stc-focus); border-radius: 4px; } /* ============================================================ 7. Table card, toolbar, tabs ============================================================ */ .stc-panel { background: var(--stc-surface); border: 1px solid var(--stc-border); border-radius: var(--stc-r-card); box-shadow: var(--stc-shadow-sm); overflow: hidden; } .stc-toolbar { display: flex; align-items: center; gap: var(--stc-s3); padding: var(--stc-s4); flex-wrap: wrap; } .stc-search { position: relative; flex: 1 1 280px; min-width: 220px; max-width: 520px; } .stc-search__input { width: 100%; min-height: 38px; padding: 0 38px 0 12px; border: 1px solid var(--stc-border-strong); border-radius: var(--stc-r-input); font: inherit; font-size: 13px; color: var(--stc-text); background: var(--stc-surface); } .stc-search__input::placeholder { color: var(--stc-text-muted); } .stc-search__input:focus { outline: none; border-color: var(--stc-info); box-shadow: var(--stc-focus); } .stc-search__icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--stc-text-muted); pointer-events: none; } .stc-search.is-busy .stc-search__icon { animation: stc-spin 700ms linear infinite; } @keyframes stc-spin { to { transform: translateY(-50%) rotate(360deg); } } .stc-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; width: 22px; height: 22px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--stc-neutral-bg); color: var(--stc-text-secondary); cursor: pointer; font-size: 14px; line-height: 1; } .stc-search.has-value .stc-search__clear { display: flex; } .stc-search.has-value .stc-search__icon { display: none; } /* Section heading inside a .stc-toolbar used as a panel header. Mirrors .stcu-panel__title from st-customers.css, but lives here so screens that do not enqueue the customers stylesheet can still use it. */ .stc-panel__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--stc-text); } .stc-toolbar__spacer { flex: 1; } .stc-toolbar__right { display: flex; align-items: center; gap: var(--stc-s2); flex-wrap: wrap; } .stc-filters { display: flex; align-items: center; gap: var(--stc-s2); padding: 0 var(--stc-s4) var(--stc-s4); flex-wrap: wrap; } .stc-select { position: relative; display: inline-flex; } .stc-select__control { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; background: var(--stc-surface); border: 1px solid var(--stc-border-strong); border-radius: var(--stc-r-button); font: inherit; font-size: 13px; font-weight: 500; color: var(--stc-text); cursor: pointer; white-space: nowrap; } .stc-select__control:hover { background: var(--stc-surface-hover); } .stc-select__control:focus-visible { outline: none; box-shadow: var(--stc-focus); } .stc-select__control.is-active { border-color: var(--stc-navy); background: #f8fafc; color: var(--stc-navy); font-weight: 600; } .stc-select__caret { color: var(--stc-text-muted); } .stc-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--stc-info); cursor: pointer; } .stc-link-btn:hover { text-decoration: underline; } .stc-link-btn:focus-visible { outline: none; box-shadow: var(--stc-focus); border-radius: 4px; } .stc-link-btn[hidden] { display: none; } /* Dropdown menus (filters + row actions) */ .stc-menu { position: absolute; /* Must outrank the drawer overlay (100000) and confirm dialogs (100010) since "More actions" inside the drawer footer opens this same menu. */ z-index: 100030; min-width: 200px; max-height: 340px; overflow-y: auto; padding: var(--stc-s1); background: var(--stc-surface, #ffffff); border: 1px solid var(--stc-border, #e2e8f0); border-radius: 12px; box-shadow: var(--stc-shadow-lg); animation: stc-menu-in var(--stc-t-fast) var(--stc-ease); } @keyframes stc-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .stc-menu__item { display: flex; align-items: center; gap: var(--stc-s2); width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--stc-text, #0f172a); text-align: left; cursor: pointer; } .stc-menu__item:hover { background: var(--stc-surface-hover, #f1f5f9); } .stc-menu__item:focus-visible { outline: none; box-shadow: var(--stc-focus); } .stc-menu__item[aria-checked='true'] { font-weight: 600; color: var(--stc-navy, #0f2747); } .stc-menu__item--danger { color: var(--stc-danger, #dc2626); } .stc-menu__item--danger:hover { background: var(--stc-danger-bg, #fef2f2); } .stc-menu__check { margin-left: auto; color: var(--stc-navy, #0f2747); } .stc-menu__divider { height: 1px; margin: var(--stc-s1) 0; background: var(--stc-border, #e2e8f0); } .stc-menu__label { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stc-text-muted); } /* Tabs */ .stc-tabs { display: flex; align-items: center; gap: var(--stc-s1); padding: 0 var(--stc-s4); border-bottom: 1px solid var(--stc-border); overflow-x: auto; scrollbar-width: none; } .stc-tabs::-webkit-scrollbar { display: none; } .stc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 10px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--stc-text-secondary); cursor: pointer; white-space: nowrap; margin-bottom: -1px; } .stc-tab:hover { color: var(--stc-text); } .stc-tab:focus-visible { outline: none; box-shadow: var(--stc-focus); border-radius: 4px; } .stc-tab[aria-selected='true'] { color: var(--stc-text); font-weight: 600; border-bottom-color: var(--stc-yellow); } .stc-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--stc-neutral-bg); font-size: 11px; font-weight: 600; color: var(--stc-text-secondary); } .stc-tab[aria-selected='true'] .stc-tab__count { background: var(--stc-navy); color: #fff; } /* ============================================================ 8. Badges ============================================================ */ .stc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; } /* A dot carries the same information as the colour, so status is never communicated by hue alone. */ .stc-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .stc-badge--neutral { background: var(--stc-neutral-bg); border-color: var(--stc-neutral-border); color: #475569; } .stc-badge--info { background: var(--stc-info-bg); border-color: var(--stc-info-border); color: var(--stc-info); } .stc-badge--success { background: var(--stc-success-bg); border-color: var(--stc-success-border); color: var(--stc-success); } .stc-badge--warning { background: var(--stc-warning-bg); border-color: var(--stc-warning-border); color: var(--stc-warning); } .stc-badge--danger { background: var(--stc-danger-bg); border-color: var(--stc-danger-border); color: var(--stc-danger); } .stc-badge--violet { background: var(--stc-violet-bg); border-color: var(--stc-violet-border); color: var(--stc-violet); } /* ============================================================ 9. Table ============================================================ */ .stc-table-wrap { overflow-x: auto; } .stc-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1080px; } .stc-table thead th { padding: 10px var(--stc-s3); background: var(--stc-surface-subtle); border-bottom: 1px solid var(--stc-border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stc-text-secondary); text-align: left; white-space: nowrap; } .stc-table tbody td { padding: var(--stc-s3); border-bottom: 1px solid var(--stc-border); vertical-align: middle; } .stc-table tbody tr { transition: background-color var(--stc-t-fast) var(--stc-ease); } .stc-table tbody tr:hover { background: var(--stc-surface-subtle); } .stc-table tbody tr.is-selected { background: #fffdf0; } .stc-table tbody tr.is-open { background: var(--stc-surface-hover); } .stc-table tbody tr:last-child td { border-bottom: 0; } .stc-table tbody tr:focus-visible { outline: none; box-shadow: inset var(--stc-focus); } .stc-col-cb { width: 40px; padding-left: var(--stc-s4) !important; } .stc-col-actions { width: 190px; } .stc-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--stc-navy); cursor: pointer; } /* Booking cell */ .stc-booking-id { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--stc-info); } .stc-cell-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--stc-text-muted); } .stc-card__booking-meta { display: flex; align-items: baseline; gap: var(--stc-s2); flex-wrap: wrap; } .stc-card__booking-meta .stc-booking-id { display: inline; } .stc-card__schedule { color: var(--stc-text); font-size: 12px; font-weight: 700; white-space: nowrap; } /* Customer cell */ .stc-customer { display: flex; align-items: center; gap: var(--stc-s2); } .stc-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--stc-neutral-bg); color: #475569; font-size: 11px; font-weight: 700; flex: none; overflow: hidden; padding: 0; } .stc-avatar__image { display: block; width: 100%; height: 100%; object-fit: cover; } .stc-customer__name { display: block; font-weight: 700; font-size: 13px; color: var(--stc-text); } /* Route cell */ .stc-route { max-width: 220px; font-size: 13px; } .stc-route__point { display: block; color: var(--stc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stc-route__arrow { display: block; color: var(--stc-text-muted); font-size: 11px; line-height: 1.2; } /* Schedule cell */ .stc-schedule__date { display: block; font-weight: 700; font-size: 13px; color: var(--stc-text); } .stc-schedule__time { display: block; font-size: 13px; font-weight: 700; color: var(--stc-text); } .stc-schedule__rel { display: block; font-size: 12px; color: var(--stc-text-muted); } .stc-schedule__rel--soon { color: var(--stc-warning); font-weight: 600; } /* Driver cell */ .stc-driver__name { display: block; font-size: 13px; font-weight: 500; } .stc-driver__unassigned { display: block; font-size: 13px; color: var(--stc-text-muted); } .stc-driver__assign { background: none; border: 0; padding: 0; margin-top: 2px; font: inherit; font-size: 12px; font-weight: 600; color: var(--stc-danger); cursor: pointer; } .stc-driver__assign:hover { text-decoration: underline; } /* Actions cell */ .stc-row-actions { display: flex; align-items: center; gap: var(--stc-s2); justify-content: flex-end; flex-wrap: wrap; } /* ============================================================ 10. Mobile cards ============================================================ */ .stc-cards { display: none; padding: var(--stc-s3); gap: var(--stc-s3); } .stc-card { border: 1px solid var(--stc-border); border-radius: 12px; background: var(--stc-surface); overflow: hidden; } .stc-card.is-selected { border-color: var(--stc-yellow); } .stc-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--stc-s2); padding: var(--stc-s3); border-bottom: 1px solid var(--stc-border); background: var(--stc-surface-subtle); } .stc-card__body { padding: var(--stc-s3); display: grid; gap: var(--stc-s2); } .stc-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--stc-s3); font-size: 13px; } .stc-card__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stc-text-muted); flex: none; } .stc-card__value { text-align: right; color: var(--stc-text); } .stc-card__value--strong { font-weight: 700; } .stc-card__badges { display: flex; gap: 6px; flex-wrap: wrap; } .stc-card__actions { display: flex; gap: var(--stc-s2); padding: var(--stc-s3); border-top: 1px solid var(--stc-border); } .stc-card__actions .stc-btn:first-child { flex: 1; } .stc-card__view { display: none; flex: none !important; } /* ============================================================ 11. Bulk selection bar ============================================================ */ .stc-bulkbar { position: sticky; bottom: var(--stc-s4); z-index: 60; display: flex; align-items: center; gap: var(--stc-s3); margin: 0 auto; padding: var(--stc-s2) var(--stc-s3); width: fit-content; max-width: 100%; background: var(--stc-navy); border-radius: 12px; box-shadow: var(--stc-shadow-lg); color: #fff; flex-wrap: wrap; animation: stc-bulk-in var(--stc-t-base) var(--stc-ease); } .stc-bulkbar[hidden] { display: none; } @keyframes stc-bulk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .stc-bulkbar__count { font-size: 13px; font-weight: 600; white-space: nowrap; } .stc-bulkbar .stc-btn--secondary { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: #fff; } .stc-bulkbar .stc-btn--secondary:hover:not([disabled]) { background: rgba(255, 255, 255, 0.2); } .stc-bulkbar .stc-btn--ghost { color: rgba(255, 255, 255, 0.8); } .stc-bulkbar .stc-btn--ghost:hover:not([disabled]) { background: rgba(255, 255, 255, 0.12); color: #fff; } /* ============================================================ 12. Footer / pagination ============================================================ */ .stc-tablefoot { display: flex; align-items: center; justify-content: space-between; gap: var(--stc-s3); padding: var(--stc-s3) var(--stc-s4); border-top: 1px solid var(--stc-border); flex-wrap: wrap; } .stc-tablefoot__meta { font-size: 13px; color: var(--stc-text-secondary); } .stc-pager { display: flex; align-items: center; gap: var(--stc-s1); } .stc-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--stc-border-strong); border-radius: 8px; background: var(--stc-surface); font: inherit; font-size: 13px; color: var(--stc-text); cursor: pointer; } .stc-pager__btn:hover:not([disabled]) { background: var(--stc-surface-hover); } .stc-pager__btn[disabled] { opacity: 0.4; cursor: not-allowed; } .stc-pager__btn[aria-current='page'] { background: var(--stc-yellow); border-color: var(--stc-yellow); color: var(--stc-navy); font-weight: 700; } .stc-pager__btn:focus-visible { outline: none; box-shadow: var(--stc-focus); } /* ============================================================ 13. Skeleton / empty / error states ============================================================ */ .stc-skel { background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%); background-size: 400% 100%; animation: stc-shimmer 1.4s ease infinite; border-radius: 6px; display: block; } @keyframes stc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .stc-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--stc-s2); padding: var(--stc-s8) var(--stc-s4); text-align: center; } .stc-state__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--stc-neutral-bg); color: var(--stc-text-muted); margin-bottom: var(--stc-s1); } .stc-state--error .stc-state__icon { background: var(--stc-danger-bg); color: var(--stc-danger); } .stc-state__title { margin: 0; font-size: 16px; font-weight: 600; } .stc-state__text { margin: 0; font-size: 13px; color: var(--stc-text-secondary); max-width: 380px; } .stc-state__actions { display: flex; gap: var(--stc-s2); margin-top: var(--stc-s2); flex-wrap: wrap; justify-content: center; } .stc-state__details { margin-top: var(--stc-s3); font-size: 12px; color: var(--stc-text-muted); max-width: 520px; text-align: left; } .stc-state__details pre { margin: var(--stc-s1) 0 0; padding: var(--stc-s2); background: var(--stc-neutral-bg); border-radius: 8px; overflow-x: auto; font-size: 11px; white-space: pre-wrap; word-break: break-word; } /* ============================================================ 14. Drawer ============================================================ */ .stc-drawer-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 100000; opacity: 0; transition: opacity var(--stc-t-drawer) var(--stc-ease); } .stc-drawer-overlay[hidden] { display: none; } .stc-drawer-overlay.is-open { opacity: 1; } .stc-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 600px; max-width: 90vw; display: flex; flex-direction: column; /* Fallbacks guard against low contrast if the --stc-* tokens ever fail to cascade to this panel (it lives outside #stc-app in the DOM). */ background: var(--stc-surface, #ffffff); box-shadow: var(--stc-shadow-lg); transform: translateX(100%); transition: transform var(--stc-t-drawer) var(--stc-ease); font-family: 'City Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--stc-text, #0f172a); font-size: 14px; } .stc-drawer-overlay.is-open .stc-drawer { transform: translateX(0); } .stc-drawer__header { flex: none; padding: var(--stc-s4) var(--stc-s5); border-bottom: 1px solid var(--stc-border); background: var(--stc-surface); } .stc-drawer__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--stc-s3); } .stc-drawer__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--stc-s2); } .stc-drawer__nav { display: flex; align-items: center; gap: var(--stc-s1); } .stc-drawer__meta { display: flex; align-items: center; gap: var(--stc-s2); margin-top: var(--stc-s2); flex-wrap: wrap; } .stc-drawer__datetime { margin: var(--stc-s2) 0 0; font-size: 13px; color: var(--stc-text-secondary, #64748b); } .stc-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--stc-s5); overscroll-behavior: contain; } .stc-drawer__footer { flex: none; display: flex; align-items: center; gap: var(--stc-s2); padding: var(--stc-s3) var(--stc-s5); border-top: 1px solid var(--stc-border); background: var(--stc-surface); } .stc-drawer__footer .stc-btn:first-child { flex: 1; } .stc-drawer__close { flex: none; } /* Drawer sections */ .stc-section { padding: var(--stc-s5) 0; border-bottom: 1px solid var(--stc-border); } .stc-section:last-child { border-bottom: 0; } .stc-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--stc-s3); margin-bottom: var(--stc-s3); } .stc-section__title { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stc-text-secondary, #64748b); } .stc-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stc-s3); } .stc-kv__label { display: block; font-size: 12px; color: var(--stc-text-muted, #94a3b8); margin-bottom: 1px; } .stc-kv__value { display: block; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--stc-text, #0f172a); } .stc-payment-method { display: inline-flex; align-items: center; gap: 6px; } .stc-payment-method img { width: 24px; height: 16px; object-fit: contain; flex: none; } .stc-payment-link-diagnostic { margin-top:14px; padding:12px 13px; border:1px solid #d7dee8; border-left:4px solid #718096; border-radius:10px; background:#f8fafc; } .stc-payment-link-diagnostic--success { border-left-color:#16825d; background:#f0fdf7; } .stc-payment-link-diagnostic--info { border-left-color:#2878b8; background:#f2f8fd; } .stc-payment-link-diagnostic--warning { border-left-color:#c47b16; background:#fff9ed; } .stc-payment-link-diagnostic--danger { border-left-color:#c2413b; background:#fff5f4; } .stc-payment-link-diagnostic__head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .stc-payment-link-diagnostic__status { padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.8); color:#475569; font-size:11px; font-weight:800; text-transform:capitalize; } .stc-payment-link-diagnostic__summary { margin:7px 0 0; color:#334155; font-size:13px; font-weight:700; line-height:1.45; } .stc-payment-link-diagnostic__facts { display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:9px; color:#475569; font-size:12px; } .stc-payment-link-diagnostic__facts span { display:inline-flex; gap:5px; } .stc-payment-link-diagnostic__facts small { color:#64748b; font-weight:800; } .stc-payment-link-diagnostic__recommendation { margin:9px 0 0; color:#475569; font-size:12px; line-height:1.5; } /* Customer block */ .stc-person { display: flex; align-items: center; gap: var(--stc-s3); } .stc-person .stc-avatar { width: 40px; height: 40px; font-size: 13px; } .stc-person__name { font-weight: 600; font-size: 15px; color: var(--stc-text, #0f172a); } .stc-person__line { font-size: 13px; color: var(--stc-text-secondary, #64748b); } .stc-person__actions { margin-left: auto; display: flex; gap: var(--stc-s1); } /* Route display */ .stc-routeline { display: grid; grid-template-columns: 16px 1fr; gap: 0 var(--stc-s3); } .stc-routeline__marks { display: flex; flex-direction: column; align-items: center; padding-top: 6px; } .stc-routeline__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--stc-success); background: var(--stc-surface); flex: none; } .stc-routeline__dot--end { border-color: var(--stc-info); background: var(--stc-info); } .stc-routeline__line { flex: 1; width: 2px; background: var(--stc-border-strong); min-height: 20px; } .stc-routeline__stop { padding-bottom: var(--stc-s3); } .stc-routeline__stop:last-child { padding-bottom: 0; } .stc-routeline__address { font-size: 13px; font-weight: 500; color: var(--stc-text, #0f172a); } .stc-routeline__sub { font-size: 12px; color: var(--stc-text-muted, #94a3b8); } /* Assignment card */ .stc-assign { display: flex; align-items: center; gap: var(--stc-s3); padding: 0; border: 0; border-radius: 0; background: transparent; flex-wrap: wrap; } .stc-assign__body { flex: 1; min-width: 140px; } .stc-assign__name { font-weight: 600; font-size: 14px; color: var(--stc-text, #0f172a); } .stc-assign__sub { font-size: 13px; color: var(--stc-text-secondary, #64748b); } .stc-assign-edit { display: grid; gap: var(--stc-s3); } .stc-field { display: grid; gap: var(--stc-s1); } .stc-field__label { font-size: 12px; font-weight: 600; color: var(--stc-text-secondary); } .stc-field__input, .stc-field select, .stc-field input, .stc-field textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--stc-border-strong); border-radius: var(--stc-r-input); font: inherit; font-size: 13px; color: var(--stc-text); background: var(--stc-surface); } .stc-field select:focus, .stc-field input:focus, .stc-field textarea:focus { outline: none; border-color: var(--stc-info); box-shadow: var(--stc-focus); } .stc-field__hint { font-size: 12px; color: var(--stc-text-muted); } .stc-check { display: flex; align-items: flex-start; gap: var(--stc-s2); font-size: 13px; cursor: pointer; } .stc-check input { margin: 2px 0 0; accent-color: var(--stc-navy); } /* On/off switch — enable/disable a rule, block a customer, etc. Never wrap in .stc-field (its input selector forces width:100%/min-height:38px). */ .stc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--stc-s2); cursor: pointer; width: fit-content; } .stc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .stc-switch__track { position: relative; width: 40px; height: 22px; flex: none; border-radius: 999px; background: var(--stc-border-strong, #cbd5e1); transition: background-color var(--stc-t-fast) var(--stc-ease); } .stc-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); transition: transform var(--stc-t-fast) var(--stc-ease); } .stc-switch input:checked + .stc-switch__track { background: var(--stc-info, #0284c7); } .stc-switch input:checked + .stc-switch__track::after { transform: translateX(18px); } .stc-switch input:focus-visible + .stc-switch__track { box-shadow: var(--stc-focus); } .stc-switch__label { font-size: 13px; font-weight: 600; color: var(--stc-text); } /* Segmented pill toggle group — multi-select that reads as buttons, e.g. "Service type". Each pill is a checkbox; :has() drives the selected state, with a graceful fallback (the check glyph still flips) on browsers without :has() support. Never wrap in .stc-field, same reason as .stc-switch. */ .stc-toggle-group { display: flex; flex-wrap: wrap; gap: var(--stc-s2); } .stc-toggle-pill { position: relative; display: inline-flex; align-items: center; gap: var(--stc-s2); width: fit-content; padding: var(--stc-s2) var(--stc-s3); border: 1px solid var(--stc-border-strong, #cbd5e1); border-radius: var(--stc-r-button); background: var(--stc-surface, #fff); color: var(--stc-text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--stc-t-fast) var(--stc-ease), background-color var(--stc-t-fast) var(--stc-ease), color var(--stc-t-fast) var(--stc-ease); } .stc-toggle-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .stc-toggle-pill__check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1px solid var(--stc-border-strong, #cbd5e1); color: transparent; transition: background-color var(--stc-t-fast) var(--stc-ease), border-color var(--stc-t-fast) var(--stc-ease); } .stc-toggle-pill input:checked ~ .stc-toggle-pill__check { background: var(--stc-info, #0284c7); border-color: var(--stc-info, #0284c7); color: #fff; } .stc-toggle-pill:has(input:checked) { border-color: var(--stc-info, #0284c7); background: var(--stc-info-bg, #eff8ff); color: var(--stc-info, #0284c7); } .stc-toggle-pill input:focus-visible ~ .stc-toggle-pill__check { box-shadow: var(--stc-focus); } .stc-actions-row { display: flex; gap: var(--stc-s2); flex-wrap: wrap; } /* Financial summary */ .stc-finance { display: grid; gap: 6px; } .stc-finance__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--stc-s3); font-size: 13px; } .stc-finance__label { color: var(--stc-text-secondary); } .stc-finance__value { font-variant-numeric: tabular-nums; } .stc-finance__row--total { margin-top: var(--stc-s2); padding-top: var(--stc-s3); border-top: 1px solid var(--stc-border-strong); font-size: 16px; font-weight: 700; } .stc-finance__row--total .stc-finance__label { color: var(--stc-text); } .stc-finance__row--refund .stc-finance__value { color: var(--stc-danger); } /* Timeline */ .stc-timeline { display: grid; gap: 0; } .stc-timeline__item { display: grid; grid-template-columns: 14px 1fr; gap: 0 var(--stc-s3); } .stc-timeline__marks { display: flex; flex-direction: column; align-items: center; } .stc-timeline__dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; border: 2px solid var(--stc-border-strong); background: var(--stc-surface); flex: none; } .stc-timeline__line { flex: 1; width: 2px; background: var(--stc-border); } .stc-timeline__item:last-child .stc-timeline__line { background: transparent; } .stc-timeline__body { padding-bottom: var(--stc-s3); } .stc-timeline__time { font-size: 12px; color: var(--stc-text-muted); } .stc-timeline__label { font-size: 13px; color: var(--stc-text); } .stc-timeline__actor { font-size: 12px; color: var(--stc-text-muted); } /* Refund history */ .stc-refund { display: flex; align-items: baseline; justify-content: space-between; gap: var(--stc-s3); padding: var(--stc-s2) 0; border-bottom: 1px dashed var(--stc-border); font-size: 13px; } .stc-refund:last-child { border-bottom: 0; } .stc-refund__id { font-size: 11px; color: var(--stc-text-muted); font-family: ui-monospace, Menlo, monospace; } .stc-empty-note { font-size: 13px; color: var(--stc-text-muted); margin: 0; } /* ============================================================ 15. Confirmation dialogs ============================================================ */ .stc-dialog-overlay { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: var(--stc-s4); background: rgba(15, 23, 42, 0.5); opacity: 0; transition: opacity var(--stc-t-base) var(--stc-ease); } .stc-dialog-overlay[hidden] { display: none; } .stc-dialog-overlay.is-open { opacity: 1; } .stc-dialog { width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; padding: var(--stc-s5); background: var(--stc-surface); border-radius: 16px; box-shadow: var(--stc-shadow-lg); font-family: 'City Sans', 'Inter', -apple-system, sans-serif; color: var(--stc-text); transform: scale(0.97); transition: transform var(--stc-t-base) var(--stc-ease); } .stc-dialog-overlay.is-open .stc-dialog { transform: scale(1); } .stc-dialog__title { margin: 0 0 var(--stc-s1); font-size: 18px; font-weight: 700; } .stc-dialog__text { margin: 0 0 var(--stc-s4); font-size: 13px; color: var(--stc-text-secondary); } .stc-dialog__fields { display: grid; gap: var(--stc-s3); margin-bottom: var(--stc-s4); } .stc-dialog__error { margin: 0 0 var(--stc-s3); font-size: 13px; font-weight: 600; color: var(--stc-danger); } .stc-dialog__error[hidden] { display: none; } .stc-actionable-error__message, .stc-actionable-error__instruction { display: block; } .stc-actionable-error__instruction { margin-top: 6px; color: var(--stc-text); font-weight: 500; line-height: 1.45; } .stc-actionable-error__instruction strong { font-weight: 750; } .stc-dialog__actions { display: flex; gap: var(--stc-s2); justify-content: flex-end; flex-wrap: wrap; } .stc-amount-input { position: relative; } .stc-amount-input__prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--stc-text-secondary); font-size: 13px; pointer-events: none; } .stc-amount-input input { padding-left: 24px; font-variant-numeric: tabular-nums; } /* ============================================================ 16. Toasts ============================================================ */ .stc-toasts { position: fixed; bottom: var(--stc-s5); right: var(--stc-s5); z-index: 100020; display: flex; flex-direction: column; gap: var(--stc-s2); max-width: 360px; pointer-events: none; } .stc-toast { display: flex; align-items: flex-start; gap: var(--stc-s2); padding: var(--stc-s3) var(--stc-s4); background: var(--stc-surface); border: 1px solid var(--stc-border); border-left: 3px solid var(--stc-info); border-radius: 12px; box-shadow: var(--stc-shadow-lg); font-size: 13px; color: var(--stc-text); pointer-events: auto; animation: stc-toast-in var(--stc-t-base) var(--stc-ease); } .stc-toast--success { border-left-color: var(--stc-success); } .stc-toast--error { border-left-color: var(--stc-danger); } .stc-toast.is-leaving { animation: stc-toast-out var(--stc-t-base) var(--stc-ease) forwards; } @keyframes stc-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes stc-toast-out { to { opacity: 0; transform: translateX(16px); } } .stc-toast__close { margin-left: auto; background: none; border: 0; padding: 0 2px; font-size: 16px; line-height: 1; color: var(--stc-text-muted); cursor: pointer; } /* ============================================================ 16.5. Sticky unsaved-changes bar (create/edit pages only — never in a drawer/modal, which already commits on submit). ============================================================ */ .stc-savebar { position: sticky; bottom: 0; left: 0; right: 0; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: var(--stc-s4); margin: var(--stc-s4) calc(-1 * var(--stc-s4)) calc(-1 * var(--stc-s4)); padding: var(--stc-s3) var(--stc-s4); background: var(--stc-warning-bg); border-top: 1px solid var(--stc-warning-border); box-shadow: var(--stc-shadow-lg); } .stc-savebar.is-visible { display: flex; } .stc-savebar__msg { display: flex; align-items: flex-start; gap: var(--stc-s2); min-width: 0; } .stc-savebar__icon { flex: none; color: var(--stc-warning); margin-top: 1px; } .stc-savebar__title { margin: 0; color: var(--stc-text); font-size: 13px; font-weight: 600; } .stc-savebar__subtitle { margin: 2px 0 0; color: var(--stc-text-secondary); font-size: 12px; } .stc-savebar__actions { display: flex; align-items: center; gap: var(--stc-s2); flex: none; } /* Inline booking edit inside the detail drawer. */ .stc-edit-booking-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stc-s3); } .stc-edit-booking-form .stc-field { min-width: 0; } .stc-edit-booking-form .stc-field__label { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; } .stc-edit-booking-form input { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; } .stc-edit-booking-form .stc-dialog__error, .stc-edit-booking-form .stc-actions-row { grid-column: 1 / -1; } .stc-edit-booking-form .stc-actions-row, .stc-assign-edit .stc-actions-row { width: 100%; } .stc-edit-booking-form .stc-actions-row[hidden] { display: none !important; } .stc-edit-booking-form .stc-actions-row .stc-btn, .stc-assign-edit .stc-actions-row .stc-btn { flex: 1; } .stc-edit-booking-form .stc-actions-row .stc-btn:first-child, .stc-assign-edit .stc-actions-row .stc-btn:first-child { flex: 2; } .stc-flight-info { grid-column: 1 / -1; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; } .stc-flight-info--loading { background: var(--stc-warning-bg); color: var(--stc-text-secondary); } .stc-flight-info--success { background: var(--stc-success-bg); color: var(--stc-success); } .stc-flight-info--error { background: var(--stc-danger-bg); color: var(--stc-danger); } .stc-edit-success { margin: 0 0 var(--stc-s3); padding: var(--stc-s3); border-left: 3px solid var(--stc-success); border-radius: 8px; background: var(--stc-success-bg); color: var(--stc-text); font-size: 13px; line-height: 1.45; } .stc-edit-confirm { padding: var(--stc-s3); border: 1px solid var(--stc-warning-border); border-radius: 10px; background: var(--stc-warning-bg); } .stc-edit-confirm p { margin: 0 0 var(--stc-s3); color: var(--stc-text); font-size: 13px; line-height: 1.45; } /* ============================================================ 17. Responsive ============================================================ */ @media (max-width: 1400px) { .stc-table { min-width: 980px; } } @media (max-width: 1200px) { .stc-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .stc-app { padding: var(--stc-s3); margin-left: 0; } .stc-header { flex-direction: column; align-items: stretch; } .stc-header__updated { text-align: left; } .stc-header__actions .stc-btn { flex: 1 1 auto; min-width: 0; } /* Dispatch owns a purpose-built mobile card renderer. Keep this scoped to the console: other admin screens also use .stc-table-wrap and must not lose their records when they do not provide a card container. */ #stc-app .stc-table-wrap { display: none; } #stc-app .stc-cards { display: grid; } #stc-app .stc-card__view { display: inline-flex; } .stc-search { max-width: none; flex-basis: 100%; } .stc-toolbar__right { width: 100%; justify-content: space-between; } .stc-drawer { width: 100vw; max-width: 100vw; } .stc-drawer__header, .stc-drawer__body, .stc-drawer__footer { padding-left: var(--stc-s4); padding-right: var(--stc-s4); } .stc-toasts { left: var(--stc-s3); right: var(--stc-s3); bottom: var(--stc-s3); max-width: none; } } @media (max-width: 600px) { .stc-header { width: 100%; padding: var(--stc-s3) 0; } .stc-header__intro { grid-template-columns: minmax(0, 1fr); } .stc-header__title, .stc-header__subtitle { max-width: 100%; overflow-wrap: anywhere; } .stc-header__actions { width: 100%; } .stc-header__actions .stc-btn { flex: 1 1 calc(50% - var(--stc-s2)); min-width: 0; white-space: normal; line-height: 1.2; padding: 8px 12px; text-align: center; } .stc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stc-s2); } .stc-metric { padding: var(--stc-s3); } .stc-metric__value { font-size: 22px; } .stc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stc-edit-booking-form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stc-s2); } .stc-tablefoot { flex-direction: column; align-items: stretch; } .stc-pager { justify-content: center; flex-wrap: wrap; } .stc-dialog__actions { flex-direction: column-reverse; } .stc-dialog__actions .stc-btn { width: 100%; } .stc-drawer__footer { flex-direction: column; } .stc-drawer__footer .stc-btn { width: 100%; } /* Comfortable touch targets on phones. */ .stc-btn { min-height: 44px; } .stc-btn--icon { min-height: 44px; width: 44px; } } /* ============================================================ 18. WordPress admin resets, scoped to the console ============================================================ */ .stc-app .stc-btn:focus, .stc-app .stc-btn:active { box-shadow: none; outline: none; } .stc-app .stc-btn:focus-visible { box-shadow: var(--stc-focus); } .stc-app input[type='search']::-webkit-search-decoration, .stc-app input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; } /* Controlled booking amendments */ .stc-change-workspace { display:grid; gap:14px; } .stc-change-landing,.stc-change-request__head,.stc-change-price { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .stc-change-request,.stc-change-editor { padding:16px; border:1px solid var(--stc-border,#d8e4ed); border-radius:14px; background:#fbfdff; } .stc-change-request__head h4 { margin:3px 0 0; text-transform:capitalize; } .stc-change-eyebrow { color:#087fc0; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .stc-change-comparison { margin:14px 0; border-top:1px solid #dbe8f2; } .stc-change-comparison>div { display:grid; grid-template-columns:minmax(100px,.8fr) minmax(100px,1fr) auto minmax(100px,1fr); align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #e4edf4; font-size:12px; } .stc-change-comparison strong { text-transform:capitalize; } .stc-change-comparison b,.stc-change-price b { color:#0991df; } .stc-change-price { justify-content:flex-start; padding:12px 14px; border-radius:10px; background:#eef8fe; font-weight:800; } .stc-change-price em { margin-left:auto; color:#087fc0; font-style:normal; } .stc-change-controls,.stc-change-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; } .stc-change-field { display:flex; flex-direction:column; gap:5px; } .stc-change-field.is-wide { margin-top:12px; } .stc-change-field__hint { color:#6b7f91; font-size:11px; line-height:1.45; } .stc-change-field input,.stc-change-field select,.stc-change-field textarea { width:100%; min-height:38px; padding:8px 10px; border:1px solid #cbdce9; border-radius:9px; background:#fff; box-sizing:border-box; } .stc-change-field input:focus,.stc-change-field select:focus,.stc-change-field textarea:focus { outline:0; border-color:#0991df; box-shadow:0 0 0 3px rgba(9,145,223,.13); } .stc-change-check { display:flex; align-items:flex-start; gap:7px; margin:12px 0; color:#40566b; font-size:12px; font-weight:700; } .stc-change-check input { margin-top:2px; } .stc-change-check--explained > span { display:flex; flex-direction:column; gap:2px; } .stc-change-check--explained strong { color:#30485d; font-size:12px; } .stc-change-check--explained small { max-width:580px; color:#6b7f91; font-size:11px; font-weight:500; line-height:1.45; } .stc-change-callout { padding:11px 13px; border-left:3px solid #f2b705; border-radius:8px; background:#fff8df; color:#5c4a00; } .stc-change-route { display:grid; gap:10px; margin:14px 0 18px; padding:14px; border:1px solid #cfe0ec; border-radius:12px; background:#f5faff; } .stc-change-route__title { color:#30485d; font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; } .stc-change-route .stc-change-field.is-wide { margin-top:0; } .stc-change-stops { display:grid; gap:9px; padding-left:18px; border-left:2px solid #99cce9; } .stc-change-stop { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; } .stc-change-stop .stc-btn { min-height:38px; } .stc-add-stop { justify-self:start; } .stc-change-preview { margin:16px 0; padding:14px; border:1px solid #afd8ed; border-radius:12px; background:#f7fcff; } .stc-change-preview h4 { margin:0 0 10px; color:#233e55; } .stc-change-metrics { margin:0 0 10px; color:#61788b; font-size:12px; font-weight:700; } .stc-change-payment-note { margin:10px 0 0; padding:9px 11px; border-radius:8px; background:#eef4ff; color:#355275; font-size:12px; font-weight:700; } .stc-change-breakdown { display:grid; gap:6px; margin-top:12px; } .stc-change-breakdown > div { display:flex; justify-content:space-between; gap:16px; color:#526b7f; font-size:12px; } .stc-change-breakdown > div.is-total { margin-top:4px; padding-top:9px; border-top:1px solid #cfe0ec; color:#233e55; font-size:14px; } .stc-change-ok { padding:10px 12px; border-radius:8px; background:#eaf8ef; color:#20683b; font-size:12px; font-weight:700; } .stc-change-editor .stc-btn:disabled { cursor:not-allowed; opacity:.48; } .pac-container { z-index:100100 !important; } .stc-google-place-input { display:block; width:100%; min-height:38px; color-scheme:light; } .stc-change-message { min-height:18px; margin:8px 0 0; color:#795400; font-size:12px; font-weight:700; } .stc-change-message.is-error { padding:10px 12px; border:1px solid #f3b5ad; border-radius:8px; background:#fff5f3; color:#b42318; } .stc-change-message.is-success { color:#087a4b; } @media(max-width:700px){.stc-change-controls,.stc-change-grid{grid-template-columns:1fr}.stc-change-comparison>div{grid-template-columns:1fr 1fr}.stc-change-comparison>div>b{display:none}.stc-change-stop{grid-template-columns:1fr}.stc-change-stop .stc-btn{justify-self:start}.stc-change-stops{padding-left:10px}} /* ========================================================================== Shared change-review panel (queue + console drawer) ========================================================================== */ .stc-change-ref { display:flex; align-items:center; gap:10px; margin:8px 0 0; font-size:13px; } .stc-change-ref strong { letter-spacing:.02em; } .stc-change-ref__link { color:var(--stc-info); text-decoration:none; } .stc-change-ref__link:hover { text-decoration:underline; } .stc-change-guidance { margin:14px 0 0; padding:10px 12px; border-radius:9px; background:var(--stc-surface-subtle); border:1px solid var(--stc-border); color:var(--stc-text-secondary); font-size:13px; } .stc-change-guidance p { margin:0; } .stc-change-guidance.is-error { background:var(--stc-danger-bg); border-color:var(--stc-danger-border); color:var(--stc-danger); } .stc-change-guidance.is-error strong { display:block; margin-bottom:4px; } .stc-change-verdict { margin:4px 0 12px; padding:11px 13px; border-radius:9px; border:1px solid var(--stc-border); font-size:13px; } .stc-change-verdict:empty { display:none; } .stc-change-verdict strong { display:block; margin-bottom:5px; } .stc-change-verdict p { margin:5px 0 0; } .stc-change-verdict ul { margin:5px 0 0; padding-left:18px; } .stc-change-verdict li { margin-bottom:4px; } .stc-change-verdict.is-ok { background:var(--stc-success-bg); border-color:var(--stc-success-border); color:var(--stc-success); } .stc-change-verdict.is-blocked { background:var(--stc-danger-bg); border-color:var(--stc-danger-border); color:#7f1d1d; } .stc-change-verdict__trip { color:inherit; opacity:.85; } .stc-change-verdict__link { color:var(--stc-info); text-decoration:underline; white-space:nowrap; } .stc-change-verdict__step { font-weight:600; } .stc-change-field select option[data-busy="1"] { color:var(--stc-danger); } .stc-btn[disabled] { opacity:.5; cursor:not-allowed; } .stc-change-guidance__legend { margin-top:6px !important; padding-top:6px; border-top:1px dashed var(--stc-border); font-size:12px; opacity:.9; } /* Current / original assignment banner in the review panel */ .stc-change-assignment { display:grid; gap:6px; margin:14px 0 0; padding:11px 13px; border:1px solid var(--stc-border); border-radius:10px; background:var(--stc-surface-subtle); font-size:13px; } .stc-change-assignment:empty { display:none; } .stc-change-assignment__row { display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:4px 12px; align-items:baseline; } .stc-change-assignment__row.is-original { color:var(--stc-text-secondary); } .stc-change-assignment__label { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--stc-text-secondary); } .stc-change-assignment__row.is-current .stc-change-assignment__label { color:var(--stc-info); } .stc-change-assignment__driver { grid-column:2; } .stc-change-assignment__note { grid-column:1 / -1; margin:2px 0 0; padding-top:6px; border-top:1px dashed var(--stc-border); color:var(--stc-warning); font-size:12px; } @media(max-width:700px){ .stc-change-assignment__row{grid-template-columns:1fr} .stc-change-assignment__driver{grid-column:1} }