/**
 * app.css
 * DropzoneIQ - app.dropzoneiq.com
 * Version: 3.23.8
 * Updated: 2026-04-06
 *
 * Version History:
 *   3.23.8 - 2026-04-06 - .confirm-message bumped to 20px Barlow Condensed
 *                          600 weight. Larger than modal title for emphasis.
 *   3.23.7 - 2026-04-06 - Go-live checklist pill redesigned: red glow border,
 *                          red background tint, taller padding, PRE-LAUNCH label
 *                          above via ::before, 16px margin-bottom from nav,
 *                          Barlow Condensed label, larger badge with glow.
 *   3.23.6 - 2026-04-06 - dziq-list-title: 14px -> 16px. dziq-list-sub:
 *                          13px -> 14px. Applies to all list sections:
 *                          aircraft, staff, equipment, activities. Readable
 *                          at arm's length on a tablet in bright conditions.
 *   3.23.5 - 2026-04-06 - Editor slot spacing fix: margin-top 8px so rounded
 *                          corners clear the row border-bottom. margin-bottom
 *                          12px breathing room before next row. Added :has()
 *                          rule to suppress row border-bottom when its editor
 *                          slot is populated -- prevents divider line cutting
 *                          across the top of the edit form.
 *   3.23.4 - 2026-04-05 - Editor slot rule extended to cover all four
 *                          types: eq, at, st, ac. margin-bottom 8px
 *                          so form has breathing room below the row.
 *   3.23.3 - 2026-04-05 - Touch target pass: dziq-btn/sm/xs get 44/40/36px
 *                         min-height under pointer:coarse. Date/time inputs,
 *                         selects get 44px + 16px font. dziq-checkbox gets
 *                         44px min-height with 20px checkbox. eq-editor-slot
 *                         and at-editor-slot margin-top on touch.
 *   3.23.2 - 2026-04-05 - .at-editor-slot:not(:empty) gets margin-top:10px
 *                         to add breathing room between tiers list and
 *                         injected edit forms.
 *   3.23.1 - 2026-04-05 - .dziq-activity-inline-form simplified to match
 *                         standard .dziq-card styling. Removed hardcoded
 *                         blue border -- consistent with all other edit areas.
 *   3.23.0 - 2026-04-05 - Added .dziq-activity-inline-form CSS. Blue top
 *                         border + surface bg connects inline edit form to
 *                         the activity row above it.
 *   3.22.9 - 2026-04-04 - Error toast background changed to solid #0d0d0f.
 *                         Red glow moved to inset box-shadow only. Nothing
 *                         shows through -- fully opaque.
 *   3.22.8 - 2026-04-04 - Error toast redesigned: true center-screen blocking alert.
 *                         Solid dark bg (#0d0d0f) + red gradient tint, red border
 *                         + glow, 21px text, 560px wide, scale-in animation.
 *                         Base toast refactored: non-error uses :not() selector
 *                         for translateY so transforms don't conflict.
 *   3.22.7 - 2026-04-04 - Forecast temp dimmed (20px/0.45 opacity day,
 *                         16px/0.35 night). Wind stays 22px bright -- wind is
 *                         primary for DZOs, temp is secondary context.
 *   3.22.6 - 2026-04-04 - Forecast modal wind size 16px -> 22px. Wind is the
 *                         primary data point for DZOs -- should command the eye.
 *   3.22.5 - 2026-04-04 - Added --orange: #ff9c3a to :root color tokens.
 *                         Was missing; badge--orange was referencing var(--orange)
 *                         with no fallback, rendering colorless.
 *   3.22.4 - 2026-04-04 - Added badge--orange class to match load status color
 *                         decisions (PROD-013). badge--orange uses var(--orange)
 *                         #ff9c3a, consistent with called load card stage color.
 *   3.22.3 - 2026-04-04 - Error toasts repositioned to bottom-center with larger
 *                         size, pointer-events:auto, and cursor:pointer to support
 *                         click-to-dismiss. Info/success toasts unchanged top-right.
 *                         Forecast modal max-width 780px -> 960px. Forecast period
 *                         row padding 10px 6px -> 10px 10px. Grid gap added.
 *   3.22.2 - 2026-04-04 - Maintenance alert overlay: backdrop-filter blur(4px)
 *                         blurs the app behind the modal to focus attention.
 *   3.22.1 - 2026-04-04 - Maintenance alert modal: red border + glow.
 *                         .dziq-mx-modal border changed from neutral to
 *                         rgba(255,100,80,0.5) with layered box-shadow glow.
 *   3.22.0 - 2026-04-03 - .dziq-view-loads: added padding:28px 32px to match
 *                         Bookings/Staff view positioning. Was sitting too high
 *                         and too close to nav without top padding.
 *   3.21.9 - 2026-04-03 - Nav spacing tightened further. .nav-item padding
 *                         7px->5px, margin 1px->0. .nav-section padding-top
 *                         10px->8px, padding-bottom 3px->2px.
 *   3.21.8 - 2026-04-03 - Nav spacing first tightening pass.
 *                         .nav-section padding-top 12px->10px, padding-bottom
 *                         4px->3px. Makes room for Marketing section without
 *                         crowding.
 *   3.21.7 - 2026-04-03 - Maintenance modal header redesigned. .dziq-mx-header
 *                         now dark bg + 3px red bottom border. Removed old icon,
 *                         subtitle, and close button styles -- replaced with pill
 *                         close button. Icon and pills now inline in app.js HTML.
 *   3.21.6 - 2026-04-03 - Topbar location dropdown CSS. added .dz-location-dropdown,
 *                         .dz-loc-option, .dz-dropdown-caret, #dziq-dz-trigger.
 *                         Hidden by default, revealed on DZ name click. Active
 *                         location highlighted in accent color via --accent-rgb.
 *   3.21.5 - 2026-04-03 - Forecast modal: wind speed bumped to 16px/800.
 *                         font-weight 800 -- wind is go/no-go data for DZs and
 *                         needs equal visual weight to temperature.
 *   3.21.4 - 2026-04-03 - Forecast modal accent color via --accent-rgb.
 *                         rgba(26,111,255,...) with rgba(var(--accent-rgb),...).
 *                         Border, box-shadow, head divider, today heading all
 *                         now reflect DZO accent color. Requires setAccent()
 *                         in app.js to also set --accent-rgb (added 3.21.9).
 *   3.21.3 - 2026-04-03 - Fixed login scrollbar. Root cause was
 *                         #dziq-root:has(.dziq-login-wrap) still had
 *                         height:auto + overflow:visible overriding the
 *                         login wrap fix. Changed to height:100vh/dvh +
 *                         overflow:hidden + display:flex. Added overflow:hidden
 *                         to body so body itself cannot scroll.
 *   3.21.2 - 2026-04-03 - .dziq-login-wrap height:100vh fix (insufficient alone).
 *                         height:100vh + overflow:hidden + box-sizing:border-box.
 *                         min-height allowed content to exceed viewport causing
 *                         scrollbar on login screen. Also removed duplicate
 *                         inline style block from index.cfm (same rule was in
 *                         both places).
 *   3.21.1 - 2026-04-03 - Forecast modal redesign.
 *                         and header divider, dark header bg, sun icon in title
 *                         via ::before. Day columns flush with no gap (border-right
 *                         dividers). Today heading highlighted blue. Period rows
 *                         centered layout for icon above temp. Added
 *                         .dziq-fc-period-icon, .dziq-fc-day-heading.is-today,
 *                         .dziq-fc-period-temp.is-night-temp. Removed gap from
 *                         grid, added border-radius on first/last col.
 *   3.21.0 - 2026-04-01 - Maintenance alert modal styles.
 *                         .dziq-mx-modal, .dziq-mx-header, .dziq-mx-body,
 *                         .dziq-mx-section, .dziq-mx-item, .dziq-mx-badge,
 *                         .dziq-mx-days. Uses existing CSS variable tokens.
 *                         Overdue = red, Warning = yellow.
 *   3.20.0 - 2026-03-31 - Setup wizard CSS: sw-wrap, sw-header, sw-progress,
 *                         sw-dot, sw-connector, sw-card, sw-welcome, sw-hours,
 *                         sw-import-callout, sw-done, sw-portal-url, sw-added-item.
 *   3.19.0 - 2026-03-31 - Option 2 nav redesign. Parent group tabs: larger
 *                         (16px, 800 weight, 28px padding, 4px accent underline,
 *                         sits flush on top of child nav). Child tabs wrapped
 *                         in dziq-child-nav inset block: dark bg, border,
 *                         flat top-left corner connects to parent visually.
 *                         dziq-settings-tabs stripped of own background/border
 *                         since it now lives inside dziq-child-nav.
 *   3.18.0 - 2026-03-31 - Staff tab filter bar CSS.
 *                         pill row with gap and margin. Active pill uses
 *                         dziq-btn-primary. Inactive pills use default btn.
 *   3.17.0 - 2026-03-31 - Add-on price list CSS. pr-addon-list, pr-addon-header,
 *                         pr-addon-row, pr-addon-name, pr-addon-code,
 *                         pr-addon-col-price, pr-addon-col-actions,
 *                         pr-addon-form. 4-column grid layout matching
 *                         the rule list style.
 *   3.16.0 - 2026-03-31 - Parent group tab bar.
 *                         .dziq-group-tab with accent underline active state.
 *                         Sits above the existing child pill tab bar.
 *   3.15.0 - 2026-03-31 - Added pr-btn-del red X chip, at-tier-price.
 *                         Added at-tier-price green inline price label for
 *                         Activities tab tier rows. pr-col-val: right-aligned
 *                         with 10px right padding.
 *   3.14.2 - 2026-03-30 - Added dziq-btn-orange, dziq-btn-purple,
 *                         dziq-btn-blue-outline variants for pricing rule
 *                         action buttons. Edit=blue, Dup=purple,
 *                         Disable/Enable=orange, Delete=red (pr-btn-del).
 *   3.14.1 - 2026-03-30 - Priority guide two-column layout.
 *                         pr-priority-guide-table, pr-pgt-col CSS. Each row
 *                         uses a 2-col grid with the number spanning both
 *                         label and eg rows so priorities align vertically.
 *   3.14.0 - 2026-03-30 - pr-view-toggle space-between. Add Rule moved.
 *                         (its border-bottom removed to avoid short line).
 *                         Individual children capped at 960px. Rule list fills
 *                         full wrap. Tab bar inline-flex. Description line breaks
 *                         in settings-3.js v1.6.1.
 *   3.13.8 - 2026-03-30 - Tab bar inline-flex. Tab bar, section blocks,
 *                         calendar and form constrained to 960px inside the
 *                         wide 1400px wrapper. Only #pr-list and .pr-rule-list
 *                         expand to fill full wrapper width. Added
 *                         --activities-wide 1100px class. Rule grid uses
 *                         minmax() columns, overflow:hidden, width:100%.
 *   3.13.1 - 2026-03-30 - Pricing tab: widened .dziq-settings-wrap--wide from
 *                         1280px to 1500px so the rule grid has room to breathe.
 *                         Rule grid min-width 1020->1100px. Actions column
 *                         168->280px so Edit/Duplicate/Enable/Delete all fit
 *                         without being cut off.
 *   3.13.0 - 2026-03-28 - Added .dziq-btn-cancel-sub: small subdued danger
 *                         link style for cancel subscription button.
 *   3.12.2 - 2026-03-28 - Added .rpt-table-bar and .rpt-row-count.
 *   3.12.1 - 2026-03-28 - Fixed reports filter bar layout: scoped the mobile
 *                         width:100% rule to .dziq-loads-filters only so it

 *                         does not bleed into .rpt-filter-bar. Added explicit
 *                         width to rpt date inputs and button min-width.
 *   3.12.0 - 2026-03-28 - Reports view CSS: .rpt-report, .rpt-report-title,
 *                         .rpt-report-desc, .rpt-filter-bar, .rpt-stat-grid,
 *                         .rpt-money.
 *   3.11.0 - 2026-03-28 - Loads view CSS: .ld-* filter bar, .dziq-loads-table,
 *                         slide panel system (.dziq-slide-panel, .dziq-panel-overlay,
 *                         .dziq-panel-inner, .dziq-panel-header, .dziq-panel-body),
 *                         manifest rows (.dziq-manifest-*), status badge variants
 *                         (.dziq-badge-green, .dziq-badge-red, .dziq-badge-yellow,
 *                         .dziq-badge-purple, .dziq-badge-gray), loads pagination.
 *   3.10.2 - 2026-03-28 - Settings tabs restyled to match staff pill tabs.
 *                         Replaced underline/border-bottom pattern with
 *                         rounded pill container + active accent background.
 *   3.10.1 - 2026-03-28 - Mobile topbar responsive fixes: wind widget and
 *                         DZ name hidden on screens <=480px. Hamburger sizing
 *                         adjusted. Topbar padding tightened on phone.
 *   3.10.0 - 2026-03-27 - 7-day forecast modal styles: .dziq-forecast-modal-wrap,
 *                         .dziq-forecast-modal, .dziq-forecast-grid, period cards
 *                         day/night variants, temp/wind color classes, loading/error
 *                         states. Weather pill cursor:pointer.
 *   3.9.6 - 2026-03-27 - Fixed topbar separator overlap: increased --topbar-h
 *                         from 58px to 66px and added padding-bottom: 8px so
 *                         content sits clear of the accent bar.
 *   3.9.5 - 2026-03-27 - Topbar bottom separator increased from 1px border to
 *                         8px accent-colored bar via ::after pseudo-element.
 *                         Topbar height and content area unchanged.
 * Updated: 2026-03-23
 * Description: Full application stylesheet. Dark ops UI.
 *              Fonts: Barlow Condensed (display/labels) + Inter (body/data).
 *              Theme: #1a6fff blue on dark surfaces.
 * Version History:
 *   3.9.3 - 2026-03-23 - .cl-sidebar-btn replaced by .cl-progress-pill.
 *                         Pill sits above sidebar nav, shows setup progress count.
 *   3.9.2 - 2026-03-23 - Removed dead slide panel + checklist content CSS.
 *   3.9.1 - 2026-03-23 - Panel top offset fixed to var(--topbar-h).
 *   3.9.0 - 2026-03-23 - Slide panel system: .dziq-slide-panel, .dziq-panel-overlay.
 *                         Go-live checklist panel: .cl-* classes.
 *                         Sidebar checklist button: .cl-sidebar-btn.
 *   3.6.3 - 2026-03-21 - Collapsible "How Pricing Rules Work" guide panel CSS.
 *                         pr-hiw-*, pr-hiw-ex-* classes.
 *   3.6.2 - 2026-03-21 - dziq-tip-icon margin 5->3px for tighter label fit.
 *                         dziq-tip-icon--after 8->5px.
 *                         pr-priority-guide panel CSS added.
 *   3.6.1 - 2026-03-21 - pr-day-label gap 8->14px, checkbox margin-right 4->8px.
 *   3.6.0 - 2026-03-20 - brand-logo-swatch class removed. Accent background
 *                         now set directly on img element via inline style.
 *                         Removed static background:#fff from img CSS.
 *   3.5.9 - 2026-03-20 - brand-logo-swatch: removed padding, inline-block
 *                         so accent bg fits snugly behind logo img only.
 *                         pr-view-toggle: flex + gap 8px.
 *   3.5.8 - 2026-03-20 - brand-logo-preview: accent bg moved to .brand-logo-swatch
 *                         wrapper around img only. hr-add-slot: flex-start +
 *                         max-width 260px. dziq-hours-row: max-width 700px.
 *   3.5.7 - 2026-03-20 - Calendar nav prev/next buttons enlarged to 36px square.
 *   3.5.6 - 2026-03-20 - brand-logo-preview: inline-flex + max-width 400px
 *                         so accent background does not stretch full width.
 *   3.5.5 - 2026-03-20 - Reverted global max-width to 960px. Added
 *                         .dziq-settings-wrap--wide (1280px) for pricing

 *                         and help tabs only.
 *   3.5.4 - 2026-03-20 - dziq-settings-wrap max-width 960->1280px.
 *                         dziq-tip-icon--after modifier for label-then-tooltip.
 *   3.5.3 - 2026-03-20 - Rule grid min-width 820->1020px, columns widened.
 *                         Header spans flex for tooltip+text alignment.
 *                         Checkbox gap increased, margin-right on input.
 *                         dziq-tip-icon: margin-right 5px for text breathing room.
 *                         Responsive breakpoint updated to 1060px.
 *   3.5.2 - 2026-03-20 - Grid columns rebalanced to prevent actions cutoff.
 *                         Checkbox gap 10->14px.
 *   3.5.1 - 2026-03-20 - Removed duplicate .dziq-card/.dziq-card-title from
 *                         pricing block (already defined in base settings block).
 *   3.5.0 - 2026-03-20 - Pricing Rules tab CSS: rule list grid, form styles,
 *                         calendar grid, day popover, day-of-week checkboxes,
 *                         badge-blue + badge-purple. Tooltip wired to form labels.
 *   3.4.0 - 2026-03-20 - Added .dziq-badge-addon and .dziq-badge-parent.
 *   3.3.2 - 2026-03-20 - .dziq-slot-remove: button tag specificity, !important
 *                         overrides, plain X text instead of HTML entity.
 *   3.3.1 - 2026-03-20 - .dziq-slot-remove: bigger X button (18px font, 28px square).
 *   3.3.0 - 2026-03-20 - Hours tab CSS rebuilt: .dziq-hours-row now vertical,
 *                         .dziq-hours-day-header, .dziq-hours-detail, .dziq-hours-times-label.
 *                         Added slot row CSS: .dziq-slots-section, .dziq-slot-row,
 *                         .dziq-slot-time, .dziq-slot-cap, .dziq-slot-cap-label.
 *                         Added .dziq-hours-window-row. Removed stale responsive rules.
 *   3.2.0 - 2026-03-19 - Wind badge layout pass: max-height: 46px keeps badge
 *                         flush in topbar. Padding tightened to 5px v / 14-20px h.
 *                         Speed/dir shrunk 28->26px. Divider added between speed
 *                         and direction blocks. gap increased 12->14px. has-gust
 *                         class shrinks direction text 26->16px when gust label
 *                         is showing. wind-info-block justify-content: center.
 *   3.1.0 - 2026-03-19 - Added .si-coord-input and .si-coord-hint CSS for
 *                         read-only lat/lng fields on Location Address form.
 *   3.0.0 - 2026-03-19 - Branding tab CSS: .brand-logo-wrap/preview/empty/upload,
 *                         .brand-accent-swatch, .dziq-section-block, .form-hint,
 *                         .form-textarea, .dziq-save-status. All new selectors,
 *                         no duplicates.
 *   2.9.0 - 2026-03-19 - Wind badge tweaks: direction text matches speed size (28px/800).
 *                         Removed border-left/right dividers from .wind-speed-block.
 *                         Removed padding from .wind-speed-block.
 *   2.8.0 - 2026-03-19 - Added connection badge styles.
 *                         .conn-dot--offline, .conn-label, .conn-label--visible.
 *                         Green dot (online, silent) / red dot + OFFLINE label (offline).
 *   2.7.0 - 2026-03-18 - Wind badge spacing pass.
 *                         wind-speed-block gets subtle left/right dividers, wind-info-block
 *                         min-width 36->44px. Direction text brighter (0.7->0.85 opacity,
 *                         font-size 13->14px, letter-spacing 1px). Compass 28->30px.
 *   2.6.0 - 2026-03-18 - Compass bug fixes: transform-origin and transition to CSS class.
 *                         prefix to brand-mark::after and brand-mark-lg::after (parachute
 *                         logo now renders correctly). Wind banner redesigned as grounded
 *                         badge with border/bg. Added .wind-compass, .wind-speed-block,
 *                         .wind-info-block. Compass arrow rotates via JS to wind degrees.
 *   2.4.0 - 2026-03-18 - Replaced airplane icon with parachute icon in .brand-mark::after
 *                         and .brand-mark-lg::after. Icon size bumped 16->18px on topbar.
 *                         Background remains var(--accent) so accent color still applies.
 *   2.3.0 - 2026-03-17 - Wind banner styles: .topbar-wind, speed (large Barlow),
 *                         unit, direction, gust label. Centered in topbar via
 *                         absolute + translateX(-50%). Color transitions.
 *   2.2.0 - 2026-03-17 - Readability pass: --text-secondary #9090a8->#b0b0c4,
 *                         --text-dim #5a5a70->#7a7a94. Nav items 0.45->0.65 opacity,
 *                         14px (was 13.5px). Settings tabs 13->14px. Badges 11->12px.
 *                         Section sub uses text-secondary not text-dim. Rate rows,
 *                         tier rows, user-name brightened. Topbar DZ label 0.35->0.55.
 *   1.9.0 - 2026-03-16 - Full font size pass. Minimum readable sizes enforced:
 *                         .btn 13->15px, settings tabs 12->13px, dziq-btn-sm
 *                         11->13px, form labels 11->12px, inputs 13->14px,
 *                         list-sub 12->13px, tier-price 13->15px, badges 10->11px,
 *                         card-title 13->14px, rate-row 13->14px, help sub-body
 *                         13->14px. Settings-2 CSS block appended (toggle, radio,
 *                         hours, store, account). All non-ASCII chars purged.
 *   1.6.0 - 2026-03-16 - Tooltip bubble: font 12->14px, max-width 280->320px,
 *                         text-primary color, more padding. Help section headers:
 *                         accent left bar, gradient bg, accent-light text, spacing.
 *   1.5.0 - 2026-03-16 - Alert modal styles.
 *                         .dziq-tooltip-bubble). Added Help tab layout
 *                         (.dziq-help-wrap, TOC sidebar, content pane,
 *                         search bar, subsection cards, mark highlighting).
 *   1.3.0 - 2026-03-16 - Settings CSS block added (dziq-* classes).
 *                         media query. Detects touch screens regardless of resolution.
 *                         Covers all iPads including 12.9" Pro (1366px landscape).
 *                         Desktop mice always report pointer:fine -- never triggers
 *                         on laptops/desktops regardless of window width.
 *   1.2.4 - 2026-03-15 - Tablet breakpoint raised to 1025px with !important.
 *                         sidebar, content. 100dvh replaces 100vh for correct
 *                         mobile viewport height. Handles notch + home indicator.
 *   1.2.1 - 2026-03-14 - Body font swapped Barlow->Inter. Avatar interactive
 *                         styles (hover, active, spin animation). Global font
 *                         size pass: 11px->13px badges, 12px->14px user name,
 *                         15px nav items.
 *   1.2.0 - 2026-03-13 - Added --accent/--accent-light/--accent-dim defaults to
 *                         :root so login page renders before JS setAccent() runs.
 *                         Removed duplicate .dziq-login-wrap/.dziq-login-box blocks.
 *   1.1.9 - 2026-03-13 - Brand mark background uses var(--accent) so it tracks accent color.
 *   1.1.8 - 2026-03-13 - Tablet/touch pass: 44px tap targets, 16px input font-size
 *                         (iOS auto-zoom prevention), touch-action: manipulation,
 *                         keyboard-aware modal scrolling, sidebar-overlay tap-to-close,
 *                         touch momentum scrolling, :active feedback for hover:none
 *                         devices, iPad portrait/landscape breakpoints.

 *   1.1.7 - 2026-03-10 - topbar-date brighter: rgba 0.4 -> 0.7.
 *   1.1.6 - 2026-03-10 - topbar-dz label dimmed, DZ name larger/white/bold for quick read.
 *   1.1.5 - 2026-03-10 - Weather pill larger padding/font. Added weather-icon styles.
 *   1.1.4 - 2026-03-10 - Picker moved to topbar-right - removed absolute centering.
 *   1.1.3 - 2026-03-10 - Replaced native select CSS with fully custom acp-* dropdown styles.
 *   1.1.2 - 2026-03-10 - Added accent-swatch dot. Picker wrap is now flex row.
 *   1.1.1 - 2026-03-10 - Added accent-picker-select styles for topbar color switcher.
 *   1.1.0 - 2026-03-10 - Removed topbar-brand right border. Upgraded topbar-dz
 *                         divider to 2px with rounded ends and slightly brighter.
 *   1.0.9 - 2026-03-10 - Moved brand to topbar-brand block. Removed sidebar-brand padding.
 *   1.0.8 - 2026-03-10 - Topbar: added topbar-dz, topbar-date, weather-pill, topbar-avatar.
 *   1.0.7 - 2026-03-10 - Switched #dziq-root to CSS grid so topbar spans full width.
 *                         Sidebar = column 1 row 2, content = column 2 row 2.
 *   1.0.6 - 2026-03-10 - brand-name font-size bumped to 20px to match brand-iq.
 *   1.0.5 - 2026-03-10 - nav-section: bumped to 11px, color to rgba(255,255,255,0.35).
 *   1.0.4 - 2026-03-10 - Added nav-section, nav-icon, nav-badge rules. Fixed nav-item
 *                         padding to 9px 20px. Added brand-iq span for IQ styling.
 *   1.0.3 - 2026-03-10 - Fixed brand-mark::after (sidebar) - replaced border CSS trick with
 *                         SVG plane mask to match brand-mark-lg::after fix from 1.0.2.
 *   1.0.2 - 2026-03-10 - Replaced brand-mark-lg::after with SVG plane mask.
 *                         Killed Firefox focus artifacts with :focus-visible + !important.
 *   1.0.1 - 2026-03-10 - Added autofill override.
 *   1.0.0 - 2026-03-08 - Extracted from index.cfm
 */

