/* ========================================================================== THEME SYSTEM The app supports light / dark / system themes. The chosen mode is resolved to an explicit data-theme ("light" | "dark") on by the inline init script in App.razor before first paint. Dark is the default (no attribute needed). Content surfaces AND the navigation rail (sidebar, top bar, mobile bottom nav) are themed via these variables and flip with the theme. A few always-dark islands intentionally keep a dark background in both themes: the VPS terminal on the Security page and the expandable detail panels. Their text is exempted from the light-mode ink override (see bottom of file). The key mechanism is the "ink channel": foreground colours are written as rgba(var(--ink), a). In dark mode --ink is white; in light mode it is a dark slate. This flips all borders, muted text and subtle surfaces at once. ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --app-bg: #010621; /* page background */ --surface: #020b3a; /* cards / hero panels */ --surface-2: #010f2e; /* secondary panels, sticky cells */ --border-color: rgba(255, 255, 255, 0.12); --panel-inset: rgba(0, 0, 0, 0.35); /* inset console / hint panels */ --sidebar-bg: #010621; /* navigation rail */ --sidebar-border: rgba(255, 255, 255, 0.08); --ink: 255, 255, 255; /* foreground channel (rgb) */ --ink-strong: #ffffff; /* solid high-contrast text */ --accent: #4facfe; --accent-rgb: 79, 172, 254; --success: #00ff88; --success-rgb: 0, 255, 136; --warning: #ffc107; --warning-rgb: 255, 193, 7; --danger: #ff5a5f; --danger-rgb: 255, 90, 95; --info: #0dcaf0; --info-rgb: 13, 202, 240; } :root[data-theme="light"] { color-scheme: light; --app-bg: #eef1f6; --surface: #ffffff; --surface-2: #f5f7fb; --border-color: rgba(15, 23, 42, 0.14); --panel-inset: rgba(15, 23, 42, 0.05); /* inset console / hint panels */ --sidebar-bg: #ffffff; /* navigation rail */ --sidebar-border: rgba(15, 23, 42, 0.10); --ink: 30, 41, 59; /* slate-800 for readable dark text on light */ --ink-strong: #1e293be6; /* ink at 90% — softer than the old #0f172a solid */ --accent: #1f7ae0; --accent-rgb: 31, 122, 224; --success: #12924f; --success-rgb: 18, 146, 79; --warning: #b8860b; --warning-rgb: 184, 134, 11; --danger: #d63b3f; --danger-rgb: 214, 59, 63; --info: #0b8fb0; --info-rgb: 11, 143, 176; } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--app-bg); color: rgba(var(--ink), 0.85); transition: background-color 0.2s ease, color 0.2s ease; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* --- REVENUE PAGE --- */ .text-net-sales { color: var(--success); } .text-tax { color: var(--warning); } .text-gross-sales { color: var(--accent); } .vps-hint { background: var(--panel-inset); border: 1px solid rgba(var(--ink), 0.08); line-height: 1.8; color: rgba(var(--ink), 0.8); } /* Thin themed scrollbar for every horizontally scrolling table container */ .table-responsive { scrollbar-width: thin; scrollbar-color: rgba(var(--ink), 0.12) transparent; } .table-responsive::-webkit-scrollbar { height: 4px; } .table-responsive::-webkit-scrollbar-track { background: transparent; } .table-responsive::-webkit-scrollbar-thumb { background: rgba(var(--ink), 0.12); border-radius: 10px; } .table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink), 0.25); } .revenue-table { border-collapse: collapse; color: rgba(var(--ink), 0.85); font-size: 0.875rem; } .revenue-table th { padding: 0.6rem 1.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--ink), 0.4); border-bottom: 1px solid rgba(var(--ink), 0.06); white-space: nowrap; } .revenue-table td { padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(var(--ink), 0.04); white-space: nowrap; } .revenue-table tbody tr:hover td { background: rgba(var(--ink), 0.03); } .revenue-table tbody tr:last-child td { border-bottom: 1px solid rgba(var(--ink), 0.08); } .totals-row td { background: rgba(var(--ink), 0.04); padding: 0.85rem 1.25rem; border-top: 1px solid rgba(var(--ink), 0.10); } .combined-row td { background: transparent; border-bottom: 1px solid rgba(var(--ink), 0.06); } .combined-row.expandable { cursor: pointer; } .combined-row.expandable:hover td { background: rgba(var(--ink), 0.04); } .site-row td { background: rgba(var(--ink), 0.025); border-bottom: 1px solid rgba(var(--ink), 0.03); font-size: 0.82rem; } .site-row:last-of-type td { border-bottom: 1px solid rgba(var(--ink), 0.08); } .month-cell { color: rgba(var(--ink), 0.9); } .expand-chevron { display: inline-block; margin-right: 6px; font-size: 1rem; line-height: 1; color: rgba(var(--ink), 0.35); transition: transform 0.2s ease; transform: rotate(0deg); } .expand-chevron.expanded { transform: rotate(90deg); } .month-input { background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.12); border-radius: 6px; color: rgba(var(--ink), 0.85); padding: 0.25rem 0.5rem; font-size: 0.8rem; outline: none; } .month-input:focus { border-color: rgba(13, 110, 253, 0.5); background: rgba(var(--ink), 0.09); } .pct-input { width: 5rem; background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.12); border-radius: 6px; color: var(--ink-strong); padding: 0.25rem 0.5rem; font-size: 0.8rem; text-align: center; outline: none; } .pct-input:focus { border-color: rgba(13, 110, 253, 0.5); background: rgba(var(--ink), 0.09); } @media (max-width: 575px) { .revenue-table th, .revenue-table td { padding: 0.5rem 0.6rem; font-size: 0.75rem; } .hero-card h3 { font-size: 1.1rem; } .hero-card p { font-size: 0.6rem; } } /* --- GLOBAL HERO DESIGN SYSTEM --- */ .hero-card { /* background: rgba(13, 110, 253, 0.06);*/ border-radius: 24px; position: relative; overflow: hidden; border: 1px solid rgba(var(--ink), 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; color: rgba(var(--ink), 0.7); background: var(--surface); } .hero-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } /* Light mode (desktop): Bootstrap's .shadow-lg is a heavy pure-black 0 16px 48px shadow that pools as muddy grey under hero cards on a light background, and the hover shadow (rgba(0,0,0,0.4)) is heavier still. Swap both for a softer, slate-tinted shadow. Dark mode keeps the black shadow (invisible on dark). */ @media (min-width: 641px) { :root[data-theme="light"] .hero-card.shadow-lg { box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.08) !important; } :root[data-theme="light"] .hero-card:hover { box-shadow: 0 20px 44px -12px rgba(15, 23, 42, 0.22), 0 6px 14px -6px rgba(15, 23, 42, 0.10); } } .hero-card h3 { font-size: 1.75rem; letter-spacing: -0.5px; } /* Background Glowing Orbs */ .orb { position: absolute; filter: blur(60px); border-radius: 50%; z-index: 0; opacity: 0.4; pointer-events: none; } .orb-1 { width: 250px; height: 250px; background: radial-gradient(circle, #0d6efd, transparent); top: -50px; right: -30px; } .orb-2 { width: 200px; height: 200px; background: radial-gradient(circle, #6610f2, transparent); bottom: -40px; left: -40px; } /* The purple orb is a dark-theme accent only; light mode shows just the blue orb-1. */ :root[data-theme="light"] .orb-2 { display: none; } /* Global Typography Helpers */ .fw-black { font-weight: 900 !important; } .ls-wide { letter-spacing: 1px; } /* Global Stats Badge (The little blue/red pills) */ .stats-badge { background: rgba(var(--ink), 0.05); padding: 4px 12px; border-radius: 50px; font-size: 0.7rem; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(var(--accent-rgb), 0.2); white-space: nowrap; } .pulse-dot { width: 7px; height: 7px; background: currentColor; border-radius: 50%; flex-shrink: 0; animation: simplePulse 2s infinite; } @keyframes simplePulse { 0% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 0 0 currentColor; } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 8px currentColor; } 100% { transform: scale(0.9); opacity: 0.6; box-shadow: 0 0 0 0 currentColor; } } .stats-badge-action { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .stats-badge-action:hover { background: rgba(var(--accent-rgb), 0.15); border-color: rgba(var(--accent-rgb), 0.5); } /* Segmented view switcher used by the combined cards (Products & Categories, Category Issues) */ .seg-control { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(var(--ink), 0.07); border: 1px solid rgba(var(--ink), 0.10); cursor: default; } .seg-option { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 8px; border: 1px solid transparent; font-size: 0.72rem; font-weight: 700; color: rgba(var(--ink), 0.55); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .seg-option:hover { color: rgba(var(--ink), 0.85); } .seg-option.active { background: rgba(var(--ink), 0.14); border-color: rgba(var(--ink), 0.18); color: var(--ink-strong); } .seg-count { font-size: 0.62rem; font-weight: 800; opacity: 0.65; } /* Shared in-table search bar (Catalog Inventory, category lists) */ .search-wrapper { padding: 12px 20px; background: rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(var(--ink), 0.05); } .search-container { position: relative; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(var(--ink), 0.3); font-size: 0.8rem; } .search-control { width: 100%; background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.1); border-radius: 8px; padding: 6px 12px 6px 35px; color: var(--ink-strong); font-size: 0.8rem; } /* Phones: all segments share one full-width row; icons are dropped and text is tightened so four segments still fit at 360px. */ @media (max-width: 767.98px) { .seg-control { width: 100%; flex-wrap: nowrap; } .seg-option { flex: 1 1 0; justify-content: center; padding: 3px 4px; gap: 4px; font-size: 0.68rem; } .seg-option > i { display: none; } .seg-count { font-size: 0.58rem; } } /* Shared counter text used in multiple hero/mini-cards */ .counter-text { font-weight: 900; color: var(--ink-strong); } /* Faint decorative "chip" watermark in the corner of an overview card. Each page passes a different icon (bi-cpu, bi-tags-fill, …). */ .hero-icon-bg { position: absolute; right: 5%; bottom: -10px; font-size: 10rem; color: rgba(var(--ink), 0.03); z-index: 0; pointer-events: none; } /* Overview-card metric: big coloured number (left) + small lowercase label (right), matching the Suppliers "9369 items" treatment. */ /* Markup order is value-then-label; column-reverse renders the label on top */ .metric { display: flex; flex-direction: column-reverse; align-items: flex-start; row-gap: 2px; text-decoration: none; } .metric-value { font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.1; margin: 0; } .metric-label { font-weight: 300; font-size: 0.8rem; text-transform: capitalize; opacity: 0.5; color: rgba(var(--ink), 0.9); } /* Revenue: on mobile the breakdown-table controls stack full width and the Export button spans the whole row (left to right). */ @media (max-width: 767.98px) { .revenue-table-controls { width: 100%; } /* Date selector spans the row: the two month inputs grow to fill. */ .revenue-table-controls .month-input { flex: 1 1 0; min-width: 0; } .revenue-table-controls .btn-export { width: 100%; justify-content: center; } } /* Shared entrance animation used by several components */ @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeIn 0.3s ease-in; } .hero-header-blue { background: rgba(13, 110, 253, 0.06); border-bottom: 1px solid rgba(var(--ink), 0.08); } .hero-sidebar-blue { background: rgb(13 110 253 / 18%); } .hero-badge-green, .hero-badge-yellow, .hero-badge-red, .hero-badge-blue { padding: 2px 8px; border-radius: 20px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; } .hero-badge-green { background: rgba(var(--success-rgb), 0.1); color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.2); } .hero-badge-yellow { background: rgba(var(--warning-rgb), 0.1); color: var(--warning); border: 1px solid rgba(var(--warning-rgb), 0.2); } .hero-badge-red { background: rgba(var(--danger-rgb), 0.12); color: var(--danger); border: 1px solid rgba(var(--danger-rgb), 0.2); } .badge-sm { padding: 2px 8px !important; font-size: 0.65rem !important; } .hero-badge-blue { background: rgba(var(--info-rgb), 0.1); color: var(--info); border: 1px solid rgba(var(--info-rgb), 0.2); } /* --- TRELLO BOARD PAGE --- */ .board-scroll { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; min-height: 60vh; } .board-scroll::-webkit-scrollbar { height: 6px; } .board-scroll::-webkit-scrollbar-track { background: transparent; } .board-scroll::-webkit-scrollbar-thumb { background: rgba(var(--ink),0.15); border-radius: 3px; } .board-column { flex: 0 0 280px; min-width: 280px; max-height: calc(100vh - 180px); display: flex; flex-direction: column; } .board-column-pair { flex: 0 0 280px; min-width: 280px; display: flex; flex-direction: column; gap: 1rem; max-height: calc(100vh - 180px); } .board-column-half { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .column-header { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(var(--ink),0.06); } .column-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--ink),0.12) transparent; } .trello-card { background: rgba(var(--ink),0.05); border: 1px solid rgba(var(--ink),0.07); border-radius: 8px; padding: 0.6rem 0.75rem; margin-top: 0.5rem; transition: background 0.15s; cursor: pointer; } .trello-card:hover { background: rgba(var(--ink),0.09); } .card-title { font-size: 0.85rem; font-weight: 600; color: rgba(var(--ink),0.9); line-height: 1.35; margin: 0; } /* --- SKELETON LOADING --- */ .skeleton-line { background: linear-gradient(90deg, rgba(var(--ink),0.05) 25%, rgba(var(--ink),0.13) 50%, rgba(var(--ink),0.05) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.6s infinite; border-radius: 6px; } .skeleton-label { height: 10px; width: 55%; } .skeleton-value { height: 26px; width: 45%; } .skeleton-row { height: 11px; width: 100%; } .skeleton-row-short{ height: 11px; width: 65%; } .skeleton-row-wide { height: 11px; width: 80%; } .skeleton-h6 { height: 10px; width: 45%; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .card-desc { font-size: 0.75rem; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-labels { display: flex; flex-wrap: wrap; gap: 4px; } .trello-label { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; } .card-due { margin-top: 0.4rem; font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; } .due-complete { background: rgba(var(--success-rgb),0.15); color: var(--success); } .due-overdue { background: rgba(220,53,69,0.2); color: var(--danger); } .due-upcoming { background: rgba(var(--warning-rgb),0.15); color: var(--warning); } /* Card modal */ .trello-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 1rem; } .trello-modal { position: relative; width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; padding: 1.5rem; animation: pageFadeIn 0.2s ease-out; scrollbar-width: thin; scrollbar-color: rgba(var(--ink),0.15) transparent; } .trello-modal::-webkit-scrollbar { width: 4px; } .trello-modal::-webkit-scrollbar-track { background: transparent; } .trello-modal::-webkit-scrollbar-thumb { background: rgba(var(--ink),0.15); border-radius: 2px; } .modal-desc { background: var(--panel-inset); border: 1px solid rgba(var(--ink), 0.06); border-radius: 8px; padding: 0.75rem 1rem; } /* Checklists */ .checklist-progress { display: flex; align-items: center; gap: 0.5rem; } .checklist-bar { flex: 1; height: 4px; background: rgba(var(--ink),0.1); border-radius: 2px; overflow: hidden; } .checklist-bar-fill { height: 100%; background: rgba(var(--ink),0.35); border-radius: 2px; transition: width 0.3s ease; } .checklist-bar-fill.complete { background: var(--success); } .checklist-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.8rem; color: rgba(var(--ink),0.7); border-bottom: 1px solid rgba(var(--ink),0.04); } .checklist-item.checked { color: rgba(var(--ink),0.35); text-decoration: line-through; } .check-box { flex-shrink: 0; width: 14px; height: 14px; border: 1px solid rgba(var(--ink),0.25); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; margin-top: 1px; color: var(--success); } .checklist-item.checked .check-box { background: rgba(var(--success-rgb),0.15); border-color: rgba(var(--success-rgb),0.4); } /* Trello label colours */ .trello-label-green { background: #519839; } .trello-label-yellow { background: #d9b51c; color: #1a1a2e; } .trello-label-orange { background: #d29034; } .trello-label-red { background: #b04632; } .trello-label-purple { background: #89609e; } .trello-label-blue { background: #0079bf; } .trello-label-sky { background: #00aecc; } .trello-label-lime { background: #4bbf6b; } .trello-label-pink { background: #e091c0; color: #1a1a2e; } .trello-label-black { background: #344563; } /* --- ICON TRANSITIONS --- */ .transition-icon { transition: transform 0.3s ease; } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(-180deg); } /* --- SUPPLIERS HUB --- */ /* The overview card (with its supplier switcher) is the first element in the content; give it the same top gap the selected-supplier view gets from its own .container.mt-4, so the hub ("All suppliers") and a selected supplier read with identical spacing on every viewport. */ .suppliers-content > .row:first-child { margin-top: 1.5rem; } .suppliers-content { padding-bottom: 3rem; } /* --- QUICK LINKS PAGE --- */ .quick-link-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: rgba(var(--ink), 0.75); text-decoration: none; transition: all 0.2s ease; margin: 0 4px 2px; } .quick-link-row:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); } .quick-link-icon { font-size: 1.1rem; flex-shrink: 0; width: 1.4rem; text-align: center; } .quick-link-arrow { font-size: 0.7rem; margin-left: auto; opacity: 0.4; flex-shrink: 0; } .quick-link-row:hover .quick-link-arrow { opacity: 1; } /* --- GLASS BUTTONS (shared across pages) --- */ .btn-compact-glass { background: rgba(var(--ink), 0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(var(--ink), 0.1); color: var(--ink-strong); padding: 8px 16px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 40px; text-decoration: none; } .btn-compact-glass:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.2); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); text-decoration: none; } .btn-compact-glass:disabled { opacity: 0.5; cursor: not-allowed; } .trello-label-default { background: rgba(var(--ink),0.2); } /* Supplier Mapping */ .job-log { background: var(--panel-inset); border: 1px solid rgba(var(--ink),0.08); border-radius: 8px; padding: 12px 16px; max-height: 400px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.78rem; line-height: 1.6; scrollbar-width: thin; scrollbar-color: rgba(var(--ink),0.12) transparent; } .job-log::-webkit-scrollbar { width: 4px; } .job-log::-webkit-scrollbar-track { background: transparent; } .job-log::-webkit-scrollbar-thumb { background: rgba(var(--ink),0.12); border-radius: 10px; } .job-log::-webkit-scrollbar-thumb:hover { background: rgba(var(--ink),0.25); } .job-log-wrap { position: relative; } .log-copy-btn { position: absolute; top: 8px; right: 12px; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--panel-inset); border: 1px solid rgba(var(--ink),0.12); border-radius: 6px; color: rgba(var(--ink),0.55); cursor: pointer; } .log-copy-btn:hover { color: rgba(var(--ink),0.9); border-color: rgba(var(--ink),0.25); } .log-line { color: rgba(var(--ink),0.75); white-space: pre-wrap; word-break: break-word; } .log-line:empty { min-height: 1em; } .job-row:hover { background: rgba(var(--ink),0.02); } /* --- LIGHT-MODE BOOTSTRAP UTILITY OVERRIDES -------------------------------- The markup uses Bootstrap's .text-white / .text-light utilities on page headings, hero cards and other content surfaces. Those surfaces are light in light mode, so the text must become ink. Always-dark islands are exempted below so their light text survives. -------------------------------------------------------------------------- */ :root[data-theme="light"] .text-white { color: rgba(var(--ink), 0.9) !important; } :root[data-theme="light"] .text-white-50 { color: rgba(var(--ink), 0.55) !important; } :root[data-theme="light"] .text-light { color: rgba(var(--ink), 0.75) !important; } /* Always-dark islands: the VPS terminal (Security page) keeps a solid black background in both themes, so its text must stay light — otherwise the ink override above renders it dark-on-black. The .icon-circle inside the (themed) login card sits on a blue gradient and likewise keeps white text. */ :root[data-theme="light"] .vps-bash, :root[data-theme="light"] .vps-bash .text-white, :root[data-theme="light"] .vps-bash .text-light, :root[data-theme="light"] .login-wrapper .text-white, :root[data-theme="light"] .login-wrapper .text-white-50 { color: #fff !important; } /* Expandable detail panels use Bootstrap's translucent `bg-black bg-opacity-40`, which crushes to near-black in dark mode and muddy grey in light mode. Re-theme them to the secondary surface token in both themes (a distinct dark blue in dark, a subtle grey in light) so the ink text keeps readable contrast. */ :root .bg-black.bg-opacity-40 { background-color: var(--surface-2) !important; } /* --- APPEARANCE CONTROL (Profile page) ------------------------------------ Segmented System / Light / Dark selector. The active segment is highlighted via the data-theme-mode attribute set on by the init script. -------------------------------------------------------------------------- */ .appearance-control { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.1); } .appearance-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; background: transparent; color: rgba(var(--ink), 0.7); border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .appearance-opt:hover { color: rgba(var(--ink), 0.95); background: rgba(var(--ink), 0.06); } .appearance-opt .bi { font-size: 1rem; line-height: 1; } :root[data-theme-mode="system"] .appearance-opt[data-mode="system"], :root[data-theme-mode="light"] .appearance-opt[data-mode="light"], :root[data-theme-mode="dark"] .appearance-opt[data-mode="dark"] { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); } /* --- SHARED TABLE / LIST STYLES (centralised from component styles) ------- .transition-icon / .rotate-90 / .rotate-180 / .pulse-dot already live above. ------------------------------------------------------------------------- */ .config-row { border-bottom: 1px solid rgba(var(--ink), 0.05); transition: background 0.2s ease; } .row-active { background: rgba(13, 110, 253, 0.08); box-shadow: inset 4px 0 0 #0d6efd; } .extra-small { font-size: 0.65rem; } .extra-tiny { font-size: 0.6rem; } .ls-sm { letter-spacing: 0.5px; }