/* Sofia (EOS) dark theme — deep maroon surfaces, EOS red accent. * Loaded LAST in on every page, so it overrides each page's inline * :root palette. Pages keep using var(--bg)/var(--text)/var(--accent) etc., * which resolve to the EOS values below. * * NOTE: login.html is a full-bleed branded page and defines its own * background; the `body` rule here is scoped so it does not flatten it. */ :root { --bg: #0c0c0e; --panel: #1c1114; --panel-2: #2a151b; --panel-3: #351a22; --text: #f5f5f7; --text-dim: #b9a3a8; --text-fade: #8a747b; --accent: #ea0029; --accent-soft: #ea002926; --accent-hairline:#ea002966; --green: #6ee7b7; --red: #ff6b7f; --yellow:#fbbf24; --blue: #93c5fd; --border: #43242c; --hairline:#2c171d; } /* Dark surfaces: depth comes from contrast + subtle rims, not white shadows. */ html { background: var(--bg); color: var(--text); } body:not(.branded) { background: var(--bg); color: var(--text); } .panel, .card, .tile, .table-shell, table { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28); } /* ---- Motion -------------------------------------------------------------- */ @keyframes sofiaFadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } } @keyframes sofiaShimmer { to { background-position: 200% 0; } } /* Panels/cards gently rise in on load. */ .panel, .card, .tile, .stat, .table-shell { animation: sofiaFadeUp .45s cubic-bezier(.2,.7,.3,1) both; } main > *:nth-child(2) { animation-delay:.04s; } main > *:nth-child(3) { animation-delay:.08s; } main > *:nth-child(4) { animation-delay:.12s; } /* Animated EOS-red accent line under every header. */ header { position: relative; } header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: linear-gradient(90deg,#ea0029,#ff4669,#8f0019,#ff4669,#ea0029); background-size:200% 100%; animation: sofiaShimmer 7s linear infinite; } /* Smooth, lively interactions. */ .btn { transition: transform .1s ease, filter .12s ease, box-shadow .12s ease; } .btn:hover { transform: translateY(-1px); } .card, .tile { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover, .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.45); } a, .chip, .tab, select, input, .pill { transition: color .12s, background .12s, border-color .12s; } tr.clickable:hover td, table tbody tr:hover td { transition: background .12s; } .spinner { border-color: var(--border); border-top-color: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; } } /* ---- Mobile / small screens (≤720px) ------------------------------------ */ @media (max-width: 720px) { * { box-sizing: border-box; } main { padding: 14px !important; } header { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; } header .brand img { height: 24px; } h1 { font-size: 20px; } .actions, .filters, .tabs { flex-wrap: wrap !important; } .filters input, .filters select { flex: 1 1 44%; min-width: 0; } .actions .btn, .filters .btn { flex: 0 0 auto; } .row { grid-template-columns: 1fr !important; } .grid { grid-template-columns: 1fr !important; } .info-grid { grid-template-columns: 1fr !important; } .stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .stat .v, .stat .value { font-size: 20px !important; } table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .modal > div, .modal-content, #trModal > div { max-width: 100% !important; margin: 12px auto !important; } }