/* ============================================================ e-cabinet — refreshed shell & design system (drop-in v2) Replaces assets/css/app.css. SAME class names, so no markup changes are needed. Refined surfaces, clearer hierarchy and a rebalanced gold accent. THEME: dark by default. For light, add class="theme-light" to the tag (see export/PORTING.md for a 4-line toggle). ============================================================ */ *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} body{font-family:'Rubrik',sans-serif;background:var(--bg);padding:24px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* ---- Design tokens ------------------------------------------------- Legacy names (--field, --box, --slate-bg, --gold, --red, --tx, --sidebar, --ink) are kept so any hard-coded inline references keep resolving; new names add the layered-surface + text-ramp system. */ :root{ --bg:#2b2b33; --canvas:#34343d; --sidebar:#2e2e36; --box:#3d3d48; --card-2:#474753; --field:#26262d; --slate-bg:#34343d; --ink:#1c1c22; --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.15); --gold:#ffc90e; --gold-soft:rgba(255,255,255,.08); --accent:#ffc90e; --red:#ff6b6b; --tx:#f5f5f8; --tx2:rgba(245,245,248,.66); --tx3:rgba(245,245,248,.46); --shadow:0 1px 2px rgba(0,0,0,.24),0 8px 22px rgba(0,0,0,.20); --shadow-sm:0 1px 2px rgba(0,0,0,.20); } body.theme-light{ --bg:#e8e7e2; --canvas:#faf9f6; --sidebar:#ffffff; --box:#ffffff; --card-2:#f3f2ec; --field:#f0efe8; --slate-bg:#faf9f6; --border:rgba(24,24,30,.09); --border-strong:rgba(24,24,30,.15); --gold:#ffc90e; --gold-soft:rgba(20,20,30,.055); --accent:#8a6a00; --red:#d83a3a; --tx:#1b1b22; --tx2:rgba(27,27,34,.62); --tx3:rgba(27,27,34,.42); --shadow:0 1px 2px rgba(20,20,30,.05),0 12px 32px rgba(20,20,30,.09); --shadow-sm:0 1px 2px rgba(20,20,30,.06); } /* ---- App frame ---- */ .nat-app{display:flex;width:100%;height:100%;background:var(--canvas);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);} /* ---- Sidebar ---- */ .nat-sidebar{width:240px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;} .nat-logo{padding:22px 20px 16px;} .ecab-logo{width:150px;height:auto;display:block;} .nat-nav{flex:1;padding:8px 0;display:flex;flex-direction:column;gap:1px;overflow-y:auto;} .nat-nav-item{display:flex;align-items:center;gap:11px;margin:1px 12px;padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--tx2);border-radius:10px;text-decoration:none;transition:background .15s ease,color .15s ease;} .nat-nav-item:hover{background:var(--card-2);color:var(--tx);} .nat-nav-item.active{background:var(--card-2);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);} .nat-nav-item i{font-size:18px;width:20px;flex-shrink:0;color:var(--tx3);} .nat-nav-item:hover i{color:var(--tx2);} .nat-nav-item.active i{color:var(--accent);} .nat-sidebar-foot{padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:11px;} .nat-ava{width:36px;height:36px;border-radius:50%;background:var(--card-2);border:1px solid var(--border);color:var(--tx);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0;} .nat-sidebar-foot .who{font-size:13.5px;font-weight:600;color:var(--tx);} /* ---- Main column ---- */ .nat-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;} .nat-top{height:62px;flex-shrink:0;padding:0 24px;display:flex;align-items:center;gap:14px;position:relative;border-bottom:1px solid var(--border);} .nat-top-time{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--tx2);} .nat-top-time i{font-size:17px;} .nat-top-title{font-size:13px;font-weight:600;color:var(--tx2);letter-spacing:.05em;text-transform:uppercase;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);} .nat-top-right{display:flex;align-items:center;gap:6px;margin-left:auto;} .nat-top-right a{width:36px;height:36px;border-radius:10px;color:var(--tx2);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s ease,color .15s ease;} .nat-top-right a:hover{background:var(--card-2);color:var(--tx);} .nat-top-right i{font-size:19px;color:var(--tx2);} .nat-top-date{font-size:12.5px;color:var(--tx3);} .nat-body{flex:1;overflow-y:auto;padding:28px 32px;} /* ---- Shared components ---- */ .box{background:var(--box);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);} .btn-gold{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--ink);border:none;border-radius:10px;padding:11px 16px;font-family:'Rubrik';font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:filter .15s ease;} .btn-gold:hover{filter:brightness(1.05);} .btn-gold i{font-size:18px;} .btn-ghost{display:inline-flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--border-strong);color:var(--tx);border-radius:10px;padding:11px 18px;font-family:'Rubrik';font-size:13.5px;font-weight:500;cursor:pointer;text-decoration:none;} /* ---- Shared section components ---- */ .page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;} .page-head .ttl{color:var(--tx);font-size:24px;font-weight:600;letter-spacing:-.01em;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .card{background:var(--box);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);padding:18px;transition:border-color .15s ease,transform .15s ease;} .input{background:var(--field);border:1px solid var(--border);border-radius:10px;color:var(--tx);font-family:'Rubrik';font-size:14px;padding:12px 14px;outline:none;width:100%;} .input::placeholder{color:var(--tx3);} .input:focus{border-color:var(--border-strong);} label.fld{display:flex;flex-direction:column;gap:7px;color:var(--tx);font-size:13px;font-weight:500;} .pill{display:inline-block;background:var(--card-2);border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:600;color:var(--tx2);} .pill.red{color:var(--red);} .pill.amber{color:var(--gold);} .pill.slate{color:var(--tx2);} .progress{height:7px;background:var(--field);border-radius:999px;overflow:hidden;} .progress>span{display:block;height:100%;background:var(--gold);} .chip{display:inline-flex;align-items:center;background:var(--box);border:1px solid var(--border);color:var(--tx2);border-radius:999px;padding:7px 14px;font-size:12.5px;cursor:pointer;text-decoration:none;transition:color .15s ease,border-color .15s ease;} .chip:hover{color:var(--tx);border-color:var(--border-strong);} .chip.active{background:var(--gold);border-color:transparent;color:var(--ink);} .iconbtn{width:34px;height:34px;border-radius:9px;background:var(--card-2);border:1px solid var(--border);color:var(--tx2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:color .15s ease,border-color .15s ease;} .iconbtn:hover{color:var(--tx);border-color:var(--border-strong);} .iconbtn i{font-size:17px;} .initials{width:42px;height:42px;border-radius:50%;background:var(--card-2);border:1px solid var(--border);color:var(--tx);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex-shrink:0;} .add-card{max-width:520px;margin:10px auto 0;background:var(--box);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:26px;display:flex;flex-direction:column;gap:16px;} .add-card .ac-ttl{color:var(--tx);font-size:18px;font-weight:600;} .add-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;} .muted{color:var(--tx2);} .del-i{color:var(--tx3);font-size:16px;cursor:pointer;transition:color .15s ease;} .del-i:hover{color:var(--tx);} /* ---- Form niceties ---- */ input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px;} select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;} /* ---- Auth pages (login / signup / forgot) ---- */ .auth-wrap{min-height:calc(100vh - 48px);display:flex;align-items:center;justify-content:center;} .auth-card{width:392px;background:var(--box);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:36px 32px;} .auth-logo{display:flex;justify-content:center;margin-bottom:18px;} .auth-logo img{width:150px;} .auth-h{color:var(--tx);font-size:21px;font-weight:600;text-align:center;} .auth-sub{color:var(--tx2);font-size:13px;text-align:center;margin:5px 0 22px;} .auth-card label.fld{margin-bottom:14px;} .auth-link{color:var(--accent);text-decoration:none;font-size:13px;font-weight:500;} .auth-foot{text-align:center;color:var(--tx2);font-size:13px;margin-top:20px;} .auth-err{background:var(--red);color:#fff;font-size:13px;font-weight:500;padding:11px 12px;border-radius:9px;margin-bottom:16px;text-align:center;} /* ---- Toggles, tabs, setting rows ---- */ .switch{position:relative;width:42px;height:24px;display:inline-block;flex-shrink:0;} .switch input{display:none;} .switch .sl{position:absolute;inset:0;background:var(--field);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:.2s;} .switch .sl::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--tx);top:2px;left:3px;transition:.2s;} .switch input:checked + .sl{background:var(--gold);border-color:transparent;} .switch input:checked + .sl::before{transform:translateX(18px);background:var(--ink);} .set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border);} .set-row:first-child{border-top:none;} .set-row .lbl{color:var(--tx);font-size:14px;} .set-row .dsc{color:var(--tx3);font-size:12px;margin-top:2px;} .tabs{display:flex;gap:8px;margin-bottom:18px;} .tab{padding:9px 16px;border-radius:10px;background:var(--box);border:1px solid var(--border);color:var(--tx2);font-size:13px;cursor:pointer;text-decoration:none;} .tab.active{background:var(--gold);border-color:transparent;color:var(--ink);} /* ---- View-only users: hide all edit controls ---- */ .is-viewer .btn-gold, .is-viewer .del-i, .is-viewer .del-act{display:none !important;} /* ---- Roles & user management ---- */ .role-badge{display:inline-block;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;} .role-master{background:var(--gold-soft);color:var(--accent);} .role-admin{background:var(--card-2);color:var(--tx2);border:1px solid var(--border);} .role-editor{background:var(--card-2);color:var(--tx2);border:1px solid var(--border);} .role-viewer{background:var(--card-2);color:var(--tx2);border:1px solid var(--border);} .role-sel{background:var(--field);border:1px solid var(--border);border-radius:8px;color:var(--tx);font-family:'Rubrik';font-size:13px;padding:7px 10px;outline:none;cursor:pointer;} .invite-link{display:flex;gap:8px;align-items:center;background:var(--field);border:1px solid var(--border);border-radius:10px;padding:11px 13px;} .invite-link input{flex:1;background:transparent;border:none;color:var(--accent);font-size:13px;font-family:'Rubrik';outline:none;} .status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;} .status-on{background:#46b35e;} .status-off{background:#f5251f;} .is-viewer .todo-add{display:none !important;} .is-viewer .todo-cb{pointer-events:none;opacity:.55;} /* ---- Finances: named spreadsheets ---- */ .sheet-newbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;max-width:540px;} .sheet-newbar .input{flex:1;} .sheet-list{display:flex;flex-direction:column;gap:9px;} .sheet-row{display:flex;align-items:center;gap:14px;padding:13px 18px;} .sheet-ic{color:var(--accent);font-size:22px;} .sheet-open{flex:1;color:var(--tx);font-size:14px;font-weight:600;text-decoration:none;min-width:0;} .sheet-open:hover{color:var(--accent);} .sheet-when{font-size:12px;color:var(--tx3);} .is-viewer .ren-act{display:none !important;} /* ============================================================ Responsive — tablets & phones (side menu becomes a drawer) ============================================================ */ .nat-burger{display:none;background:none;border:none;color:var(--tx2);cursor:pointer;padding:4px;margin-left:-4px;} .nat-burger i{font-size:24px;} .nat-backdrop{display:none;} @media (max-width: 860px){ body{padding:0;} .nat-app{border-radius:0;border:none;} .nat-burger{display:inline-flex;} .nat-sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:60; transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 24px rgba(0,0,0,.4);} body.nav-open .nat-sidebar{transform:none;} body.nav-open .nat-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;} .nat-top{padding:0 14px;justify-content:flex-start;gap:12px;} .nat-top-title{display:none;} .nat-top-date{display:none;} .nat-top-right{margin-left:auto;gap:8px;} .nat-body{padding:18px 14px;} .dash-grid, .notes-grid{grid-template-columns:repeat(2,1fr) !important;} .grid-3, .grid-4{grid-template-columns:repeat(2,1fr);} .page-head{flex-wrap:wrap;row-gap:12px;} .sheet-newbar, .add-card{max-width:none;} .auth-card{width:100%;max-width:380px;} } @media (max-width: 560px){ .dash-grid, .notes-grid, .grid-3, .grid-4{grid-template-columns:1fr !important;} .nat-body{padding:16px 12px;} .nat-top-time{font-size:14px;} .card, .sheet-row, .set-row, .invite-link{flex-wrap:wrap;} .btn-gold, .btn-ghost{padding:10px 15px;font-size:13px;} .role-sel{padding:7px 8px;} } /* ---- Rubrik on all form controls and the doc editor ---- */ input, textarea, select, button{font-family:'Rubrik', sans-serif;} .ql-container, .ql-editor{font-family:'Rubrik', sans-serif;} /* ---- Per-project sharing ---- */ .share-row{display:flex;align-items:center;gap:12px;background:var(--field);border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;} .share-row input{width:18px;height:18px;flex-shrink:0;} .shared-tag{display:flex;align-items:center;gap:7px;color:var(--tx2);font-size:12px;} .shared-tag i{font-size:15px;} /* ---- My Profile link (sidebar foot) ---- */ a.nat-sidebar-foot{text-decoration:none;color:inherit;cursor:pointer;border-radius:12px;transition:background .15s ease;} a.nat-sidebar-foot:hover{background:var(--card-2);} /* ---- Active project label (top bar) ---- */ .nat-proj{display:flex;align-items:center;gap:7px;margin-right:auto;background:var(--gold-soft);border:1px solid var(--border);color:var(--accent);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;} .nat-proj:hover{filter:brightness(1.08);} .nat-proj i{font-size:15px;} /* ---- Project picker cards ---- */ .proj-card.active{outline:1.5px solid var(--accent);outline-offset:-1px;} .proj-ic{width:40px;height:40px;border-radius:11px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .proj-ic i{color:var(--accent);font-size:20px;}