/* ============================================================================ Beslyfe Admin OS — Design System One reusable component language for the entire event-management platform: tokens, layout shell, sidebar, and every shared component (buttons, forms, cards, tables, badges, drawers, modals, toasts, command palette, kanban…). Dark theme is the default; [data-theme="light"] on flips it. ========================================================================== */ /* ── Design tokens ───────────────────────────────────────────────────────── */ :root { --brand: #9FE22D; --brand-ink: #0b1a0b; --brand-soft: rgba(159, 226, 45, .14); --bg: #0a0f1a; --bg-2: #0e1522; --panel: #111a2b; --panel-2: #0c1320; --panel-3: #16203214; --elevated: #16223a; --line: #1f2b40; --line-soft: #17222f; --text: #eef2f8; --text-2: #aab6c6; --text-3: #6b7a90; --blue: #3b82f6; --blue-soft: rgba(59,130,246,.16); --green: #22c55e; --green-soft: rgba(34,197,94,.16); --amber: #f59e0b; --amber-soft: rgba(245,158,11,.16); --red: #ef4444; --red-soft: rgba(239,68,68,.16); --violet: #a78bfa; --violet-soft: rgba(167,139,250,.16); --cyan: #22d3ee; --cyan-soft: rgba(34,211,238,.16); --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-8: 40px; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-3: 0 24px 60px -20px rgba(0,0,0,.7); --ring: 0 0 0 3px var(--brand-soft); --sidebar-w: 260px; --topbar-h: 60px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.4, 0, .2, 1); } :root[data-theme="light"] { --brand-ink: #14330a; --brand-soft: rgba(120, 180, 20, .16); --bg: #f4f6fb; --bg-2: #eef1f7; --panel: #ffffff; --panel-2: #f7f9fc; --elevated: #ffffff; --line: #e2e8f2; --line-soft: #eef1f7; --text: #0f1a2b; --text-2: #475467; --text-3: #8a97ab; --shadow-2: 0 10px 30px -14px rgba(20,40,80,.22); --shadow-3: 0 24px 60px -22px rgba(20,40,80,.28); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; } ::selection { background: var(--brand-soft); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } /* ── App shell layout ────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 100vh; transition: grid-template-columns .25s var(--ease); } .app.collapsed { --sidebar-w: 72px; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .side { background: var(--panel-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .side-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; height: var(--topbar-h); border-bottom: 1px solid var(--line-soft); flex-shrink: 0; } .side-brand .logo { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--brand), #6fae1f); color: var(--brand-ink); display: grid; place-items: center; font-weight: 900; font-size: 16px; box-shadow: var(--shadow-1); } .side-brand .txt { min-width: 0; } .side-brand .txt b { display: block; font-size: .95rem; color: var(--text); white-space: nowrap; } .side-brand .txt small { color: var(--text-3); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; } .app.collapsed .side-brand .txt { display: none; } .side-nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; } .nav-group { margin-bottom: 2px; } .nav-group-label { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 10px 6px; border: 0; background: none; cursor: pointer; color: var(--text-3); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-family: inherit; } .nav-group-label .chev { margin-left: auto; transition: transform .2s var(--ease); font-size: .7rem; opacity: .6; } .nav-group.closed .chev { transform: rotate(-90deg); } .nav-group.closed .nav-group-items { display: none; } .app.collapsed .nav-group-label span, .app.collapsed .nav-group-label .chev { display: none; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; margin: 1px 0; border: 0; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; font: 600 .875rem/1 var(--font); text-align: left; text-decoration: none; position: relative; transition: background .12s, color .12s; } .nav-item .ic { width: 20px; text-align: center; font-size: 1.02rem; flex-shrink: 0; } .nav-item .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item:hover { background: var(--panel-3); color: var(--text); } .nav-item.active { background: var(--brand-soft); color: var(--brand); } .nav-item.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); } .nav-item .count { margin-left: auto; background: var(--red); color: #fff; border-radius: 99px; font-size: .66rem; font-weight: 800; padding: 1px 7px; min-width: 18px; text-align: center; } .app.collapsed .nav-item { justify-content: center; padding: 10px 0; } .app.collapsed .nav-item .lbl, .app.collapsed .nav-item .count { display: none; } .side-foot { border-top: 1px solid var(--line-soft); padding: 10px; flex-shrink: 0; } /* ── Main + topbar ───────────────────────────────────────────────────────── */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); border-radius: 10px; cursor: pointer; font-size: 1rem; transition: .12s; } .icon-btn:hover { color: var(--text); border-color: var(--text-3); } .crumb { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; } .crumb .sub { color: var(--text-3); font-weight: 500; font-size: .85rem; } .topbar .spacer { flex: 1; } .global-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; min-width: 220px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; color: var(--text-3); cursor: pointer; font-size: .85rem; } .global-search kbd { margin-left: auto; font: 600 .7rem var(--mono); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--text-3); } .content { flex: 1; overflow-y: auto; padding: 24px 28px 60px; } .content-inner { max-width: 1200px; margin: 0 auto; } .content.wide .content-inner { max-width: 1500px; } /* Page header */ .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-head h1 { font-size: 1.5rem; } .page-head p { margin: 4px 0 0; color: var(--text-2); font-size: .9rem; max-width: 60ch; } .page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; padding: 9px 15px; font: 700 .85rem/1 var(--font); cursor: pointer; white-space: nowrap; transition: .13s var(--ease); color: #fff; background: var(--elevated); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.brand { background: var(--brand); color: var(--brand-ink); } .btn.brand:hover { box-shadow: 0 6px 18px -6px var(--brand); } .btn.ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn.ghost:hover { border-color: var(--text-3); background: var(--panel-3); } .btn.green { background: var(--green); } .btn.red { background: var(--red); } .btn.amber { background: var(--amber); color: #1a1206; } .btn.blue { background: var(--blue); } .btn.subtle { background: var(--panel-3); border-color: var(--line); color: var(--text-2); } .btn.subtle:hover { color: var(--text); } .btn.sm { padding: 6px 11px; font-size: .78rem; border-radius: 8px; } .btn.lg { padding: 12px 22px; font-size: .95rem; } .btn.block { width: 100%; } .btn.icon { padding: 8px; width: 34px; } /* ── Forms ───────────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field > label { font-size: .8rem; font-weight: 600; color: var(--text-2); } .field .hint { font-size: .76rem; color: var(--text-3); } input, select, textarea { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; transition: border-color .12s, box-shadow .12s; } textarea { resize: vertical; min-height: 90px; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } input::placeholder, textarea::placeholder { color: var(--text-3); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .input-sm { padding: 7px 10px; font-size: .82rem; } /* Removable chips (CRM roles) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 99px; font-size: .82rem; } .chip-x { width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--line); color: var(--text-2); cursor: pointer; font-size: .95rem; line-height: 1; } .chip-x:hover { background: var(--red, #e5484d); color: #fff; } /* Toggle switch */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--line); border-radius: 99px; cursor: pointer; transition: .2s; } .switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: var(--brand); } .switch input:checked + .slider::before { transform: translateX(18px); } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-1); } .card.pad-lg { padding: 24px; } .card-title { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .card-title .sub { margin-left: auto; font-weight: 500; font-size: .8rem; color: var(--text-3); } .section-subtitle { margin: 0 0 6px; font-size: .86rem; font-weight: 800; color: var(--text); } .mini-list { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: .82rem; line-height: 1.55; } .mini-list li + li { margin-top: 5px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Stat cards */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; position: relative; overflow: hidden; } .stat .ic { position: absolute; right: 14px; top: 14px; font-size: 1.3rem; opacity: .5; } .stat .n { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .stat .l { color: var(--text-2); font-size: .82rem; margin-top: 8px; } .stat .trend { font-size: .74rem; margin-top: 8px; font-weight: 700; } .stat .trend.up { color: var(--green); } .stat .trend.down { color: var(--red); } .stat.accent { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); } .stat.accent .n { color: var(--brand); } .stat.warn .n { color: var(--amber); } /* ── Badges / tags ───────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); text-transform: capitalize; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; } .badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.pending { background: var(--amber-soft); color: var(--amber); } .badge.approved, .badge.paid { background: var(--green-soft); color: var(--green); } .badge.rejected { background: var(--red-soft); color: var(--red); } .badge.needs_followup { background: var(--violet-soft); color: var(--violet); } .badge.awaiting_payment { background: var(--cyan-soft); color: var(--cyan); } .badge.role { background: var(--blue-soft); color: #93c5fd; } .badge.neutral { background: var(--panel-3); color: var(--text-2); border-color: var(--line); } .badge.brand { background: var(--brand-soft); color: var(--brand); } /* ── Data rows / list ────────────────────────────────────────────────────── */ .list { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .12s, background .12s; } .row:hover { border-color: var(--text-3); } .row .grow { flex: 1; min-width: 0; } .row .name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .row .meta { color: var(--text-3); font-size: .8rem; margin-top: 3px; } .row .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--elevated); display: grid; place-items: center; font-weight: 800; color: var(--brand); } .avatar.sq { border-radius: 11px; } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); } table.data { width: 100%; border-collapse: collapse; font-size: .86rem; } table.data th { text-align: left; padding: 12px 16px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); background: var(--panel-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; } table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background .1s; } table.data tbody tr:hover { background: var(--panel-3); } /* ── Toolbar / filters ───────────────────────────────────────────────────── */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .grow { flex: 1; } .seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { border: 0; background: none; color: var(--text-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; font: 600 .8rem var(--font); white-space: nowrap; } .seg button.active { background: var(--brand); color: var(--brand-ink); } .seg button:not(.active):hover { color: var(--text); } .search-box { position: relative; flex: 1; min-width: 160px; max-width: 360px; } .search-box input { padding-left: 34px; } .search-box::before { content: "🔍"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: .8rem; opacity: .6; } /* ── Empty / loading states ──────────────────────────────────────────────── */ .empty { text-align: center; padding: 50px 20px; color: var(--text-3); background: var(--panel-2); border: 1px dashed var(--line); border-radius: var(--r-lg); } .empty .ic { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: .7; } .empty b { color: var(--text-2); display: block; margin-bottom: 4px; } .skeleton { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: 8px; } @keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Drawer ──────────────────────────────────────────────────────────────── */ .scrim { position: fixed; inset: 0; background: rgba(3,7,15,.6); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; } .scrim.open { opacity: 1; pointer-events: auto; } .drawer { /* height falls back to 100vh, then prefers 100dvh so the panel matches the *visible* viewport on mobile. With plain 100vh the fixed action bar below (.drawer-foot, which holds Save/Delete) is pushed behind the browser's bottom toolbar and can never be scrolled to — the body scrolls but the footer stays off-screen, leaving Delete unreachable. */ position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(560px, 94vw); z-index: 61; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform .28s var(--ease); display: flex; flex-direction: column; } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .drawer-head h2 { font-size: 1.1rem; flex: 1; min-width: 0; } .drawer-body { padding: 20px; overflow-y: auto; flex: 1; } .drawer-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; background: var(--panel-2); } /* The action rows injected into the footer wrap their buttons in a single div with a flex:1 spacer to push Delete to the end. Make that wrapper the flex row it expects to be so the spacer works and the buttons wrap (instead of overflowing) on narrow viewports. */ .drawer-foot > div { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; align-items: center; } /* ── Modal ───────────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 20px; } .modal.open { display: grid; } .modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); width: min(520px, 96vw); padding: 24px; animation: pop .2s var(--ease); } @keyframes pop { from { transform: scale(.96); opacity: 0; } } /* ── Command palette ─────────────────────────────────────────────────────── */ .palette { position: fixed; inset: 0; z-index: 90; display: none; justify-content: center; align-items: flex-start; padding-top: 12vh; } .palette.open { display: flex; } .palette-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); width: min(600px, 94vw); overflow: hidden; animation: pop .16s var(--ease); } .palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .palette-input input { border: 0; background: none; padding: 0; font-size: 1rem; } .palette-input input:focus { box-shadow: none; } .palette-results { max-height: 52vh; overflow-y: auto; padding: 8px; } .palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--text-2); } .palette-item .ic { width: 22px; text-align: center; } .palette-item .grp { margin-left: auto; font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .palette-item.sel, .palette-item:hover { background: var(--brand-soft); color: var(--brand); } /* ── Toasts ──────────────────────────────────────────────────────────────── */ .toasts { position: fixed; bottom: 22px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 380px; background: var(--elevated); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; padding: 13px 16px; box-shadow: var(--shadow-2); font-size: .88rem; animation: toastin .25s var(--ease); } .toast.err { border-left-color: var(--red); } .toast.ok { border-left-color: var(--green); } .toast .grow { flex: 1; } .toast button.undo { background: none; border: 0; color: var(--brand); font-weight: 700; cursor: pointer; font-size: .82rem; } .toast .x { background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: 1rem; } @keyframes toastin { from { transform: translateY(12px); opacity: 0; } } /* ── Kanban (applications) ───────────────────────────────────────────────── */ .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; } .lane { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 200px; } .lane-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: .82rem; text-transform: capitalize; } .lane-head .n { margin-left: auto; background: var(--panel-3); color: var(--text-2); border-radius: 99px; padding: 1px 8px; font-size: .72rem; } .lane-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; } .kard { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; cursor: pointer; transition: border-color .12s, transform .12s; } .kard:hover { border-color: var(--brand); transform: translateY(-1px); } .kard .kname { font-weight: 700; font-size: .88rem; } .kard .kmeta { color: var(--text-3); font-size: .76rem; margin-top: 3px; } .kard .krow { display: flex; align-items: center; gap: 6px; margin-top: 8px; } /* ── Media grid ──────────────────────────────────────────────────────────── */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .media-cell { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel-2); position: relative; } .media-cell .thumb { aspect-ratio: 1; background: var(--bg-2) center/cover no-repeat; display: grid; place-items: center; } .media-cell .thumb img, .media-cell .thumb video { width: 100%; height: 100%; object-fit: cover; } .media-cell .cap { padding: 8px 10px; font-size: .74rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-cell .ov { position: absolute; inset: 0; background: rgba(3,7,15,.72); opacity: 0; transition: .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .media-cell:hover .ov { opacity: 1; } .dropzone { border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 34px; text-align: center; color: var(--text-3); transition: .15s; cursor: pointer; } .dropzone.drag { border-color: var(--brand); background: var(--brand-soft); color: var(--text); } /* ── Timeline ────────────────────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 22px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line); } .tl-item { position: relative; padding: 0 0 16px; } .tl-item::before { content: ""; position: absolute; left: -22px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--panel); } .tl-item .tl-text { font-size: .85rem; } .tl-item .tl-meta { font-size: .74rem; color: var(--text-3); margin-top: 2px; } /* ── Detail definition lists ─────────────────────────────────────────────── */ dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: .85rem; } dl.kv dt { color: var(--text-3); text-transform: capitalize; } dl.kv dd { margin: 0; color: var(--text); word-break: break-word; } /* ── Embedded editors ────────────────────────────────────────────────────── */ .embed-frame { width: 100%; height: calc(100vh - var(--topbar-h) - 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); } .embed-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: var(--r); font-size: .84rem; color: var(--text); } /* ── Utilities ───────────────────────────────────────────────────────────── */ .muted { color: var(--text-3); } .small { font-size: .8rem; } .mono { font-family: var(--mono); } .flex { display: flex; align-items: center; gap: 10px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 28px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .hidden { display: none !important; } .divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; } .hstack { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Responsive ──────────────────────────────────────────────────────────── */ .side-scrim { display: none; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .side { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 80; transform: translateX(-100%); transition: transform .25s var(--ease); } .app.mobile-open .side { transform: none; } .app.mobile-open .side-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 79; } .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .content { padding: 18px 16px 60px; } .global-search { min-width: 0; width: 40px; padding: 0; justify-content: center; } .global-search span, .global-search kbd { display: none; } /* Let list rows wrap so action buttons (incl. Delete) drop to their own full-width line and stay tappable instead of being crushed into a narrow right-hand column. */ .row { flex-wrap: wrap; } .row .acts { width: 100%; gap: 8px; } .row .acts .btn { flex: 1 1 auto; min-height: 40px; } /* Wide data tables scroll horizontally rather than being clipped. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }