/* --------------------------------------------------------------- Cycle Inventory Theme — Custom CSS Rules that go beyond plain Tailwind utility classes. --------------------------------------------------------------- */ /* Prevent Flash Of Unstyled Content while dark-mode class is applied via inline script */ html.dark { color-scheme: dark; } html:not(.dark) { color-scheme: light; } /* Smooth theme transitions, but skip on first paint (js adds .theme-ready after load) */ .theme-ready * { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Touch targets */ .touch-target { min-width: 44px; min-height: 44px; } /* Sticky filter bar shadow on scroll */ .sticky-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } html.dark .sticky-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.4); } /* Low stock pulsing badge */ @keyframes pulse-warn { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .badge-low-stock { animation: pulse-warn 1.8s ease-in-out infinite; } /* Card hover lift */ .cycle-card { transition: transform .15s ease, box-shadow .15s ease; } .cycle-card:hover { transform: translateY(-2px); } /* Custom thin scrollbar for spec pill rows */ .pill-scroll::-webkit-scrollbar { height: 4px; } .pill-scroll::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 4px; } /* Modal backdrop */ .modal-backdrop { backdrop-filter: blur(2px); } /* Number input spinners removed for custom [-]/[+] controls */ input[type=number].no-spin::-webkit-inner-spin-button, input[type=number].no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number].no-spin { -moz-appearance: textfield; } /* Row "dirty" state (unsaved change) */ .row-dirty { outline: 2px solid #f59e0b; outline-offset: 2px; border-radius: 8px; } /* Toast container */ #ci-toast-container { position: fixed; bottom: 1rem; right: 1rem; left: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; } @media (min-width: 640px) { #ci-toast-container { left: auto; } } .ci-toast { pointer-events: auto; max-width: 380px; animation: toast-in .2s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .navigation.pagination { margin-top: 3rem; display: flex; justify-content: center; } .navigation.pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .navigation.pagination .page-numbers { min-width: 42px; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; color: #475569; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .navigation.pagination .page-numbers:hover { background: #f0fdf4; color: #16a34a; border-color: #86efac; transform: translateY(-2px); } .navigation.pagination .page-numbers.current { background: #16a34a; color: #ffffff; border-color: #16a34a; box-shadow: 0 5px 15px rgba(22, 163, 74, 0.25); } .navigation.pagination .page-numbers.next, .navigation.pagination .page-numbers.prev { padding-left: 18px; padding-right: 18px; } /* Dark mode */ .dark .navigation.pagination .page-numbers { background: #0f172a; border-color: #334155; color: #cbd5e1; } .dark .navigation.pagination .page-numbers:hover { background: #14532d; border-color: #22c55e; color: #ffffff; } .dark .navigation.pagination .page-numbers.current { background: #22c55e; border-color: #22c55e; color: #052e16; } @media (max-width: 640px) { .navigation.pagination { margin-top: 2rem; } .navigation.pagination .nav-links { gap: 6px; } .navigation.pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; border-radius: 9px; font-size: 13px; } .navigation.pagination .page-numbers.next, .navigation.pagination .page-numbers.prev { padding-left: 13px; padding-right: 13px; } } /* Print styles for CSV/report friendliness (screens only otherwise) */ @media print { header, nav, .no-print { display: none !important; } }