/* ============================================================ LAYOUT ============================================================ */ body { display:grid; grid-template-columns:220px 1fr; min-height:100vh; } /* Pre-auth (login screen): no chrome — hide the sidebar entirely and let the view span full width. Set on at load + toggled by the router. */ body.unauth { grid-template-columns:1fr; } body.unauth .side { display:none; } /* Sidebar logout button (P-B12), lives in .side__foot */ .side__logout { display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; padding:8px 10px; border:1px solid var(--stroke,rgba(255,255,255,.08)); border-radius:8px; background:transparent; color:var(--text-2,#9aa6b8); font:inherit; font-size:13px; cursor:pointer; transition:background .15s,color .15s; } .side__logout:hover { background:rgba(255,255,255,.05); color:var(--text-1,#eef3f9); } /* ============================================================ SIDEBAR ============================================================ */ .side { position:sticky; top:0; height:100vh; background:rgba(3,6,14,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-right:1px solid var(--border); padding:20px 14px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; } .side__brand { display:flex; flex-direction:column; gap:2px; padding:4px 12px 16px; } /* "admin panel" caption: small, sitting directly under the "Tribe" wordmark (mark width 40 + row gap 10). */ .side__brand .cap { font-size:9px; letter-spacing:.16em; padding-left:50px; } .brand-row { display:flex; align-items:center; gap:10px; } .brand-mark { display:inline-flex; align-items:center; flex-shrink:0; } .brand-word { font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--text-1); } .side__nav { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .nav-link { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--text-2); text-decoration:none; padding:10px 12px; border-radius:var(--r-md); border:1px solid transparent; transition:background .18s, color .18s, border-color .18s; } .nav-link:hover { background:var(--glass-strong); color:var(--text-1); } .nav-link.active { background:var(--glass-strong); color:var(--text-1); border:1px solid var(--border-2); box-shadow:inset 2px 0 0 var(--accent); } .side__foot { margin-top:auto; padding-top:16px; font-size:12px; color:var(--text-3); } /* ============================================================ MAIN CONTENT ============================================================ */ #view { padding:28px 32px; max-width:1400px; min-width:0; /* let children shrink instead of widening the grid column */ overflow-x:auto; /* wide tables scroll here instead of off the viewport */ } /* ============================================================ CARD ============================================================ */ .card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r-lg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:22px; } .card:hover { border-color:var(--border-2); } .cards-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } /* ============================================================ TABLE ============================================================ */ .table { width:100%; border-collapse:collapse; } .table th { color:var(--text-3); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-align:left; padding:0 12px 10px; } .table td { padding:11px 12px; border-top:1px solid var(--border); font-size:13.5px; color:var(--text-1); } .table tbody tr:hover { background:var(--surface-1); } /* ============================================================ CHIP ============================================================ */ .chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); color:var(--text-2); background:var(--glass); border:1px solid var(--border); } .chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .b-on { background:rgba(65,194,140,.16); color:var(--connected); border:none; } .b-warn { background:rgba(226,165,60,.16); color:var(--warning); border:none; } .b-off { background:rgba(226,98,92,.16); color:var(--danger); border:none; } /* ============================================================ BUTTONS ============================================================ */ .btn { font-family:var(--font-body); font-weight:600; font-size:14px; border-radius:var(--r-md); padding:11px 18px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:.16s; text-decoration:none; } .btn--primary { background:linear-gradient(180deg,#5C9CDC,#3E7FC4); color:#fff; box-shadow:0 8px 24px -8px var(--accent-glow); } .btn--primary:hover { filter:brightness(1.07); } .btn--ghost { background:var(--glass-strong); color:var(--text-1); border-color:var(--border-2); } .btn--ghost:hover { background:var(--surface-2); } .btn--danger { background:rgba(226,98,92,.14); color:var(--danger); border-color:rgba(226,98,92,.4); } .btn--danger:hover { background:rgba(226,98,92,.22); } /* ============================================================ FORM FIELDS ============================================================ */ .field { display:flex; flex-direction:column; gap:6px; } .field label { color:var(--text-3); font-size:12px; font-weight:600; letter-spacing:.06em; } .field input, .field select, .field textarea { background:var(--bg-900); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text-1); font-family:var(--font-body); font-size:14px; padding:11px 14px; width:100%; outline:none; transition:border-color .18s, box-shadow .18s; } .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,147,214,.18); } /* ============================================================ SKELETON ============================================================ */ .skeleton { background:linear-gradient( 90deg, var(--surface-2), var(--surface-3), var(--surface-2) ); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm); } @keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } /* ============================================================ RISE ENTRANCE ANIMATION ============================================================ */ .rise { animation:rise .7s cubic-bezier(.22,.8,.3,1) both; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } /* ============================================================ MODAL ============================================================ */ .modal { position:fixed; inset:0; background:rgba(0,4,12,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:grid; place-items:center; z-index:1000; } .dialog { max-width:460px; width:100%; background:var(--surface-1); border:1px solid var(--border-2); border-radius:var(--r-lg); box-shadow:0 32px 64px rgba(0,4,12,.7); padding:28px 28px 24px; } /* ============================================================ SCROLLBARS ============================================================ */ ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:999px; } ::-webkit-scrollbar-thumb:hover { background:var(--border-3); } /* ============================================================ TOAST NOTIFICATIONS ============================================================ */ #toast-root { position:fixed; bottom:24px; right:24px; z-index:2000; display:flex; flex-direction:column; gap:8px; pointer-events:none; } .toast { background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-sm); color:var(--text-2); font-size:13.5px; padding:12px 18px; max-width:360px; box-shadow:0 8px 24px rgba(0,4,12,.45); opacity:0; transform:translateX(16px); transition:opacity .22s, transform .22s; pointer-events:auto; } .toast.show { opacity:1; transform:translateX(0); } .toast--error { border-color:rgba(226,98,92,.5); color:var(--danger); } /* ============================================================ DASHBOARD UTILITIES ============================================================ */ .stat-big { font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--text-1); } /* ============================================================ SHAKE ANIMATION (login error) ============================================================ */ @keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-8px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-6px); } 80% { transform:translateX(6px); } } .shake { animation:shake .4s cubic-bezier(.36,.07,.19,.97) both; } /* ============================================================ DRAWER (right-panel detail view) ============================================================ */ .drawer-overlay { position:fixed; inset:0; z-index:900; background:rgba(0,4,12,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .drawer { position:fixed; top:0; right:0; width:420px; max-width:100vw; height:100%; background:var(--surface-1); border-left:1px solid var(--border-2); padding:24px; overflow-y:auto; transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.8,.3,1); z-index:901; } /* ============================================================ NODES — weight inline input + bootstrap spinner ============================================================ */ .weight-input { width:72px; background:var(--surface-1); border:1px solid var(--border-2); border-radius:var(--r-sm); color:var(--text-1); font-family:var(--font-mono); font-size:13px; padding:4px 8px; outline:none; } .spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(79,147,214,.25); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; } @keyframes spin { to { transform:rotate(360deg); } } /* ============================================================ RESPONSIVE — collapse sidebar at <900px ============================================================ */ @media (max-width:900px) { body { grid-template-columns:64px 1fr; } .side { padding:16px 8px; align-items:center; } .side .label { display:none; } .nav-link { justify-content:center; padding:10px; } .side__brand { align-items:center; } .side__brand .cap { display:none; } .brand-word { display:none; } }