/* iPad Inventory — Mater Academy Lions, green & gold. Monospace for anything you'd scan or compare. Nothing decorative. */ :root { --mater-green: #075130; --mater-green-2: #0a6b40; --mater-gold: #FBD625; /* Stat-tile icon badges -- fixed colors, same in both themes on purpose. These sit as solid squares with white icons on top; if they flipped with the theme the way text colors do, the icon would go invisible in one of the two modes (the same bug fixed twice already this project, in .btn.gold and .sidebar-badge -- not repeating it here). */ --badge-green: #075130; --badge-teal: #0a7a63; --badge-gold: #b8860b; --badge-amber: #a8620a; --badge-red: #a5303a; --badge-gray: #6b7570; --mater-gold-2: #E0BC12; --ink: #0d2117; --ink-2: #5b6462; --ink-3: #8b9390; --paper: #f6f6f2; --card: #ffffff; --rule: #d9dcd3; --rule-2: #eaece5; --live: #075130; --live-bg: #e2ede4; --flag: #9a6a00; --flag-bg: #fdf1cd; --dead: #93202a; --dead-bg: #f8e4e5; --empty-bg: #eceae5; --key: #6b5300; --key-bg: #fbf0c8; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Dark theme -- same token names, different values, so every rule below that references var(--x) just picks it up automatically. Toggled via [data-theme="dark"] on , set by assets/theme.js before first paint to avoid a flash of the wrong theme. */ [data-theme="dark"] { --ink: #eef2ef; --ink-2: #a9b5ae; --ink-3: #6f7d75; --paper: #0f1613; --card: #182019; --rule: #2b352e; --rule-2: #212a24; --live: #3ddc84; --live-bg: #16281d; --flag: #f2c94c; --flag-bg: #2b2410; --dead: #f27b7b; --dead-bg: #301518; --empty-bg: #1c231f; --key: #e0c14a; --key-bg: #2b2410; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); transition: background-color .15s ease, color .15s ease; } a { color: var(--mater-green-2); } /* ---------------------------------------------------------------- chrome */ /* ================================================================ SIDEBAR SHELL Desktop: a persistent left rail, collapsible to icons-only. Mobile: the same sidebar becomes an off-canvas drawer, opened by the hamburger button in the topbar and closed by tapping the backdrop or a link. One markup structure, two behaviors, switched by media query + JS (assets/sidebar.js). */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 260px; flex-shrink: 0; background: var(--mater-green); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; border-right: 3px solid var(--mater-gold); transition: width .18s ease; z-index: 30; } html.sidebar-collapsed-init .sidebar { width: 64px; } .sidebar.collapsed { width: 64px; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; color: #fff; text-decoration: none; flex-shrink: 0; } .sidebar-brand img { height: 34px; width: 34px; flex-shrink: 0; } .sidebar-brand-txt { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .sidebar.collapsed .sidebar-brand-txt, html.sidebar-collapsed-init .sidebar-brand-txt { display: none; } .sidebar-nav { display: flex; flex-direction: column; padding: 10px 0; flex: 1; } .sidebar-link { display: flex; align-items: center; gap: 15px; padding: 14px 18px; color: #cfe4d5; text-decoration: none; font-size: 16px; font-weight: 500; border-left: 3px solid transparent; white-space: nowrap; } .sidebar-link:hover { color: #fff; background: rgba(255,255,255,.06); } .sidebar-link.on { color: var(--mater-gold); border-left-color: var(--mater-gold); background: rgba(255,255,255,.05); font-weight: 700; } .sidebar-sublink { display: flex; align-items: center; gap: 15px; padding: 10px 18px 10px 40px; color: #a9c9b1; text-decoration: none; font-size: 14px; font-weight: 500; border-left: 3px solid transparent; white-space: nowrap; } .sidebar-sublink:hover { color: #fff; background: rgba(255,255,255,.06); } .sidebar-sublink.on { color: var(--mater-gold); border-left-color: var(--mater-gold); background: rgba(255,255,255,.05); font-weight: 700; } .sidebar.collapsed .sidebar-sublink, html.sidebar-collapsed-init .sidebar-sublink { display: none; } .sidebar-icon { width: 20px; text-align: center; flex-shrink: 0; font-size: 17px; } .sidebar-sublink .sidebar-icon { font-size: 14px; } .sidebar-label { display: flex; align-items: center; gap: 8px; } .sidebar.collapsed .sidebar-label, html.sidebar-collapsed-init .sidebar-label { display: none; } .sidebar-badge { background: var(--mater-gold); color: #16210f; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; } .sidebar-collapse-btn { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.15); color: #a9c4b2; padding: 12px; cursor: pointer; font-size: 15px; flex-shrink: 0; } .sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,.06); } .sidebar.collapsed .sidebar-collapse-icon { display: inline-block; transform: rotate(180deg); } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 15; } .topbar-toggle { background: transparent; border: 1px solid var(--rule); color: var(--ink-2); width: 34px; height: 34px; border-radius: 4px; font-size: 15px; cursor: pointer; display: none; /* shown only on mobile, see media query below */ } .topbar-toggle:hover { background: var(--rule-2); } .topbar .spacer { flex: 1; } .topbar .theme-toggle { border-color: var(--rule); color: var(--ink-2); } .topbar .theme-toggle:hover { background: var(--rule-2); } .topbar .who { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .05em; white-space: nowrap; } .topbar .who a { color: var(--ink-3); margin-left: 10px; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; } /* Mobile: sidebar becomes an off-canvas drawer instead of a persistent rail. */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; width: 250px; transform: translateX(-100%); transition: transform .22s ease; } html.sidebar-collapsed-init .sidebar { width: 260px; } /* collapse state is desktop-only */ .sidebar.mobile-open { transform: translateX(0); } .sidebar-brand-txt, .sidebar-label { display: flex !important; } .sidebar-collapse-btn { display: none; } /* off-canvas is either open or closed, no icon-rail state */ .topbar-toggle { display: flex; align-items: center; justify-content: center; } .sidebar-backdrop.show { display: block; } } .wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 26px 24px 80px; } h1 { font-size: 21px; margin: 0 0 3px; letter-spacing: -.01em; } .sub { color: var(--ink-2); font-size: 13px; margin: 0 0 22px; } /* ------------------------------------------------------------ scan panel */ /* The signature. A single hot input that owns the screen. */ .scan { background: var(--mater-green); border-radius: 10px; padding: 30px 26px; margin-bottom: 24px; border-bottom: 3px solid var(--mater-gold); } .scan label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a9c4b2; margin-bottom: 12px; } .scan input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid #1a6b45; color: #fff; font-family: var(--mono); font-size: clamp(24px, 5vw, 40px); font-weight: 600; letter-spacing: .04em; padding: 6px 0 12px; outline: none; } .scan input::placeholder { color: #3d7657; } .scan input:focus { border-bottom-color: var(--mater-gold); } .scan .hint { margin-top: 12px; font-size: 12px; color: #a9c4b2; } /* ------------------------------------------------------------------ card */ .card { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .card h2 { font-size: 12px; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; font-weight: 700; } /* The label strip: the identifiers, laid out like an asset tag. */ .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin-bottom: 16px; } .strip div { background: var(--card); padding: 11px 13px; } .strip dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .strip dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600; word-break: break-all; } .strip dd.none { color: var(--ink-3); font-weight: 400; } /* ------------------------------------------------------------------ pill */ .pill { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .pill.live { background: var(--live-bg); color: var(--live); } .pill.flag { background: var(--flag-bg); color: var(--flag); } .pill.dead { background: var(--dead-bg); color: var(--dead); } .pill.key { background: var(--key-bg); color: var(--key); } .pill.mute { background: var(--rule-2); color: var(--ink-2); } /* ------------------------------------------------------------- cart bays */ /* The other signature: a cart drawn as its physical bays. */ .bays { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .bay { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 7px 9px; background: var(--card); text-decoration: none; color: var(--ink); display: block; min-height: 62px; border-left: 3px solid var(--rule); } .bay:hover { border-color: var(--ink-2); } .bay .n { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; } .bay .s { font-family: var(--mono); font-size: 11px; font-weight: 600; margin-top: 4px; word-break: break-all; line-height: 1.35; } .bay.live { border-left-color: var(--live); } .bay.flag { border-left-color: var(--flag); background: var(--flag-bg); } .bay.dead { border-left-color: var(--dead); background: var(--dead-bg); } .bay.empty { background: var(--empty-bg); border-style: dashed; border-left-style: dashed; } .bay.empty .s { color: var(--ink-3); font-weight: 400; } /* ------------------------------------------------------------- fill meter */ .meter { height: 5px; background: var(--rule-2); border-radius: 3px; overflow: hidden; margin-top: 7px; } .meter i { display: block; height: 100%; background: var(--live); } .meter i.over { background: var(--dead); } /* ----------------------------------------------------------------- table */ table { width: 100%; border-collapse: collapse; font-size: 14px; } /* A table with enough columns is wider than a phone screen no matter what -- let the CARD scroll horizontally instead of the whole page. Scoped to cards that actually contain a table, so it can't affect anything else. */ .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px 0; border-bottom: 1px solid var(--rule); font-weight: 700; white-space: nowrap; } td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; } td.mono, .mono { font-family: var(--mono); font-size: 13px; } tr:hover td { background: var(--rule-2); } /* ---------------------------------------------------------------- grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .tile { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 13px 14px; text-decoration: none; color: var(--ink); display: block; } .tile:hover { border-color: var(--ink-2); } .tile .t { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .03em; } .tile .m { font-size: 12px; color: var(--ink-2); margin-top: 3px; } /* ----------------------------------------------------------------- stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 22px; } .stat { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; color: #fff; } .stat-icon.green { background: var(--badge-green); } .stat-icon.teal { background: var(--badge-teal); } .stat-icon.gold { background: var(--badge-gold); } .stat-icon.amber { background: var(--badge-amber); } .stat-icon.red { background: var(--badge-red); } .stat-icon.gray { background: var(--badge-gray); } .stat .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .stat .v { font-family: var(--mono); font-size: 22px; font-weight: 700; margin-top: 2px; letter-spacing: -.02em; } .stat .v.flag { color: var(--flag); } .stat .v.dead { color: var(--dead); } .stat .v.live { color: var(--live); } /* ----------------------------------------------------------------- forms */ label.f { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; } select, input[type=text], input[type=password], input[type=number], textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; font: 14px var(--sans); background: var(--card); color: var(--ink); } input[type=text], input[type=number] { font-family: var(--mono); } select:focus, input:focus, textarea:focus { outline: 2px solid var(--mater-green); outline-offset: -1px; border-color: var(--mater-green); } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; margin-bottom: 15px; } .btn { display: inline-block; background: var(--mater-green); color: #fff; border: 1px solid var(--mater-green); padding: 9px 16px; border-radius: 6px; font: 600 13px var(--sans); cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(0.85); } /* Secondary / navigational actions -- deliberately NEUTRAL, not green. When almost every button on a page is some shade of green, nothing stands out as "the one that matters." Ghost buttons are for "go here" / "cancel" / "back" -- things that aren't the point of the screen. */ .btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--rule); } .btn.ghost:hover { background: var(--rule-2); border-color: var(--ink-3); color: var(--ink); } /* Caution -- "this needs attention but isn't destructive": report damage, reopen an issue, that kind of thing. */ .btn.warn { background: var(--flag); border-color: var(--flag); color: #fff; } .btn.warn:hover { filter: brightness(0.9); } /* Destructive / urgent -- disabling a user, deleting something, an audit that's over capacity and blocked. */ .btn.danger { background: var(--dead); border-color: var(--dead); color: #fff; } .btn.danger:hover { filter: brightness(0.9); } .btn.gold { background: var(--mater-gold); border-color: var(--mater-gold-2); color: #16210f; } .btn.gold:hover { background: var(--mater-gold-2); } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ----------------------------------------------------------------- notes */ .note { padding: 11px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; border-left: 3px solid; } .note.ok { background: var(--live-bg); border-color: var(--live); color: var(--live); } .note.warn { background: var(--flag-bg); border-color: var(--flag); color: var(--flag); } .note.err { background: var(--dead-bg); border-color: var(--dead); color: var(--dead); } .note.info { background: var(--key-bg); border-color: var(--key); color: var(--key); } .empty { text-align: center; padding: 44px 20px; color: var(--ink-2); font-size: 14px; } .log { font-family: var(--mono); font-size: 12px; line-height: 1.8; } .log .ts { color: var(--ink-3); } .rowbtns { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .wrap { padding: 18px 12px 60px; } .bays { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------------------------------------------------------------- dashboard */ .dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .dcard h2 { margin-bottom: 16px; } .dcard-wide { grid-column: 1 / -1; } /* donut */ .donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .donut { width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .donut-hole { width: 89px; height: 89px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; } .donut-n { font-family: var(--mono); font-weight: 700; font-size: 19px; } .donut-l { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; } .donut-legend { font-size: 13px; display: flex; flex-direction: column; gap: 7px; } .donut-legend strong { font-family: var(--mono); margin-left: 5px; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } .dot.live { background: var(--live); } .dot.flag { background: var(--flag); } .dot.dead { background: var(--dead); } /* bar rows (condition / lifecycle / models) */ .bar-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; } .bar-label { color: var(--ink-2); } .bar-track { height: 8px; background: var(--rule-2); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; background: var(--mater-green); } .bar-fill.cond-damaged, .bar-fill.cond-unusable { background: var(--dead); } .bar-fill.cond-fair, .bar-fill.cond-usable { background: var(--flag); } .bar-fill.cond-unknown { background: var(--ink-3); } .bar-fill.life-lost, .bar-fill.life-stolen, .bar-fill.life-disposal, .bar-fill.life-retired { background: var(--dead); } .bar-fill.life-needs_repair, .bar-fill.life-in_repair { background: var(--flag); } .bar-fill.model-bar { background: var(--mater-gold-2); } .bar-n { font-family: var(--mono); text-align: right; color: var(--ink-2); } /* mini stats + mini table (cart/pool/issue widgets) */ .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; } .mini-stats strong { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; } .mini-stats span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; } .flagtext { color: var(--flag) !important; } .deadtext { color: var(--dead) !important; } .mini-table { width: 100%; font-size: 13px; } .mini-table td { padding: 6px 0; border-bottom: 1px solid var(--rule-2); } .mini-table tr:last-child td { border-bottom: none; } /* --------------------------------------------------------- duplicate badge */ .bay.dupbay { border: 2px solid var(--dead) !important; position: relative; } .dup-flag { font-size: 9px; font-weight: 700; color: var(--dead); margin-top: 3px; letter-spacing: .02em; } /* ------------------------------------------------------------ theme toggle */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .theme-toggle:hover { background: rgba(255,255,255,.12); } /* ---------------------------------------------------------------- camera box */ .cam-box { margin-top: 12px; background: #000; border-radius: 8px; padding: 14px; border: 1px solid var(--rule); } .cam-video-wrap, #cam-reader { max-width: 420px; width: 100%; margin: 0 auto; border-radius: 6px; overflow: hidden; } .cam-video, #cam-reader video { display: block; width: 100% !important; border-radius: 6px; } .cam-note { color: #cfe4d5; font-size: 13px; text-align: center; margin: 10px 0; min-height: 18px; } .cam-box .rowbtns { margin-top: 8px; } .cam-box .cam-stop, .cam-box .cam-flip { background: #fff; min-width: 120px; padding: 11px 16px; } .cam-btn { margin-top: 10px; font-size: 14px; padding: 11px 18px; } /* -------------------------------------------------- mobile touch-friendliness */ @media (max-width: 640px) { .btn, .cam-btn { padding: 12px 18px; font-size: 14px; } .rowbtns { gap: 10px; } .rowbtns .btn { flex: 1 1 auto; text-align: center; } input[type=text], input[type=password], select, textarea { font-size: 16px; } /* stops iOS auto-zoom on focus */ .scan input { font-size: clamp(20px, 8vw, 32px); } /* re-asserted after the rule above -- the big scan box is the one place we want a bigger font, not 16px */ .theme-toggle { width: 30px; height: 30px; } } /* ============================================================ RESPONSIVE ROW CARDS Tables are the right layout on a wide screen -- lots of columns, easy to scan. On a phone, no amount of internal scrolling makes a 6-column table pleasant; the fix is a genuinely different layout below the breakpoint, not a smaller version of the same one. Below 680px, .rowcard-list takes over and the table is hidden entirely -- both are rendered from the same PHP loop, so they can never drift out of sync with each other. */ .rowcard-list { display: none; } @media (max-width: 680px) { table.rc-table { display: none; } .rowcard-list { display: block; } } .rowcard { background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: 8px; padding: 13px 15px; margin-bottom: 10px; } .rowcard.rc-high { border-left-color: var(--dead); } .rowcard.rc-med { border-left-color: var(--flag); } .rowcard.rc-live { border-left-color: var(--live); } .rc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 7px; } .rc-title { font-family: var(--mono); font-weight: 700; font-size: 15px; word-break: break-all; } .rc-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; } .rc-meta { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 8px; } .rc-meta strong { color: var(--ink); font-weight: 600; } .rc-meta .mono { font-size: 12px; } .rc-detail { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; line-height: 1.5; } .rc-actions { display: flex; gap: 8px; flex-wrap: wrap; } .rc-actions form { margin: 0; } .rc-actions .btn { flex: 1 1 auto; text-align: center; min-width: 0; } .rc-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; } .rc-empty { text-align: center; padding: 30px 20px; color: var(--ink-2); font-size: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }