/* ===================================================================== BRAHM RX — theme system Ports brahm-rx.html CSS into a themeable shell: Same component classes as the source HTML so the funnel UI is 1:1. Free / open: layered on Bootstrap 5 (MIT). No build step. ===================================================================== */ /* ---------- Theme tokens ---------- */ :root{ /* neutrals (light) */ --bg:#eef1f4; --card:#ffffff; --panel:#ffffff; --txt:#1f2937; --mut:#64748b; --line:#dde3ea; --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --shadow-lg:0 6px 18px rgba(16,24,40,.13), 0 2px 6px rgba(16,24,40,.08); --ripple:rgba(0,0,0,.18); --radius:16px; /* accent (default = saffron) */ --brand:#0F2E33; --brand2:#16434a; --gold:#9A6A18; --gold2:#C9952F; --cool:#2F6E5E; --accent-on:#1a1205; /* text colour on top of --gold */ --header-txt:#ffffff; } [data-theme="dark"]{ --bg:#0a1013; --card:#16222a; --panel:#1b2932; --txt:#eaf1f4; --mut:#9fb2bb; --line:#2c3e48; --shadow:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 8px 24px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.5); --ripple:rgba(255,255,255,.22); } /* ---- 6 accent palettes (apply in both themes) ---- */ [data-accent="saffron"]{ --brand:#0F2E33; --brand2:#16434a; --gold:#9A6A18; --gold2:#C9952F; --cool:#2F6E5E; --accent-on:#1a1205; } [data-accent="blue"] { --brand:#0b2a4a; --brand2:#123a63; --gold:#1d6fb8; --gold2:#3b9ae1; --cool:#2f5e6e; --accent-on:#ffffff; } [data-accent="green"] { --brand:#143821; --brand2:#1c4d2e; --gold:#2f7d32; --gold2:#4caf50; --cool:#2f6e5e; --accent-on:#ffffff; } [data-accent="teal"] { --brand:#0f3338; --brand2:#16474d; --gold:#0d9488; --gold2:#2dd4bf; --cool:#3a7e8c; --accent-on:#04201d; } [data-accent="violet"] { --brand:#2a1f47; --brand2:#3a2c63; --gold:#6d28d9; --gold2:#a78bfa; --cool:#5e4b8c; --accent-on:#ffffff; } [data-accent="crimson"]{ --brand:#3a1220; --brand2:#54192e; --gold:#b8163a; --gold2:#e23b5d; --cool:#8c4b5e; --accent-on:#ffffff; } /* dark theme: brighten accent text so it reads on dark cards */ [data-theme="dark"][data-accent="saffron"]{ --gold:#d8a93f; } [data-theme="dark"][data-accent="blue"] { --gold:#5aa9ec; } [data-theme="dark"][data-accent="green"] { --gold:#5cc55f; } [data-theme="dark"][data-accent="teal"] { --gold:#2dd4bf; } [data-theme="dark"][data-accent="violet"] { --gold:#b79bff; } [data-theme="dark"][data-accent="crimson"]{ --gold:#f06a85; } /* ---------- Base ---------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; transition:background .2s,color .2s; overscroll-behavior-y:none; overflow-x:hidden; } a{color:var(--gold)} .muted,.text-muted{color:var(--mut)!important} h1,h2,h3{color:var(--txt)} h2{font-size:18px;margin:6px 0 12px;font-weight:700} /* ---------- App shell / header ---------- */ .app-header{ position:sticky;top:0;z-index:1020;background:var(--brand);color:var(--header-txt); padding:10px 14px;display:flex;align-items:center;gap:10px; padding-top:calc(10px + env(safe-area-inset-top)); } .app-header .logo{ width:36px;height:36px;border-radius:10px;background:var(--gold2);color:var(--brand); display:grid;place-items:center;font-weight:900;font-size:18px;flex:0 0 auto; } .app-header h1{font-size:15px;margin:0;font-weight:800;letter-spacing:.2px;color:#fff} .brand-logo-wrap{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:4px 9px;height:42px;flex:0 0 auto;box-shadow:var(--shadow)} .brand-logo{height:32px;width:auto;display:block;max-width:170px;object-fit:contain} .auth-logo-img{max-height:72px;max-width:220px;width:auto;margin:0 auto 8px;display:block} .app-header .sub{font-size:10px;opacity:.8;margin-top:-2px} .app-header .spacer{margin-left:auto} .hbtn{ background:#ffffff22;border:0;color:#fff;min-width:38px;height:38px;border-radius:10px; font-size:16px;cursor:pointer;display:inline-grid;place-items:center;padding:0 8px; } .hbtn:hover{background:#ffffff33} .hbtn.langsel{appearance:auto;-webkit-appearance:menulist;font-size:13px;font-weight:600} .hbtn.langsel option{color:#111;background:#fff} .wrap{max-width:1000px;margin:0 auto;padding:16px;padding-bottom:calc(28px + env(safe-area-inset-bottom))} /* ---------- Buttons (bootstrap-friendly) ---------- */ .btn-brand{background:var(--brand);color:#fff;border:1px solid var(--brand)} .btn-brand:hover{filter:brightness(1.08);color:#fff} .btn-gold{background:var(--gold);color:var(--accent-on);border:1px solid var(--gold)} .btn-gold:hover{filter:brightness(1.05);color:var(--accent-on)} .btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--gold2)} .btn{border-radius:11px} /* ---------- Cards / generic surface ---------- */ .surface{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} /* =================================================================== PORTED COMPONENTS (1:1 with brahm-rx.html) — funnel screens =================================================================== */ .grid{display:block} .sec-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin:20px 0 11px;padding-bottom:6px;border-bottom:2px solid var(--gold2);color:var(--gold)} .sec-h:first-child{margin-top:4px} .sec-ic{font-size:18px} .sec-ct{margin-left:auto;font-size:11px;font-weight:700;background:var(--gold2);color:var(--brand);padding:2px 9px;border-radius:20px} .top-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;margin:8px auto 0} .toptile{padding:34px 12px} .toptile .ic{font-size:48px} .toptile .nm{font-size:17px;margin-top:12px} .toptile .cnt{background:transparent;color:var(--mut);font-weight:600;font-size:11px;margin-top:6px;display:block} .dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .dis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px} .dbox.dept{padding:18px 8px} .dbox.dept .cnt{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;background:var(--gold2);color:var(--brand);padding:2px 9px;border-radius:20px} .secback{display:inline-block;background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:6px} .secback:hover{border-color:var(--gold2)} .dbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center;cursor:pointer;transition:.15s;box-shadow:var(--shadow)} .dbox:hover{border-color:var(--gold2);transform:translateY(-2px)} .dbox:active{transform:scale(.98)} .dbox .ic{font-size:30px;line-height:1} .dbox .nm{font-size:11.5px;margin-top:8px;font-weight:600;line-height:1.2} /* funnel */ .back{color:var(--gold);font-size:13px;cursor:pointer;display:inline-block;margin-bottom:10px;background:none;border:0;padding:0} .bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:4px 0 12px} .bar > i{display:block;height:100%;background:var(--gold2);width:0;transition:.3s} .leaders{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;min-height:22px} .chip{font-size:11px;background:color-mix(in srgb,var(--cool) 14%,transparent);color:var(--cool);border:1px solid color-mix(in srgb,var(--cool) 35%,transparent);border-radius:999px;padding:3px 9px} .card{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)} .sectag{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);font-weight:800;margin-bottom:6px} .q{font-size:18px;font-weight:600;line-height:1.35;color:var(--txt)} .qback{display:inline-block;background:transparent;border:1px solid var(--line);color:var(--txt);opacity:.9;border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;margin-bottom:10px} .qback:hover{border-color:var(--gold2)} .expbtn{margin:10px 0 0;background:transparent;border:1px solid var(--line);color:var(--gold);border-radius:10px;padding:6px 12px;font-size:13px;cursor:pointer} .expbtn.on{background:var(--gold);color:var(--accent-on);border-color:var(--gold)} .explain{margin:12px 0 2px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold) 7%,transparent);font-size:13.5px;line-height:1.5} .explain h4{margin:0 0 6px;font-size:13px;color:var(--gold);letter-spacing:.04em;text-transform:uppercase} .explain .row{margin:5px 0} .explain .lab{color:var(--gold);font-weight:600} .explain .rem{margin:4px 0;padding-left:10px;border-left:2px solid var(--line)} .opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .opts button{flex:1;min-width:90px;padding:13px;border-radius:11px;font-size:15px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--txt);font-weight:600} .opts button:active{transform:scale(.98)} .opts .yes{background:var(--brand);color:#fff;border-color:var(--brand)} .opts .skip{background:transparent} /* result */ .res{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow)} .res.top{border-color:var(--gold2);border-width:2px} .res .rk{display:flex;justify-content:space-between;align-items:baseline} .res .nm{font-weight:700} .res .sc{color:var(--cool);font-size:13px} .res .ess{font-size:12px;color:var(--mut);margin-top:4px;font-style:italic} .res .mt{font-size:11px;color:var(--gold);margin-top:6px} .note{font-size:9.5px;color:var(--mut);margin-top:14px;text-align:left;line-height:1.4;opacity:.85} .redflag{background:rgba(176,80,40,.08);border:1px solid rgba(176,80,40,.4);border-radius:8px;padding:7px 10px;margin:7px 0;font-size:11px;line-height:1.35;color:var(--mut)} .redflag b{color:#c47a52} .copyr{font-size:10.5px;color:var(--mut);margin-top:14px;text-align:center;opacity:.85;padding-bottom:6px} .cid{display:inline-block;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--gold2);color:var(--brand);padding:1px 7px;border-radius:6px;letter-spacing:.5px;vertical-align:middle;margin-right:6px} /* patient cases */ .casebox{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--gold) 6%,transparent)} .casebox .qq{font-weight:700;margin-bottom:8px;color:var(--gold)} .cform{display:flex;flex-direction:column;gap:8px;margin-top:8px} .cform label{display:flex;flex-direction:column;font-size:13px;gap:3px} .cform input,.cform select,.cform textarea{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;background:var(--card);color:inherit;width:100%} .cform .row2{display:flex;gap:8px}.cform .row2 label{flex:1} .search{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;margin:10px 0;background:var(--card);color:inherit} .pcard{padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;background:var(--card);box-shadow:var(--shadow)} .pcard:active{transform:scale(.99)} .pcard .pn{font-weight:700;font-size:16px} .pcard .pm{font-size:13px;color:var(--mut);margin-top:2px} .timeline{position:relative;border-left:2px solid var(--line);padding-left:14px;margin-left:6px} .titem{position:relative;margin-bottom:14px;cursor:pointer} .titem::before{content:'';position:absolute;left:-21px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--gold)} .tdate{font-size:12px;color:var(--mut);font-weight:600} .tmed{font-size:13px;color:var(--gold);margin-top:2px} /* ---------- Bootstrap surface overrides ---------- */ .card.bs, .modal-content, .dropdown-menu, .list-group-item{background:var(--card);color:var(--txt);border-color:var(--line)} .dropdown-menu{box-shadow:var(--shadow-lg)} .dropdown-item{color:var(--txt)} .dropdown-item:hover,.dropdown-item:focus{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--txt)} .dropdown-divider{border-color:var(--line)} .form-control,.form-select{background:var(--card);color:var(--txt);border-color:var(--line)} .form-control::placeholder{color:var(--mut);opacity:.8} .form-control:focus,.form-select:focus{background:var(--card);color:var(--txt);border-color:var(--gold2);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--gold2) 25%,transparent)} .form-select option{background:var(--card);color:var(--txt)} /* checkboxes / radios — clearly visible in both themes, accent when checked */ .form-check-input{ background-color:var(--card); border:1.5px solid var(--mut); width:1.1em;height:1.1em;cursor:pointer; } .form-check-input:checked{background-color:var(--gold2);border-color:var(--gold2)} .form-check-input:focus{border-color:var(--gold2);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--gold2) 25%,transparent)} .form-check-input:disabled{opacity:.55} /* tables — readable in both themes */ .table{ --bs-table-color:var(--txt); --bs-table-bg:transparent; --bs-table-border-color:var(--line); --bs-table-hover-color:var(--txt); --bs-table-hover-bg:color-mix(in srgb,var(--gold) 9%,transparent); --bs-table-striped-color:var(--txt); --bs-table-striped-bg:color-mix(in srgb,var(--txt) 4%,transparent); color:var(--txt); border-color:var(--line); margin-bottom:0; } .table > :not(caption) > * > *{border-bottom-color:var(--line); background-color:transparent} .table thead th{background:var(--panel);color:var(--txt);border-bottom:2px solid var(--line); font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)} .badge-soft{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)} /* ---------- Sidebar (admin / tenant dashboards) ---------- */ .layout{display:flex;min-height:calc(100vh - 58px)} .sidebar{width:230px;flex:0 0 230px;background:var(--panel);border-right:1px solid var(--line);padding:14px 10px;box-shadow:var(--shadow)} .sidebar a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--txt);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:2px;border-left:3px solid transparent} .sidebar a .i{width:20px;text-align:center} .sidebar a:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)} .sidebar a.active{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);border-left-color:var(--gold2)} .sidebar a.disabled-soft{opacity:.45;pointer-events:none} .sidebar a small{margin-left:auto} .content{flex:1;min-width:0;padding:18px;overflow-x:auto} .stat{padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)} .stat .v{font-size:26px;font-weight:800;color:var(--gold)} .stat .k{font-size:12px;color:var(--mut);margin-top:2px} /* ---------- Mobile side menu (off-canvas) ---------- */ .navmenu{position:fixed;top:0;right:0;bottom:0;width:288px;max-width:86vw;background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:1090;transform:translateX(102%);transition:transform .25s ease;overflow-y:auto} .navmenu.open{transform:none} .navmenu-head{padding:16px 14px;border-bottom:1px solid var(--line);position:relative;padding-top:calc(16px + env(safe-area-inset-top))} .navmenu-body{padding:12px 14px;padding-bottom:calc(20px + env(safe-area-inset-bottom))} .navmenu-link{display:block;padding:11px 12px;border-radius:10px;color:var(--txt);text-decoration:none;font-size:15px;font-weight:600;cursor:pointer} .navmenu-link:hover,.navmenu-link:focus{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--txt)} .navmenu-backdrop{position:fixed;inset:0;background:#0009;z-index:1085;display:none} .navmenu-backdrop.open{display:block} #installBtn{color:var(--gold)} /* ---------- Auth pages ---------- */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px; background:radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb,var(--brand) 22%,transparent), transparent), var(--bg)} .auth-card{width:100%;max-width:420px} .auth-logo{width:54px;height:54px;border-radius:14px;background:var(--gold2);color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:26px;margin:0 auto 12px} /* ---------- Accent picker swatches ---------- */ .swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;display:inline-block} .swatch.sel{border-color:var(--txt);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold2)} .sw-saffron{background:#C9952F}.sw-blue{background:#3b9ae1}.sw-green{background:#4caf50} .sw-teal{background:#2dd4bf}.sw-violet{background:#a78bfa}.sw-crimson{background:#e23b5d} /* ---------- Mobile-app responsiveness ---------- */ @media (max-width:860px){ .layout{display:block} .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1080;transform:translateX(-100%);transition:.25s;width:240px;flex-basis:240px;box-shadow:var(--shadow)} .sidebar.open{transform:none} .sidebar-backdrop{position:fixed;inset:0;background:#0008;z-index:1070;display:none} .sidebar-backdrop.open{display:block} .content{padding:14px} } @media (min-width:861px){ .menu-btn{display:none} } @media (max-width:560px){ .top-grid{gap:10px} .toptile{padding:26px 10px} .q{font-size:16.5px} h2{font-size:16px} } /* ---------- Ripple effect (Material-style, theme-aware) ---------- */ .has-ripple{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent} .brx-ripple{ position:absolute;border-radius:50%;transform:scale(0);pointer-events:none; background:var(--ripple);opacity:.6;animation:brxRipple .6s ease-out forwards;z-index:1; } @keyframes brxRipple{ to{ transform:scale(2.6); opacity:0; } } /* buttons with a solid dark bg → light ripple regardless of theme */ .btn-brand,.opts .yes,.sidebar a.active,.btn.btn-brand{--ripple:rgba(255,255,255,.35)} .btn-gold,.expbtn.on{--ripple:rgba(0,0,0,.18)} /* ---------- Hover / press elevation (light + dark) ---------- */ .dbox,.surface,.stat,.pcard,.card,.res,.toptile{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease} .dbox:hover,.surface:hover,.stat:hover,.pcard:hover,.toptile:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .btn,.hbtn,.opts button,.secback,.swatch{transition:transform .12s ease, box-shadow .15s ease, filter .15s ease} .btn:hover,.opts button:hover{box-shadow:var(--shadow-lg)} .btn:active,.hbtn:active,.opts button:active,.dbox:active,.pcard:active,.swatch:active{transform:scale(.97)} /* PWA standalone: subtle status-bar safe area already handled in header */ @media (display-mode:standalone){ body{ user-select:none } } @media (prefers-reduced-motion:reduce){ .brx-ripple{display:none} *{transition:none!important} } [x-cloak]{display:none!important} /* Single-device reminder toast */ .brx-toast{ position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px); z-index:2000;max-width:90vw; background:#0f2e33;color:#fff;font-size:13.5px;font-weight:600; padding:11px 18px;border-radius:12px; box-shadow:0 10px 30px #0006;border:1px solid #ffffff22; opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease; } .brx-toast.show{opacity:1;transform:translate(-50%,0)} [data-accent] .brx-toast{background:var(--brand,#0f2e33)} /* Plan search-quota pill */ .search-pill{ display:inline-block;font-size:13px;font-weight:600; background:var(--card,#fff);border:1px solid var(--line,#0000001a); color:var(--txt);border-radius:999px;padding:5px 14px; } /* Active language control */ [data-lang-btn].active{ background:var(--brand,#0f2e33);color:#fff;border-color:var(--brand,#0f2e33); font-weight:700; } .dropdown-item[data-lang-btn].active{background:var(--brand,#0f2e33);color:#fff}