/* RAPly app styles: shared by every page (sign-in, Scripts, Flowchart, Admin). Colours come from the tokens below; light and dark are set on by core.js, so components only ever use the tokens. */ :root{ --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; --ground:#EBEFF4; --dots:#C3CCD8; --panel:#FFFFFF; --panel-2:#F4F6F9; --ink:#172033; --ink-2:#4A5669; --ink-3:#768397; --rule:#D6DCE5; --line:#7E8A9D; --accent:#1D66C1; --accent-ink:#FFFFFF; --accent-soft:#DDE9F8; --warn:#C25E17; --warn-soft:#FBE8D8; --danger:#B42318; --danger-soft:#FDE7E4; --ok:#3F7A1E; --ok-soft:#E4F0D8; --shadow:0 1px 2px rgba(20,35,60,.08),0 4px 14px rgba(20,35,60,.07); --shadow-lg:0 10px 30px rgba(20,35,60,.18); --radius:10px; --sbw:232px; } :root[data-theme="dark"]{ color-scheme:dark; --ground:#0E131B; --dots:#263246; --panel:#151C28; --panel-2:#1B2433; --ink:#E6ECF5; --ink-2:#A6B2C5; --ink-3:#7B889D; --rule:#2A3548; --line:#6B7A92; --accent:#5A9BEA; --accent-ink:#08101C; --accent-soft:#1B3050; --warn:#F0955A; --warn-soft:#3B2618; --danger:#F2877B; --danger-soft:#3A1C1A; --ok:#9AD06D; --ok-soft:#1F3316; --shadow:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.25); --shadow-lg:0 10px 30px rgba(0,0,0,.5); } *{box-sizing:border-box} [hidden]{display:none!important} html,body{height:100%;margin:0} body{background:var(--ground);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased} button,input,textarea,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} a{color:var(--accent)} .eyebrow{font:500 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .kbd{font:500 10.5px var(--mono);color:var(--ink-3)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- buttons & fields ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink);font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none} .btn:hover:not(:disabled){border-color:var(--ink-3)} .btn:disabled{opacity:.45;cursor:default} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.primary:hover:not(:disabled){filter:brightness(1.08)} .btn.danger{color:var(--danger)} .btn.block{width:100%} .btn.ghost{background:transparent;border-color:transparent} .btn.ghost:hover:not(:disabled){background:var(--panel-2);border-color:transparent} .ib{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink-2);cursor:pointer} .ib:hover:not(:disabled){background:var(--panel-2);color:var(--ink)} .ib svg,.nav-item svg,.menu-item svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .field{display:flex;flex-direction:column;gap:6px} .field>label,.field>.eyebrow{font:500 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .input{width:100%;height:38px;padding:0 12px;border:1px solid var(--rule);border-radius:8px;background:var(--panel-2);color:var(--ink)} .input:focus{outline:none;border-color:var(--accent);background:var(--panel)} .form-error{min-height:1.2em;color:var(--danger);font-size:13px} .seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--rule);border-radius:8px;padding:2px;gap:2px} .seg button{border:0;background:transparent;padding:5px 10px;border-radius:6px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap} .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)} .tag{display:inline-block;font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--accent-soft);color:var(--accent)} /* ---------- shell: sidebar + header ---------- */ .shell{height:100%;display:flex;min-height:0} .sidebar{flex:0 0 var(--sbw);width:var(--sbw);display:flex;flex-direction:column;min-height:0;background:var(--panel);border-right:1px solid var(--rule);transition:flex-basis .18s ease,width .18s ease;overflow:hidden} .sidebar.collapsed{--sbw:60px} .sb-brand{display:flex;align-items:center;gap:10px;height:58px;padding:0 14px;border-bottom:1px solid var(--rule);flex:none} .sb-logo{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:700 15px/1 var(--sans)} .sb-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto;overflow-x:hidden} .sb-section{padding:12px 10px 4px} .nav-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:500;white-space:nowrap;border:0;background:transparent;cursor:pointer;width:100%;text-align:left} .nav-item:hover{background:var(--panel-2);color:var(--ink)} .nav-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent)} .nav-item[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .nav-item[aria-disabled="true"]:hover{background:transparent;color:var(--ink-2)} .nav-item .nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .nav-tag{font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--accent-soft);color:var(--accent)} .sb-foot{flex:none;padding:10px 8px;border-top:1px solid var(--rule)} .sidebar.collapsed .sb-name,.sidebar.collapsed .nav-label,.sidebar.collapsed .sb-section,.sidebar.collapsed .nav-tag{display:none} .sidebar.collapsed .sb-brand{justify-content:center;padding:0} .sidebar.collapsed .nav-item{justify-content:center;padding:0} .sidebar.collapsed #sbCollapse svg{transform:rotate(180deg)} .shell-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0} .hd{flex:none;display:flex;align-items:center;gap:12px;height:58px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--rule)} .hd .hd-menu{display:none} .hd-title{min-width:0;display:flex;flex-direction:column;gap:1px} .hd-title h1{margin:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hd-actions{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0} .page{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;position:relative} .user-btn{display:flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 4px;border:1px solid transparent;border-radius:999px;background:transparent;cursor:pointer;color:var(--ink)} .user-btn:hover{background:var(--panel-2)} .avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:600 12px/1 var(--sans);flex:none} .user-btn .u-name{font-weight:500;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- menus ---------- */ .menu-wrap{position:relative} .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;z-index:60;background:var(--panel);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column} .menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px} .menu-head strong{display:block;font-size:14px} .menu-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--ink);text-decoration:none} .menu-item:hover{background:var(--panel-2)} .menu-item.danger{color:var(--danger)} .menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px} .menu hr{border:0;border-top:1px solid var(--rule);margin:4px 2px;width:auto} /* ---------- banners ---------- */ .banner{flex:none;padding:8px 44px 8px 16px;position:relative;text-align:center;font-size:13px;font-weight:500} .banner.info{background:var(--accent);color:var(--accent-ink)} .banner.notice{background:var(--warn-soft);color:var(--warn)} .banner .banner-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:inherit;cursor:pointer;font-size:16px;padding:4px 8px;opacity:.85} /* ---------- dialogs ---------- */ .dlg-back{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,16,28,.45)} .dlg{width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-lg);padding:22px;display:flex;flex-direction:column;gap:14px} .dlg h2{margin:0;font-size:18px;font-weight:600} .dlg p{margin:0;color:var(--ink-2)} .dlg .actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .dlg section+section{border-top:1px solid var(--rule);padding-top:14px} .qr{background:#fff;padding:10px;border-radius:8px;width:180px;margin:0 auto} .qr svg{display:block;width:100%;height:auto} .codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font:600 14px var(--mono);background:var(--panel-2);border:1px solid var(--rule);border-radius:8px;padding:12px 14px;user-select:all} /* ---------- toast ---------- */ .fb-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;background:var(--ink);color:var(--panel);padding:9px 14px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:13px;max-width:calc(100% - 32px);text-align:center;white-space:pre-line} /* ---------- mobile: sidebar becomes a drawer ---------- */ @media (max-width:760px){ .sidebar{position:fixed;inset:0 auto 0 0;z-index:70;--sbw:260px;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-lg)} .sidebar.collapsed{--sbw:260px} .sidebar.collapsed .sb-name,.sidebar.collapsed .nav-label,.sidebar.collapsed .sb-section{display:block} .sidebar.collapsed .nav-item{justify-content:flex-start;padding:0 10px} body.sidebar-open .sidebar{transform:none} body.sidebar-open::after{content:"";position:fixed;inset:0;z-index:65;background:rgba(10,16,28,.45)} #sbCollapse{display:none} .hd .hd-menu{display:inline-grid} .user-btn .u-name{display:none} }