/* -- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; color-scheme: dark; }

/* -- Variables -------------------------------------------------------------- */
:root {
  --bg-base:      #0d0d0f;
  --bg-surface:   #16161a;
  --bg-raised:    #1c1c22;
  --bg-overlay:   #222228;
  --border:       #2a2a32;
  --border-light: #333340;

  --blue:         #1a6fff;
  --blue-dim:     #1457cc;
  --blue-glow:    rgba(26, 111, 255, 0.18);

  --green:        #4cff91;
  --yellow:       #ffc832;
  --red:          #ff6450;
  --orange:       #ff9c3a;
  --purple:       #b464ff;

  --text-primary:   #f0f0f4;
  --text-secondary: #b0b0c4;
  --text-dim:       #7a7a94;

  --sidebar-w:  220px;
  --topbar-h:   66px;
  --radius:     6px;
  --radius-lg:  10px;

  --font-ui:      'Inter', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;

  /* Accent color - default blue. Overridden at runtime by app.js setAccent().
     Must be defined here so login page renders correctly before JS runs. */
  --accent:       #1a6fff;
  --accent-light: #4d8fff;
  --accent-dim:   rgba(26, 111, 255, 0.2);
}

/* -- Base ------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* -- Layout ----------------------------------------------------------------- */
#dziq-root {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height - handles mobile browser chrome */
  overflow: hidden;
}

/* When showing login, root switches from grid to flex centering */
#dziq-root:has(.dziq-login-wrap) {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* iOS safe area - pushes content below status bar when launched from home screen */
@supports (padding-top: env(safe-area-inset-top)) {
  #dziq-root {
    padding-top: env(safe-area-inset-top);
  }
  .dziq-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dziq-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* -- Sidebar ---------------------------------------------------------------- */
.dziq-sidebar {
  grid-column: 1;
  grid-row: 2;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.22s ease;
  z-index: 200;
}

.brand-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
}

