/* ========================================================================== STYLES · native CSS only (no framework, no build step) -------------------------------------------------------------------------- Copied from legacy-crud-template: define "design tokens" as CSS variables in :root, then build every component from those tokens. Re-skin the whole app by editing ~12 variables; the dark theme just re-declares them. New here (vs the legacy template): the 2x2 entry grid (.form-grid-2) and the segmented Receive/Issue selector (.seg). Everything else is the template. ========================================================================== */ :root { /* brand + surfaces */ --green: #2f7d32; /* brand green — frame / logo / accents */ --green-dk: #1f5c22; --paper: #eef1f6; /* app background */ --surface: #ffffff; /* cards / panels */ --surface-2: #f3f6fa; /* inset readouts / inputs */ --ink: #1f2a37; /* primary text */ --muted: #64748b; /* labels / secondary text */ --line: #d8e0ea; /* hairline borders */ /* actions */ --accent: #33509b; /* navy-blue — primary buttons */ --accent-dk: #27407e; --danger: #d23a4c; /* delete / destructive */ --ok: #12885a; /* success */ --toast-bg: #1f2a37; /* neutral toast background */ /* shape + type */ --radius: 10px; --radius-sm: 7px; --sidebar-w: 212px; --sidebar-w-collapsed: 64px; --header-h: 58px; --footer-h: 48px; /* reserved height for the always-visible footer bar */ --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; /* hints native controls (date picker, scrollbars) */ } /* ========================================================================== DARK THEME — just re-declare the tokens; every component re-themes for free. app.js adds `dark` to and remembers it in localStorage. ========================================================================== */ body.dark { --green: #46b555; --green-dk: #3a9647; --paper: #0e1621; --surface: #16212e; --surface-2: #0f1a25; --ink: #e6ecf3; --muted: #93a2b3; --line: #273543; --accent: #6c82ff; --accent-dk: #566fe6; --danger: #f26173; --ok: #3fcb93; --toast-bg: #1f2a37; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.5; /* CSS Grid lays out the whole app: header + footer span full width, sidebar sits on the left of the main content. */ min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; transition: grid-template-columns .2s ease; } body.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } /* ---------- header ---------- */ .app-header { grid-area: header; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: var(--surface); border-bottom: 3px solid var(--green); box-shadow: 0 1px 3px rgba(0,0,0,.04); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: baseline; gap: 9px; } .brand__logo { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--green); } .brand__sub { font-size: 13px; color: var(--muted); } .app-header__meta { margin-left: auto; text-align: right; line-height: 1.25; display: flex; flex-direction: column; } .header-page { font-weight: 600; font-size: 14px; } .icon-btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 18px; line-height: 1; width: 38px; height: 38px; border-radius: var(--radius-sm); cursor: pointer; } .icon-btn:hover { border-color: var(--green); } /* ---------- sidebar ---------- */ .sidebar { grid-area: sidebar; background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h) - var(--footer-h)); overflow-y: auto; } .nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .nav__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background .12s ease, color .12s ease; } .nav__link:hover { background: var(--surface-2); } .nav__link.is-active { background: var(--green); color: #fff; } .nav__icon { font-size: 17px; flex: none; width: 22px; text-align: center; } /* ---------- theme section + toggle switch ---------- */ .nav__section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .nav__section-title { margin: 0 0 6px; padding: 0 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .theme-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: none; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; } .theme-toggle:hover { border-color: var(--green); } .theme-toggle__text { flex: 1; text-align: left; white-space: nowrap; } .switch { flex: none; width: 38px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .18s ease; } .switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .18s ease; } body.dark .switch { background: var(--accent); } body.dark .switch__knob { transform: translateX(18px); } /* collapsed rail: hide labels, centre icons */ body.collapsed .nav__label, body.collapsed .brand__sub { display: none; } body.collapsed .nav__link, body.collapsed .theme-toggle { justify-content: center; gap: 0; } body.collapsed .nav__section-title, body.collapsed .theme-toggle__text, body.collapsed .theme-toggle .switch { display: none; } /* ---------- main / footer ---------- */ .app-main { grid-area: main; padding: 22px 24px 40px; overflow-x: hidden; } .app-footer { grid-area: footer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 24px; background: var(--surface); border-top: 3px solid var(--green); color: var(--muted); font-size: 12.5px; /* Mirror of the header: pinned to the bottom of the viewport and always on top, so it stays visible while the page scrolls and the side menu (a lower layer, and shortened to end above this bar) can never cover its content. */ position: sticky; bottom: 0; z-index: 40; min-height: var(--footer-h); } /* ========================================================================== PAGE PIECES ========================================================================== */ .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; } .page-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .page-head__spacer { flex: 1; } /* ---------- segmented Receive / Issue selector ---------- */ .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); } .seg__btn { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); background: transparent; border: 0; cursor: pointer; padding: 8px 16px; line-height: 1.2; transition: background .15s ease, color .15s ease; } .seg__btn + .seg__btn { border-left: 1px solid var(--line); } .seg__btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .seg__btn.is-active { background: var(--accent); color: #fff; } /* ---------- entry card + 2x2 field grid ---------- */ .entry-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; max-width: 720px; } .form-grid-2 { display: grid; gap: 16px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); /* the 2x2 matrix */ } .field-group { display: flex; flex-direction: column; gap: 5px; } .field-group > label { font-size: 12.5px; color: var(--muted); font-weight: 600; } /* ---------- inputs ---------- */ .num, .sel, .txt, .date, .txt-line, .num-line { font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; } .sel, .date, .txt, .txt-line, .num-line { width: 100%; } .num { width: 78px; text-align: center; } /* hide number spinners (plain box + placeholder) */ .num-line::-webkit-outer-spin-button, .num-line::-webkit-inner-spin-button, .num::-webkit-outer-spin-button, .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .num-line, .num { -moz-appearance: textfield; appearance: textfield; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; } /* ---------- buttons ---------- */ .btn { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 18px; cursor: pointer; display: inline-block; text-decoration: none; text-align: center; line-height: 1.2; transition: transform .04s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-dk); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 35%, transparent); } .btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); } .btn--danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); } .form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } /* ---------- data table controls + table (View Records) ---------- */ .table-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; } .control { display: flex; align-items: center; gap: 7px; } .control > label { font-size: 12.5px; color: var(--muted); font-weight: 600; } .control .date { width: auto; } .muted-note { font-size: 12.5px; color: var(--muted); } .table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; /* wide tables scroll, page never does */ } table.data-table { border-collapse: collapse; width: 100%; font-size: 13px; } .data-table th, .data-table td { padding: 9px 11px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); } .data-table thead th { background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; } .data-table tbody tr:hover { background: var(--surface-2); } .data-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; } .row-actions { display: flex; gap: 6px; } .row-actions .btn { padding: 5px 10px; font-size: 12px; } .empty-state { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; } /* ---------- dashboard tiles (Home) ---------- */ .tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .tile { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: border-color .15s ease, transform .05s ease; } .tile:hover { border-color: var(--green); } .tile:active { transform: translateY(1px); } .tile__icon { font-size: 26px; } .tile__name { font-weight: 650; margin-top: 8px; } .tile__desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; } /* ---------- toast notifications ---------- */ .toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--toast-bg); color: #fff; padding: 11px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.22); animation: toast-in .18s ease; max-width: 320px; } .toast--ok { background: var(--ok); } .toast--error { background: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ========================================================================== RESPONSIVE — sidebar becomes an off-canvas drawer; the 2x2 grid stacks. ========================================================================== */ @media (max-width: 820px) { body { grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; } .sidebar { position: fixed; top: var(--header-h); left: 0; z-index: 30; width: var(--sidebar-w); height: calc(100vh - var(--header-h) - var(--footer-h)); transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0,0,0,.12); } body.nav-open .sidebar { transform: translateX(0); } body.collapsed { grid-template-columns: 1fr; } .form-grid-2 { grid-template-columns: 1fr; } /* stack the 2x2 into 1 column */ } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ========================================================================== AUTH + USER + ADMIN (login page, sidebar user block, admin table extras) Added for the login-management feature; nothing above depends on it. ========================================================================== */ /* login / set-password: standalone pages get a centred card (they set body.auth, which overrides the app-shell grid). */ body.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .auth-wrap { width: 100%; max-width: 400px; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 8px 30px rgba(0,0,0,.08); } .auth-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .auth-title { margin: 0 0 16px; font-size: 20px; font-weight: 700; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .btn--wide { width: 100%; } /* red banner for login/admin errors (matches the existing .banner--ok) */ .banner--error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); } /* sidebar "signed in as" block + sign-out button */ .nav__user { display: flex; align-items: center; gap: 12px; padding: 4px 12px 8px; } .nav__user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav__signout { margin-top: 8px; } /* reuses .theme-toggle styling for a matching full-width button */ /* admin page: add-user section title + rights checkbox group */ .section-title { margin: 26px 0 12px; font-size: 16px; font-weight: 700; } .rights-set { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; } .rights-set legend { font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 6px; } .rights-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }