:root { --hdr-h: 56px; --sidebar-w: 240px; --transition: 0.25s ease; --c-hdr-bg: #0b2540; --c-hdr-fg: #cde8f5; --c-sidebar-bg: #0e2f50; --c-sidebar-fg: #7ab3cc; --c-sidebar-fg-active: #ffffff; --c-sidebar-hover: #163d63; --c-sidebar-active: #00a9a9; --c-main-bg: #f2f8fa; --c-accent: #00a9a9; --c-text: #0b2540; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } input, textarea, button, select { font: inherit; -webkit-appearance: none; appearance: none; } html, body { height: 100%; overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: var(--c-text); } /* ── GRID LAYOUT ─────────────────────────────────── */ body { display: grid; grid-template-rows: var(--hdr-h) 1fr; grid-template-columns: auto 1fr; grid-template-areas: "hdr hdr" "sidebar main"; } /* Fullscreen mode — login, splash, etc. Usage: in the page's HTML */ body.fullscreen { grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: "main"; } body.fullscreen .hdr, body.fullscreen .sidebar { display: none; } /* ── HEADER ──────────────────────────────────────── */ .hdr { grid-area: hdr; background: var(--c-hdr-bg); color: var(--c-hdr-fg); display: flex; align-items: center; padding: 0 1rem; gap: 0.75rem; z-index: 20; box-shadow: 0 1px 6px rgba(0,0,0,0.35); } .hdr-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; } .hdr-end { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } /* ── HAMBURGER ───────────────────────────────────── */ .burger { flex-shrink: 0; width: 36px; height: 36px; padding: 7px 6px; display: flex; flex-direction: column; justify-content: space-between; background: none; border: none; border-radius: 6px; cursor: pointer; } .burger:hover { background: rgba(255,255,255,0.1); } .burger span { display: block; height: 2px; background: var(--c-hdr-fg); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); transform-origin: center; } /* ── SIDEBAR ─────────────────────────────────────── */ .sidebar { grid-area: sidebar; background: var(--c-sidebar-bg); width: var(--sidebar-w); overflow: hidden; transition: width var(--transition); display: flex; flex-direction: column; } /* Desktop: collapsed via JS toggling .sidebar-closed on body */ body.sidebar-closed .sidebar { width: 0; } .sidenav { flex: 1; overflow-y: auto; padding: 0.5rem 0; } .sidenav-link { display: flex; align-items: center; padding: 0.7rem 1.25rem; color: var(--c-sidebar-fg); text-decoration: none; white-space: nowrap; gap: 0.75rem; transition: background var(--transition), color var(--transition); } .sidenav-link:hover { background: var(--c-sidebar-hover); color: var(--c-sidebar-fg-active); } .sidenav-link.active { background: var(--c-sidebar-active); color: #fff; } /* ── MAIN ────────────────────────────────────────── */ .main { grid-area: main; background: var(--c-main-bg); overflow-y: auto; overflow-x: hidden; min-height: 0; /* lets 1fr stay bounded so height:100% resolves on children */ } .main-inner { padding: 1.5rem; } .page { min-height: 100%; } /* ── HEADER LOGOUT ───────────────────────────────── */ .hdr-logout { background: rgba(255,255,255,0.12); color: var(--c-hdr-fg); border: none; border-radius: 6px; padding: 0.3rem 0.75rem; font-size: 0.85rem; cursor: pointer; transition: background var(--transition); } .hdr-logout:hover { background: rgba(255,255,255,0.22); } /* ── DEMO PAGE ───────────────────────────────────── */ .demo-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .demo-btn { padding: 0.4rem 1rem; border: 1.5px solid var(--c-accent); border-radius: 6px; background: #fff; color: var(--c-accent); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .demo-btn:hover { background: var(--c-accent); color: #fff; } .demo-btn--accent { background: var(--c-accent); color: #fff; } .demo-btn--accent:hover { opacity: 0.85; } .demo-output { margin-top: 1rem; padding: 0.75rem 1rem; background: #fff; border: 1.5px solid #c8d8e4; border-radius: 6px; font-family: 'Courier New', Courier, monospace; font-size: 0.825rem; line-height: 1.5; color: var(--c-text); white-space: pre-wrap; min-height: 2.5rem; } /* ── DB QUERY PAGE ───────────────────────────────── */ .page--fill { height: 100%; } .dbquery { display: flex; flex-direction: column; height: 100%; padding: 1rem; gap: 0.5rem; } .dbquery-toolbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .dbquery-label { font-size: 0.7rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.07em; } .dbquery textarea { flex: 1; font-family: 'Courier New', Courier, monospace; font-size: 0.875rem; line-height: 1.5; padding: 0.6rem 0.75rem; border: 1.5px solid #c8d8e4; border-radius: 6px; resize: none; outline: none; background: #fff; color: var(--c-text); transition: border-color 0.2s; } .dbquery textarea:focus { border-color: var(--c-accent); } .dbquery-run { background: var(--c-accent); color: #fff; border: none; border-radius: 6px; padding: 0.35rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .dbquery-run:hover { opacity: 0.85; } .dbquery-run:disabled { opacity: 0.5; cursor: not-allowed; } /* ── ENV EDIT PAGE ───────────────────────────────── */ .envedit { max-width: 580px; display: flex; flex-direction: column; gap: 1.5rem; } .envedit-footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-left: 160px; } .envedit-msg { font-size: 0.85rem; color: #888; } .envedit-msg.ok { color: #27ae60; } .envedit-msg.err { color: #c0392b; } .envedit-save { background: var(--c-accent); color: #fff; border: none; border-radius: 6px; padding: 0.45rem 1.25rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .envedit-save:hover { opacity: 0.85; } .envedit-save:disabled { opacity: 0.5; cursor: not-allowed; } /* ── OVERLAY (mobile only) ───────────────────────── */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 15; opacity: 0; pointer-events: none; transition: opacity var(--transition); } /* ── MOBILE ──────────────────────────────────────── */ @media (max-width: 600px) { .envedit-footer { padding-left: 0; } } @media (max-width: 768px) { body { grid-template-columns: 0 1fr; } /* Sidebar becomes a fixed overlay drawer */ .sidebar { position: fixed; top: var(--hdr-h); left: 0; bottom: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform var(--transition); z-index: 16; } body.sidebar-open .sidebar { transform: translateX(0); } /* X animation on mobile when drawer is open */ body.sidebar-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.sidebar-open .burger span:nth-child(2) { opacity: 0; } body.sidebar-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .overlay { display: block; } body.sidebar-open .overlay { opacity: 1; pointer-events: auto; } }