.brand-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='white' d='M 7.6,14.4 A 10.4,10.4 0 0,1 18,4 L 18,14.4 Z'/%3E%3Cpath fill='white' d='M 18,4 A 10.4,10.4 0 0,1 28.4,14.4 L 18,14.4 Z'/%3E%3Cpolygon fill='white' points='17.4,14.4 18.6,14.4 18.6,4 17.4,4'/%3E%3Cpolygon fill='white' points='7.6,14.4 18.5,25.3 18,24.4 7.1,13.7'/%3E%3Cpolygon fill='white' points='28.4,14.4 17.5,25.3 18,24.4 28.9,13.7'/%3E%3Cpolygon fill='white' points='12.43,14.4 18.4,25.3 18,24.4 12.03,13.7'/%3E%3Cpolygon fill='white' points='23.57,14.4 17.6,25.3 18,24.4 23.97,13.7'/%3E%3Ccircle fill='white' cx='18' cy='27' r='2.2'/%3E%3Cpolygon fill='white' points='13.5,30 22.5,30 18,35.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='white' d='M 7.6,14.4 A 10.4,10.4 0 0,1 18,4 L 18,14.4 Z'/%3E%3Cpath fill='white' d='M 18,4 A 10.4,10.4 0 0,1 28.4,14.4 L 18,14.4 Z'/%3E%3Cpolygon fill='white' points='17.4,14.4 18.6,14.4 18.6,4 17.4,4'/%3E%3Cpolygon fill='white' points='7.6,14.4 18.5,25.3 18,24.4 7.1,13.7'/%3E%3Cpolygon fill='white' points='28.4,14.4 17.5,25.3 18,24.4 28.9,13.7'/%3E%3Cpolygon fill='white' points='12.43,14.4 18.4,25.3 18,24.4 12.03,13.7'/%3E%3Cpolygon fill='white' points='23.57,14.4 17.6,25.3 18,24.4 23.97,13.7'/%3E%3Ccircle fill='white' cx='18' cy='27' r='2.2'/%3E%3Cpolygon fill='white' points='13.5,30 22.5,30 18,35.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 0;
}

.brand-iq {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-left: 3px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-left: 3px solid transparent;
  margin: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.nav-item:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-left-color: var(--accent);
}

.nav-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.nav-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-section {
  padding: 8px 16px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
}

.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb, 26,111,255), 0.18);
  color: var(--accent-light, #4d8fff);
}

/* Nav icons - inline SVG masks */
[class^="icon-"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon-dashboard {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}

.icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='13' rx='2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='5' y1='1' x2='5' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='1' x2='11' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='1' y1='6.5' x2='15' y2='6.5' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='13' rx='2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cline x1='5' y1='1' x2='5' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='11' y1='1' x2='11' y2='4' stroke='black' stroke-width='1.5'/%3E%3Cline x1='1' y1='6.5' x2='15' y2='6.5' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

.icon-checkin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='5' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M1 14c0-3 2-5 5-5' stroke='black' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 11l2 2 3-3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='5' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M1 14c0-3 2-5 5-5' stroke='black' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 11l2 2 3-3' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-plane {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 6.5L9 4V2a1 1 0 00-2 0v2L2 6.5v2l5-1v2.5l-1.5 1V13L8 12l2.5 1v-2l-1.5-1V7.5l5 1v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 6.5L9 4V2a1 1 0 00-2 0v2L2 6.5v2l5-1v2.5l-1.5 1V13L8 12l2.5 1v-2l-1.5-1V7.5l5 1v-2z'/%3E%3C/svg%3E");
}

.icon-reports {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='8' width='3' height='6' rx='1'/%3E%3Crect x='6.5' y='5' width='3' height='9' rx='1'/%3E%3Crect x='11' y='2' width='3' height='12' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='8' width='3' height='6' rx='1'/%3E%3Crect x='6.5' y='5' width='3' height='9' rx='1'/%3E%3Crect x='11' y='2' width='3' height='12' rx='1'/%3E%3C/svg%3E");
}

.icon-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.42 1.42M11.53 11.53l1.42 1.42M3.05 12.95l1.42-1.42M11.53 4.47l1.42-1.42' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.42 1.42M11.53 11.53l1.42 1.42M3.05 12.95l1.42-1.42M11.53 4.47l1.42-1.42' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-initials {
  width: 28px;
  height: 28px;
  background: var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
  flex-shrink: 0;
}

.user-name {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-logout {
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.btn-logout:hover { color: var(--red); border-color: var(--red); }

/* -- Main area -------------------------------------------------------------- */
.dziq-main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* -- Topbar ----------------------------------------------------------------- */
.dziq-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 8px;

  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  gap: 16px;
  z-index: 100;
  position: relative;
}

.dziq-topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dim) 60%, transparent 100%);
  pointer-events: none;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  flex-shrink: 0;
}

.topbar-left  { display: flex; align-items: center; gap: 16px; }
.topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* -- Wind banner badge -- */
.topbar-wind {
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 5px 20px 5px 14px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-height: 46px;
  box-sizing: border-box;
}

.wind-compass {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
}

.compass-arrow-group {
  transform-origin: 14px 14px;
  transform: rotate(0deg);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#dziq-compass-head {
  fill: var(--accent);
}

.wind-speed-block {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 14px 0 4px;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.wind-info-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 48px;
}

.topbar-wind-speed {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #4cff91;
  line-height: 1;
  letter-spacing: -0.5px;
  transition: color 0.4s;
}

.topbar-wind-unit {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Direction text: full size when no gust, smaller when gust label is showing */
.topbar-wind-dir {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.5px;
  line-height: 1;
  transition: color 0.4s, font-size 0.2s;
}

.topbar-wind.has-gust .topbar-wind-dir {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar-wind-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffc832;
  line-height: 1;
}

.topbar-dz {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  position: relative;
  padding-left: 20px;
}

.topbar-dz::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}
.topbar-dz strong { font-size: 15px; color: #ffffff; font-weight: 700; letter-spacing: 0.01em; }

/* DZ name click-to-reveal location dropdown */
#dziq-dz-trigger { cursor: pointer; user-select: none; position: relative; }

.dz-dropdown-caret {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;

  transition: transform 0.15s;
}

.topbar-left {
  position: relative;
}

.dz-location-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  min-width: 200px;
  z-index: 500;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dz-location-dropdown.open { display: block; }

.dz-loc-option {
  padding: 11px 16px;
  font-size: 13px;
  color: rgba(232,232,240,0.75);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.1s;
}

.dz-loc-option:last-child { border-bottom: none; }
.dz-loc-option:hover { background: rgba(255,255,255,0.06); color: #fff; }

.dz-loc-option.is-active {
  color: var(--accent);
  font-weight: 600;
  background: rgba(var(--accent-rgb, 26,111,255), 0.08);
}

.topbar-accent-picker {
  display: flex;
  align-items: center;
  position: relative;
}

/* -- Accent color picker -- */
.acp-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s;
  min-width: 110px;
}

.acp-trigger:hover,
.acp-trigger.open {

  border-color: var(--accent);
  background: rgba(255,255,255,0.09);
}

.acp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

.acp-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  flex: 1;
}

.acp-arrow {
  font-size: 8px;
  color: rgba(255,255,255,0.35);
  margin-left: 2px;
}

.acp-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1c1c22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 130px;
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.acp-dropdown.open { display: block; }

.acp-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
}

.acp-option:hover    { background: rgba(255,255,255,0.07); }
.acp-option.selected { background: rgba(255,255,255,0.1);  }

.acp-option .acp-label {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

.topbar-date {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.weather-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;

  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(26,111,255,0.2);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.weather-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.weather-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cff91;
  flex-shrink: 0;
}

/* -- Connection status badge -- */
.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cff91;
  flex-shrink: 0;
  transition: background 0.3s;
  box-shadow: 0 0 0 2px rgba(76,255,145,0.2);
}

.conn-dot--offline {
  background: #ff6450;
  box-shadow: 0 0 0 2px rgba(255,100,80,0.2);
}


.conn-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ff6450;
  text-transform: uppercase;
  display: none;
}

.conn-label--visible {
  display: block;
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-light);
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}
.topbar-avatar:hover {
  background: var(--accent);
  color: #fff;
}
.topbar-avatar:active {
  transform: scale(0.92);
}
.topbar-avatar.refreshing {
  animation: avatar-spin 0.6s linear;
}
@keyframes avatar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.location-switcher {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}

.location-switcher:focus { border-color: var(--blue); }

/* -- Content ---------------------------------------------------------------- */
.dziq-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg-base);
}

/* -- Login ------------------------------------------------------------------ */
.dziq-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-base);
  padding: 24px;
  box-sizing: border-box;
}

.dziq-login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.brand-mark-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #1a6fff;
  border-radius: 8px;
  flex-shrink: 0;
}

.brand-mark-lg::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='white' d='M 7.6,14.4 A 10.4,10.4 0 0,1 18,4 L 18,14.4 Z'/%3E%3Cpath fill='white' d='M 18,4 A 10.4,10.4 0 0,1 28.4,14.4 L 18,14.4 Z'/%3E%3Cpolygon fill='white' points='17.4,14.4 18.6,14.4 18.6,4 17.4,4'/%3E%3Cpolygon fill='white' points='7.6,14.4 18.5,25.3 18,24.4 7.1,13.7'/%3E%3Cpolygon fill='white' points='28.4,14.4 17.5,25.3 18,24.4 28.9,13.7'/%3E%3Cpolygon fill='white' points='12.43,14.4 18.4,25.3 18,24.4 12.03,13.7'/%3E%3Cpolygon fill='white' points='23.57,14.4 17.6,25.3 18,24.4 23.97,13.7'/%3E%3Ccircle fill='white' cx='18' cy='27' r='2.2'/%3E%3Cpolygon fill='white' points='13.5,30 22.5,30 18,35.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='white' d='M 7.6,14.4 A 10.4,10.4 0 0,1 18,4 L 18,14.4 Z'/%3E%3Cpath fill='white' d='M 18,4 A 10.4,10.4 0 0,1 28.4,14.4 L 18,14.4 Z'/%3E%3Cpolygon fill='white' points='17.4,14.4 18.6,14.4 18.6,4 17.4,4'/%3E%3Cpolygon fill='white' points='7.6,14.4 18.5,25.3 18,24.4 7.1,13.7'/%3E%3Cpolygon fill='white' points='28.4,14.4 17.5,25.3 18,24.4 28.9,13.7'/%3E%3Cpolygon fill='white' points='12.43,14.4 18.4,25.3 18,24.4 12.03,13.7'/%3E%3Cpolygon fill='white' points='23.57,14.4 17.6,25.3 18,24.4 23.97,13.7'/%3E%3Ccircle fill='white' cx='18' cy='27' r='2.2'/%3E%3Cpolygon fill='white' points='13.5,30 22.5,30 18,35.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.brand-name-lg {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -- Forms ------------------------------------------------------------------ */
.form-group  { margin-bottom: 16px; }
.form-row    { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  padding: 8px 12px;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.12s;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

.form-input:focus,
.form-input:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-textarea:focus,
.form-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--blue);
}

.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

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

/* Kill browser autofill yellow */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

/* Hide Firefox password reveal/lock icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-moz-password-reveal { display: none; }
input[type="password"] { -moz-appearance: none; }

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

.form-error {
  background: rgba(255, 100, 80, 0.12);
  border: 1px solid rgba(255, 100, 80, 0.3);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* -- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-dim); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-light); }
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border); background: var(--bg-raised); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #e0503e; }

.btn-block { width: 100%; }
.btn-sm    { padding: 5px 10px; font-size: 13px; }

/* -- Badges ----------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--green  { background: rgba(76,  255, 145, 0.12); color: var(--green);  }
.badge--yellow { background: rgba(255, 200,  50, 0.12); color: var(--yellow); }
.badge--red    { background: rgba(255, 100,  80, 0.12); color: var(--red);    }
.badge--orange { background: rgba(255, 156,  58, 0.12); color: var(--orange); }
.badge--blue   { background: rgba(26,  111, 255, 0.15); color: var(--blue);   }
.badge--purple { background: rgba(180, 100, 255, 0.12); color: var(--purple); }
.badge--gray   { background: rgba(144, 144, 168, 0.12); color: var(--text-secondary); }

/* -- Tables ----------------------------------------------------------------- */
.dziq-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.dziq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dziq-table thead tr {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

.dziq-table th {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.dziq-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.dziq-table tbody tr:last-child td { border-bottom: none; }
.dziq-table tbody tr:hover          { background: var(--bg-raised); }
.dziq-table tbody tr.clickable      { cursor: pointer; }

/* -- Cards ------------------------------------------------------------------ */
.dziq-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.dziq-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* -- Stat grid -------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-value.blue   { color: var(--blue);   }
.stat-value.green  { color: var(--green);  }
.stat-value.yellow { color: var(--yellow); }
.stat-value.red    { color: var(--red);    }

/* -- Section header --------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.section-title {


  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.section-actions { display: flex; gap: 8px; align-items: center; }

/* -- Utilities -------------------------------------------------------------- */
.dziq-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-light);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

.dziq-empty,
.dziq-error-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: var(--text-dim);
  font-size: 14px;
}

.dziq-error-block { color: var(--red); }

.dziq-init-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--red);
}

/* -- Toast ------------------------------------------------------------------ */
.dziq-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}


/* Non-error toasts slide down from top-right */
.dziq-toast:not(.dziq-toast--error) {
  transform: translateY(-8px);
}
.dziq-toast:not(.dziq-toast--error).dziq-toast--visible {
  transform: translateY(0);
}
.dziq-toast--visible  { opacity: 1; }
.dziq-toast--success  { background: var(--green); color: #0a1a10; }
.dziq-toast--info     { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border-light); }

/* Error toasts: true center-screen blocking alert, click-to-dismiss */
.dziq-toast--error {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.94);
  max-width: 560px;
  width: calc(100vw - 48px);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  padding: 28px 32px;
  border-radius: 14px;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  background: #0d0d0f;
  color: #fff;
  border: 1.5px solid rgba(255,100,80,0.7);
  box-shadow:
    inset 0 0 40px rgba(255,100,80,0.12),
    0 0 0 1px rgba(255,100,80,0.2),
    0 0 32px rgba(255,100,80,0.3),
    0 0 80px rgba(255,100,80,0.12),
    0 16px 48px rgba(0,0,0,0.9);
}

