/* ================================================================ app.css — ERM Portal v2.1 Theme class applied to element by theme.js. html.app-dark / html.app-light ================================================================ */ /* ── Dark theme variables ─────────────────────────────────── */ html.app-dark { --bs-secondary-color: var(--text-muted); /* fixes Bootstrap .text-muted in dark mode */ --bg-deep: #1a1a1a; --bg-main: #252525; --bg-panel: #2e2e2e; --bg-header: #363636; --bg-input: #1e1e1e; --bg-row-hover: #383838; --border: #484848; --border-light: #5a5a5a; --text-primary: #d8d8d8; --text-muted: #a0a0a0; --text-light: #eeeeee; --text-heading: #ffffff; --accent-blue: #3a9dd4; --accent-blue-h: #2a7daa; --accent-info: #5dd5e8; --slider-thumb: #3a9dd4; --filter-label: #99bbff; --table-head: #aaaaaa; --modal-bg: #2e2e2e; color-scheme: dark; } /* ── Light theme variables ─────────────────────────────────── */ html.app-light { --bg-deep: #eef0f3; --bg-main: #ffffff; --bg-panel: #ffffff; --bg-header: #f4f6f8; --bg-input: #ffffff; --bg-row-hover: #f0f4f8; --border: #d0d5dd; --border-light: #b8bec8; --text-primary: #1e2530; --text-muted: #4a5568; --text-light: #1e2530; --text-heading: #0d1117; --accent-blue: #0066cc; --accent-blue-h: #0052a3; --accent-info: #006699; --slider-thumb: #0066cc; --filter-label: #1a4a9a; --table-head: #4a5568; --modal-bg: #ffffff; color-scheme: light; } /* ── Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-deep); color: var(--text-primary); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 0.88rem; min-height: 100vh; } /* ── Navbar ────────────────────────────────────────────────── */ .app-navbar { position: sticky; top: 0; z-index: 1030; background-color: var(--bg-header) !important; border-bottom: 1px solid var(--border) !important; min-height: 44px; } .app-navbar .navbar-brand { color: var(--text-heading) !important; } .btn-ghost { background: transparent; border: none; color: var(--text-muted); padding: 0.2rem 0.55rem; border-radius: 4px; transition: color 0.15s, background 0.15s; font-size: 0.82rem; } .btn-ghost:hover, .btn-ghost.active { color: var(--text-light); background: rgba(128,128,128,0.14); } /* ── Status bar ──────────────────────────────────────────── */ .app-statusbar { background: var(--bg-main); border-bottom: 1px solid var(--border); height: 28px; color: var(--text-muted); font-size: 0.8rem; } /* ── Copyright footer ────────────────────────────────────── */ .app-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; padding: 6px 16px; font-size: 0.72rem; color: var(--text-muted); background: var(--bg-header); border-top: 1px solid var(--border); text-align: center; letter-spacing: 0.01em; } /* Prevent page content being obscured by the fixed footer on normal scrolling pages. */ body { padding-bottom: 34px; } /* Flex-layout app pages wrap content in a *-page div with height:100vh. The footer sits inside that flex chain, so override position to static — no changes to existing modules. */ [class$="-page"] .app-footer, [class*="-page "] .app-footer { position: static; } /* ── Login card ──────────────────────────────────────────── */ .login-card { width: 100%; max-width: 420px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } /* ── Form controls ───────────────────────────────────────── */ .app-input, .form-control.app-input { background-color: var(--bg-input); border-color: var(--border); color: var(--text-heading); border-radius: 5px; } .app-input::placeholder { color: var(--text-muted); } .app-input:focus { background-color: var(--bg-input); border-color: var(--accent-blue); color: var(--text-heading); box-shadow: 0 0 0 2px rgba(58,157,212,0.2); } .app-input-addon { background-color: var(--bg-header); border-color: var(--border); color: var(--text-muted); } /* ── Tables ──────────────────────────────────────────────── */ .app-table { --bs-table-bg: var(--bg-panel); --bs-table-color: var(--text-primary); --bs-table-hover-bg: var(--bg-row-hover); --bs-table-border-color: var(--border); color: var(--text-primary); font-size: 0.83rem; } .app-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--table-head); border-bottom: 1px solid var(--border) !important; } .app-table td { color: var(--text-primary); } .app-table tr.table-info td, .app-table tr.table-success td, .app-table tr.table-warning td, .app-table tr.table-danger td { color: #111; } html.app-dark .app-table tr.table-info { --bs-table-bg: #2a4a5a; --bs-table-accent-bg: #2a4a5a; --bs-table-border-color: #3a5f72; } html.app-dark .app-table tr.table-info td { color: #c8dde8; } .section-badge { background: rgba(58,157,212,0.15); color: var(--accent-info); border: 1px solid rgba(58,157,212,0.3); font-size: 0.72rem; font-weight: normal; } html.app-light .section-badge { background: rgba(0,102,204,0.1); color: #0052a3; border-color: rgba(0,102,204,0.25); } /* ── Dropdowns (light mode override) ─────────────────────── */ html.app-light .dropdown-menu { background: var(--bg-panel); border-color: var(--border); } html.app-light .dropdown-menu .dropdown-item { color: var(--text-primary); } html.app-light .dropdown-menu .dropdown-item:hover { background: var(--bg-row-hover); color: var(--text-heading); } /* ── Modals ──────────────────────────────────────────────── */ .modal-content { background: var(--modal-bg) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .modal-header, .modal-footer { border-color: var(--border) !important; } html.app-light .btn-close-white { filter: invert(0.8) grayscale(1); } /* ── Alerts ─────────────────────────────────────────────── */ html.app-light .alert-danger { background:#fff2f2; border-color:#f5c2c2; color:#7a1a1a; } html.app-light .alert-warning { background:#fffbf0; border-color:#f5dfa0; color:#6b4800; } html.app-light .alert-success { background:#f0fff4; border-color:#a0d8b0; color:#1a5a2a; } html.app-dark .alert-danger { background:#3a1515; border-color:#6a2020; color:#f0aaaa; } html.app-dark .alert-warning { background:#2e2000; border-color:#5a4000; color:#f0c850; } html.app-dark .alert-success { background:#0d2a18; border-color:#1a5030; color:#80d8a0; } /* ── Dashboard tiles ─────────────────────────────────────── */ .section-tile { background: var(--bg-panel); border: 1px solid var(--border); border-top: 3px solid var(--tile-accent, var(--accent-blue)); border-radius: 8px; padding: 1.2rem 1rem 1rem; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; position: relative; } .section-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); } .section-tile--coming { cursor: default; opacity: 0.58; } .section-tile--coming:hover { transform: none; box-shadow: none; } .tile-icon-wrap { font-size: 1.8rem; color: var(--tile-accent, var(--accent-info)); margin-bottom: 0.6rem; } .tile-name { font-weight: 600; color: var(--text-heading); margin-bottom: 0.35rem; font-size: 0.85rem; } .tile-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; flex-grow: 1; } .tile-badge { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.65rem; background: var(--bg-header); color: var(--text-muted); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; } /* ── Admin stat cards ────────────────────────────────────── */ .stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.1rem; text-align: center; } .stat-icon { font-size: 1.5rem; margin-bottom: 0.3rem; } .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-heading); line-height: 1; } .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; } .admin-nav-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 2rem 1rem; transition: background 0.15s, transform 0.15s; } .admin-nav-card:hover { background: var(--bg-row-hover); transform: translateY(-2px); } /* ── Utility ─────────────────────────────────────────────── */ code { color: var(--accent-info); font-size: 0.8em; } .text-heading { color: var(--text-heading) !important; } .overflow-y-auto { overflow-y: auto; } /* ── PK Regimen Synergy Profile panel ───────────────────────── */ .pk-synergy-panel { display: flex; flex-direction: column; gap: 6px; } .syn-domain-row { border: 0.5px solid var(--border); border-radius: 6px; overflow: hidden; } .syn-domain-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 9px; background: var(--bg-header); } .syn-domain-label { font-size: 0.72rem; font-weight: 600; color: var(--text-light); } .syn-badge { font-size: 0.60rem; padding: 2px 7px; border-radius: 20px; font-weight: 600; letter-spacing: 0.02em; } .badge-syn-positive { background: #d4edda; color: #1a5c2a; border: 0.5px solid #8fcf9e; } html.app-dark .badge-syn-positive { background: #14391e; color: #6fcf87; border-color: #276136; } .badge-syn-negative { background: #fde8e8; color: #8b1c1c; border: 0.5px solid #f0a0a0; } html.app-dark .badge-syn-negative { background: #3d1010; color: #f08080; border-color: #6b2020; } .badge-syn-mixed { background: #fff3cd; color: #6b4a00; border: 0.5px solid #f0c060; } html.app-dark .badge-syn-mixed { background: #3d2d00; color: #f0c060; border-color: #6b5000; } .syn-details { padding: 4px 9px 6px; } .syn-detail-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 2px 0; border-bottom: 0.5px solid var(--border-light); } .syn-detail-line:last-child { border-bottom: none; } .syn-pair { font-size: 0.70rem; font-weight: 500; color: var(--text-light); white-space: nowrap; } .syn-mag { font-size: 0.65rem; font-weight: 600; white-space: nowrap; } .syn-mag-positive { color: #2a8a3a; } .syn-mag-negative { color: #c04040; } html.app-dark .syn-mag-positive { color: #6fcf87; } html.app-dark .syn-mag-negative { color: #f08080; } .syn-radar-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; padding: 0 4px; } .syn-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.67rem; color: var(--text-muted); } .syn-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .syn-legend-avg { opacity: 0.70; } .syn-legend-dash { font-size: 0.85rem; letter-spacing: -1px; line-height: 1; } .syn-note { font-size: 0.65rem; color: var(--text-muted); line-height: 1.4; flex-basis: 100%; padding-left: 2px; } /* ── Theme toggle icon visibility ──────────────────────────── */ /* Show moon in dark mode, sun in light mode */ .theme-icon-dark { display: none; } .theme-icon-light { display: inline-block; } html.app-dark .theme-icon-dark { display: inline-block; } html.app-dark .theme-icon-light { display: none; }