/* GLS-tech's look, over the common stylesheet's (ui/app.css): the colours of
   its mail pages. The logo is dark, for light pages; the left column shows it
   white. Roboto where the computer has it: ggwa-fs's CSP takes no web fonts. */
:root {
  --side-bg: #1b2538; --side-fg: #fff; --side-muted: #a9b4c4; --side-hover: #24304a; --side-active: #2c3c5a; --brand: #4f9bc2;
  --side-rw-bg: rgba(79,155,194,.22); --side-rw-fg: #cfe6f2; --side-rw-line: rgba(79,155,194,.6);
  --accent: #266a8f; --accent-hover: #1f5775; --accent-soft: #e9f0f4;
  --fg: #2c363a; --muted: #5f6c72; --line: #e1e4e6; --bg: #f4f4f4; --row-hover: #f1f3f4;
  --radius: 4px;
  --i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%232c363a' stroke-width='1.8' stroke-linejoin='round' d='M2.9 6.5A1.6 1.6 0 0 1 4.5 4.9h4.2l2.2 2.2h8.6a1.6 1.6 0 0 1 1.6 1.6v9.8a1.6 1.6 0 0 1-1.6 1.6h-15a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3C/svg%3E");
  --i-mount: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23266a8f' d='M2 6.5A2.5 2.5 0 0 1 4.5 4h4.6l2.2 2.2h8.2A2.5 2.5 0 0 1 22 8.7v9.8a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 18.5z'/%3E%3Cpath fill='%234f9bc2' d='M2 9.5h20v9a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 18.5z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M10.2 15.6l3.6-3.6M9.4 13.4l-1 1a1.9 1.9 0 0 0 2.7 2.7l1-1M14.6 14.2l1-1a1.9 1.9 0 0 0-2.7-2.7l-1 1'/%3E%3C/svg%3E");
  --i-desk-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='3.5' width='19' height='13' rx='1.8' fill='%23266a8f'/%3E%3Crect x='4.3' y='5.3' width='15.4' height='9.4' rx='.6' fill='%234f9bc2'/%3E%3Cpath fill='none' stroke='%231b2538' stroke-width='1.8' stroke-linecap='round' d='M8.5 20.5h7M12 16.5v4'/%3E%3C/svg%3E");
}
body { font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; }

/* the logo is the name: the word, over what the site is, on a lighter strip */
.brand { flex-direction: column; align-items: flex-start; gap: 5px; }
.brand img { width: auto; height: 22px; border-radius: 0; }
.brand b { display: none; }
.side .brand { background: #212a3b; border-bottom: 0; }
.side .brand img { filter: brightness(0) invert(1); }

/* the column: white icons, a plain tile for the page shown */
.side-links a::before { filter: brightness(0) invert(1); }
.projects a.active, .side-links a.active { border-left-color: var(--side-active); }

/* the pages: white under a grey header */
.top { background: var(--bg); }
.content { background: var(--card); }
.listing th, .admin table:not(.kv) th { background: var(--bg); }