.dziq-toast--error.dziq-toast--visible {
  transform: translate(-50%, -50%) scale(1);
}

/* -- Modal ------------------------------------------------------------------ */
.dziq-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.dziq-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.dziq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.dziq-modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dziq-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius);
  transition: color 0.12s;
}

.dziq-modal-close:hover { color: var(--text-primary); }

.dziq-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.confirm-message {
  font-size: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
  line-height: 1.4;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* -- Pagination ------------------------------------------------------------- */
.dziq-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}

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

/* -- Filter bar ------------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-bar .form-input,
.filter-bar .form-select { width: auto; min-width: 140px; }

/* -- Responsive ------------------------------------------------------------- */

/* -- Tablet / touch devices: sidebar hidden, hamburger shown ---------------
   Uses pointer:coarse to detect touch screens regardless of resolution.
   Covers all iPads (including 12.9" Pro at 1366px landscape), Android tablets,
   and any future touch device. Desktop mice always report pointer:fine so
   this never fires on laptops/desktops regardless of window width.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Collapse sidebar column to zero -- sidebar floats over content */
  #dziq-root {
    grid-template-columns: 0 1fr !important;
  }

  /* Sidebar slides in from left as a fixed overlay */
  .dziq-sidebar {
    position: fixed !important;
    top: env(safe-area-inset-top, 0);
    left: 0;
    height: calc(100% - env(safe-area-inset-top, 0px));
    width: var(--sidebar-w);
    transform: translateX(-100%) !important;
    z-index: 200;
  }

  .dziq-sidebar.open { transform: translateX(0) !important; }

  /* Show hamburger on touch devices */
  .btn-menu-toggle { display: flex !important; }

  .dziq-content { padding: 16px; }
}

/* -- Portrait phone/tablet (<=768px width) -------------------------------- */
@media (max-width: 768px) and (pointer: coarse) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-title { font-size: 16px; }
  .topbar-accent-picker,
  .topbar-date { display: none; }
  .weather-pill { padding: 5px 10px; font-size: 12px; }
  .topbar-dz { font-size: 0; }
  .topbar-dz strong { font-size: 14px; }
  .topbar-dz::before { display: none; }
}

/* -- Small phone (<=480px) ------------------------------------------------- */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-input,
  .filter-bar .form-select { width: 100%; }

  /* Topbar: hide wind widget and DZ name -- just show logo + hamburger */
  .topbar-wind   { display: none !important; }
  .topbar-left   { display: none !important; }
  .topbar-right  { margin-left: auto; }

  /* Tighten topbar padding on phone */
  .dziq-topbar   { padding: 0 12px 8px; gap: 10px; }

  /* Hamburger sizing */
  .btn-menu-toggle { font-size: 22px; padding: 6px; }
}

/* -----------------------------------------------------------------------------
   TABLET & TOUCH PASS - v1.1.8
   Rules:
   - All tap targets minimum 44x44px (Apple HIG / WCAG 2.5.5)
   - font-size: 16px minimum on all inputs to prevent iOS auto-zoom
   - No hover-only interactions (touch has no hover state)
   - touch-action: manipulation eliminates 300ms tap delay
   - Modals scroll above soft keyboard - inputs near bottom get padding
   - Sidebar overlay works via touch (tap outside closes)
   - Table rows large enough to tap accurately
   ----------------------------------------------------------------------------- */

/* -- Tap delay elimination --------------------------------------------------- */
a,
button,
.btn,
.nav-item,
.acp-trigger,
.acp-option,
.dziq-modal-close,
.btn-logout,
.btn-menu-toggle,
[role="button"] {
  touch-action: manipulation;
}

/* -- Minimum tap target: 44px ------------------------------------------------ */
.btn {
  min-height: 44px;
  padding: 10px 18px;
}

.btn-sm {
  min-height: 38px;
  padding: 8px 12px;
}

/* -- dziq-btn touch targets -- settings/manifest buttons */
.dziq-btn {
  min-height: 44px;
  padding: 10px 16px;
}

.dziq-btn-sm {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 13px;
}

.dziq-btn-xs {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
}

.nav-item {
  min-height: 44px;
  padding: 12px 20px;
}

.btn-logout {
  min-height: 44px;
  padding: 10px;
}

.btn-menu-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
  /* display is controlled by pointer:coarse media query -- not set here */
  align-items: center;
  justify-content: center;
}

.dziq-modal-close {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.acp-trigger {
  min-height: 44px;
}

.acp-option {
  min-height: 44px;
  padding: 10px 12px;
}

/* Table rows - tappable on tablet manifest view */
.dziq-table td {
  padding: 13px 14px;
}

.dziq-table tbody tr.clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.06);
}

/* -- iOS auto-zoom fix - ALL inputs must be >= 16px ------------------------- */
/* iOS zooms the viewport if focused input font-size < 16px                    */
.form-input,
.form-select,
.form-textarea,
.location-switcher {
  font-size: 16px;
}

/* Override for desktop only - restore 14px above 1024px */
@media (min-width: 1025px) {
  .form-input,
  .form-select,
  .form-textarea,
  .location-switcher {
    font-size: 14px;
  }
}

/* -- Date/time/select touch sizing -- finger-friendly on tablet/phone ------- */
/* All interactive form elements need 44px min-height and 16px font            */
input[type="date"],
input[type="time"],
select,
.dziq-time-input,
.dziq-slot-cap,
.dziq-select,
.ob-input,
.ob-select {
  min-height: 44px;
  font-size: 16px;
}

/* Checkboxes and their labels need big enough touch area */
.dziq-checkbox {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.dziq-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Editor slots -- full-width form below the row, breathing room above/below */
/* margin-top pushes rounded editor corners clear of the row border-bottom.  */
/* margin-bottom separates the editor from the next row's top border.         */
.eq-editor-slot:not(:empty),
.at-editor-slot:not(:empty),
.st-editor-slot:not(:empty),
.ac-editor-slot:not(:empty) {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Suppress the row border-bottom when its editor slot is populated.          */
/* Prevents the divider line cutting across the top of the editor form.       */
.dziq-list-row:has(+ .eq-editor-slot:not(:empty)),
.dziq-list-row:has(+ .at-editor-slot:not(:empty)),
.dziq-list-row:has(+ .st-editor-slot:not(:empty)),
.dziq-list-row:has(+ .ac-editor-slot:not(:empty)) {
  border-bottom: none;
}

/* -- Modal - keyboard-aware scrolling --------------------------------------- */
/* When soft keyboard opens it shrinks viewport height.                        */
/* Modal must scroll internally so inputs aren't hidden behind keyboard.       */
.dziq-modal-overlay {
  align-items: flex-start;        /* don't vertically center - let it stack   */
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dziq-modal {
  max-height: none;               /* let modal be full natural height          */
  margin: auto;                   /* center horizontally                       */
}

.dziq-modal-body {
  overflow-y: visible;            /* scroll handled by overlay, not inner box  */
  -webkit-overflow-scrolling: touch;
}

/* Restore centered modal on desktop */
@media (min-width: 769px) {
  .dziq-modal-overlay {
    align-items: center;
    padding: 24px;
    overflow-y: hidden;
  }
  .dziq-modal {
    max-height: 90vh;
  }
  .dziq-modal-body {
    overflow-y: auto;

  }
}

/* -- Sidebar overlay touch close -------------------------------------------- */
/* Transparent overlay behind open sidebar so tap-outside works               */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;                   /* just below sidebar z-index: 200           */
  background: rgba(0,0,0,0);      /* invisible - just catches the tap          */
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.active {
  display: block;
}

/* -- Content scrolling - touch momentum ------------------------------------- */
.dziq-content,
.sidebar-nav,
.dziq-modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* -- Touch feedback on interactive rows ------------------------------------- */
@media (hover: none) {
  /* On touch devices, :hover rules don't fire reliably.
     Use :active for visual tap feedback instead. */
  .nav-item:active {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
  }

  .dziq-table tbody tr.clickable:active {
    background: var(--bg-raised);
  }

  .btn-primary:active:not(:disabled) {
    background: var(--blue-dim);
  }

  .btn-ghost:active:not(:disabled) {
    background: var(--bg-raised);
  }

  .acp-option:active {
    background: rgba(255,255,255,0.07);
  }
}

/* -- Prevent text selection on tap-hold (feels broken on UI elements) -------- */
.btn,
.nav-item,
.dziq-table th,
.stat-card,
.acp-trigger,
.acp-option {
  -webkit-user-select: none;
  user-select: none;
}

/* ===========================================================================
   SETTINGS VIEW - DZ Config
   All .dziq-* classes used by settings.js and settings-2.js
   =========================================================================== */

/* -- Settings layout -------------------------------------------------------- */
.dziq-settings-wrap {
  padding: 24px;
  max-width: 960px;
}

.dziq-settings-header {
  margin-bottom: 20px;
}

/* Pricing tab: outer wrap expands to fit the rule grid */
.dziq-settings-wrap--wide {
  max-width: 1400px;
}

/* Tab bar: inline-flex so it sizes to button content width only */
.dziq-settings-wrap--wide .dziq-settings-tabs {
  display: inline-flex;
}

/* Section block border spans full width -- remove it on pricing tab
   to avoid a short border at 960px under the rule list */
.dziq-settings-wrap--wide .dziq-section-block {
  border-bottom: none;
  padding-bottom: 0;
}

/* Individual elements inside the pricing section stay at 960px.
   Using width (not max-width) to guarantee the constraint fires. */
.dziq-settings-wrap--wide .dziq-settings-header,
.dziq-settings-wrap--wide .dziq-section-header,
.dziq-settings-wrap--wide .pr-view-toggle,
.dziq-settings-wrap--wide .pr-how-it-works,
.dziq-settings-wrap--wide #pr-form-wrap,
.dziq-settings-wrap--wide #pr-msg,
.dziq-settings-wrap--wide .dziq-card,
.dziq-settings-wrap--wide .pr-cal-controls,
.dziq-settings-wrap--wide #pr-calendar {
  max-width: 960px;
  width:     100%;
}

/* Rule list expands to fill the full wide wrap */
.dziq-settings-wrap--wide #pr-list,
.dziq-settings-wrap--wide .pr-rule-list {
  max-width: none;
  width:     100%;
}


.dziq-page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* -- Parent group tab bar --------------------------------------------------- */
/* Larger, heavier -- the top-level category selector. Clearly a different tier. */
.dziq-group-tabs {
  display:      flex;
  gap:          0;
  margin-bottom: 0;
  padding:      0 4px;
}

.dziq-group-tab {
  padding:        14px 28px;
  border:         none;
  border-bottom:  4px solid transparent;
  background:     transparent;
  color:          rgba(255,255,255,0.3);
  font-family:    var(--font-display);
  font-size:      16px;
  font-weight:    800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     color 0.15s, border-color 0.15s;
  white-space:    nowrap;
  position:       relative;
  bottom:         -1px;     /* sits flush on top of the child nav border */
}

.dziq-group-tab:hover {
  color: rgba(255,255,255,0.65);
}

.dziq-group-tab.active {
  color:              #fff;
  border-bottom-color: var(--accent);
}

/* -- Child nav inset block -------------------------------------------------- */
/* Visually subordinate to the parent bar -- sits "inside" the selected group. */
.dziq-child-nav {
  background:    #16161a;
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 0 10px 10px 10px;  /* flat top-left corner connects to parent */
  padding:       10px 10px 6px;
  margin-bottom: 24px;
}

/* -- Tab bar (child tabs inside .dziq-child-nav) ---------------------------- */
.dziq-settings-tabs {
  display:       flex;
  flex-wrap:     wrap;
  gap:           4px;
  background:    transparent;
  border:        none;
  border-radius: 0;
  padding:       0;
  margin-bottom: 0;
}

.dziq-settings-tab {
  padding: 8px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
}

.dziq-settings-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.dziq-settings-tab.active {
  background: var(--accent);
  color: #fff;
}

.dziq-settings-body {
  min-height: 300px;
}

/* -- Settings section ------------------------------------------------------- */
.dziq-settings-section {
  display: flex;
  flex-direction: column;
  gap: 20px;

}

.dziq-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.dziq-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.dziq-section-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.dziq-section-block {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-light);
}

.dziq-section-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 5px;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.dziq-save-status {
  font-size: 13px;
  margin-left: 12px;
  color: var(--text-dim);
  vertical-align: middle;
}

.dziq-save-status.ok    { color: #4cff91; }
.dziq-save-status.error { color: #ff6450; }

/* -- Branding tab -- */
.brand-logo-wrap {
  margin-bottom: 12px;
}

.brand-logo-preview {
  display:     inline-flex;
  align-items: center;
  gap:         16px;
}


.brand-logo-preview img {
  max-height: 80px;
  max-width: 240px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  padding: 6px;
  object-fit: contain;
}

.brand-logo-empty {
  padding: 16px;
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  display: inline-block;
}

.brand-logo-placeholder {
  font-size: 13px;
  color: var(--text-dim);
}

.brand-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-upload-label {
  cursor: pointer;
}

.brand-upload-status {
  font-size: 13px;
  color: var(--text-dim);
}

.brand-upload-status.ok    { color: #4cff91; }
.brand-upload-status.error { color: #ff6450; }

.brand-accent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.brand-accent-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  outline: none;
  flex-shrink: 0;
}

.brand-accent-swatch:hover {
  transform: scale(1.15);
}

.brand-accent-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
  transform: scale(1.1);
}

/* -- Location coordinate fields -- */
.si-coords-row {
  margin-top: 4px;

}

.si-coord-input {
  background: var(--bg-card) !important;
  color: var(--text-dim) !important;
  cursor: default;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
}

.si-coord-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* -- Buttons ---------------------------------------------------------------- */
.dziq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: var(--bg-raised);
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  min-height: 36px;
}

.dziq-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-overlay);
}

.dziq-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.dziq-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.dziq-btn-primary:hover:not(:disabled) {
  background: var(--blue-dim);
  border-color: transparent;
}




