/* ================================================================ ris-prefs.css — AuruMed brand theme variables for RIS web app Підключати ПЕРШИМ у усіх сторінок Базується на C:\Users\d.saltanov\OneDrive - S.Future\VS\RIS\Brand\BRAND.md ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ── Світла тема (за замовчуванням) — AuruMed brand ────────────── */ :root { /* Backgrounds */ --ris-bg: #FAFAF7; /* warm white (au-bg-primary) */ --ris-surface: #FFFFFF; --ris-surface-2: #FAFAF7; --ris-surface-3: #F1F0EB; --ris-border: #E5E5E0; /* au-border */ --ris-border-2: #D1D5DB; /* au-border-strong */ /* Text */ --ris-text: #1B2A4E; /* au-deep-blue */ --ris-text-2: #6B7280; /* au-text-secondary */ --ris-muted: #9CA3AF; /* au-text-muted */ /* Brand colors */ --ris-blue: #1B2A4E; /* au-deep-blue (anchor) */ --ris-blue-2: #243866; /* deep-blue softer */ --ris-accent: #D4A04C; /* au-gold (CTA, focus, accents) */ --ris-accent-2: #C28F3D; /* au-gold-hover */ --ris-accent-dim: rgba(212,160,76,.15); /* au-focus ring */ /* Sidebar — deep blue with gold accents */ --ris-sidebar-bg: #1B2A4E; --ris-sidebar-border: rgba(255,255,255,.10); --ris-sidebar-text: rgba(255,255,255,.72); --ris-sidebar-active: rgba(212,160,76,.18); /* gold-tinted hover */ /* Shadows (au-shadow / au-shadow-lg) */ --ris-shadow: 0 2px 8px rgba(27,42,78,.08); --ris-shadow-lg: 0 8px 24px rgba(27,42,78,.12); /* Inputs */ --ris-input-bg: #FAFAF7; /* States */ --ris-danger: #C04848; /* au-error */ --ris-success: #3B7A52; /* au-success */ --ris-warning: #D97A3F; /* au-warning */ /* Status badges */ --ris-badge-new-bg: #F1F0EB; --ris-badge-new-fg: #6B7280; --ris-badge-draft-bg: #FAEEDD; --ris-badge-draft-fg: #8A4515; --ris-badge-done-bg: #DEEEDF; --ris-badge-done-fg: #1F4E2E; --ris-badge-issued-bg: #E8E3D2; --ris-badge-issued-fg: #8A6520; --ris-tr: background-color .2s, color .2s, border-color .2s, box-shadow .2s; } /* ── Темна тема — AuruMed dark variant ───────────────────────────── */ [data-theme="dark"] { /* Backgrounds (au-night) */ --ris-bg: #0F1A33; --ris-surface: #162647; --ris-surface-2: #1A2D52; --ris-surface-3: #1F345C; --ris-border: #1F2D4A; --ris-border-2: #2A3D63; /* Text */ --ris-text: #FAFAF7; --ris-text-2: #9CA3AF; --ris-muted: #6B7280; /* Brand colors — gold becomes primary on dark */ --ris-blue: #D4A04C; /* gold = primary anchor on dark */ --ris-blue-2: #E5B968; --ris-accent: #D4A04C; /* gold залишається акцентом */ --ris-accent-2: #E5B968; --ris-accent-dim: rgba(212,160,76,.20); /* Sidebar — даркер за основний bg для контрасту */ --ris-sidebar-bg: #0A1428; --ris-sidebar-border: rgba(255,255,255,.08); --ris-sidebar-text: rgba(250,250,247,.65); --ris-sidebar-active: rgba(212,160,76,.22); /* Shadows */ --ris-shadow: 0 2px 8px rgba(0,0,0,.5); --ris-shadow-lg: 0 8px 24px rgba(0,0,0,.7); /* Inputs */ --ris-input-bg: #1A2D52; /* States — slightly brighter for dark contrast */ --ris-danger: #E26B6B; --ris-success: #5DA37A; --ris-warning: #E89B6E; /* Status badges (warm tones on dark blue) */ --ris-badge-new-bg: #1F2D4A; --ris-badge-new-fg: #9CA3AF; --ris-badge-draft-bg: #3D2410; --ris-badge-draft-fg: #E89B6E; --ris-badge-done-bg: #163322; --ris-badge-done-fg: #5DA37A; --ris-badge-issued-bg: #2D2410; --ris-badge-issued-fg: #D4A04C; } /* ── Базові стилі ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--ris-bg); color: var(--ris-text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--ris-tr); } ::selection { background-color: var(--ris-accent); color: var(--ris-blue); } /* ── Layout ──────────────────────────────────────────────────────── */ .ris-layout { display: flex; min-height: 100vh; } .ris-sidebar { width: 224px; background: var(--ris-sidebar-bg); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; box-shadow: 4px 0 20px rgba(0,0,0,.15); transition: background .2s; } .ris-main { margin-left: 224px; flex: 1; padding: 28px 32px; min-width: 0; } /* ── Sidebar parts ───────────────────────────────────────────────── */ .ris-logo { padding: 16px 12px; border-bottom: 1px solid var(--ris-sidebar-border); } .ris-logo-brand { display: block; } .ris-logo-brand:hover .ris-logo-img { opacity: .85; } .ris-logo-sub { font-size: .68rem; color: rgba(255,255,255,.45); margin-top: 3px; line-height: 1.3; letter-spacing: .04em; } .ris-logo-img { display: block; width: 100%; max-width: 200px; height: auto; transition: opacity .15s; } .ris-clinic { padding: 10px 14px; border-bottom: 1px solid var(--ris-sidebar-border); text-align: center; } .ris-clinic-label { font-size: .62rem; font-weight: 500; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; } .ris-clinic-name { font-size: .78rem; font-weight: 700; color: var(--ris-accent); text-transform: uppercase; letter-spacing: .5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ris-userbox { padding: 14px 20px; border-bottom: 1px solid var(--ris-sidebar-border); } .ris-username { font-size: .82rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ris-rolebadge { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 20px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(255,255,255,.13); color: rgba(255,255,255,.85); } .ris-nav { flex: 1; padding: 10px 0; overflow-y: auto; } .ris-navitem { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--ris-sidebar-text); text-decoration: none; font-size: .855rem; border-left: 3px solid transparent; transition: all .15s; cursor: pointer; background: none; border-right: none; border-top: none; border-bottom: none; width: 100%; text-align: left; font-family: inherit; } .ris-navitem svg { width: 17px; height: 17px; flex-shrink: 0; } .ris-navitem:hover, .ris-navitem.active { background: var(--ris-sidebar-active); color: #fff; border-left-color: var(--ris-accent); } .ris-nav-sep { height: 1px; background: var(--ris-sidebar-border); margin: 8px 16px; } /* ── App footer (developer + version) ────────────────────────────── */ .ris-app-footer { padding: 10px 16px 8px; border-top: 1px solid var(--ris-sidebar-border); text-align: center; } .ris-app-footer-dev { display: block; font-size: .68rem; color: rgba(255,255,255,.5); letter-spacing: .02em; } .ris-app-footer-ver { display: block; font-size: .65rem; color: var(--ris-accent); font-weight: 700; margin-top: 2px; letter-spacing: .04em; } /* ── Prefs bar (theme + lang switchers) ──────────────────────────── */ .ris-prefsbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--ris-sidebar-border); } .ris-prefsbtn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-size: .7rem; font-weight: 700; letter-spacing: .4px; cursor: pointer; transition: all .16s; font-family: inherit; white-space: nowrap; } .ris-prefsbtn svg { width: 12px; height: 12px; flex-shrink: 0; } .ris-prefsbtn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); } .ris-prefsbtn.active { background: var(--ris-accent); border-color: var(--ris-accent); color: var(--ris-blue); } /* Login page — prefs bar fixed top-right */ .ris-prefsbar-float { position: fixed; top: 14px; right: 16px; z-index: 300; display: flex; gap: 5px; align-items: center; } .ris-prefsbar-float .ris-prefsbtn { background: var(--ris-surface); border-color: var(--ris-border); color: var(--ris-text-2); } .ris-prefsbar-float .ris-prefsbtn:hover { background: var(--ris-surface-2); color: var(--ris-text); } .ris-prefsbar-float .ris-prefsbtn.active { background: var(--ris-accent); border-color: var(--ris-accent); color: var(--ris-blue); } .ris-logout { display: block; width: 100%; padding: 9px 14px; margin: 0 14px 14px; width: calc(100% - 28px); background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.13); border-radius: 8px; font-size: .8rem; cursor: pointer; text-align: center; text-decoration: none; transition: all .15s; font-family: inherit; } .ris-logout:hover { background: rgba(192,72,72,.28); color: #fff; } /* ── Cards & surfaces ────────────────────────────────────────────── */ .ris-card { background: var(--ris-surface); border: 1px solid var(--ris-border); border-radius: 12px; box-shadow: var(--ris-shadow); padding: 20px 22px; transition: var(--ris-tr); } .ris-card-title { font-size: .72rem; color: var(--ris-muted); text-transform: uppercase; letter-spacing: .227em; font-weight: 500; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ris-border); } /* ── Stats row ────────────────────────────────────────────────────── */ .ris-stats { display: flex; gap: 14px; margin-bottom: 22px; } .ris-stat { flex: 1; min-width: 0; } .ris-stat .val { font-size: 1.9rem; font-weight: 600; color: var(--ris-blue); line-height: 1; letter-spacing: -.025em; } .ris-stat .lbl { font-size: .7rem; color: var(--ris-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .227em; font-weight: 500; } /* ── Page header ─────────────────────────────────────────────────── */ .ris-pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .ris-pagehead h1 { font-size: 1.5rem; color: var(--ris-blue); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; } /* ── Top bar (report/secretary pages) ────────────────────────────── */ .ris-topbar { background: var(--ris-sidebar-bg); color: #fff; padding: 11px 26px; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: background .2s; } .ris-topbar a { color: rgba(255,255,255,.65); text-decoration: none; font-size: .84rem; } .ris-topbar a:hover { color: #fff; } .ris-topbar .sep { color: rgba(255,255,255,.25); } .ris-topbar .heading { font-size: .84rem; color: rgba(255,255,255,.55); } .ris-topbar-brand { display: inline-flex; align-items: center; gap: 8px; } .ris-topbar-brand img { height: 28px; max-width: 140px; display: block; } /* ── Badges ──────────────────────────────────────────────────────── */ .ris-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 4px; font-size: .7rem; font-weight: 600; white-space: nowrap; letter-spacing: .04em; } .ris-badge-new { background: var(--ris-badge-new-bg); color: var(--ris-badge-new-fg); } .ris-badge-draft { background: var(--ris-badge-draft-bg); color: var(--ris-badge-draft-fg); } .ris-badge-done { background: var(--ris-badge-done-bg); color: var(--ris-badge-done-fg); } .ris-badge-issued { background: var(--ris-badge-issued-bg); color: var(--ris-badge-issued-fg); } /* ── Buttons ─────────────────────────────────────────────────────── */ .ris-btn { display: inline-flex; align-items: center; gap: 5px; padding: 9px 18px; border-radius: 8px; border: none; font-size: .855rem; font-weight: 600; cursor: pointer; transition: all .15s; text-decoration: none; font-family: inherit; white-space: nowrap; } .ris-btn svg { width: 15px; height: 15px; flex-shrink: 0; } /* Primary CTA — gold per AuruMed brand */ .ris-btn-primary { background: var(--ris-accent); color: var(--ris-blue); } .ris-btn-primary:hover { background: var(--ris-accent-2); } [data-theme="dark"] .ris-btn-primary { color: #0F1A33; } .ris-btn-success { background: var(--ris-success); color: #fff; } .ris-btn-success:hover { background: #2F6342; } .ris-btn-orange { background: var(--ris-warning); color: #fff; } .ris-btn-orange:hover { background: #BF6630; } .ris-btn-outline { background: var(--ris-surface); color: var(--ris-text-2); border: 1.5px solid var(--ris-border-2); } .ris-btn-outline:hover { border-color: var(--ris-blue); color: var(--ris-text); } .ris-btn-xs { padding: 4px 10px; font-size: .74rem; border-radius: 6px; } .ris-btn-sm { padding: 6px 13px; font-size: .8rem; border-radius: 7px; } .ris-btn-act-blue { background: var(--ris-badge-issued-bg); color: var(--ris-badge-issued-fg); } .ris-btn-act-blue:hover { filter: brightness(.95); } .ris-btn-act-green { background: var(--ris-badge-done-bg); color: var(--ris-badge-done-fg); } .ris-btn-act-green:hover { filter: brightness(.95); } .ris-btn-act-purple { background: #ede9fe; color: #5b21b6; } .ris-btn-act-purple:hover { background: #ddd6fe; } [data-theme="dark"] .ris-btn-act-purple { background: #2d1b69; color: #c4b5fd; } .ris-btn-act-slate { background: var(--ris-surface-2); color: var(--ris-text-2); border: 1px solid var(--ris-border); } .ris-btn-act-red { background: var(--ris-badge-new-bg); color: var(--ris-danger); } /* ── Inputs ──────────────────────────────────────────────────────── */ .ris-label { display: block; font-size: .72rem; color: var(--ris-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .227em; margin-bottom: 5px; } .ris-input, .ris-select, .ris-textarea { width: 100%; padding: 11px 14px; background: var(--ris-input-bg); color: var(--ris-text); border: 1.5px solid var(--ris-border-2); border-radius: 8px; font-size: .9rem; font-family: inherit; outline: none; transition: var(--ris-tr); } .ris-input:focus, .ris-select:focus, .ris-textarea:focus { border-color: var(--ris-accent); box-shadow: 0 0 0 3px var(--ris-accent-dim); background: var(--ris-surface); } .ris-input[readonly] { background: var(--ris-surface-2); cursor: default; } .ris-textarea { min-height: 320px; line-height: 1.75; resize: vertical; } .ris-fgroup { margin-bottom: 16px; } /* ── Tables ──────────────────────────────────────────────────────── */ .ris-table-wrap { overflow-x: auto; } table.ris-table { width: 100%; border-collapse: collapse; } table.ris-table thead th { text-align: left; font-size: .72rem; color: var(--ris-text-2); text-transform: uppercase; letter-spacing: .227em; font-weight: 500; padding: 11px 12px; border-bottom: 2px solid var(--ris-border); white-space: nowrap; } table.ris-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--ris-surface-3); font-size: .86rem; color: var(--ris-text); vertical-align: middle; } table.ris-table tbody tr:hover td { background: var(--ris-surface-2); } /* DataTables overrides */ #studyTable_wrapper .dataTables_filter input, #studyTable_wrapper .dataTables_length select { background: var(--ris-input-bg) !important; border: 1.5px solid var(--ris-border-2) !important; color: var(--ris-text) !important; border-radius: 8px !important; padding: 5px 10px !important; } #studyTable_wrapper .dataTables_info, #studyTable_wrapper .dataTables_paginate { color: var(--ris-text-2) !important; } .dataTables_paginate .paginate_button.current { background: var(--ris-accent) !important; border-color: var(--ris-accent) !important; color: var(--ris-blue) !important; border-radius: 6px !important; font-weight: 600 !important; } .dataTables_paginate .paginate_button:hover { background: var(--ris-surface-2) !important; border-color: var(--ris-border-2) !important; color: var(--ris-text) !important; } table.dataTable { border-collapse: collapse !important; } table.dataTable tbody tr:hover td { background: var(--ris-surface-2) !important; } table.dataTable thead th { border-bottom: 2px solid var(--ris-border) !important; color: var(--ris-text-2) !important; } table.dataTable tbody td { border-bottom: 1px solid var(--ris-surface-3) !important; color: var(--ris-text) !important; } /* ── Alerts ──────────────────────────────────────────────────────── */ .ris-alert { padding: 10px 15px; border-radius: 8px; font-size: .855rem; margin-bottom: 14px; } .ris-alert-success { background: var(--ris-badge-done-bg); color: var(--ris-badge-done-fg); border: 1px solid var(--ris-success); } .ris-alert-warning { background: var(--ris-badge-draft-bg); color: var(--ris-badge-draft-fg); border: 1px solid var(--ris-warning); } .ris-alert-danger { background: #F4D9D9; color: #7A1F1F; border: 1px solid #E5B5B5; } [data-theme="dark"] .ris-alert-danger { background: #3D1010; color: #E26B6B; border-color: #6B2020; } /* ── Meta grid (patient info) ────────────────────────────────────── */ .ris-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .ris-meta-item label { font-size: .67rem; color: var(--ris-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .227em; display: block; margin-bottom: 3px; } .ris-meta-item span { font-size: .88rem; color: var(--ris-text); font-weight: 500; } /* ── Info box ────────────────────────────────────────────────────── */ .ris-infobox { background: var(--ris-surface-2); border: 1px solid var(--ris-border); border-radius: 9px; padding: 14px 16px; transition: var(--ris-tr); } .ris-infobox .ris-label { margin-bottom: 6px; } .ris-linkurl { font-size: .78rem; font-family: 'Courier New', monospace; color: var(--ris-accent); background: var(--ris-surface); border: 1px solid var(--ris-border); border-radius: 6px; padding: 7px 10px; word-break: break-all; display: block; } /* ── Report text area ────────────────────────────────────────────── */ .ris-report-box { background: var(--ris-surface-2); border: 1px solid var(--ris-border); border-radius: 9px; padding: 16px; min-height: 100px; font-size: .9rem; line-height: 1.75; white-space: pre-wrap; color: var(--ris-text); transition: var(--ris-tr); } /* ── Viewer link button ──────────────────────────────────────────── */ .ris-viewer-link { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; background: var(--ris-badge-issued-bg); border: 1px solid var(--ris-accent); border-radius: 9px; color: var(--ris-badge-issued-fg); text-decoration: none; font-size: .84rem; font-weight: 600; transition: all .15s; } .ris-viewer-link:hover { filter: brightness(.92); } .ris-viewer-link svg { width: 15px; height: 15px; } /* ── Divider ─────────────────────────────────────────────────────── */ .ris-divider { height: 1px; background: var(--ris-border); margin: 18px 0; } /* ── Two-column layout for secretary/report pages ────────────────── */ .ris-2col { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } .ris-2col-left { display: flex; flex-direction: column; gap: 18px; } .ris-2col-right { display: flex; flex-direction: column; gap: 16px; } /* ── Form rows ───────────────────────────────────────────────────── */ .ris-formrow-5 { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.4fr auto; gap: 10px; align-items: end; } /* ── Login page ──────────────────────────────────────────────────── */ .ris-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ris-bg); transition: background .2s; } .ris-login-wrap::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 20% 50%, rgba(27,42,78,.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(212,160,76,.05) 0%, transparent 55%); } .ris-login-inner { position: relative; z-index: 1; width: 100%; max-width: 400px; } .ris-login-logo { text-align: center; margin-bottom: 28px; } .ris-login-logo img { display: block; width: 280px; max-width: 100%; height: auto; margin: 0 auto 10px; } .ris-login-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; background: var(--ris-blue); border-radius: 12px; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(27,42,78,.25); } .ris-login-icon svg { width: 32px; height: 32px; fill: var(--ris-accent); } .ris-login-brand { font-size: 1.5rem; color: var(--ris-blue); font-weight: 600; letter-spacing: -.025em; } .ris-login-sub { font-size: .8rem; color: var(--ris-muted); margin-top: 4px; } .ris-login-card { background: var(--ris-surface); border: 1px solid var(--ris-border); border-radius: 16px; padding: 34px 30px; box-shadow: var(--ris-shadow-lg); transition: var(--ris-tr); } .ris-login-card h2 { font-size: 1.05rem; color: var(--ris-text); margin-bottom: 22px; font-weight: 600; } .ris-login-btn { width: 100%; padding: 12px; margin-top: 6px; background: var(--ris-accent); color: var(--ris-blue); border: none; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s; letter-spacing: .02em; font-family: inherit; } .ris-login-btn:hover { background: var(--ris-accent-2); } [data-theme="dark"] .ris-login-btn { color: #0F1A33; } /* ── Footer note ─────────────────────────────────────────────────── */ .ris-footnote { text-align: center; margin-top: 18px; font-size: .72rem; color: var(--ris-muted); } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 960px) { .ris-sidebar { display: none; } .ris-main { margin-left: 0; padding: 16px; } .ris-2col { grid-template-columns: 1fr; } .ris-formrow-5 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .ris-stats { flex-wrap: wrap; } .ris-stat { min-width: 140px; } }