/* Forja control panel (07/09): Stripe-like dashboard — light by default, dark on request, thin borders, quiet surfaces, 14px type. Theme = data-theme on (set before paint by the inline script in _AdminLayout; preference in localStorage 'forja.theme'). Every colour goes through a token below; pages must not hardcode greys (light/dark would break). --primary/--accent/fonts come from the layout. */ :root,[data-theme=light]{color-scheme:light; --bg:#f6f8fa;--text:#30313d;--text2:#414552;--muted:#687385;--side:#ffffff;--panel:#ffffff;--panel2:#f6f8fa;--line:#e3e8ee;--line2:#d5dbe1;--line3:#c0c8d2; --hover:#eef1f5;--active:#e3e8ee;--thead:#f6f8fa;--code-bg:#f6f8fa;--on-primary:#ffffff;--field:#ffffff;--dim:#8792a2; --ok:#1a8a3a;--warn:#c4700a;--bad:#df1b41;--info:#3b82f6; --shadow:0 2px 6px rgba(50,50,93,.08),0 12px 40px -12px rgba(50,50,93,.2);--shadow-lg:0 30px 80px -20px rgba(50,50,93,.35);--backdrop:rgba(48,49,61,.45)} [data-theme=dark]{color-scheme:dark; --bg:#17181b;--text:#ededed;--text2:#c8c8c8;--muted:#969696;--side:#1c1d21;--panel:#212226;--panel2:#292a2f;--line:#33353b;--line2:#404248;--line3:#50525a; --hover:#282a2f;--active:#30323a;--thead:#1e1f23;--code-bg:#121316;--on-primary:#0a0a0b;--field:#17181b;--dim:#5c5e66; --ok:#3ecf8e;--warn:#f5a524;--bad:#f0616d;--info:#8ab4f8; --shadow:0 16px 40px rgba(0,0,0,.5);--shadow-lg:0 30px 80px rgba(0,0,0,.6);--backdrop:rgba(0,0,0,.6)} .admin-body{display:flex;min-height:100vh;margin:0;font-size:14px;line-height:1.55;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased} .admin-body *{box-sizing:border-box} .admin-body a{color:var(--text)} /* ---- sidebar ---- */ .admin-side{width:14rem;flex:none;transition:width .15s;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;font-size:13px} .admin-top{display:flex;align-items:center;justify-content:space-between;height:48px;border-bottom:1px solid var(--line);padding:0 .6rem 0 .9rem} .admin-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text);min-width:0} .nav-toggle{display:none;background:none;border:0;color:var(--text);padding:.4rem;cursor:pointer} .nav-toggle .i-close{display:none}.admin-side.open .nav-toggle .i-close{display:block}.admin-side.open .nav-toggle .i-open{display:none} .admin-brand>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.15} .brand-mark{width:1.5rem;height:1.5rem;flex:none;border-radius:.35rem;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-size:.8rem} .brand-mark-img{background:transparent;object-fit:contain} .admin-brand .brand-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .admin-brand .brand-tag{font-size:.66rem;color:var(--muted);letter-spacing:.03em} .admin-side nav{display:flex;flex-direction:column;gap:1px;padding:.5rem .5rem;align-items:stretch;flex-wrap:nowrap;overflow-y:auto} /* nowrap: forja.css has a bare nav{flex-wrap:wrap} for the site header/footer; on a short phone screen it pushed the last items into a second column instead of scrolling (09/09) */ .nav-group{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:.85rem .5rem .25rem;font-weight:600} .admin-side nav a{display:flex;gap:.55rem;align-items:center;height:32px;padding:0 .55rem;border-radius:.35rem;color:var(--text2);text-decoration:none;border:0;justify-content:flex-start} .admin-side nav a:hover{background:var(--hover);color:var(--text)} .admin-side nav a.on{background:var(--active);color:var(--text);font-weight:500} .nav-item{display:flex;align-items:center;gap:1px}.nav-item>a{flex:1;min-width:0} .nav-chev{flex:none;width:26px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:.35rem;color:var(--muted);cursor:pointer;transition:transform .15s} .nav-chev:hover{background:var(--hover);color:var(--text)}.nav-item.open .nav-chev{transform:rotate(180deg)} .nav-sub{display:none;flex-direction:column;gap:1px;margin:0 0 .2rem 1.05rem;padding-left:.55rem;border-left:1px solid var(--line)} .nav-item.open+.nav-sub{display:flex} .admin-side nav .nav-sub a{height:28px;font-size:12.5px;padding:0 .5rem;color:var(--text2)} .admin-side nav .nav-sub a .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none} .admin-side nav .nav-sub a .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admin-side nav .nav-sub a .pill{height:16px;font-size:.62rem;padding:0 .35rem} .ico{width:1rem;height:1rem;flex:none;opacity:.75} .admin-side nav a.on .ico{opacity:1;color:var(--primary)} .admin-side-foot{margin-top:auto;padding:.5rem;display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line)} .admin-side-foot a,.admin-side-foot .linklike{display:flex;gap:.55rem;align-items:center;height:30px;padding:0 .55rem;border-radius:.35rem;color:var(--text2);text-decoration:none;font-size:13px} .admin-side-foot a:hover,.admin-side-foot .linklike:hover{background:var(--hover);color:var(--text)} .who{display:flex;gap:.5rem;align-items:center;padding:.3rem .55rem .5rem;min-width:0} .avatar{width:1.6rem;height:1.6rem;flex:none;border-radius:50%;background:var(--active);border:1px solid var(--line2);color:var(--text);display:grid;place-items:center;font-size:.72rem;font-weight:600} .avatar{overflow:hidden;padding:0}.avatar img,img.avatar{width:100%;height:100%;object-fit:cover;display:block} a.avatar{text-decoration:none;cursor:pointer} /* account menu behind the avatar (project admin, 06/09) */ .acct{position:relative}.acct>.avatar{cursor:pointer;font-family:inherit} .acct-menu{display:none;position:absolute;right:0;top:calc(100% + .5rem);width:16rem;background:var(--panel);border:1px solid var(--line2);border-radius:.6rem;padding:.4rem;box-shadow:var(--shadow);z-index:30} .acct.open .acct-menu{display:block} /* ⋯ menu next to a status pill (07/09): archive/restore/delete of a project. Same dropdown as the account menu. */ .acct.more{display:inline-flex;align-items:center;margin-left:.5rem;vertical-align:middle} .more-btn{width:26px;height:26px;border-radius:.4rem;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:0;display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle}.more-btn:hover{color:var(--text);border-color:var(--line3);background:var(--hover)} .acct-menu .linklike.danger{color:var(--bad)}.acct-menu .linklike.danger:hover{background:rgba(240,97,109,.12)} .acct-menu .linklike{background:none;border:0;cursor:pointer;font:inherit;text-align:left} .acct-who{display:flex;gap:.6rem;align-items:center;padding:.5rem .55rem .7rem;border-bottom:1px solid var(--line);margin-bottom:.3rem} .acct-who>span{min-width:0;line-height:1.2}.acct-who strong{display:block;font-size:13px;font-weight:600}.acct-who em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acct-menu a,.acct-menu .linklike{display:flex;gap:.55rem;align-items:center;height:30px;padding:0 .55rem;border-radius:.35rem;color:var(--text2);text-decoration:none;font-size:13px;width:100%} .acct-menu a:hover,.acct-menu .linklike:hover{background:var(--hover);color:var(--text)} .lang-pick{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem .55rem;font-size:12.5px;color:var(--muted)}.lang-pick select{height:28px;font-size:12px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:.3rem;padding:0 .4rem}a.avatar:hover{border-color:var(--line3);background:var(--active)} .who-mail{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .powered{color:var(--muted)!important;font-size:.72rem!important} .side-exits{display:none} /* phone only: the bar (crumbs + account menu) is hidden there; see the 800px block */ .forja-mark{width:.8rem;height:.8rem;border-radius:.2rem;background:linear-gradient(100deg,#fdba74,#f97316 40%,#f43f5e 75%,#a78bfa);flex:none;display:inline-block} .linklike{background:none;border:0;padding:0;color:var(--primary);cursor:pointer;font:inherit;text-align:left} /* ---- top bar + main ---- */ .admin-col{flex:1;min-width:0;display:flex;flex-direction:column} .admin-bar{height:48px;border-bottom:1px solid var(--line);background:var(--side);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;position:sticky;top:0;z-index:10} .crumbs{display:flex;align-items:center;gap:.5rem;font-size:13px;color:var(--muted)} .crumbs a{color:var(--text2);text-decoration:none}.crumbs a:hover{color:var(--text)} .crumbs .cur{color:var(--text)}.crumbs .sep{color:var(--dim)} .crumb-forja{display:inline-flex;align-items:center;padding:.2rem;border-radius:.3rem}.crumb-forja:hover{background:var(--hover)} .bar-left,.bar-right{display:flex;align-items:center;gap:.6rem}.bar-left{gap:0;min-width:0} .admin-main{flex:1;padding:2rem 2.5rem 4rem;max-width:96rem;min-width:0;width:100%} .admin-main-bare{max-width:26rem;margin:4rem auto;padding:1.5rem} .admin-main h1{font-size:1.35rem;margin:0 0 1.5rem;font-weight:600;letter-spacing:-.01em} .admin-main h2{font-size:1.05rem;font-weight:600;margin:2rem 0 .9rem} .admin-main h3{font-size:.95rem;font-weight:600} .admin-main h1,.admin-main h2,.admin-main h3,.admin-main h4{font-family:var(--font-body)} .muted{color:var(--muted)}.small{font-size:.85em} /* ---- panels, cards, tables ---- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;margin-bottom:2rem} .card,.sec,.tpl,.item,.panel{background:var(--panel);border:1px solid var(--line);border-radius:.5rem} .card{padding:1.1rem 1.25rem} .card .v{font-size:1.5rem;font-weight:600;line-height:1.1;letter-spacing:-.01em}.card .l{color:var(--muted);font-size:.8rem;margin-top:.2rem}.card .h{color:var(--muted);font-size:.75rem;margin-top:.25rem} .card a{color:inherit;text-decoration:none} .toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem} table.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;display:table;background:var(--panel);border:1px solid var(--line);border-radius:.5rem;overflow:hidden} table.grid th{text-align:left;font-weight:500;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--thead)} table.grid td{padding:.75rem 1rem;border-bottom:1px solid var(--line);vertical-align:top} table.grid tr:last-child td{border-bottom:0} /* numeric columns: th.r/td.r right-aligned — page-level `th.r` lost to `table.grid th` (specificity), so headers sat left of their right-aligned numbers ('header quebrado', 07/09) */ table.grid th.r,table.grid td.r{text-align:right} table.grid tr:hover td{background:var(--hover)} .pill{display:inline-flex;align-items:center;gap:.3rem;padding:0 .5rem;height:20px;border-radius:999px;font-size:.72rem;font-weight:500;background:var(--active);border:1px solid var(--line2);color:var(--text2)} .pill.ok,.pill.live{background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.35);color:var(--ok)} .pill.warn,.pill.provisioning{background:rgba(245,165,36,.12);border-color:rgba(245,165,36,.35);color:var(--warn)} .pill.info{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.35);color:var(--muted)} .pill.bad,.pill.error{background:rgba(240,97,109,.12);border-color:rgba(240,97,109,.35);color:var(--bad)} .admin-body input.bad{border-color:var(--bad)}.bad-text{color:var(--bad)} .pill.draft{background:rgba(245,165,36,.15);border-color:rgba(245,165,36,.4);color:var(--warn)} /* ---- controls ---- */ .admin-body .btn{display:inline-flex;align-items:center;gap:.4rem;height:32px;padding:0 .8rem;border-radius:.4rem;font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:inherit;line-height:1;transition:background .12s,border-color .12s} .admin-body .btn:not(.btn-outline):not(.btn-danger):not(.chip){background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .admin-body .btn:not(.btn-outline):not(.btn-danger):not(.chip):hover{background:#fb923c} .admin-body .btn-outline{background:var(--panel);color:var(--text);border-color:var(--line2)} .admin-body .btn-outline:hover{background:var(--panel2);border-color:var(--line3)} .admin-body .btn-danger{background:rgba(240,97,109,.12);color:var(--bad);border-color:rgba(240,97,109,.4)} .admin-body .btn-danger:hover{background:rgba(240,97,109,.2)} .btn-sm{height:28px!important;padding:0 .65rem!important;font-size:12.5px!important} .admin-body .btn[disabled]{opacity:.5;cursor:not-allowed} .admin-body .btn .ico{width:.9rem;height:.9rem;opacity:.9} .admin-body input:not([type=checkbox]):not([type=radio]),.admin-body select,.admin-body textarea{font:inherit;font-size:13px;padding:.42rem .6rem;border:1px solid var(--line2);border-radius:.4rem;background:var(--bg);color:var(--text);min-height:32px} .admin-body input:focus,.admin-body select:focus,.admin-body textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(249,115,22,.2)} .admin-body input::placeholder,.admin-body textarea::placeholder{color:var(--dim)} .admin-body label{font-size:13px} textarea.code{width:100%;min-height:24rem;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.7rem;border:1px solid var(--line2);border-radius:.4rem;background:var(--code-bg);color:var(--text);resize:vertical} .chips{display:flex;flex-wrap:wrap;gap:.35rem} .chip{border:1px solid var(--line2);border-radius:999px;padding:.2rem .65rem;cursor:pointer;background:var(--panel);font:inherit;font-size:12.5px;color:var(--text2);height:26px;display:inline-flex;align-items:center} .chip:hover{background:var(--panel2)} .chip.on{background:rgba(249,115,22,.15);color:var(--primary);border-color:rgba(249,115,22,.5)} .errs,.msg.err{background:rgba(240,97,109,.12);border:1px solid rgba(240,97,109,.35);color:var(--bad);padding:.55rem .75rem;border-radius:.4rem;white-space:pre-wrap;font-size:.88rem} .okmsg,.msg.ok{background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.3);color:var(--ok);padding:.55rem .75rem;border-radius:.4rem;font-size:.9rem} .mono{font-family:ui-monospace,Menlo,monospace;font-size:.85rem} .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .qr{background:#fff;padding:.5rem;display:inline-block;border-radius:.5rem} /* ---- content editor shell ---- */ .split{display:grid;grid-template-columns:14rem 1fr;gap:2rem} .split>section,.split>aside{min-width:0} .list{display:flex;flex-direction:column;gap:1px} .list a,.list button{text-align:left;padding:.35rem .55rem;border-radius:.35rem;border:0;background:none;color:var(--text2);cursor:pointer;font:inherit;font-size:13px;text-decoration:none} .list a:hover,.list button:hover{background:var(--hover);color:var(--text)} .list .on{background:var(--active);color:var(--text);font-weight:500} .kind-h{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:.8rem 0 .2rem .55rem;font-weight:600} .preview-frame{background:var(--panel)} .ed label,.ed input,.ed select,.ed textarea,.fgrid>*{min-width:0;max-width:100%} /* ---- modal (Admin.dialog) ---- */ .adm-dialog{border:1px solid var(--line2);border-radius:.6rem;padding:0;max-width:min(30rem,calc(100vw - 2rem));width:100%;background:var(--panel);color:var(--text);box-shadow:var(--shadow-lg)} .adm-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(2px)} .adm-dialog form{padding:1.25rem 1.25rem 1rem;display:flex;flex-direction:column;gap:.75rem;font-size:13.5px} .adm-dialog h3{margin:0;font-size:1rem;font-weight:600} .adm-dialog p{margin:-.25rem 0 0;line-height:1.45;color:var(--text2)} .adm-field{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.85rem} .adm-field input,.adm-field textarea,.adm-field select{font:inherit;font-weight:400;padding:.45rem .6rem;border:1px solid var(--line2);border-radius:.4rem;background:var(--bg);color:inherit} .adm-field .bad{border-color:var(--bad)} .adm-field .small{font-weight:400;color:var(--muted)} .adm-err{color:var(--bad)} .adm-actions{justify-content:flex-end;margin-top:.25rem} /* ---- responsive ---- */ @media (max-width:800px){ .admin-body{flex-direction:column} .admin-side{width:auto;height:auto;position:sticky;top:0;z-index:30;border-right:0;border-bottom:1px solid var(--line)} .nav-toggle{display:block} .admin-side nav,.admin-side-foot{display:none} .admin-side.open nav{display:flex;flex-direction:column;padding:.3rem .5rem .5rem;max-height:70vh;overflow:auto} .admin-side.open .admin-side-foot{display:flex} .admin-side nav a{height:38px} .admin-bar{display:none} .admin-main{padding:1.25rem 1rem 3rem;max-width:none} .split,.split.withPreview{grid-template-columns:1fr!important} /* !important: Users/Contact/Campaigns set the columns inline (1fr 22rem…), which squeezed the table into a 1px stripe on phones (09/09) */ .split aside:not(.card){display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.4rem;border-bottom:1px solid var(--line);margin-bottom:.6rem} /* Content's document list becomes a chip strip; the detail cards (aside.card) of Users/Contact stay cards */ .split aside .kind-h{display:none} .split aside .list{flex-direction:row;flex:none} .split aside .list button{white-space:nowrap;border:1px solid var(--line2);border-radius:1rem;padding:.3rem .65rem;font-size:.85rem} .split aside .list button .small{display:none} .pv-only{display:none!important} /* things that only make sense with the preview pane (hidden on phones) */ .chart-h>div:not(.row):first-child{flex:1 1 12rem;min-width:0}.chart-h>div:not(.row):last-child{flex:0 0 auto;margin-left:auto} .preview{display:none} .cards{grid-template-columns:repeat(2,1fr)} table.grid{display:block;overflow-x:auto} .fgrid,.fgrid.c4{grid-template-columns:1fr} } .edh{font-size:.9rem;font-weight:600;margin:2rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--line)} .wl-mark{width:16px;height:16px;border-radius:4px;object-fit:cover;vertical-align:middle;margin-right:.4rem}.powered.wl{display:flex;flex-direction:column;gap:.1rem;padding:.3rem .55rem;font-size:12.5px;color:var(--text2)}.powered.wl a{font-size:11px} /* ---- guided tour (06/09) ---- */ .tour{position:fixed;inset:0;z-index:200} .tour-spot{position:fixed;border-radius:.5rem;box-shadow:0 0 0 9999px var(--backdrop),0 0 0 2px var(--primary);transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none} .tour-pop{position:fixed;width:22rem;max-width:calc(100vw - 16px);background:var(--panel);border:1px solid var(--line2);border-radius:.8rem;padding:1.1rem 1.35rem 1.2rem;box-shadow:var(--shadow-lg);transition:left .25s,top .25s} .tour-pop[data-side=centre]{width:26rem;text-align:center;padding:1.4rem 1.75rem 1.6rem} .tour-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem} .tour-n{font-size:.7rem;color:var(--muted);letter-spacing:.05em} .tour-x{background:none;border:0;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:.1rem .3rem;border-radius:.3rem}.tour-x:hover{background:var(--active);color:var(--text)} .tour-pop h4{margin:0 0 .5rem;font-size:1.05rem;font-weight:600;letter-spacing:-.01em} .tour-pop p{margin:0 0 1.15rem;color:var(--text2);font-size:13.5px;line-height:1.6} .tour-foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem} .tour-pop[data-side=centre] .tour-foot{justify-content:center} .tour-foot .linklike{color:var(--muted);font-size:12.5px}.tour-foot .linklike:hover{color:var(--text)} .tour-btns{display:flex;gap:.6rem} .tour-help{width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--line2);background:var(--hover);color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:.8rem;font-weight:600;padding:0} .tour-help:hover{color:var(--text);border-color:var(--line3);background:var(--active)} /* ---- AI assistant bar in the content editor (06/09) ---- */ .ai-bar{display:flex;gap:.5rem;align-items:center;margin:.8rem 0 .4rem;padding:.45rem .55rem;border:1px solid rgba(249,115,22,.35);border-radius:.5rem;background:linear-gradient(90deg,rgba(249,115,22,.08),rgba(167,139,250,.06))} .ai-bar .ai-ic{color:var(--primary);display:grid;place-items:center;flex:none} .ai-bar input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:inherit;font-size:13px;outline:none} .ai-bar input::placeholder{color:var(--muted)} /* ---- toasts (Admin.toast, 07/09): colour = outcome ---- */ .adm-toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:1000;max-width:min(26rem,calc(100vw - 2rem))} .adm-toast{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .8rem .7rem .9rem;border-radius:.5rem;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-size:13.5px;line-height:1.4;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s} .adm-toast.in{opacity:1;transform:none}.adm-toast.out{opacity:0;transform:translateY(8px)} .adm-toast-dot{width:8px;height:8px;border-radius:50%;margin-top:.45rem;flex:0 0 auto;background:var(--muted)} .adm-toast.ok{border-color:rgba(62,207,142,.45)}.adm-toast.ok .adm-toast-dot{background:var(--ok)} .adm-toast.error{border-color:rgba(240,97,109,.5)}.adm-toast.error .adm-toast-dot{background:var(--bad)} .adm-toast.warn{border-color:rgba(245,165,36,.5)}.adm-toast.warn .adm-toast-dot{background:var(--warn)} .adm-toast.info .adm-toast-dot{background:var(--info)} .adm-toast-text{flex:1;min-width:0}.adm-toast-x{background:none;border:0;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 .1rem}.adm-toast-x:hover{color:var(--text)} /* ---- destructive confirm (Admin.confirmDelete) ---- */ .adm-delete .adm-x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 .2rem}.adm-delete .adm-x:hover{color:var(--text)} .adm-dialog .adm-danger-text{color:var(--bad);font-weight:600;margin:-.4rem 0 0} .adm-type{margin:0;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--text2)} .adm-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel2);border:1px solid var(--line2);border-radius:.4rem;padding:.2rem .5rem;color:var(--text);cursor:pointer;font:inherit}.adm-chip code{font-size:13px}.adm-chip:hover{border-color:var(--line3)} .adm-delete input[name=v]{height:40px;font-size:14px} .adm-actions kbd{font:inherit;font-size:11px;background:var(--panel2);border:1px solid var(--line2);border-radius:.25rem;padding:0 .3rem;margin-left:.3rem;color:var(--muted)} /* ---- sidebar modes (07/09, Azure portal): docked (default) or flyout — html.side-flyout hides the sidebar and the ≡ in the bar opens it over the page. The << in the sidebar header switches mode (Azure: "dock/undock"); remembered in localStorage 'forja.side'. Mobile keeps its own hamburger (below 800px). ---- */ .side-toggle{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:.35rem;background:none;color:var(--muted);cursor:pointer;padding:0;flex:none} .side-toggle:hover{background:var(--hover);color:var(--text)} .menu-btn{display:none;width:32px;height:32px;border:0;border-radius:.4rem;background:none;color:var(--text2);cursor:pointer;padding:0;place-items:center;margin-right:.6rem} .menu-btn:hover{background:var(--hover);color:var(--text)} .side-backdrop{display:none;position:fixed;inset:0;background:var(--backdrop);z-index:39} @media (min-width:801px){ .side-flyout .admin-side{position:fixed;left:0;top:0;height:100vh;z-index:40;transform:translateX(-100%);transition:transform .15s;box-shadow:none} .side-flyout.side-open .admin-side{transform:none;box-shadow:var(--shadow-lg)} .side-flyout.side-open .side-backdrop{display:block} .side-flyout .menu-btn{display:grid} .side-flyout .admin-side .side-toggle svg{transform:rotate(180deg)} } /* inner column of a page (Content: the document list) — its own << like an Azure blade menu */ .aside-toggle{margin:0 0 .3rem auto} .split.noaside{grid-template-columns:1fr} .aside-open-btn{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--line2);border-radius:.35rem;background:var(--panel);color:var(--muted);cursor:pointer;padding:0;margin-right:.6rem;vertical-align:middle} .aside-open-btn:hover{color:var(--text);border-color:var(--line3)} .theme-btn{width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0} .theme-btn:hover{color:var(--text);border-color:var(--line3);background:var(--hover)} .theme-btn svg{width:14px;height:14px} .theme-btn .i-sun{display:none}[data-theme=dark] .theme-btn .i-sun{display:block}[data-theme=dark] .theme-btn .i-moon{display:none} /* Stripe-like refinements */ .admin-main h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em} .card,.sec,.tpl,.item,.panel{box-shadow:0 1px 2px rgba(50,50,93,.04)} [data-theme=dark] .card,[data-theme=dark] .sec,[data-theme=dark] .tpl,[data-theme=dark] .item,[data-theme=dark] .panel{box-shadow:none} table.grid th{font-size:.72rem;letter-spacing:.06em} .admin-body .btn:not(.btn-outline):not(.btn-danger):not(.chip){box-shadow:0 1px 1px rgba(0,0,0,.08)} .admin-body .btn-outline{box-shadow:0 1px 1px rgba(0,0,0,.05)} [data-theme=dark] .admin-body .btn-outline,[data-theme=dark] .admin-body .btn:not(.btn-outline):not(.btn-danger):not(.chip){box-shadow:none} /* ---- page identity (07/09, Rodrigo: "every page looks the same"): header with a coloured icon tile per page; --ph = the page's hue ---- */ .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin:0 0 1.75rem} .page-head .ph-l{display:flex;gap:1rem;align-items:flex-start;min-width:0} .page-head .ph-icon{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--ph,#f97316) 85%,#fff),var(--ph,#f97316));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--ph,#f97316) 60%,transparent)} .page-head .ph-icon .ico{width:22px;height:22px;opacity:1} .page-head h1{margin:0 0 .15rem;font-size:1.5rem;font-weight:700;letter-spacing:-.02em} .page-head .ph-sub{margin:0;color:var(--muted);max-width:60rem} .page-head .ph-r{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} /* KPI cards with trend + sparkline */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin-bottom:1.5rem} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:1rem 1.2rem .9rem;display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:end;box-shadow:0 1px 2px rgba(50,50,93,.04)} .kpi .l{grid-column:1/-1;color:var(--muted);font-size:.8rem;font-weight:500} .kpi .v{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;line-height:1.1} .kpi .spark{width:84px;height:34px;display:block}.kpi .spark path.a{fill:color-mix(in srgb,var(--ph,var(--primary)) 18%,transparent)}.kpi .spark path.l{fill:none;stroke:var(--ph,var(--primary));stroke-width:1.6} .kpi .h{grid-column:1/-1;font-size:.78rem;color:var(--muted);display:flex;gap:.4rem;align-items:center} .trend{display:inline-flex;align-items:center;gap:.15rem;font-weight:600;font-size:.75rem;padding:0 .4rem;height:18px;border-radius:999px} .trend.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}.trend.down{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}.trend.flat{color:var(--muted);background:var(--panel2)} /* chart panel */ .chart{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:1.1rem 1.25rem 1rem;box-shadow:0 1px 2px rgba(50,50,93,.04);display:flex;flex-direction:column} .chart-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}.chart-h h2{margin:0;font-size:.95rem} .chart-big{font-size:1.6rem;font-weight:700;letter-spacing:-.02em} .chart svg{width:100%;flex:1;min-height:110px;display:block}.chart path.a{fill:url(#chartFill)}.chart path.l{fill:none;stroke:var(--ph,var(--primary));stroke-width:2}.chart line.g{stroke:var(--line);stroke-dasharray:3 4}.chart .axis{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:.35rem} .chart .legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:.4rem}.chart .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem;vertical-align:-1px} /* attention list */ .attn{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;box-shadow:0 1px 2px rgba(50,50,93,.04);display:flex;flex-direction:column} .attn h2{margin:0;font-size:.95rem;padding:1rem 1.25rem .6rem;display:flex;justify-content:space-between;align-items:center}.attn h2 .pill{font-weight:600} .attn ul{list-style:none;margin:0;padding:0 .5rem .5rem} .attn li{display:grid;grid-template-columns:10px 1fr auto;gap:.8rem;align-items:center;padding:.65rem .75rem;border-radius:.45rem}.attn li:hover{background:var(--hover)} .attn li i{width:10px;height:10px;border-radius:50%;background:var(--warn)}.attn li.bad i{background:var(--bad)}.attn li.info i{background:var(--info)}.attn li.ok i{background:var(--ok)} .attn li strong{font-weight:600;font-size:.88rem;display:block}.attn li span.small{color:var(--muted)} .attn .allok{padding:1.5rem 1.25rem 1.75rem;text-align:center;color:var(--muted)} .two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(18rem,1fr);gap:1.25rem;margin-bottom:1.5rem} @media (max-width:1000px){.two-col{grid-template-columns:1fr}} .pcard .spark{width:100%;height:36px;display:block;margin:-.2rem 0 -.3rem}.pcard .spark path.a{fill:color-mix(in srgb,var(--primary) 14%,transparent)}.pcard .spark path.l{fill:none;stroke:var(--primary);stroke-width:1.5} /* ---- ambient glow (07/09, Rodrigo: "shades no background" like the landing's fire): fixed layer under everything, tinted by the page hue. Surfaces stay solid, so the glow only shows on the page ground; stronger in the dark theme. ---- */ /* Ambient background (08/09) = fly.io's `.bg-light-vignette`, copied from their dashboard CSS at Rodrigo's request ("segue o mesmo esquema do fly"): ONE diagonal gradient (blue → violet → cyan, 35 % alpha) under a radial MASK that is transparent in the middle (25 %) and opaque at the edges — so the centre is clean ground and the colour lives on the periphery, like smoke. No blur, no blobs, no image. The sidebar/top bar have no background or border (the menu sits on the vignette, as fly's does); cards stay solid. Dark: same gradient over the dark ground, softer. Earlier attempts (07/09 gradients/glow/ridge lines; 08/09 corner blobs) were rejected — do not go back to them. */ .admin-body{position:relative;isolation:isolate;background:#fafafc} .admin-body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(135deg,hsla(217,91%,60%,.35),hsla(277,87%,63%,.35),hsla(189,94%,43%,.35)); -webkit-mask-image:radial-gradient(200% 100%,rgba(255,255,255,0) 25%,rgba(255,255,255,1));mask-image:radial-gradient(200% 100%,rgba(255,255,255,0) 25%,rgba(255,255,255,1))} [data-theme=dark] .admin-body{background:#15161a} [data-theme=dark] .admin-body::before{background-image:linear-gradient(135deg,hsla(217,91%,60%,.28),hsla(277,87%,63%,.28),hsla(189,94%,43%,.28))} /* Transparent ONLY when the sidebar is docked (desktop, expanded). Over content — collapsed flyout on desktop, drawer on mobile — it is solid (08/09: "aí cagou", the page showed through the menu). The top bar is sticky and content scrolls under it: translucent + blur, never transparent. Borders kept ("perdemos as linhas"). */ @media (min-width:801px){html:not(.side-flyout) .admin-side{background:transparent}} /* side-flyout lives on (admin.js) */ .admin-bar{background:transparent;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} /* same ground as the sidebar (08/09: "ou a linha toda branca ou a cor de fundo também"); the blur keeps scrolled content legible under it */ .admin-side nav a.on{background:rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(50,50,93,.06)} [data-theme=dark] .admin-side nav a.on{background:rgba(255,255,255,.08);box-shadow:none} .admin-side nav a:hover{background:rgba(255,255,255,.55)}[data-theme=dark] .admin-side nav a:hover{background:rgba(255,255,255,.05)} .admin-col{position:relative;z-index:1}.admin-side{z-index:2} /* Mobile (09/09, iPhone screenshots): the sticky header lost to the page (z-index:1 above beat the 30 in the responsive block — later rule, same specificity — so cards painted over "Rodrigo's studio"); the << dock toggle is desktop-only; the menu is a sheet OVER the page, not inline ("side bar tela toda": it pushed the whole page down). Table headers never wrap (Usage: "E-\nMAILS\n30D"). */ @media (max-width:800px){ .admin-side{z-index:30;background:var(--side)} .side-toggle{display:none} /* open = drawer from the left, 80 % wide, page dimmed on the right (09/09: the top sheet still read as "tela toda") */ .admin-side.open{position:fixed;top:0;bottom:0;left:0;width:min(82vw,20rem);height:100dvh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);border-right:1px solid var(--line);border-bottom:0} .admin-side.open .admin-top{flex:none} .admin-side.open nav{flex:1;min-height:0;max-height:none;overflow:auto} .admin-side.open .admin-side-foot{flex:none} .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:.85rem .9rem .8rem} /* here, after the global .kpis rule (trap nº 1 of checar-mobile) */ html.drawer-open,html.drawer-open body{overflow:hidden}html.drawer-open body{position:fixed;left:0;right:0;width:100%} /* page pinned while the drawer is open; Admin.side.lock keeps the offset */ .admin-side.open nav{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.side-backdrop{touch-action:none} .side-exits{display:flex;flex-direction:column;gap:1px;padding-bottom:.4rem;margin-bottom:.4rem;border-bottom:1px solid var(--line)}.side-exits .linklike{background:none;border:0;cursor:pointer;font:inherit;width:100%} .admin-side.open+.side-backdrop{display:block;z-index:29} table.grid th,table.grid td{white-space:nowrap}table.grid td{overflow-wrap:normal} /* cells keep their line; the table scrolls sideways (Subscribers: pill broke into 'M/ak/er') */ .two-col>*{min-width:0} .chart-h{flex-wrap:wrap;align-items:center}.chart-h>.row{flex-basis:100%;min-width:0;max-width:100%;justify-content:flex-start!important}.chart-h .seg{min-width:0;max-width:100%;overflow-x:auto}.chart-h .seg button{white-space:nowrap;flex:none} /* Health: 6 metric buttons wider than the phone — one scrolling row under the title */ .kv dd{min-width:0;overflow-wrap:anywhere}.kv dd code{overflow-wrap:anywhere;white-space:normal} /* Kuma URL ran out of the card */ } /* One content width for every page: blocks fill .admin-main; no per-page max-width ("numa tela tá ok, na outra tá na metade"). */ .admin-main .panel{align-content:start} table.grid td{overflow-wrap:anywhere} /* segmented filter (Projects, Billing invoices) */ .seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:.4rem;padding:2px;gap:2px} .seg button{background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;height:26px;padding:0 .6rem;border-radius:.3rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem} .seg button:hover{color:var(--text)}.seg button.on{background:var(--active);color:var(--text);font-weight:500} .seg .n{font-size:.68rem;background:var(--active);border-radius:999px;padding:0 .35rem;min-width:1.1rem;text-align:center;color:var(--text2)} /* horizontal bars (Usage, dashboards) */ .bars{display:grid;gap:.55rem} .bars .bar{display:grid;grid-template-columns:minmax(6rem,11rem) 1fr auto;gap:.8rem;align-items:center;font-size:.85rem} .bars .bar .t{background:var(--panel2);border-radius:999px;height:10px;overflow:hidden}.bars .bar .t i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--ph,var(--primary)) 70%,#fff),var(--ph,var(--primary)))} .bars .bar b{font-variant-numeric:tabular-nums} /* ---- skeletons (09/09, Rodrigo: "toda e qualquer página que renderiza precisa de skeleton") — shimmer placeholders while the API answers, in the shape of what will appear (cards, table rows, key/value lines). Never show "Loading…" text or zeroed KPIs. ---- */ .skel-cards,.skel-table,.skel-lines,.skel-grid{display:grid;gap:1rem;margin-bottom:1.5rem} .skel-cards{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.skel-cards i{height:6.6rem} .skel-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.skel-grid i{height:11rem}.skel-grid.two{grid-template-columns:minmax(0,1.6fr) minmax(18rem,1fr)} .skel-table{gap:0;border:1px solid var(--line);border-radius:.5rem;overflow:hidden;background:var(--panel)}.skel-table i{height:3.2rem;border-radius:0;border-bottom:1px solid var(--line);background-color:transparent}.skel-table i:last-child{border-bottom:0} .skel-table i::after{content:"";display:block;margin:1.1rem 1rem;height:1rem;width:60%;border-radius:.3rem;background:linear-gradient(90deg,var(--active) 25%,var(--hover) 50%,var(--active) 75%);background-size:200% 100%;animation:skel 1.4s infinite} .skel-table i:nth-child(2n)::after{width:45%}.skel-table i:nth-child(3n)::after{width:75%} .skel-lines{gap:.6rem;margin-bottom:0}.skel-lines i{height:1.1rem;width:80%}.skel-lines i:nth-child(2n){width:60%}.skel-lines i:nth-child(3n){width:90%}.skel-lines.head{margin-bottom:1.5rem} .skel-cards i,.skel-grid i,.skel-lines i{display:block;border-radius:.5rem;background:linear-gradient(90deg,var(--active) 25%,var(--hover) 50%,var(--active) 75%);background-size:200% 100%;animation:skel 1.4s infinite} @keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}} @media (max-width:1000px){.skel-grid.two{grid-template-columns:1fr}} /* ---- busy veil (Admin.busy, 09/09): the page is not frozen, something is happening ---- */ .adm-pre{max-height:55vh;overflow:auto;font-size:.74rem;white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:.4rem;padding:.6rem .8rem;margin:.3rem 0 0} .adm-dialog:has(.adm-pre){width:min(60rem,94vw)} .adm-busy{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(10,10,11,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}.adm-busy.in{opacity:1} .adm-busy-box{display:flex;align-items:center;gap:.8rem;background:var(--panel);border:1px solid var(--line2);border-radius:.8rem;padding:1rem 1.4rem;box-shadow:0 24px 60px rgba(0,0,0,.5);font-weight:500} .adm-spin{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--primary);animation:admspin .8s linear infinite;flex:none} @keyframes admspin{to{transform:rotate(360deg)}}