.dziq-btn-danger {
  background: transparent;
  color: var(--red);
  border-color: rgba(255, 100, 80, 0.3);
}

.dziq-btn-danger:hover:not(:disabled) {
  background: rgba(255, 100, 80, 0.1);
  border-color: var(--red);
}

.dziq-btn-orange {
  background:   rgba(255,200,50,0.1);
  color:        var(--yellow, #ffc832);
  border-color: rgba(255,200,50,0.3);
}
.dziq-btn-orange:hover:not(:disabled) {
  background:   rgba(255,200,50,0.2);
  border-color: var(--yellow, #ffc832);
}

.dziq-btn-purple {
  background:   rgba(180,100,255,0.1);
  color:        #b464ff;
  border-color: rgba(180,100,255,0.3);
}
.dziq-btn-purple:hover:not(:disabled) {
  background:   rgba(180,100,255,0.2);
  border-color: #b464ff;
}

.dziq-btn-blue-outline {
  background:   rgba(26,111,255,0.1);
  color:        var(--accent-light, #5b9fff);
  border-color: rgba(26,111,255,0.3);
}
.dziq-btn-blue-outline:hover:not(:disabled) {
  background:   rgba(26,111,255,0.2);
  border-color: var(--accent, #1a6fff);
}

.dziq-btn-sm {
  padding: 5px 12px;
  font-size: 13px;
  min-height: 30px;
}

.dziq-btn-xs {
  padding: 3px 9px;
  font-size: 11px;
  min-height: 24px;
}

/* -- Forms ------------------------------------------------------------------ */
.dziq-form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 14px;
}

.dziq-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.dziq-form-group input[type="text"],
.dziq-form-group input[type="email"],
.dziq-form-group input[type="number"],
.dziq-form-group input[type="password"],
.dziq-form-group input[type="date"],
.dziq-form-group input[type="time"],
.dziq-form-group select,
.dziq-form-group textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.12s;
  min-height: 38px;
}

.dziq-form-group input:focus,
.dziq-form-group select:focus,
.dziq-form-group textarea:focus {
  border-color: var(--accent);
}

.dziq-form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239090a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}

.dziq-form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.dziq-form-row .dziq-form-group {
  flex: 1;
  min-width: 120px;
}

.dziq-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.dziq-msg {
  display: none;
  font-size: 13px;
  margin-top: 8px;
  font-weight: 600;
}

.dziq-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.dziq-checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* -- List rows -------------------------------------------------------------- */
.dziq-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dziq-list-row:last-child { border-bottom: none; }

.dziq-list-row.inactive { opacity: 0.45; }

.dziq-list-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}


.dziq-list-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.dziq-list-sub {
  font-size: 14px;
  color: var(--text-dim);
}

.dziq-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.dziq-empty-inline {
  padding: 20px 0;
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
}

/* -- Activity rows ---------------------------------------------------------- */
.dziq-activity-row {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Inline activity edit form -- injected directly below the row being edited */
.dziq-activity-inline-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 20px;
}

/* Editor slot inside activity row -- breathing room above injected forms */
.at-editor-slot:not(:empty) {
  margin-top: 10px;
}

.dziq-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dziq-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}


.dziq-tier-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  padding: 4px 0;
}

.dziq-tier-row span:first-child { flex: 1; }


.dziq-tier-price {
  font-weight: 700;
  color: var(--green);
  font-size: 15px;
  min-width: 60px;
  text-align: right;
}

/* -- Badges ----------------------------------------------------------------- */
.dziq-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.dziq-badge-active   { background: rgba(76, 255, 145, 0.12); color: var(--green); }
.dziq-badge-inactive { background: rgba(144,144,168, 0.10);  color: var(--text-dim); }
.dziq-badge-danger   { background: rgba(255,100, 80, 0.15);  color: var(--red); }
.dziq-badge-warn     { background: rgba(255,200, 50, 0.15);  color: var(--yellow); }
.dziq-badge-default  { background: rgba(26, 111,255, 0.15);  color: var(--accent-light); }
.dziq-badge-cat      { background: var(--bg-overlay); color: var(--text-secondary); }
.dziq-badge-addon    { background: rgba(180,100,255,0.15); color: #b464ff; }
.dziq-badge-parent   { background: rgba(255,200,50,0.12);  color: #ffc832; font-style: italic; }

.dziq-warn { font-size: 12px; color: var(--red); font-weight: 600; }

/* -- Operating hours -------------------------------------------------------- */
.dziq-hours-row {
  border-bottom: 1px solid var(--border);
  padding:       14px 0;
  max-width:     700px;
}

.dziq-hours-row:last-child { border-bottom: none; }

.dziq-hours-day-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dziq-hours-day {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  width: 100px;
  flex-shrink: 0;
}

.dziq-hours-detail {
  margin-top: 12px;
  padding-left: 116px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dziq-hours-times {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dziq-hours-times-label {
  font-size: 12px;
  color: var(--text-dim);
  width: 46px;
  flex-shrink: 0;
}

.dziq-hours-times input[type="time"] {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  padding: 7px 10px;
  outline: none;
  width: 130px;
}

.dziq-hours-times input[type="time"]:focus {
  border-color: var(--accent);
}

/* -- Check-in slots -- */
.dziq-slots-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dziq-slots-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.dziq-slots-hint {

  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

.dziq-slot-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dziq-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dziq-slot-time {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  padding: 6px 10px;
  outline: none;
  width: 120px;
}

.dziq-slot-time:focus { border-color: var(--accent); }

.dziq-slot-cap {
  width: 60px !important;
  text-align: center;
  padding: 6px 8px !important;
}

.dziq-slot-cap-label {
  font-size: 12px;
  color: var(--text-dim);
}

button.dziq-slot-remove {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

/* Add Time button: don't stretch full width */
.hr-add-slot {
  align-self:  flex-start;
  min-width:   160px;
  max-width:   260px;
  width:       100%;
}

/* -- Booking window row -- */
.dziq-hours-window-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

}

@media (max-width: 600px) {
  .dziq-hours-detail { padding-left: 0; margin-top: 10px; }
  .dziq-hours-day    { width: 80px; }
}

/* -- Billing / plan --------------------------------------------------------- */
.dziq-plan-badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.dziq-plan-starter {
  background: rgba(144,144,168,0.12);
  color: var(--text-secondary);
}

.dziq-plan-pro {
  background: rgba(180,100,255,0.15);
  color: var(--purple, #b464ff);
}

.dziq-billing-rows { margin: 8px 0; }

.dziq-billing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.dziq-billing-row:last-child { border-bottom: none; }
.dziq-billing-row span:first-child { color: var(--text-secondary); }
.dziq-billing-row span:last-child  { font-weight: 600; color: var(--text-primary); }

.dziq-billing-total span:last-child {
  color: var(--accent-light);
  font-size: 15px;
}

/* -- Upgrade note ----------------------------------------------------------- */
.dziq-upgrade-note {
  background: rgba(26,111,255,0.06);
  border: 1px solid rgba(26,111,255,0.2);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
}

/* -- Staff type filter pill bar --------------------------------------------- */
.st-filter-bar {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 16px;
  margin-top:    4px;
}

/* -- Comp rates ------------------------------------------------------------- */
.dziq-rates-list {
  margin-bottom: 12px;
}

.dziq-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-primary);
}

.dziq-rate-row:last-child { border-bottom: none; }

.dziq-rate-amount {
  font-weight: 700;
  color: var(--green);
}

/* -- Loading state ---------------------------------------------------------- */
.dziq-loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.dziq-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* -- Responsive ------------------------------------------------------------- */
@media (max-width: 768px) {
  .dziq-settings-wrap { padding: 16px; }
  .dziq-form-row      { flex-direction: column; gap: 0; }
  .dziq-section-header { flex-direction: column; align-items: flex-start; }
  .dziq-activity-header { flex-direction: column; align-items: flex-start; }
}

/* ==============================================================================
   Tooltip system
   Single shared bubble, auto-positioned via JS. Icon uses currentColor so it
   inherits --accent from the nearest ancestor or :root default.
============================================================================== */

.dziq-tip-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  color:           var(--accent);
  cursor:          help;
  margin-left:     3px;
  margin-right:    3px;
  vertical-align:  middle;
  opacity:         0.75;
  transition:      opacity 0.15s;
  flex-shrink:     0;
}

.dziq-tip-icon:hover,
.dziq-tip-icon:focus {
  opacity: 1;
  outline: none;
}

/* Tip icon placed AFTER a label -- 8px left gap, no right gap */
.dziq-tip-icon--after {
  margin-left:  5px;
  margin-right: 0;
}

.dziq-tooltip-bubble {
  display:        none;
  position:       absolute;
  z-index:        9000;
  max-width:      320px;
  padding:        12px 16px;
  background:     #1e1e28;
  border:         1px solid rgba(255,255,255,0.14);
  border-radius:  8px;
  font-family:    var(--font-body);
  font-size:      14px;
  font-weight:    400;
  line-height:    1.6;
  color:          var(--text-primary);
  box-shadow:     0 8px 28px rgba(0,0,0,0.55);
  pointer-events: auto;
  transition:     opacity 0.1s;
  white-space:    normal;
  word-break:     break-word;
}


/* ==============================================================================
   Help tab - Tab 9
   Two-column layout: TOC sidebar (left) + content pane (right).
   Collapses to single column on narrow viewports.
============================================================================== */

.dziq-help-wrap {
  display:   flex;
  flex-direction: column;
  gap:       18px;
  padding:   20px 24px;

  max-width: 960px;
}

.dziq-help-search-wrap {
  position: relative;
}

.dziq-help-search {
  width:         100%;
  box-sizing:    border-box;
  padding:       10px 14px 10px 38px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-primary);
  font-family:   var(--font-body);
  font-size:     14px;
  outline:       none;
  transition:    border-color 0.15s;
}

.dziq-help-search:focus {
  border-color: var(--accent);
}

.dziq-help-search-icon {
  position:  absolute;
  left:      12px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}

.dziq-help-body {
  display: flex;
  gap:     24px;
  align-items: flex-start;
}

/* TOC sidebar */
.dziq-help-toc {
  flex:          0 0 190px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       14px 0;
  position:      sticky;
  top:           78px; /* below topbar */
}

.dziq-help-toc-title {

  font-family:    var(--font-display);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-dim);
  padding:        0 16px 10px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  6px;
}

.dziq-help-toc-item {
  display:     block;
  padding:     8px 16px;
  font-size:   14px;
  color:       var(--text-secondary);
  cursor:      pointer;
  transition:  color 0.12s, background 0.12s;
  border-left: 3px solid transparent;
  line-height: 1.3;
}

.dziq-help-toc-item:hover {
  color:      var(--text-primary);
  background: rgba(255,255,255,0.04);
}

.dziq-help-toc-item.active {
  color:        var(--accent-light);
  border-color: var(--accent);
  background:   var(--accent-dim);
}

/* Content pane */
.dziq-help-content {
  flex:       1;
  min-width:  0;
}

.dziq-help-section {
  margin-bottom: 40px;
}

.dziq-help-section-title {
  font-family:    var(--font-display);
  font-size:      22px;
  font-weight:    800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--accent-light);
  padding:        14px 0 12px 16px;
  margin-bottom:  16px;
  margin-top:     8px;
  border-left:    4px solid var(--accent);
  border-bottom:  1px solid var(--border);
  background:     linear-gradient(90deg, var(--accent-dim) 0%, transparent 60%);
  border-radius:  0 4px 0 0;
}

.dziq-help-subsection {
  margin-bottom: 20px;
  padding:       16px 18px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
}

.dziq-help-sub-title {
  font-size:     15px;
  font-weight:   600;
  color:         var(--text-primary);
  margin-bottom: 8px;
}

.dziq-help-sub-body {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--text-secondary);
  white-space: pre-wrap;
}

.dziq-help-sub-body mark {
  background:    var(--accent-dim);
  color:         var(--accent-light);
  border-radius: 2px;
  padding:       0 2px;
}

/* Search empty state */
.dziq-help-no-results {
  padding:    40px 24px;
  text-align: center;
  color:      var(--text-dim);
  font-size:  14px;
}

/* Search result hit highlight */
.dziq-help-hit {
  background: var(--accent-dim);
  color:      var(--accent-light);
}

@media (max-width: 768px) {
  .dziq-help-body        { flex-direction: column; }
  .dziq-help-toc         { flex: none; width: 100%; position: static; }
  .dziq-help-wrap        { padding: 16px; }
}


/* -- Alert modal (warnings, block errors) ----------------------------------- */
.dziq-alert-modal {
  display:     flex;
  gap:         16px;
  align-items: flex-start;
  padding:     4px 0;
}

.dziq-alert-icon {
  font-size:   32px;
  line-height: 1;
  color:       var(--dziq-yellow, #ffc832);
  flex-shrink: 0;
  margin-top:  2px;
}

.dziq-alert-body {
  flex: 1;
}

.dziq-alert-msg {
  font-size:   15px;
  line-height: 1.6;
  color:       var(--text-primary);
  margin:      0;
}

/* ==============================================================================
   Settings-2 -- Tabs 4-8 styles
   Staff, Equipment, Hours, Store, Account
============================================================================== */

/* Toggle switch */
.dziq-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  cursor:      pointer;
  user-select: none;
}

.dziq-toggle input[type="checkbox"] { display: none; }

.dziq-toggle-slider {
  position:      relative;
  width:         40px;
  height:        24px;
  background:    rgba(255,255,255,0.12);
  border-radius: 12px;
  transition:    background 0.2s;
  flex-shrink:   0;
}

.dziq-toggle-slider::after {
  content:       '';
  position:      absolute;
  top:           4px;
  left:          4px;
  width:         16px;
  height:        16px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform 0.2s;
}

.dziq-toggle input:checked ~ .dziq-toggle-slider {
  background: var(--accent);
}

.dziq-toggle input:checked ~ .dziq-toggle-slider::after {
  transform: translateX(16px);
}

.dziq-toggle-label {
  font-size: 14px;
  color:     var(--text-secondary);
  min-width: 50px;
}

