/* ============================================================================ * styles.css — DB platform SPA * * One plain stylesheet, no framework, no build. The design tokens are the * original evil/angel pair: near-black surfaces with a cyan accent and a * magenta brand mark, or the light counterpart. Toggle = data-theme on . * ==========================================================================*/ :root, :root[data-theme="evil"] { --font-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, monospace; --color-bg: #050505; --color-surface: #111111; --color-elevated: #181818; --color-border: #292929; --color-accent: #0cf; --color-accent-strong: #0ae; --color-brand: #f0f; --color-muted: #9da3ad; --color-text: #f3f5f7; --color-ink-strong: #020204; --color-ok: #2ecc71; --color-warn: #f1c40f; --color-err: #ff5566; --shadow-soft: 0 10px 35px rgba(0, 0, 0, 0.45); --shadow-focus: 0 0 0 2px rgba(0, 204, 255, 0.35); --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-xl: 24px; --page-max-width: 1200px; --page-pad-x: clamp(1.2rem, 4vw, 3rem); --page-pad-y: clamp(1rem, 3vw, 2.75rem); --gap-sm: 0.75rem; --gap-md: 1.25rem; --gap-lg: clamp(1.5rem, 3vw, 2.75rem); --transition-base: 160ms cubic-bezier(0.4, 0, 0.2, 1); } :root[data-theme="angel"] { --color-bg: #e9edf5; --color-surface: #f7f8fc; --color-elevated: #ffffff; --color-border: #c8d2e6; --color-accent: #0c63f3; --color-accent-strong: #0a4ccd; --color-muted: #4e5668; --color-text: #0b0f1c; --color-brand: #a652ff; --color-ink-strong: #ffffff; --shadow-soft: 0 12px 32px rgba(10, 32, 66, 0.2); --shadow-focus: 0 0 0 2px rgba(12, 99, 243, 0.22); } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; font-family: var(--font-base); background: var(--color-bg); color: var(--color-text); transition: background var(--transition-base), color var(--transition-base); } .mono { font-family: var(--font-mono); font-size: 0.82em; word-break: break-all; } .muted { color: var(--color-muted); } /* --- header ---------------------------------------------------------------*/ .site-header { display: flex; align-items: center; gap: var(--gap-md); padding: 0.85rem var(--page-pad-x); border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 10; } .brand { /* a button now: click = go home */ appearance: none; border: none; background: none; padding: 0.15rem 0.3rem; display: flex; align-items: baseline; gap: 0.45rem; font: inherit; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; border-radius: var(--radius-sm); } .brand:hover .brand-word { color: var(--color-text); } .brand:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .brand-mark { color: var(--color-brand); font-size: 1.25rem; } .brand-word { color: var(--color-muted); font-weight: 500; font-size: 1.25rem; transition: color var(--transition-base); } .site-nav { display: flex; gap: 0.35rem; margin-right: auto; } .nav-link { appearance: none; border: 1px solid transparent; background: transparent; color: var(--color-muted); font: inherit; padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base); } .nav-link:hover { color: var(--color-text); } .nav-link.is-active { color: var(--color-accent); border-color: var(--color-border); background: var(--color-elevated); } .header-actions { display: flex; align-items: center; gap: var(--gap-sm); } .chip { padding: 0.25rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-elevated); font-size: 0.8rem; color: var(--color-accent); } /* --- buttons ----------------------------------------------------------------*/ .accent-btn, .ghost-btn { appearance: none; font: inherit; padding: 0.45rem 1.1rem; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base); } .accent-btn { border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-ink-strong); font-weight: 600; } .accent-btn:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); } .accent-btn:disabled, .ghost-btn:disabled { opacity: 0.45; cursor: wait; } .ghost-btn { border: 1px solid var(--color-border); background: transparent; color: var(--color-text); } .ghost-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .link-btn { appearance: none; border: none; background: none; color: var(--color-accent); font: inherit; font-size: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { color: var(--color-accent-strong); } :is(.accent-btn, .ghost-btn, .nav-link, .link-btn, input, select):focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* --- page / cards -----------------------------------------------------------*/ .page { max-width: var(--page-max-width); margin: 0 auto; padding: var(--page-pad-y) var(--page-pad-x); } .view { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .view[hidden] { display: none; } #view-admin { grid-template-columns: 1fr; } /* Grid/flex children default to min-width:auto, which lets a wide table BLOW THE CARD OUT of the * viewport instead of triggering its overflow scroll. Zero it: the card can never outgrow the page. */ .view > .card { min-width: 0; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: var(--gap-md) var(--gap-lg); } .card h2 { margin: 0 0 var(--gap-sm); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; } .card-tools { display: flex; align-items: center; gap: var(--gap-sm); } .tool { color: var(--color-muted); font-size: 0.9rem; } .kv { display: flex; gap: 0.9rem; margin: 0.45rem 0; align-items: baseline; } .kv > span { min-width: 5.5rem; color: var(--color-muted); font-size: 0.85rem; } .kv > b { font-weight: 600; } .dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.45em; } .dot-ok { background: var(--color-ok); } .dot-err { background: var(--color-err); } .dot-wait { background: var(--color-warn); } /* --- inputs -----------------------------------------------------------------*/ .field { display: block; margin: 0.7rem 0; color: var(--color-muted); font-size: 0.88rem; } input, select { font: inherit; width: 100%; margin-top: 0.3rem; padding: 0.55rem 0.75rem; color: var(--color-text); background: var(--color-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition-base); } select { width: auto; padding: 0.3rem 0.5rem; } input:hover, select:hover { border-color: var(--color-accent); } /* --- table ------------------------------------------------------------------*/ .table-wrap { overflow-x: auto; max-width: 100%; } .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table th, .table td { text-align: left; vertical-align: top; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--color-border); } .table th { color: var(--color-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .table td.mono { font-size: 0.78rem; } .table tbody tr:hover { background: var(--color-elevated); } /* Dense stacked cells: the wide strings (email, uid) wrap INSIDE their column instead of widening it. */ .cell-body { min-width: 0; } .cell-main { font-weight: 600; overflow-wrap: anywhere; } .cell-sub { color: var(--color-muted); font-size: 0.78rem; margin-top: 0.15rem; overflow-wrap: anywhere; } .user-cell { min-width: 12rem; max-width: 24rem; } .badge-cell { white-space: nowrap; } .badge-cell .badge { margin-right: 0.3rem; } .badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid var(--color-border); font-size: 0.75rem; } .badge-OWNER { color: var(--color-warn); border-color: var(--color-warn); font-weight: 700; } .badge-ADMIN { color: var(--color-brand); border-color: var(--color-brand); } .badge-PUBLISHER { color: var(--color-accent); border-color: var(--color-accent); } .badge-VIEWER { color: var(--color-muted); } .badge-ACTIVE { color: var(--color-ok); border-color: var(--color-ok); } .badge-INVITED { color: var(--color-warn); border-color: var(--color-warn); } .badge-DISABLED, .badge-BANNED { color: var(--color-err); border-color: var(--color-err); } .table-foot { display: flex; align-items: center; gap: var(--gap-md); padding-top: var(--gap-sm); } /* --- admin: invite form ------------------------------------------------------*/ .invite-row { display: flex; gap: var(--gap-sm); align-items: center; flex-wrap: wrap; } .invite-row input[type="email"] { flex: 1 1 16rem; min-width: 12rem; } /* temp-password reveal: the password is the point of the screen — make it big and grabbable */ .secret-card { width: min(560px, 94vw); } .secret-card h2 { color: var(--color-text); text-transform: none; letter-spacing: 0; font-size: 1.35rem; } .secret-box { margin: var(--gap-md) 0; padding: var(--gap-md); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-elevated); text-align: center; } .secret-value { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700; letter-spacing: 0.12em; color: var(--color-accent); user-select: all; overflow-wrap: anywhere; } /* --- admin: sortable headers --------------------------------------------------- * The arrow is a small chevron that lives dimmed on every sortable column, turns * accent-colored and points the way when that column drives the order. */ .th-sort { appearance: none; border: none; background: none; padding: 0; font: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; } .th-sort:hover { color: var(--color-text); } .th-sort:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); } .sort-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.35; transition: transform var(--transition-base), opacity var(--transition-base); } .th-sort.is-asc .sort-arrow { opacity: 1; color: var(--color-accent); transform: rotate(180deg); } .th-sort.is-desc .sort-arrow { opacity: 1; color: var(--color-accent); } .th-sort.is-asc, .th-sort.is-desc { color: var(--color-accent); } /* --- admin: column-settings popover ------------------------------------------*/ .icon-btn { padding: 0.45rem 0.7rem; } .popover { position: relative; } .popover-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 12.5rem; padding: 0.6rem 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); z-index: 20; } .popover-title { margin: 0 0 0.4rem; color: var(--color-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .popover-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; font-size: 0.88rem; cursor: pointer; } .popover-item input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--color-accent); } /* --- admin: per-row actions menu (kebab) --------------------------------------*/ .row-actions { text-align: left; width: 2.5rem; } .kebab-btn { appearance: none; border: 1px solid transparent; background: transparent; color: var(--color-muted); font: inherit; font-size: 1.05rem; line-height: 1; padding: 0.2rem 0.55rem; border-radius: var(--radius-xs); cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base); } .kebab-btn:hover { color: var(--color-accent); border-color: var(--color-border); } .kebab-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .menu { position: fixed; min-width: 14rem; padding: 0.35rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); z-index: 40; } .menu-item { appearance: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-sm); width: 100%; border: none; background: none; color: var(--color-text); font: inherit; font-size: 0.88rem; text-align: left; padding: 0.45rem 0.6rem; border-radius: var(--radius-xs); cursor: pointer; } .menu-item:hover { background: var(--color-elevated); color: var(--color-accent); } .menu-item.is-danger { color: var(--color-err); } .menu-item.is-danger:hover { background: var(--color-elevated); color: var(--color-err); } .menu-hint { color: var(--color-muted); font-size: 0.72rem; white-space: nowrap; } /* --- files view ----------------------------------------------------------------*/ .files-tools { flex-wrap: wrap; } #files-search { width: 12rem; margin-top: 0; } .seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .seg-btn { appearance: none; border: none; background: transparent; color: var(--color-muted); font: inherit; padding: 0.35rem 0.7rem; cursor: pointer; transition: background var(--transition-base), color var(--transition-base); } .seg-btn + .seg-btn { border-left: 1px solid var(--color-border); } .seg-btn.is-active { background: var(--color-elevated); color: var(--color-accent); } .seg-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .dropzone { margin: var(--gap-md) 0; padding: clamp(1.5rem, 5vw, 3rem); border: 2px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base); } .dropzone:hover, .dropzone:focus-visible, .dropzone.is-dragover { border-color: var(--color-accent); background: var(--color-elevated); outline: none; } .dropzone-glyph { font-size: 2rem; color: var(--color-accent); margin-bottom: 0.4rem; } .dropzone-main { margin: 0.2rem 0; } .dropzone p { margin: 0.25rem 0; } .files-empty { text-align: center; padding: var(--gap-md) 0 var(--gap-sm); } .files-empty-glyph { font-size: 2.2rem; margin-bottom: 0.3rem; } .files-empty-title { margin: 0.2rem 0; font-weight: 600; } .files-empty .muted { max-width: 34rem; margin: 0.3rem auto 0; } /* breadcrumbs */ .crumbs { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); } .crumb { appearance: none; border: none; background: none; font: inherit; color: var(--color-muted); cursor: pointer; padding: 0.1rem 0.2rem; border-radius: var(--radius-xs); } .crumb:hover { color: var(--color-accent); } .crumb:last-child { color: var(--color-text); } .crumb-sep { color: var(--color-border); } /* upload progress list */ .uploads { list-style: none; margin: var(--gap-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .upload-row { display: flex; align-items: center; gap: var(--gap-sm); font-size: 0.85rem; } .upload-name { flex: 0 0 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--color-elevated); overflow: hidden; } .upload-fill { height: 100%; width: 0; background: var(--color-accent); transition: width 120ms linear; } .upload-row.is-done .upload-fill { background: var(--color-ok); } .upload-row.is-error .upload-name { color: var(--color-err); } .upload-row.is-error .upload-fill { background: var(--color-err); width: 100% !important; } /* file/folder cards */ .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap-md); margin-top: var(--gap-md); } .files-grid.is-list { grid-template-columns: 1fr; } .file-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: var(--gap-md) var(--gap-sm) var(--gap-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--transition-base), background var(--transition-base); } .file-card:hover { border-color: var(--color-accent); background: var(--color-elevated); } .folder-card { cursor: pointer; } .file-icon { font-size: 2.1rem; line-height: 1; } .file-name { font-size: 0.85rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; max-height: 2.6em; overflow: hidden; } .file-meta { font-size: 0.72rem; color: var(--color-muted); text-align: center; } .file-actions { display: flex; gap: 0.3rem; margin-top: 0.2rem; flex-wrap: wrap; justify-content: center; } .file-open { appearance: none; border: 1px solid var(--color-border); background: transparent; color: var(--color-muted); font: inherit; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-xs); cursor: pointer; } .file-open:hover { border-color: var(--color-accent); color: var(--color-accent); } .file-x { position: absolute; top: 0.3rem; right: 0.4rem; appearance: none; border: none; background: none; color: var(--color-muted); font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--transition-base), color var(--transition-base); } .file-card:hover .file-x { opacity: 1; } .file-x:hover { color: var(--color-err); } .files-grid.is-list .file-card { flex-direction: row; align-items: center; text-align: left; padding: 0.5rem var(--gap-md); } .files-grid.is-list .file-icon { font-size: 1.5rem; } .files-grid.is-list .file-name { text-align: left; flex: 1; max-height: none; } .files-grid.is-list .file-meta { text-align: left; } .files-grid.is-list .file-actions { margin: 0; } /* --- media viewer (lightbox) ---------------------------------------------------*/ .viewer-overlay { padding: 0; background: rgba(0, 0, 0, 0.85); } .viewer-shell { display: flex; flex-direction: column; width: 100vw; height: 100vh; } .viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding: 0.7rem var(--gap-lg); border-bottom: 1px solid var(--color-border); } .viewer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viewer-actions { display: flex; gap: var(--gap-sm); } .viewer-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: var(--gap-md); } .viewer-media { max-width: 100%; max-height: 100%; } .viewer-stage video, .viewer-stage img { max-width: 100%; max-height: 84vh; } .viewer-stage iframe { width: min(1000px, 100%); height: 84vh; border: none; background: #fff; border-radius: var(--radius-sm); } /* --- meters (me + system) ------------------------------------------------------*/ .meter { height: 8px; border-radius: 999px; background: var(--color-elevated); overflow: hidden; margin: 0.5rem 0; } .meter-fill { height: 100%; width: 0; background: var(--color-accent); transition: width var(--transition-base); } .meter-fill.is-full { background: var(--color-err); } /* --- me view -------------------------------------------------------------------*/ .me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap-md); } .me-field { display: flex; flex-direction: column; gap: 0.2rem; } .me-wide { grid-column: 1 / -1; } .me-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); } .me-value { font-weight: 600; overflow-wrap: anywhere; } /* --- admin system card (bottom of the admin view): Users · Files · Disk · DB ---*/ .sys-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); } @media (max-width: 560px) { .sys-panels { grid-template-columns: 1fr; } } .sys-panel { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--gap-md); border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: var(--color-elevated); } .sys-panel-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); } .sys-ico { font-size: 1rem; line-height: 1; filter: saturate(0.9); } /* the running total / percentage pushed to the right of a panel header */ .sys-pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-text); font-size: 0.85rem; } /* stat panels (Users, Files): one big number */ .sys-panel--stat .sys-big { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .sys-panel--stat .sys-sub { font-size: 0.75rem; color: var(--color-muted); } /* detail panels (Disk, Database): a labelled row list */ .sys-rows { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.15rem; } .sys-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; } .sys-row span { color: var(--color-muted); } .sys-row b { font-weight: 600; font-variant-numeric: tabular-nums; } /* --- login overlay (the SPA's message center too) ---------------------------*/ .overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--gap-md); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); z-index: 50; } .overlay[hidden] { display: none; } /* --- centered alert modal (upload failures etc.) ------------------------------*/ .alert-card { width: min(460px, 92vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 2.2rem 1.8rem 1.8rem; border-top: 4px solid var(--color-accent); } .alert-card.is-error { border-top-color: var(--color-err); } .alert-card.is-ok { border-top-color: var(--color-ok, #2ec26a); } .alert-icon { font-size: 3.2rem; line-height: 1; } .alert-card h2 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 1.5rem; } .alert-card.is-error h2 { color: var(--color-err); } .alert-message { margin: 0; color: var(--color-muted); font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; } .alert-card .accent-btn { min-width: 140px; margin-top: 0.5rem; } .login-card { width: min(420px, 92vw); } .login-card h2 { color: var(--color-text); text-transform: none; letter-spacing: 0; font-size: 1.3rem; } .login-msg { margin: 0.4rem 0 0.8rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.9rem; } .login-msg.is-error { border-color: var(--color-err); color: var(--color-err); } .login-msg.is-info { border-color: var(--color-accent); color: var(--color-accent); } .login-msg.is-ok { border-color: var(--color-ok); color: var(--color-ok); } .login-actions { display: flex; gap: var(--gap-sm); margin-top: var(--gap-md); } .login-foot { margin: var(--gap-md) 0 0; font-size: 0.78rem; } .login-foot .mono { font-size: 0.72rem; } /* --- toast ------------------------------------------------------------------*/ .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); max-width: min(560px, 92vw); padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-elevated); color: var(--color-text); box-shadow: var(--shadow-soft); font-size: 0.9rem; z-index: 60; } .toast.is-error { border-color: var(--color-err); } .toast.is-ok { border-color: var(--color-ok); } /* --- small screens ----------------------------------------------------------*/ @media (max-width: 720px) { .site-header { flex-wrap: wrap; gap: var(--gap-sm); } .site-nav { order: 3; width: 100%; } .kv > span { min-width: 4rem; } .card { padding: var(--gap-md); } /* The users table becomes a stack of row-cards: no columns to overflow, every value * carries its label (data-label -> ::before), actions become full-width tap targets. */ #users-table thead { display: none; } #users-table, #users-table tbody, #users-table tr, #users-table td { display: block; width: 100%; } #users-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-elevated); margin-bottom: var(--gap-sm); padding: 0.3rem 0; } #users-table td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-sm); border-bottom: none; padding: 0.3rem 0.8rem; } #users-table td::before { content: attr(data-label); flex: 0 0 5.5rem; color: var(--color-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } #users-table .cell-body { flex: 1; text-align: right; } .user-cell { max-width: none; min-width: 0; } .badge-cell { white-space: normal; } .kebab-btn { padding: 0.35rem 0.8rem; border-color: var(--color-border); } .invite-row input[type="email"] { flex-basis: 100%; } .table-foot { flex-wrap: wrap; } .files-tools { width: 100%; } #files-search { flex: 1 1 100%; width: auto; } }