/* lot-quasar-reset.css — neutralize Quasar opinionated defaults so LOT tokens win. Loaded AFTER Quasar's own CSS, BEFORE lot-theme.css / lot-workspace.css so component CSS using var(--lot-*) tokens always wins on the cascade. Extend this file when a new Quasar class fights the design — do NOT layer per-component !important overrides. */ /* ---- Root surface: Quasar defaults body to #121212 in dark mode. Override to our --lot-bg-root. ---- */ html, body { background: var(--lot-bg-root) !important; color: var(--lot-text-primary) !important; } /* ---- Drawer: sidebar background comes from --lot-bg-sidebar, thin right border, no shadow. The drawer extends from y=0 to the viewport bottom (see top: 0 override below) so the sidebar header with the Lechler logo is the topmost element on the page — matching the mockup. The topbar header is offset from the left by the sidebar width so it starts to the right of the drawer. */ .q-drawer { background: var(--lot-bg-sidebar) !important; color: var(--lot-text-primary) !important; border-right: 1px solid var(--lot-border) !important; box-shadow: none !important; /* Override Quasar's default top offset (which pushes the drawer below the header). The drawer starts at y=0. */ top: 0 !important; height: 100% !important; /* Allow collapsed-mode flyouts to escape the drawer edge. */ overflow: visible !important; } /* Quasar ships q-drawer__content with 16px padding — strip it so the sidebar inner column fills the full drawer width. */ .q-drawer__content { background: inherit !important; padding: 0 !important; overflow: visible !important; } /* Strip the inner .q-page padding so the home column's own padding is the single source of truth (was ~16px). BUT leave .q-page-container alone — Quasar uses its padding-left to offset the content for the fixed drawer. We instead set it explicitly via the body rail-state class below so the offset tracks the pin toggle (52px ↔ 220px). */ .q-page, .q-page > div { padding: 0 !important; margin: 0 !important; } /* Offset the page container by the sidebar width so content doesn't slide under the fixed drawer. Tracks the pin-toggle state mirrored onto by lot/ui/theme.py's init script. */ body.lot-rail--expanded .q-page-container { padding-left: var(--lot-sidebar-w-expanded, 220px) !important; } body.lot-rail--collapsed .q-page-container { padding-left: var(--lot-sidebar-w-collapsed, 52px) !important; } /* Default before the init script runs — matches expanded. Padding-top reserves space for the fixed 52px topbar, otherwise content renders UNDER the topbar. */ .q-page-container { padding-left: var(--lot-sidebar-w-expanded, 220px) !important; padding-right: 0 !important; padding-top: 52px !important; padding-bottom: 0 !important; } /* ---- Cards: flat, outlined, rounded. Mockup never uses elevated cards. ---- */ .q-card { background: var(--lot-bg-card, var(--lot-bg-surface)) !important; color: var(--lot-text-primary) !important; box-shadow: none !important; border: 1px solid var(--lot-border) !important; border-radius: var(--lot-radius-lg, 12px) !important; } .q-card--bordered { border: 1px solid var(--lot-border) !important; } .q-card__section { padding: 16px !important; } /* ---- Items (used by lists, nav rows): strip default min-heights and padding. ---- */ .q-item { min-height: 0 !important; padding: 0 !important; color: inherit !important; } .q-item--active, .q-item.q-router-link--active { color: inherit !important; background: transparent !important; } .q-item__section--avatar { min-width: 0 !important; padding-right: 0 !important; } /* ---- Buttons: no uppercase, no built-in elevation, no Quasar focus helper art. ---- */ .q-btn { text-transform: none !important; font-weight: 500 !important; letter-spacing: 0 !important; box-shadow: none !important; } .q-btn:before { box-shadow: none !important; } .q-btn--flat:before, .q-btn--outline:before { background: transparent !important; } .q-focus-helper { display: none !important; } /* ---- Inputs: no underline, no bottom label, use our border tokens. ---- */ .q-field__control:before, .q-field__control:after { display: none !important; } .q-field__bottom { display: none !important; } .q-field--filled .q-field__control, .q-field--outlined .q-field__control { background: var(--lot-bg-input) !important; border: 1px solid var(--lot-border) !important; border-radius: 8px !important; color: var(--lot-text-primary) !important; } .q-field__native, .q-field__input { color: var(--lot-text-primary) !important; } /* ---- Header / toolbar: use root bg, no drop shadow, tight min-height. ---- */ .q-header, .q-toolbar { background: var(--lot-bg-root) !important; color: var(--lot-text-primary) !important; min-height: 52px !important; box-shadow: none !important; border-bottom: 1px solid var(--lot-border) !important; } /* ---- Tooltip: match our surface + typography. Quasar defaults to dark gray + 11px. ---- */ .q-tooltip { background: var(--lot-bg-surface) !important; color: var(--lot-text-primary) !important; border: 1px solid var(--lot-border) !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 10px !important; border-radius: 6px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* ---- Menu / popover surfaces (Quasar q-menu): match our surface. ---- */ .q-menu { background: var(--lot-bg-surface) !important; color: var(--lot-text-primary) !important; border: 1px solid var(--lot-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; border-radius: 8px !important; } /* ---- Dialog: flat, our surface, outlined. ---- */ .q-dialog__inner > .q-card { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35) !important; } /* ---- Separator: use our border token. ---- */ .q-separator { background: var(--lot-border) !important; } /* ---- Table: neutral backgrounds, our text colors. Will be polished per-component later. ---- */ .q-table__top, .q-table__bottom, .q-table thead tr, .q-table tbody td { background: transparent !important; color: var(--lot-text-primary) !important; } .q-table thead tr th { color: var(--lot-text-secondary) !important; } .q-table tbody tr:hover td { background: var(--lot-bg-surface-hover) !important; }