/* Hours rows */
.dziq-hours-sep {
  font-size: 14px;
  color:     var(--text-dim);
}

.dziq-time-input {
  padding:       7px 10px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-primary);
  font-family:   var(--font-body);
  font-size:     14px;
  width:         115px;
}

.dziq-time-input:focus { outline: none; border-color: var(--accent); }

.dziq-hidden { display: none !important; }

/* Store radio options */
.dziq-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     8px;
}

.dziq-radio-option {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       14px 16px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor:        pointer;
  transition:    border-color 0.15s;
}

.dziq-radio-option:has(input:checked),
.dziq-radio-option.dziq-radio-selected {
  border-color: var(--accent);
  background:   var(--accent-dim);
}

.dziq-radio-option.disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

.dziq-radio-option input[type="radio"] {
  margin-top:   3px;
  flex-shrink:  0;
  accent-color: var(--accent);
}

.dziq-radio-label {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text-primary);
}

.dziq-radio-desc {
  font-size:   14px;
  color:       var(--text-secondary);
  margin-top:  3px;
  line-height: 1.5;
}

.dziq-plan-gate {
  display:        inline-block;
  padding:        2px 8px;
  background:     rgba(180,100,255,0.2);
  color:          #b464ff;
  border-radius:  4px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.04em;
}

/* Account plan row */
.dziq-account-plan-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-wrap:       wrap;
}

.dziq-account-plan-detail {
  font-size: 14px;
  color:     var(--text-secondary);
}

/* Text dim utility */
.dziq-text-dim { color: var(--text-dim); }


/* -- Stripe Connect status card --------------------------------------------- */
.dziq-stripe-status {
  display:     flex;
  align-items: flex-start;
  gap:         16px;
  padding:     14px 0;
}


.dziq-stripe-status-icon {
  font-size:   28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top:  2px;
}

.dziq-stripe-disconnected .dziq-stripe-status-icon { color: var(--text-dim); }
.dziq-stripe-pending      .dziq-stripe-status-icon { color: var(--yellow, #ffc832); }
.dziq-stripe-connected    .dziq-stripe-status-icon { color: var(--green, #4cff91); }

.dziq-stripe-status-title {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text-primary);
  margin-bottom: 4px;
}

.dziq-stripe-status-desc {
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.55;
}

/* ==============================================================================
   Settings-3 -- Pricing Rules Tab
   Rule list, rule form, price calendar, day popover
============================================================================== */

/* -- Missing badge variants needed by pricing tab -- */
.dziq-badge-blue   { background: rgba(26,111,255,0.15);  color: var(--accent-light); }
.dziq-badge-purple { background: rgba(180,100,255,0.15); color: #b464ff; }

/* -- Activity/addon view toggle -- */
.pr-view-toggle {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   16px;
}

/* -- Rule list -- */
.pr-rule-list {
  border:       1px solid var(--border);
  border-radius: var(--radius);
  overflow-x:   auto;
  overflow-y:   hidden;
  margin-top:   12px;
}

.pr-rule-header,
.pr-rule-row {
  min-width: 1100px;
  display:     grid;
  grid-template-columns: 44px 1fr 160px 90px 130px 90px 76px 80px 280px;
  align-items: center;
  gap:         0;
  padding:     0 12px;
}

.pr-rule-header {
  background:    var(--bg-overlay);
  border-bottom: 1px solid var(--border);
  padding-top:   8px;
  padding-bottom: 8px;
}

.pr-rule-header span {
  font-family:    var(--font-display);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  padding:        0 6px;
  display:        flex;
  align-items:    center;
  gap:            5px;
  white-space:    nowrap;
}

.pr-rule-row {
  border-bottom:  1px solid var(--border);
  padding-top:    10px;
  padding-bottom: 10px;
  transition:     background 0.1s;
}

.pr-rule-row:last-child  { border-bottom: none; }
.pr-rule-row:hover       { background: var(--bg-raised); }
.pr-rule-row.pr-rule-inactive { opacity: 0.4; }

.pr-rule-row > span {
  font-size:   13px;
  color:       var(--text-primary);
  padding:     0 6px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-col-pri    { font-weight: 700; color: var(--text-dim) !important; font-size: 12px !important; }
.pr-col-name   { font-weight: 600; }
.pr-col-days   { color: var(--text-secondary) !important; font-size: 12px !important; }
.pr-col-dates  { color: var(--text-secondary) !important; font-size: 12px !important; }
.pr-col-time   { color: var(--text-secondary) !important; font-size: 12px !important; }
.pr-col-val    { font-weight: 700; color: var(--green) !important; text-align: right; padding-right: 10px !important; }
.pr-col-actions {
  display:         flex;
  gap:             4px;
  justify-content: flex-end;
  align-items:     center;
  flex-wrap:       nowrap;
}

/* Red X delete button for pricing rule rows */
.pr-btn-del {
  background:   rgba(255,100,80,0.12) !important;
  color:        var(--red) !important;
  border:       1px solid rgba(255,100,80,0.35) !important;
  font-size:    13px !important;
  font-weight:  700 !important;
  min-width:    28px;
  text-align:   center;
  padding:      3px 7px !important;
}
.pr-btn-del:hover {
  background:   rgba(255,100,80,0.25) !important;
  border-color: var(--red) !important;
}

/* Inline price display on altitude tier rows in Activities tab */
.at-tier-price {
  display:       inline-block;
  margin-left:   10px;
  font-weight:   700;
  color:         var(--green, #4cff91);
  font-size:     13px;
}

/* Activity column: stacked name + altitude sub-label */
.pr-col-act {
  display:        flex !important;
  flex-direction: column;
  gap:            1px;
  overflow:       hidden;
}

.pr-act-name {
  font-size:     13px;
  font-weight:   600;
  color:         var(--text-primary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.pr-alt-name,
.pr-grp-name {
  font-size:  11px;
  color:      var(--text-dim);
  white-space: nowrap;
}

/* -- Priority reference guide panel -- */
.pr-priority-guide {
  background:    var(--bg-raised);
  border:        1px solid var(--border-light);
  border-radius: var(--radius);
  padding:       14px 16px;
  margin-bottom: 16px;
}

.pr-priority-guide-title {
  font-family:    var(--font-display);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  10px;
}

.pr-priority-guide-rows {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px 24px;
}

.pr-priority-guide-row {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  font-size:   13px;
  min-width:   260px;
}

.pr-pg-num {
  font-family:    var(--font-display);
  font-size:      13px;
  font-weight:    700;
  color:          var(--accent-light);
  min-width:      28px;
  flex-shrink:    0;
}

.pr-pg-label {
  font-weight: 600;
  color:       var(--text-primary);
  white-space: nowrap;
}

.pr-pg-eg {
  font-size:  12px;
  color:      var(--text-dim);
  font-style: italic;
}

/* Two-column priority reference table inside How Pricing Rules Work */
.pr-priority-guide-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.pr-pgt-col {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* Each row: number pinned left, label+eg stacked right */
.pr-priority-guide-table .pr-priority-guide-row {
  display:               grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows:    auto auto;
  align-items:           center;
  gap:                   0 8px;
  min-width:             0;
}

.pr-priority-guide-table .pr-pg-num {
  grid-row:    1 / 3;
  align-self:  center;
}

.pr-priority-guide-table .pr-pg-label {
  grid-column: 2;
  grid-row:    1;
}

.pr-priority-guide-table .pr-pg-eg {
  grid-column: 2;
  grid-row:    2;
  margin-top:  0;
}


/* -------------------------------------------------------------
   Add-on Price List  (Pricing tab Add-ons view)
------------------------------------------------------------- */

.pr-addon-list {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  margin-top:    12px;
  width:         100%;
}

.pr-addon-header,
.pr-addon-row {
  display:     grid;
  grid-template-columns: 1fr 120px 90px 140px;
  align-items: center;
  gap:         0;
  padding:     0 12px;
  box-sizing:  border-box;
  width:       100%;
}

.pr-addon-header {
  background:    var(--bg-overlay);
  border-bottom: 1px solid var(--border);
  padding-top:   8px;
  padding-bottom: 8px;
  font-family:    var(--font-display);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

.pr-addon-header span,
.pr-addon-row span {
  padding: 0 6px;
}

.pr-addon-row {
  border-bottom:  1px solid var(--border);
  padding-top:    12px;
  padding-bottom: 12px;
  transition:     background 0.1s;
}

.pr-addon-row:last-child  { border-bottom: none; }
.pr-addon-row:hover       { background: var(--bg-raised); }

.pr-addon-name {
  font-weight:   600;
  font-size:     14px;
  color:         var(--text-primary);
  display:       block;
}

.pr-addon-code {
  font-size:  11px;
  color:      var(--text-dim);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  display:    block;
  margin-top: 2px;
}

.pr-addon-col-price {
  font-weight: 700;
  color:       var(--green);
  font-size:   14px;
}

.pr-addon-col-actions {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
}

/* Inline addon price edit form */
.pr-addon-form {
  margin: 0 12px 12px;
}


/* -------------------------------------------------------------
   Pricing Mode Toggle  (Account tab)
------------------------------------------------------------- */

.pm-toggle-wrap {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.pm-option {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 16px;
  border:        2px solid var(--border-light);
  border-radius: var(--radius);
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s;
  user-select:   none;
}

.pm-option:hover {
  border-color: var(--accent);
  background:   var(--bg-raised);
}


.pm-option-active {
  border-color: var(--accent) !important;
  background:   var(--accent-dim) !important;
}

.pm-option-icon {
  font-size:  22px;
  color:      var(--text-dim);
  flex-shrink: 0;
  width:      28px;
  text-align: center;
}
.pm-option-active .pm-option-icon { color: var(--accent); }

.pm-option-body    { flex: 1; }

.pm-option-title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--text-primary);
  margin-bottom: 2px;
}

.pm-option-desc {
  font-size: 13px;
  color:     var(--text-secondary);
}

.pm-option-check {
  font-size:   18px;
  font-weight: 700;
  color:       var(--accent);
  flex-shrink: 0;
}

/* -------------------------------------------------------------
   Simple Mode Gate  (Pricing tab)
------------------------------------------------------------- */

.pm-simple-gate {
  max-width:     600px;
  padding:       32px;
  background:    var(--bg-raised);
  border:        1px solid var(--border-light);
  border-radius: var(--radius);
}

.pm-gate-icon {
  font-size:     36px;
  color:         var(--accent);
  margin-bottom: 12px;
  line-height:   1;
}

.pm-gate-title {
  font-family:   var(--font-display);
  font-size:     22px;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 10px;
}

.pm-gate-desc {
  font-size:     14px;
  color:         var(--text-secondary);
  line-height:   1.6;
  margin:        0 0 24px;
}

.pm-gate-steps {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  24px;
}

.pm-gate-step {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   14px;
  color:       var(--text-primary);
}

.pm-gate-step-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--accent);
  color:           #fff;
  font-size:       12px;
  font-weight:     700;
  flex-shrink:     0;
}

.pm-gate-divider {
  height:        1px;
  background:    var(--border);
  margin-bottom: 24px;
}

.pm-gate-advanced-row {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}

.pm-gate-adv-title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  margin-bottom: 3px;
}

.pm-gate-adv-desc {
  font-size: 13px;
  color:     var(--text-secondary);
}


/* -------------------------------------------------------------
   Simple Mode Price Preview  (Activities tab inline calendar)
------------------------------------------------------------- */

.sp-preview-wrap {
  background:    var(--bg-raised);
  border:        1px solid var(--border-light);
  border-radius: var(--radius);
  overflow:      hidden;
}

.sp-preview-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       12px 16px;
  background:    var(--bg-overlay);
  border-bottom: 1px solid var(--border);
}

.sp-preview-title {
  font-family:   var(--font-display);
  font-size:     14px;
  font-weight:   700;
  letter-spacing: 0.04em;
  color:         var(--text-primary);
}

.sp-preview-sub {
  font-size: 12px;
  color:     var(--text-dim);
  margin-top: 2px;
}

.sp-no-price {
  padding:     20px 16px;
  font-size:   13px;
  color:       var(--text-dim);
  font-style:  italic;
  text-align:  center;
}

.sp-preview-note {
  font-size:  13px;
  color:      var(--text-secondary);
  padding:    10px 16px 0;
  margin:     0;
  line-height: 1.5;
}

/* -- How it works guide panel -- */
.pr-how-it-works {
  border:        1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow:      hidden;
}

.pr-hiw-header {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      12px 16px;
  cursor:       pointer;
  background:   var(--bg-raised);
  user-select:  none;
  transition:   background 0.12s;
}
.pr-hiw-header:hover { background: var(--bg-overlay); }

.pr-hiw-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--accent-dim);
  color:           var(--accent);
  font-size:       12px;
  font-weight:     700;
  flex-shrink:     0;
}

.pr-hiw-title {
  flex:        1;
  font-family: var(--font-display);
  font-size:   13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:       var(--text-secondary);
}

.pr-hiw-chevron {
  color:      var(--text-dim);
  font-size:  20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s;
}

.pr-hiw-body {
  padding:    0 16px 16px;
  background: var(--bg-surface);
}

.pr-hiw-section {
  margin-top:    16px;
  padding-top:   16px;
  border-top:    1px solid var(--border);
}
.pr-hiw-section:first-child { border-top: none; }

.pr-hiw-heading {
  font-size:     12px;
  font-weight:   700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         var(--text-dim);
  margin-bottom: 8px;
}

.pr-hiw-text {
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.6;
  margin:      0;
}

/* Example walkthrough table */
.pr-hiw-example {
  display:       flex;
  flex-direction: column;
  gap:           4px;
}

.pr-hiw-ex-row {
  display:     grid;
  grid-template-columns: 36px 1fr 180px;
  gap:         12px;
  align-items: start;
  padding:     8px 10px;
  border-radius: 6px;
  background:  var(--bg-raised);
  font-size:   13px;
}

.pr-hiw-ex-row.pr-hiw-ex-result {
  background: var(--accent-dim);
  border:     1px solid rgba(26,111,255,0.2);
}

.pr-hiw-ex-pri {
  font-family: var(--font-display);
  font-size:   14px;
  font-weight: 700;
  color:       var(--accent-light);
  padding-top: 1px;
}

.pr-hiw-ex-result .pr-hiw-ex-pri {
  color: var(--accent);
  font-size: 18px;
}

.pr-hiw-ex-desc {
  color:       var(--text-primary);
  line-height: 1.5;
}

.pr-hiw-ex-note {
  font-size:  11px;
  color:      var(--text-dim);
  font-style: italic;
  line-height: 1.5;
}

/* -- Rule form -- */
.pr-type-radios {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  margin-top: 6px;
}

.pr-type-label {
  display:     flex;
  align-items: center;
  gap:         7px;

  font-size:   14px;
  color:       var(--text-secondary);
  cursor:      pointer;
  padding:     8px 14px;
  border:      1px solid var(--border-light);
  border-radius: var(--radius);
  transition:  border-color 0.12s, background 0.12s;
}

.pr-type-label:hover { border-color: var(--accent); }

.pr-type-label input[type="radio"] {
  accent-color: var(--accent);
  cursor:       pointer;
}

.pr-type-label:has(input:checked) {
  border-color: var(--accent);
  background:   var(--accent-dim);
  color:        var(--text-primary);
}

/* -- Day-of-week checkboxes -- */
.pr-day-checks {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin-top: 6px;
}

.pr-day-label {
  display:     flex;
  align-items: center;
  gap:         14px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-secondary);
  cursor:      pointer;
  padding:     6px 16px;
  border:      1px solid var(--border-light);
  border-radius: 20px;
  transition:  border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
  white-space: nowrap;
}

.pr-day-label:hover { border-color: var(--accent); color: var(--text-primary); }

.pr-day-label input[type="checkbox"] {
  accent-color:  var(--accent);
  cursor:        pointer;
  width:         14px;
  height:        14px;
  flex-shrink:   0;
  margin-right:  8px;
}

.pr-day-label:has(input:checked) {
  border-color: var(--accent);
  background:   var(--accent-dim);
  color:        var(--text-primary);
}

/* -- Price calendar -- */
.pr-cal-controls {
  margin-bottom: 8px;
}

.pr-cal-wrap {
  background:    var(--bg-raised);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  max-width:     620px;
}

.pr-cal-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 20px;
  border-bottom:   1px solid var(--border);
  background:      var(--bg-overlay);
}

.pr-cal-title {
  font-family:    var(--font-display);
  font-size:      18px;
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          var(--text-primary);
}

/* Bigger prev/next buttons in calendar nav */
.pr-cal-nav .dziq-btn {
  width:       36px;
  height:      36px;
  min-height:  36px;
  padding:     0;
  font-size:   20px;
  font-weight: 700;
  line-height: 1;
}

.pr-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   1px;
  background:            var(--border);
}

