/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* Signature font — cursive style for digital signatures */ .font-signature { font-family: 'Segoe Script', 'Brush Script MT', 'Dancing Script', cursive; font-style: italic; } /* Sidebar collapse — driven by class on */ .sidebar-desktop { width: 16rem; /* 256px = w-64 */ transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ng-sidebar-collapsed .sidebar-desktop { width: 3.5rem; /* 56px icon-only */ } .sidebar-label { /* opacity only — sidebar width clips the text; no width tween avoids reflow jank */ transition: opacity 80ms ease; overflow: hidden; white-space: nowrap; } .ng-sidebar-collapsed .sidebar-desktop .sidebar-label { opacity: 0; max-width: 0 !important; min-width: 0 !important; overflow: hidden; pointer-events: none; /* zero both physical and logical margin so space-x/gap don't add phantom width */ margin-left: 0 !important; margin-inline-start: 0 !important; } /* Main content adjusts with sidebar */ @media (min-width: 1024px) { /* Transition is ONLY active during sidebar toggle — applied/removed by sidebar_controller.js. A persistent transition on
causes Chrome to promote it to a compositing layer, making it the containing block for position:fixed descendants (modals center in content area instead of the viewport). Scoping to the transitioning class prevents that. */ .ng-sidebar-transitioning main { transition: padding-left 150ms cubic-bezier(0.4, 0, 0.2, 1); } .ng-sidebar-collapsed main { padding-left: 3.5rem !important; } } /* Collapsed header: remove padding, let logo link do the centering */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-header { padding-left: 0 !important; padding-right: 0 !important; } /* Collapsed: logo link stretches full sidebar width and centers its icon — same mechanism as nav elements, guarantees identical midpoint */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-logo { width: 100% !important; justify-content: center !important; } /* Collapsed: zero the right margin on the icon div that space-x-2.5 adds (10px gap between icon and label — offset icon left of center when collapsed) */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-logo > div { margin-right: 0 !important; } /* Summary card help icons: hidden below lg; at lg–xl hidden when sidebar expanded; always visible at xl+ */ @media (min-width: 1024px) and (max-width: 1279px) { .summary-help-icon { display: none !important; } .ng-sidebar-collapsed .summary-help-icon { display: inline-flex !important; } margin-inline-end: 0 !important; } /* Collapsed: hide the in-header collapse button (floating button takes over) */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-collapse-btn { display: none !important; } /* Inline expand row — shown inside collapsed sidebar above the scroll container */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-expand-row { display: flex; } /* Collapsed: hide org name bar (it's just whitespace) */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-org-bar { display: none !important; } /* Collapsed: hide nav section group headers entirely — removes all vertical spacing */ .ng-sidebar-collapsed .sidebar-desktop nav [data-nav-group-target="trigger"] { display: none !important; } /* Collapsed: force all nav groups open so icons remain visible */ .ng-sidebar-collapsed .sidebar-desktop .nav-group-content { grid-template-rows: 1fr !important; } /* Collapsed nav items: center icons — !important beats Tailwind cascade */ .ng-sidebar-collapsed .sidebar-desktop nav a { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; gap: 0 !important; /* remove border-left so it doesn't offset the centering space */ border-left-width: 0 !important; } /* Collapsed user section: stack bell above avatar, both centered */ .ng-sidebar-collapsed .sidebar-desktop .sidebar-user-row { flex-direction: column-reverse !important; align-items: center !important; gap: 0.25rem !important; } .ng-sidebar-collapsed .sidebar-desktop .sidebar-user-btn { justify-content: center !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; } .ng-sidebar-collapsed .sidebar-desktop .sidebar-bell { display: flex !important; justify-content: center !important; } /* Collapsed: user section becomes flex column-reverse so tray appears above avatar row */ .ng-sidebar-collapsed .sidebar-desktop [data-controller="user-menu"] { display: flex !important; flex-direction: column-reverse !important; } /* Collapsed: popup becomes an in-flow slide-up tray (grid animation, same as nav groups) */ .ng-sidebar-collapsed .sidebar-desktop [data-user-menu-target="menu"] { position: static !important; display: grid !important; /* always in layout — overrides hidden's display:none */ grid-template-rows: 0fr; transition: grid-template-rows 200ms ease-out; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 -0.75rem !important; /* negate parent p-3 so tray spans full sidebar width */ background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; } .ng-sidebar-collapsed .sidebar-desktop [data-user-menu-target="menu"].tray-open { grid-template-rows: 1fr; } /* Inner wrapper required for grid 0fr collapse */ .ng-sidebar-collapsed .sidebar-desktop [data-user-menu-target="menu"] .user-menu-inner { min-height: 0; overflow: hidden; } /* Collapsed: center every item row in the tray, remove padding and gap */ .ng-sidebar-collapsed .sidebar-desktop [data-user-menu-target="menu"] a, .ng-sidebar-collapsed .sidebar-desktop [data-user-menu-target="menu"] button { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; } /* Collapsed: text labels use sidebar-label class — hidden by existing sidebar-label rule */ /* Collapsed: hide divider lines in tray */ .ng-sidebar-collapsed .sidebar-desktop .user-menu-divider { display: none !important; } /* Collapsed: zero right margin on heroicons in tray (some have mr-3) */ .ng-sidebar-collapsed .sidebar-desktop [data-user-menu-target="menu"] svg { margin-right: 0 !important; margin-inline-end: 0 !important; } /* ============================================================ Mobile card tables — add `mobile-card-table` to the outer container div wrapping a table to get card layout on mobile. On sm+ the table renders normally. ============================================================ */ @media (max-width: 639px) { /* Container loses its own bg/border/shadow — cards provide that */ .mobile-card-table { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Inner overflow wrapper: let cards breathe */ .mobile-card-table > .overflow-x-auto { overflow: visible !important; padding: 0.5rem 0; } /* Table becomes a block so rows can stack */ .mobile-card-table table { display: block !important; min-width: 0 !important; width: 100% !important; margin: 0 !important; } /* Hide column headers — content is self-describing in cards */ .mobile-card-table thead { display: none !important; } /* tbody: vertical stack of cards */ .mobile-card-table tbody { display: flex !important; flex-direction: column; gap: 0.625rem; } /* Preserve hidden state for toggle-controlled tbody sections */ .mobile-card-table tbody.hidden { display: none !important; } /* Each row becomes a card */ .mobile-card-table tbody tr { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; background: white; border-radius: 0.875rem; border: 1px solid rgba(0, 0, 0, 0.07); padding: 0.875rem 1rem 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* First cell = card title, full width, slightly larger, separator below */ .mobile-card-table tbody td:first-child { flex: 0 0 100%; padding: 0 0 0.5rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; font-size: 0.9rem; } /* Middle cells: inline metadata flow */ .mobile-card-table tbody td { flex: 0 0 auto; padding: 0.125rem 0 !important; border: none !important; font-size: 0.8125rem; text-align: left !important; vertical-align: baseline; } /* Last cell (actions): push to right edge */ .mobile-card-table tbody td:last-child { flex: 1; display: flex !important; justify-content: flex-end; align-items: center; gap: 0.75rem; padding-top: 0.5rem !important; margin-top: 0.125rem; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; flex-basis: 100%; } /* Clickable card rows: active press feedback */ .mobile-card-table tbody tr[data-controller~="card-link"]:active { transform: scale(0.985); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } } /* Dark mode card rows */ .dark .mobile-card-table tbody tr { background: rgb(17 24 39); border-color: rgba(255, 255, 255, 0.07); } .dark .mobile-card-table tbody td:first-child { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } .dark .mobile-card-table tbody td:last-child { border-top-color: rgba(255, 255, 255, 0.06) !important; } /* Operator layout main content — pb-32 with safe-area-inset-bottom for iOS home indicator */ .operator-main-content { padding-bottom: max(8rem, calc(4rem + env(safe-area-inset-bottom, 0px))); } /* Filter grid — prevent native