.pr-cal-hdr {
  background:     var(--bg-overlay);
  padding:        8px 4px;
  text-align:     center;
  font-family:    var(--font-display);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

.pr-cal-cell {
  position:        relative;
  background:      var(--bg-raised);
  padding:         8px 6px;
  min-height:      64px;
  cursor:          pointer;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  gap:             4px;
  transition:      background 0.1s;
}

.pr-cal-cell:hover { background: var(--bg-overlay); }

.pr-cal-empty {
  background: var(--bg-base);
  cursor:     default;
}

.pr-cal-past {
  opacity: 0.35;
  cursor:  default;
}

.pr-cal-past:hover { background: var(--bg-raised); }

.pr-cal-weekend { background: rgba(26,111,255,0.04); }
.pr-cal-weekend:hover { background: rgba(26,111,255,0.10); }

.pr-cal-override { border-top: 2px solid var(--yellow); }

.pr-cal-closed {
  background:    rgba(255,100,80,0.08) !important;
  border-top:    2px solid var(--red);
}

.pr-cal-callus {
  background:    rgba(255,200,50,0.08) !important;
  border-top:    2px solid var(--yellow);
}

.pr-cal-day-num {
  font-family: var(--font-display);
  font-size:   16px;
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1;
}

.pr-cal-day-price {
  font-size:   12px;
  font-weight: 600;
  color:       var(--green);
  line-height: 1;
}

.pr-cal-closed   .pr-cal-day-price,
.pr-cal-callus   .pr-cal-day-price { color: var(--text-dim); }

/* -- Day override popover -- */
.pr-day-popover {
  position:      absolute;
  top:           100%;
  left:          50%;
  transform:     translateX(-50%);
  z-index:       500;
  background:    var(--bg-overlay);
  border:        1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding:       14px 16px;
  min-width:     220px;
  box-shadow:    0 8px 28px rgba(0,0,0,0.6);
  margin-top:    4px;
}

.pr-popover-date {
  font-family:   var(--font-display);
  font-size:     14px;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.pr-popover-price {
  font-size:     13px;
  color:         var(--text-secondary);
  margin-bottom: 12px;
}

.pr-popover-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  position:  relative;
}

#pp-close {
  position:   absolute;
  top:        -32px;
  right:      -8px;
  padding:    2px 7px;
  min-height: 20px;
  font-size:  11px;
  opacity:    0.6;
}

#pp-close:hover { opacity: 1; }

/* .dziq-card and .dziq-card-title defined in base settings block above */

/* -- Responsive: narrow pricing list -- */
@media (max-width: 1060px) {
  .pr-rule-header,
  .pr-rule-row {
    grid-template-columns: 44px 1fr 130px 80px 80px;
  }
  /* Hide time, type, value columns on narrow - show in tooltip/edit */
  .pr-col-dates,
  .pr-col-time,
  .pr-col-type,
  .pr-col-val {
    display: none;
  }
}

/* -- Day rules breakdown panel -- */
.pr-day-rules-panel {
  margin-top:    16px;
  max-width:     620px;
  background:    var(--bg-raised);
  border:        1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

.pr-day-rules-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      var(--bg-overlay);
  border-bottom:   1px solid var(--border);
}

.pr-day-rules-title {
  font-family:    var(--font-display);
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 0.04em;
  color:          var(--text-primary);
}

.pr-day-rules-price {
  font-family: var(--font-display);
  font-size:   18px;
  font-weight: 700;
  color:       var(--green);
}

.pr-day-rules-list {
  padding: 0;
}

.pr-day-rule-row {
  display:       grid;
  grid-template-columns: 36px 1fr 70px 70px;
  align-items:   center;
  gap:           0;
  padding:       10px 16px;
  border-bottom: 1px solid var(--border);
  font-size:     13px;
}

.pr-day-rule-row:last-child { border-bottom: none; }

.pr-day-rule-row.pr-match-fixed   { background: rgba(26,111,255,0.05); }
.pr-day-rule-row.pr-match-mod     { background: rgba(180,100,255,0.04); }
.pr-day-rule-row.pr-no-match      { opacity: 0.35; }

.pr-day-rule-check {
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
}

.pr-day-rule-name {
  font-weight:   600;
  color:         var(--text-primary);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  padding:       0 8px;
}

.pr-day-rule-type {
  font-size: 11px;
  color:     var(--text-dim);
  padding:   0 4px;
}

.pr-day-rule-val {
  font-weight: 700;
  text-align:  right;
  padding:     0 4px;
}

.pr-day-rule-val.pr-val-fixed   { color: var(--green); }
.pr-day-rule-val.pr-val-add     { color: var(--yellow); }
.pr-day-rule-val.pr-val-sub     { color: var(--red); }
.pr-day-rule-val.pr-val-none    { color: var(--text-dim); }

.pr-day-rules-empty {
  padding:    20px 16px;
  font-size:  13px;
  color:      var(--text-dim);
  font-style: italic;
}

.pr-day-rules-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 16px;
  border-top:      1px solid var(--border-light);
  background:      var(--bg-overlay);
  font-size:       13px;
  color:           var(--text-secondary);
}

.pr-day-rules-total strong {
  font-family: var(--font-display);
  font-size:   16px;
  color:       var(--green);
}

.pr-cal-cell.pr-cal-selected {
  outline:    2px solid var(--accent);
  outline-offset: -2px;
  background: rgba(26,111,255,0.10) !important;
  z-index:    2;
}

/* ============================================================
   Sidebar Go-Live Progress Pill
   ============================================================ */

.cl-progress-pill {
  display:        flex;
  align-items:    center;
  gap:            10px;
  margin:         12px 12px 16px;
  padding:        14px 14px;
  background:     rgba(255,100,80,0.08);
  border:         1px solid rgba(255,100,80,0.45);
  border-radius:  10px;
  cursor:         pointer;
  transition:     background 0.15s, border-color 0.15s, box-shadow 0.15s;
  flex-shrink:    0;
  box-shadow:     0 0 12px rgba(255,100,80,0.2), 0 0 24px rgba(255,100,80,0.08);
  position:       relative;
}

.cl-progress-pill::before {
  content:        'PRE-LAUNCH';
  position:       absolute;
  top:            -9px;
  left:           10px;
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.5px;
  color:          #ff6450;
  background:     #16161a;
  padding:        0 6px;
}

.cl-progress-pill:hover {
  background:   rgba(255,100,80,0.14);
  border-color: rgba(255,100,80,0.7);
  box-shadow:   0 0 18px rgba(255,100,80,0.35), 0 0 36px rgba(255,100,80,0.12);
}

.cl-pill-icon {
  font-size:   18px;
  flex-shrink: 0;
  color:       #ff6450;
  line-height: 1;
}

.cl-pill-label {
  flex:        1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size:   15px;
  font-weight: 700;
  color:       rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.cl-pill-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       22px;
  height:          22px;
  padding:         0 5px;
  background:      #ff6450;
  color:           #fff;
  border-radius:   11px;
  font-size:       12px;
  font-weight:     700;
  line-height:     1;
  flex-shrink:     0;
  box-shadow:      0 0 8px rgba(255,100,80,0.5);
}

/* ============================================================
   7-Day Forecast Modal
   ============================================================ */

.dziq-forecast-modal-wrap {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dziq-forecast-modal-wrap.open {
  display: flex;
}

.dziq-forecast-modal {
  background: #16161a;
  border: 1px solid rgba(var(--accent-rgb, 26,111,255), 0.35);
  border-radius: 12px;
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 26,111,255), 0.1), 0 24px 80px rgba(0,0,0,0.6);
}

.dziq-forecast-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(var(--accent-rgb, 26,111,255), 0.2);
  background: #0d0d0f;
  flex-shrink: 0;
}

.dziq-forecast-modal-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dziq-forecast-modal-title::before {
  content: "\2600";
  font-size: 20px;
  line-height: 1;
}

.dziq-forecast-modal-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 6px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}

.dziq-forecast-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.dziq-forecast-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.dziq-forecast-loading,
.dziq-forecast-err {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255,255,255,0.3);
  font-size: 14px;
  line-height: 1.6;
}

.dziq-forecast-err {
  color: #ff6450;
}

/* 7 day columns, each with heading + day/night rows stacked */
.dziq-forecast-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* One column per day */
.dziq-forecast-day-col {
  display: flex;
  flex-direction: column;
  background: #1c1c22;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}

.dziq-forecast-day-col:first-child {
  border-radius: 8px 0 0 8px;
}

.dziq-forecast-day-col:last-child {
  border-right: none;
  border-radius: 0 8px 8px 0;
}

/* Day name heading */
.dziq-fc-day-heading {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-align: center;
  padding: 10px 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}

/* Today heading highlight */
.dziq-fc-day-heading.is-today {
  color: var(--accent);
  background: rgba(var(--accent-rgb, 26,111,255), 0.08);
  border-bottom-color: rgba(var(--accent-rgb, 26,111,255), 0.2);
}

/* Day / Night rows */
.dziq-fc-period-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 10px;
  flex: 1;
}

.dziq-fc-period-row.is-night {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.dziq-fc-period-row.is-empty {
  opacity: 0.25;
  min-height: 60px;
}

/* DAY / NIGHT label */
.dziq-fc-period-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 2px;
  align-self: flex-start;
}

/* Weather icon */
.dziq-fc-period-icon {
  font-size: 20px;
  line-height: 1;
  margin: 2px 0;
}

/* Temp + wind stacked, centered */
.dziq-fc-period-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.dziq-fc-period-temp {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
}

.dziq-fc-period-temp.is-night-temp {
  font-size: 16px;
  color: rgba(255,255,255,0.35);
}

.dziq-fc-period-wind {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
}

/* Condition text */
.dziq-fc-period-cond {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
  margin-top: 2px;
  text-align: center;
}

/* Responsive -- 4-col on tablet, 2-col on phone */
@media (max-width: 700px) {
  .dziq-forecast-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .dziq-forecast-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==============================================================================
   LOADS VIEW
   Load history list, date/status filter, slide panel manifest.
   All selectors prefixed .dziq-loads-* or .dziq-slide-panel (shared panel system).
   Status badges: .dziq-badge-green/red/yellow/purple/gray -- new variants added here.
============================================================================== */

/* -- Status badge variants (shared across views) -- */
/* Scan: .dziq-badge-green/.dziq-badge-red/.dziq-badge-yellow/.dziq-badge-gray not previously defined */
.dziq-badge-green {
  background: rgba(76, 255, 145, 0.12);
  color: var(--green);
}

.dziq-badge-red {
  background: rgba(255, 100, 80, 0.12);
  color: var(--red);
}

.dziq-badge-yellow {
  background: rgba(255, 200, 50, 0.12);
  color: var(--yellow);
}

.dziq-badge-purple {
  background: rgba(180, 100, 255, 0.12);
  color: var(--purple);

}

.dziq-badge-gray {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
}

/* -- Slide panel system (right-side drawer, shared) -- */
.dziq-slide-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  width: 460px;
  max-width: 100vw;
  height: calc(100vh - var(--topbar-h));
  background: var(--bg-surface);
  border-left: 1px solid var(--border-light);
  z-index: 600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

.dziq-slide-panel.open {
  transform: translateX(0);
}

.dziq-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 599;
}

.dziq-panel-overlay.active {
  display: block;
}

.dziq-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.dziq-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dziq-panel-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.dziq-panel-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dziq-panel-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  touch-action: manipulation;
}

.dziq-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.dziq-panel-body {

  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

.dziq-panel-loading,
.dziq-panel-empty,
.dziq-panel-error {
  padding: 48px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
}

.dziq-panel-error {
  color: var(--red);
}

/* -- Loads view layout -- */
.dziq-view-loads {
  max-width: 1400px;
  padding: 28px 32px;
}

.dziq-view-header {
  margin-bottom: 20px;
}

.dziq-view-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* -- Filter bar -- */
.dziq-loads-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dziq-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dziq-filter-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dziq-filter-input,
.dziq-filter-select {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.12s;
  color-scheme: dark;
  min-height: 38px;
}

.dziq-filter-input:focus,
.dziq-filter-select:focus {
  border-color: var(--accent);
}

.dziq-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239090a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

/* -- Summary line -- */
.dziq-loads-summary {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* -- Table -- */
.dziq-loads-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.dziq-loads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dziq-loads-table thead tr {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

.dziq-loads-table th {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.dziq-loads-table td {
  padding: 13px 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.dziq-loads-table tbody tr:last-child td {
  border-bottom: none;
}

.dziq-loads-table tbody tr.clickable {
  cursor: pointer;
  transition: background 0.1s;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.04);
}

.dziq-loads-table tbody tr.clickable:hover {
  background: var(--bg-raised);
}

.dziq-loads-table tbody tr.clickable:active {
  background: var(--bg-overlay);
}

.dziq-loads-table .ld-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 14px;
  font-style: italic;
}

.dziq-loads-table .ld-error {
  text-align: center;
  color: var(--red);
  padding: 40px 14px;
}

/* -- Pagination -- */
.dziq-loads-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.dziq-loads-page-info {
  font-size: 13px;
  color: var(--text-dim);
}

/* -- Manifest panel body -- */
.dziq-manifest-count {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.dziq-manifest-list {
  display: flex;
  flex-direction: column;
}

.dziq-manifest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.dziq-manifest-row:last-child {
  border-bottom: none;
}

.dziq-manifest-num {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
}

.dziq-manifest-info {
  flex: 1;
  min-width: 0;
}

.dziq-manifest-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dziq-manifest-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.dziq-manifest-activity {
  font-size: 12px;
  color: var(--text-secondary);
}

.dziq-manifest-altitude {
  font-size: 12px;
  color: var(--text-dim);
}

.dziq-manifest-altitude::before {
  content: '\B7';
  margin-right: 5px;
  color: var(--border-light);
}

.dziq-manifest-instructor {
  font-size: 12px;
  color: var(--accent-light);
}

.dziq-manifest-instructor::before {
  content: '\B7';
  margin-right: 5px;
  color: var(--border-light);
}

.dziq-manifest-status {
  flex-shrink: 0;
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .dziq-slide-panel {
    width: 100vw;
    border-left: none;
    border-top: 1px solid var(--border-light);
  }

  .dziq-loads-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .dziq-loads-filters .dziq-filter-input,
  .dziq-loads-filters .dziq-filter-select {
    width: 100%;
  }
}
/* ==============================================================================
   REPORTS VIEW
   Tab bar reuses .dziq-settings-* classes from settings.js.
   Report-specific classes prefixed .rpt-*.
============================================================================== */

/* -- Report content area -- */
.rpt-report {
  padding-top: 20px;
}

.rpt-report-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.rpt-report-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* -- Filter bar -- */
.rpt-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.rpt-filter-bar .dziq-filter-input {
  width: 160px;
}

.rpt-filter-bar .dziq-btn {
  min-width: 120px;
  align-self: flex-end;
}

/* -- Stat grid spacing -- */
.rpt-stat-grid {
  margin-bottom: 20px;
}

/* -- Money column alignment -- */
.rpt-money {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--green);
  font-weight: 600;
}

/* -- Table bar: row count + export button -- */
.rpt-table-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rpt-row-count {
  font-size: 13px;
  color: var(--text-dim);
}
/* ==============================================================================
   CANCEL SUBSCRIPTION BUTTON
   Small, subdued danger link. Lives at the bottom of the Account tab.
   Intentionally unobtrusive -- not a primary action.
============================================================================== */

.dziq-btn-cancel-sub {
  background:    transparent;
  border:        none;
  color:         var(--text-dim);
  font-size:     12px;
  font-family:   var(--font-ui);
  cursor:        pointer;
  padding:       4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:    color 0.15s;
}

.dziq-btn-cancel-sub:hover {
  color: var(--red);
}

/* =============================================================
   Setup Wizard  (setup.js)
   Fires on first login when setup_complete = 0.
============================================================= */

.sw-loading,
.sw-error {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100vh;
  color:           var(--text-secondary);
  font-size:       16px;
}

/* Outer wrap -- full screen centered column */
.sw-wrap {
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  background:      var(--bg-base);
  padding:         0 16px 60px;
}

/* Header: brand + progress */
.sw-header {
  width:           100%;
  max-width:       680px;
  padding:         28px 0 24px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             24px;
}

/* Progress bar */
.sw-progress {
  display:         flex;
  align-items:     center;
  gap:             0;
  width:           100%;
  justify-content: center;
}

.sw-step {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
}

.sw-dot {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          2px solid rgba(255,255,255,0.15);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  color:           rgba(255,255,255,0.3);
  font-family:     var(--font-display);
  transition:      all 0.2s;
}

.sw-dot.active {
  border-color: var(--accent);
  color:        var(--accent);
  background:   rgba(26,111,255,0.12);
}

.sw-dot.done {
  border-color: var(--green);
  color:        var(--green);
  background:   rgba(76,255,145,0.1);
}

.sw-step-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.3);
  white-space:    nowrap;
}

.sw-connector {
  width:            40px;
  height:           2px;
  background:       rgba(255,255,255,0.1);
  margin:           0 4px;
  margin-bottom:    18px;
  flex-shrink:      0;
  transition:       background 0.2s;
}

.sw-connector.done { background: var(--green); opacity: 0.4; }

/* Main card */
.sw-card {
  width:         100%;
  max-width:     680px;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       40px;
}

/* Welcome screen */
.sw-welcome {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             20px;
}

.sw-welcome-icon  { font-size: 56px; line-height: 1; }
.sw-welcome-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; margin: 0; }
.sw-welcome-sub   { color: var(--text-secondary); font-size: 16px; margin: 0; max-width: 480px; line-height: 1.6; }

.sw-welcome-steps {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  width:          100%;
  max-width:      400px;
  text-align:     left;
  background:     var(--bg-raised);
  border-radius:  var(--radius);
  padding:        16px 20px;
}

.sw-welcome-item  { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sw-wi-icon       { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.sw-wi-label      { color: var(--text-primary); }

.sw-btn-lg {
  font-size:   16px !important;
  padding:     14px 40px !important;
  margin-top:  8px;
}

/* Step card */
.sw-step-header   { margin-bottom: 28px; }
.sw-step-num      { font-family: var(--font-display); font-size: 12px; font-weight: 700;
                    letter-spacing: 0.1em; text-transform: uppercase;
                    color: var(--accent); margin-bottom: 6px; }
.sw-step-title    { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.sw-step-sub      { color: var(--text-secondary); font-size: 14px; margin: 0; line-height: 1.6; }
.sw-hint          { color: var(--text-dim); font-size: 12px; font-weight: 400; }

/* Step footer */
.sw-step-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      28px;
  padding-top:     20px;
  border-top:      1px solid var(--border);
}

/* Step actions (add buttons) */
.sw-step-actions { margin-top: 12px; }

/* Added items list */
.sw-added-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sw-added-item {
  background:    rgba(76,255,145,0.08);
  border:        1px solid rgba(76,255,145,0.2);
  border-radius: var(--radius);
  padding:       8px 12px;
  font-size:     13px;
  color:         var(--green);
}

/* Skip note */
.sw-skip-note {
  margin-top:  16px;
  font-size:   13px;
  color:       var(--text-dim);
}

/* Link buttons within wizard */
.sw-link {
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  color:       var(--accent);
  font-size:   13px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sw-link-dim { color: var(--text-dim); }
.sw-link-dim:hover { color: var(--text-secondary); }

/* Hours grid */
.sw-hours-grid {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  8px;
}

.sw-hours-row {
  display:     flex;
  align-items: center;
  gap:         20px;
}

.sw-hours-day {
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       130px;
  font-size:   14px;
  cursor:      pointer;
  flex-shrink: 0;
}

.sw-hours-times {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.sw-hours-to { color: var(--text-dim); font-size: 13px; }

/* Import callout in staff step */
.sw-import-callout {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  background:    rgba(26,111,255,0.08);
  border:        1px solid rgba(26,111,255,0.2);
  border-radius: var(--radius);
  padding:       14px 16px;
  margin-bottom: 24px;
  font-size:     14px;
}

.sw-import-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }

/* Done screen */
.sw-done {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  gap:             20px;
}

.sw-done-icon  { font-size: 64px; line-height: 1; }
.sw-done-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; margin: 0; }
.sw-done-sub   { color: var(--text-secondary); font-size: 16px; margin: 0; }

.sw-portal-url {
  background:    var(--bg-raised);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       14px 20px;
  width:         100%;
  max-width:     480px;
}

.sw-portal-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
                   letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.sw-portal-link  { display: flex; align-items: center; gap: 10px; }
.sw-portal-link a { color: var(--accent); font-size: 14px; word-break: break-all; flex: 1; }

.sw-done-tips {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  text-align:     left;
  width:          100%;
  max-width:      480px;
}

.sw-done-tip {
  font-size:  14px;
  color:      var(--text-secondary);
  padding:    8px 12px;
  background: var(--bg-raised);
  border-radius: var(--radius);
}

/* Form */
.sw-form { display: flex; flex-direction: column; gap: 16px; }


/* -- Maintenance Alert Modal ------------------------------------------------ */
/* Fires on login when credentials or aircraft maintenance need attention.     */
/* Classes prefixed dziq-mx- to avoid collision with existing modal classes.  */

.dziq-mx-overlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, 0.72);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:          1100;
  align-items:      center;
  justify-content:  center;
  padding:          24px;
}
.dziq-mx-overlay.open {
  display: flex;
}

.dziq-mx-modal {
  background:    var(--bg-surface);
  border:        1px solid rgba(255, 100, 80, 0.5);
  border-radius: var(--radius-lg);
  width:         100%;
  max-width:     540px;
  max-height:    82vh;
  display:       flex;
  flex-direction: column;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.5),
                 0 0 0 1px rgba(255, 100, 80, 0.2),
                 0 0 32px rgba(255, 100, 80, 0.2),
                 0 0 64px rgba(255, 100, 80, 0.1);
}

.dziq-mx-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 20px;
  border-bottom:   3px solid #ff6450;
  background:      #0d0d0f;
  flex-shrink:     0;
  border-radius:   var(--radius-lg) var(--radius-lg) 0 0;
}

.dziq-mx-header-left {
  display:     flex;
  align-items: center;
  gap:         14px;
}

.dziq-mx-close {
  background:    rgba(255,255,255,0.05);
  border:        1px solid rgba(255,255,255,0.1);
  color:         rgba(255,255,255,0.4);
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 1px;
  cursor:        pointer;
  padding:       6px 12px;
  border-radius: 6px;
  transition:    all 0.12s;
  flex-shrink:   0;
}
.dziq-mx-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.dziq-mx-body {
  overflow-y: auto;
  padding:    0 20px 20px;
  flex:       1;
}

.dziq-mx-section {
  margin-top: 18px;
}

.dziq-mx-section-title {
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           var(--text-dim);
  margin-bottom:   8px;
  padding-bottom:  6px;
  border-bottom:   1px solid var(--border);
}

.dziq-mx-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       9px 0;
  border-bottom: 1px solid var(--border);
}
.dziq-mx-item:last-child { border-bottom: none; }

.dziq-mx-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  flex-shrink:  0;
}
.dziq-mx-dot.overdue { background: var(--red); }
.dziq-mx-dot.warning { background: var(--yellow); }

.dziq-mx-item-body { flex: 1; min-width: 0; }

.dziq-mx-item-name {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-primary);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.dziq-mx-item-cred {
  font-size:  12px;
  color:      var(--text-secondary);
  margin-top: 1px;
}

.dziq-mx-days {
  font-family:  var(--font-display);
  font-size:    12px;
  font-weight:  700;
  letter-spacing: 0.03em;
  white-space:  nowrap;
  flex-shrink:  0;
}
.dziq-mx-days.overdue { color: var(--red); }
.dziq-mx-days.warning { color: var(--yellow); }

.dziq-mx-footer {
  padding:       14px 20px;
  border-top:    1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           12px;
  flex-shrink:   0;
}

.dziq-mx-footer-note {
  font-size:  12px;
  color:      var(--text-dim);
  line-height: 1.5;
}

.dziq-mx-btn {
  height:        36px;
  padding:       0 18px;
  border-radius: var(--radius);
  font-family:   var(--font-display);
  font-size:     13px;
  font-weight:   700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor:        pointer;
  border:        none;
  white-space:   nowrap;
  transition:    filter 0.15s;
}
.dziq-mx-btn-primary {
  background: var(--accent);
  color:      #fff;
}
.dziq-mx-btn-primary:hover { filter: brightness(1.15); }
.dziq-mx-btn-ghost {
  background: transparent;
  border:     1px solid var(--border-light);
  color:      var(--text-secondary);
}
.dziq-mx-btn-ghost:hover { border-color: var(--accent); color: var(--text-primary); }

/* Mobile */
@media (max-width: 600px) {
  .dziq-mx-modal    { max-height: 90vh; }
  .dziq-mx-footer   { flex-direction: column; align-items: stretch; }
  .dziq-mx-btn      { text-align: center; height: 40px; }
}