/* ============================================================================= CODE 4 UI KIT — code4-ui.css Shared component classes for cross-page consistency. Built on the existing design tokens (CSS variables) already defined per page: --bg-deep --bg-panel --bg-card --border --border-hi --accent --gold --success --warn --danger --muted --text1 --text2 --text3 --mono (Share Tech Mono) --disp (Rajdhani) --body (Source Sans 3) USAGE: link this file in each page , then use the .c4-* classes instead of inline styles. Change a value here and every page that uses the class updates at once. Deploy = copy this static file to wwwroot (no rebuild). These classes intentionally mirror the look of the existing .btn / .btn-sm / .act-btn / .f-input styles so migrating a page is visually invisible. ========================================================================== */ /* --------------------------------------------------------------------------- DESIGN TOKENS — canonical values. A page MAY still override these in its own :root, but absent that, linking this sheet gives the standard palette. --------------------------------------------------------------------------- */ :root{ --bg-deep:#080b0e; --bg-panel:#0c1015; --bg-card:#111820; --border:#1a2530; --border2:#243545; --border-hi:#243545; --accent:#00aaff; --accent-rgb:0,170,255; --accent-glow:rgba(0,170,255,0.12); --gold:#c9a84c; --gold-glow:rgba(201,168,76,0.12); --success:#00cc77; --warn:#ffaa00; --danger:#e04a5a; --muted:#3a4a5a; --text1:#e3edf4; --text2:#a8b9c6; --text3:#768d9f; --mono:'Share Tech Mono',monospace; --disp:'Rajdhani',sans-serif; --body:'Source Sans 3',sans-serif; } /* --------------------------------------------------------------------------- ICONS (Lucide) --------------------------------------------------------------------------- */ /* Lucide renders an that defaults to 24x24px — far too big next to button text. Sizing it in `em` ties the icon to the surrounding font-size, so it scales WITH the text (this is the "inherit the button's font size" behavior). 1.05em makes it match the text height with a hair of presence; bump to 1.2em if you want icons a touch larger (won't break layout). vertical-align keeps it centered on the text baseline; the negative margin-top nudges optical center. */ .c4-ico, .c4-btn [data-lucide], .c4-btn svg, button [data-lucide].c4-ico { width: 1.05em; height: 1.05em; vertical-align: middle; /* for inline (non-flex) contexts */ flex-shrink: 0; } /* Inside a flex button, the icon is a flex item — block display + align-items center on the button gives clean vertical centering (inline-block + baseline alignment was letting the text ride to the top of taller buttons). */ .c4-btn .c4-ico, .c4-btn [data-lucide], .c4-btn svg { display: block; } .c4-ico { display: inline-block; } /* Size variants inherit automatically because em scales with the button's font-size — a .c4-btn-sm icon is smaller than a .c4-btn icon, for free. */ /* --------------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------------- */ /* Base button — display font, uppercase, the standard interactive control. Matches the shiftboard .btn look. */ .c4-btn{ font-family: var(--disp); font-size: 0.82rem; font-weight: 700; letter-spacing:0.02em; padding: 0.55rem 1.05rem; border: 1px solid var(--border-hi, var(--border2, var(--border))); background: transparent; color: var(--text2); cursor: pointer; border-radius: 2px; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.35rem; line-height: 1; white-space: nowrap; } .c4-btn:hover{ border-color: var(--accent); color: var(--accent); } .c4-btn:disabled{ opacity: 0.4; cursor: not-allowed; } .c4-btn:disabled:hover{ border-color: var(--border-hi, var(--border2, var(--border))); color: var(--text2); } /* Primary — neutral at rest like every other button, filling solid accent on hover. It used to sit permanently solid blue with a glow, which made every screen carrying a primary button read as though something was lit up and demanding attention. The hover fill is enough to mark the main action without shouting at rest. */ .c4-btn-primary{ background: transparent; border-color: var(--border-hi, var(--border2, var(--border))); color: var(--text2); box-shadow: none; } .c4-btn-primary:hover{ background: var(--accent); border-color: var(--accent); color: var(--bg-deep); } /* Danger — destructive actions (delete, deactivate). Outline that fills on hover. */ .c4-btn-danger{ background: transparent; } .c4-btn-danger:hover{ border-color: var(--danger); color: var(--danger); } /* Success / Warn — semantic status actions (on-duty, late). Colored at rest, fills on hover. */ .c4-btn-success{ border-color: var(--success); color: var(--success); background: transparent; } .c4-btn-success:hover{ background: rgba(0,204,119,0.12); color: var(--success); } .c4-btn-warn{ border-color: var(--warn); color: var(--warn); background: transparent; } .c4-btn-warn:hover{ background: rgba(255,170,0,0.12); color: var(--warn); } /* Gold — secondary emphasis (matches the --gold accent used in places). */ .c4-btn-gold{ border-color: var(--gold); color: var(--gold); background: transparent; } .c4-btn-gold:hover{ background: var(--gold-glow); color: var(--gold); } /* Ghost — low emphasis, blends until hovered. */ .c4-btn-ghost{ border-color: transparent; background: transparent; color: var(--text3); } .c4-btn-ghost:hover{ border-color: var(--border); color: var(--text2); } /* Size variants */ .c4-btn-sm{ font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.42rem 0.8rem; border-color: var(--border2, var(--border)); } .c4-btn-xs{ font-family: var(--mono); font-size: 0.48rem; font-weight: 400; letter-spacing: 0.06em; padding: 0.2rem 0.4rem; border-color: var(--border2, var(--border)); color: var(--text3); } .c4-btn-block{ width: 100%; justify-content: center; } /* Allow a button's label to wrap instead of overflowing when it sits in a narrow flex/grid cell (e.g. "Special Assignment" in a half-width toggle). */ .c4-btn-wrap{ white-space: normal; line-height: 1.15; text-align: center; } /* --------------------------------------------------------------------------- FORM INPUTS --------------------------------------------------------------------------- */ .c4-input, .c4-select, .c4-textarea{ width: 100%; padding: 0.5rem 0.65rem; background: var(--bg-deep); border: 1px solid var(--border2, var(--border)); color: var(--text1); font-family: var(--mono); font-size: 0.82rem; outline: none; border-radius: 2px; transition: border-color 0.15s; box-sizing: border-box; } .c4-input:focus, .c4-select:focus, .c4-textarea:focus{ border-color: var(--accent); } .c4-input::placeholder, .c4-textarea::placeholder{ color: var(--text3); } .c4-select{ appearance: none; cursor: pointer; } .c4-textarea{ font-family: var(--body); font-size: 0.82rem; resize: vertical; min-height: 4rem; } /* ── Browser autofill ────────────────────────────────────────────────────── Chrome/Edge/Safari paint autofilled fields with their own near-white background at a level normal `background-color` cannot reach, which blows a solid white box into the middle of a dark form. The fix is the inset box-shadow trick: a 1000px inset shadow covers the UA background, and -webkit-text-fill-color overrides the UA text color (plain `color` is also ignored on autofill). The absurd transition delay is a second line of defence — WebKit animates the yellow/white flash in, and parking the transition ~7 days out means it never visibly arrives. Firefox honours :autofill normally, so it just needs the background reset. --input-bg lets any page with a different field background opt out locally. */ :root{ --input-bg: var(--bg-deep); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus{ -webkit-text-fill-color: var(--text1) !important; -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important; box-shadow: 0 0 0 1000px var(--input-bg) inset !important; caret-color: var(--text1); font-family: var(--mono) !important; transition: background-color 600000s 0s, color 600000s 0s !important; } /* Keep the accent focus ring visible on an autofilled field — the inset shadow above would otherwise be the only box-shadow on the element. */ input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus{ -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset, 0 0 0 2px var(--accent-glow) !important; box-shadow: 0 0 0 1000px var(--input-bg) inset, 0 0 0 2px var(--accent-glow) !important; } input:autofill, textarea:autofill, select:autofill{ background: var(--input-bg) !important; color: var(--text1) !important; } /* The dropdown WebKit renders for datalist/autofill suggestions. */ ::-webkit-calendar-picker-indicator{ filter: invert(0.75); cursor: pointer; } .c4-label{ font-family: var(--mono); font-size: 0.68rem; letter-spacing:0.02em; color: var(--text2); margin-bottom: 0.35rem; display: block; } .c4-label-hint{ color: var(--text3); text-transform: none; letter-spacing: 0; font-size: 0.6rem; } /* Checkbox / radio accent (keeps the brand colour on native controls) */ .c4-check{ width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .c4-check-danger{ accent-color: var(--danger); } /* --------------------------------------------------------------------------- CARDS / PANELS --------------------------------------------------------------------------- */ .c4-card{ background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 0.85rem; } .c4-panel{ background: var(--bg-panel); border: 1px solid var(--border); border-radius: 2px; padding: 0.85rem; } .c4-panel-accent{ border-left: 2px solid var(--accent); } /* --------------------------------------------------------------------------- PILLS / TAGS / BADGES --------------------------------------------------------------------------- */ .c4-pill{ font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform:uppercase; padding: 0.1rem 0.4rem; border: 1px solid var(--border-hi, var(--border2, var(--border))); border-radius: 2px; color: var(--text2); display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } .c4-pill-ok{ color: var(--success); border-color: var(--success); background: rgba(0,204,119,0.08); } .c4-pill-warn{ color: var(--warn); border-color: var(--warn); background: rgba(255,170,0,0.08); } .c4-pill-danger{ color: var(--danger); border-color: var(--danger); background: rgba(255,51,68,0.08); } .c4-pill-accent{ color: var(--accent); border-color: var(--accent); background: var(--accent-glow); } .c4-pill-muted{ color: var(--text3); border-color: var(--border); } /* --------------------------------------------------------------------------- SECTION HEADERS / DIVIDERS --------------------------------------------------------------------------- */ .c4-section-label{ font-family: var(--mono); font-size: 0.58rem; letter-spacing:0.02em; color: var(--text3); } .c4-divider{ height: 1px; background: var(--border); border: 0; margin: 0.75rem 0; } /* --------------------------------------------------------------------------- UTILITY HELPERS (sparingly — this is not a utility framework) --------------------------------------------------------------------------- */ .c4-row{ display: flex; align-items: center; gap: 0.5rem; } .c4-row-wrap{ display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .c4-spacer{ flex: 1; } .c4-muted{ color: var(--text3); } /* ============================================================================ PROMOTED FROM USERS PAGE — canonical finalized components (0.4.28.0) Relocated verbatim so every page inherits the finalized look once it links this sheet. Page-specific layout stays inline per page. code4-users.html is the reference implementation (it now renders entirely from this file). ========================================================================== */ /* Per-field help. The pattern this replaces was a paragraph at the top of a card explaining every control in one sentence — to learn what one field did you had to read all of them. Explanation belongs beside the thing it explains. */ .f-hint{font-family:var(--mono);font-size:0.56rem;color:var(--text3);line-height:1.45;margin-top:0.25rem;display:block;} .f-label{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.02em;color:var(--text1);margin-bottom:0.35rem;display:block;} .f-input{width:100%;padding:0.55rem 0.65rem;background:var(--bg-deep);border:1px solid var(--border2);color:var(--text1);font-family:var(--mono);font-size:0.75rem;outline:none;margin-bottom:1rem;} .f-input:focus{border-color:var(--accent);} /* ── Focus treatment ────────────────────────────────────────────────────────── One active-field highlight for every input in the app. This existed only as a border colour change, which is easy to miss on a dark board; the ring makes the focused field obvious at a glance and gives keyboard users a real focus indicator. Defined once here so pages stop growing their own local versions. */ .f-input:focus, .f-select:focus, .f-textarea:focus, .c4-input:focus, .c4-select:focus, .c4-textarea:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="search"]:focus, input[type="email"]:focus, textarea:focus, select:focus{ border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(0,170,255,0.18); background: var(--bg-panel); outline: none; } /* Checkboxes and radios can't take a border, so they get the ring on the box itself. */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .f-select{width:100%;padding:0.5rem 1.85rem 0.5rem 0.65rem;background-color:var(--bg-deep);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 0.65rem center;border:1px solid var(--border2);color:var(--text1);font-family:var(--mono);font-size:0.72rem;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;} .f-select:focus{border-color:var(--accent);} .dup-warn{display:none;font-family:var(--mono);font-size:0.68rem;color:var(--warn);margin-top:-0.7rem;margin-bottom:0.7rem;} .dup-warn.show{display:block;} #csvFile{font-family:var(--mono);font-size:0.7rem;color:var(--text2);} #csvFile::file-selector-button,#csvFile::-webkit-file-upload-button{font-family:var(--disp);font-size:0.62rem;font-weight:700;letter-spacing:0.02em;padding:0.4rem 0.9rem 0.4rem 1.9rem;margin-right:0.75rem;border:1px solid var(--border-hi,var(--border2));border-radius:2px;background:url("data:image/svg+xml;utf8,") no-repeat 0.65rem center,linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%);color:var(--text1);cursor:pointer;transition:all 0.15s;} #csvFile::file-selector-button:hover{border-color:var(--accent);filter:brightness(1.12);} .topbar-btn{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.02em;padding:0.4rem 0.9rem;border:1px solid var(--border2);color:var(--text2);background:none;cursor:pointer;transition:all 0.15s;flex-shrink:0;} .topbar-btn:hover{border-color:var(--accent);color:var(--accent);} .fc-btn{font-family:var(--mono);font-size:0.9rem;line-height:1;color:var(--text2);background:none;border:none;cursor:pointer;padding:0 0.2rem;} .fc-btn:hover{color:var(--accent);} .font-ctrl{display:flex;align-items:center;gap:0.25rem;border:1px solid var(--border-hi,var(--border2));border-radius:2px;padding:0.3rem 0.55rem;background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%);box-shadow:0 1px 0 rgba(255,255,255,0.03) inset,0 1px 2px rgba(0,0,0,0.25);} .font-ctrl span{font-family:var(--mono);font-size:0.55rem;color:var(--text2);} .btn-sm{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.02em;padding:0.38rem 0.75rem;border:1px solid var(--border2);color:var(--text2);background:none;cursor:pointer;transition:all 0.15s;white-space:nowrap;} .btn-sm:hover{border-color:var(--accent);color:var(--accent);} .btn-sm.danger:hover{border-color:var(--danger);color:var(--danger);} /* Primary carries no special treatment now — identical neutral rest + border/text accent hover as any button. */ /* Access level reads as plain text in tables — the colour alone carries the meaning, and a column of bordered pills is just noise. Brightened a touch to compensate for losing the chip, and left-aligned so the column scans cleanly. */ .role-pill{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;display:inline-block;white-space:nowrap;} .role-Officer,.role-Employee{color:var(--text2);} .role-ShiftSupervisor{color:#4fc3ff;} .role-DivisionHead{color:#ffc043;} .role-Admin,.role-SuperAdmin{color:#ff6070;} .status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:0.35rem;} .status-dot.active{background:var(--success);} .status-dot.inactive{background:var(--muted);} .status-dot.stale{background:var(--warn);} .last-login{font-family:var(--mono);font-size:0.7rem;color:var(--text2);} .act-btn{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.02em;padding:0.32rem 0.6rem;border:1px solid var(--border2);color:var(--text2);background:none;cursor:pointer;transition:all 0.15s;white-space:nowrap;} .act-btn:hover{border-color:var(--accent);color:var(--accent);} .act-btn.danger:hover{border-color:var(--danger);color:var(--danger);} .act-btn.success:hover{border-color:var(--success);color:var(--success);} .stale-warn{font-family:var(--mono);font-size:0.48rem;color:var(--warn);} /* Invites table */ .invite-status-pending{color:var(--warn);font-family:var(--mono);font-size:0.52rem;} .invite-status-accepted{color:var(--success);font-family:var(--mono);font-size:0.52rem;} .invite-status-expired{color:var(--danger);font-family:var(--mono);font-size:0.52rem;} .empty{font-family:var(--mono);font-size:0.65rem;color:var(--text3);padding:3rem;text-align:center;letter-spacing:0.1em;} /* ── POSITIVE EMPTY STATE ──────────────────────────────────────────────────── For places a supervisor deliberately opens expecting work — a review queue, a vacancy list. "Empty" there means done, and it should read that way rather than looking identical to a panel that failed to load. NOT for every empty list: an overtime slot with no applicants is empty and BAD, and painting that green would actively mislead. Use .empty for those. Uses a text glyph rather than a lucide icon so it renders even when injected via innerHTML without an icon refresh. */ .c4-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.45rem;padding:1.6rem 1rem;text-align:center;} .c4-clear-mark{width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(0,204,119,0.10);border:1px solid rgba(0,204,119,0.45);color:var(--success); font-size:1.05rem;line-height:1;box-shadow:0 0 14px rgba(0,204,119,0.12);} .c4-clear-title{font-family:var(--disp);font-size:0.92rem;font-weight:700;color:var(--success);letter-spacing:0.02em;} .c4-clear-sub{font-family:var(--mono);font-size:0.62rem;color:var(--text3);line-height:1.5;max-width:34ch;} .c4-clear-sm{padding:0.9rem 0.75rem;gap:0.3rem;} .c4-clear-sm .c4-clear-mark{width:1.5rem;height:1.5rem;font-size:0.8rem;} .c4-clear-sm .c4-clear-title{font-size:0.78rem;} .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;} @keyframes spin{to{transform:rotate(360deg);}} /* Modal */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:600;display:none;align-items:center;justify-content:center;} .modal-overlay.show{display:flex;} .modal{background:var(--bg-card);border:1px solid var(--border2);width:min(460px,94vw);max-height:90vh;display:flex;flex-direction:column;position:relative;} .modal.wide{width:min(720px,96vw);} .modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);} .modal-hdr{padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--border);} .modal-title{font-family:var(--disp);font-size:1.1rem;font-weight:700;color:var(--text1);} .modal-sub{font-family:var(--mono);font-size:0.55rem;color:var(--text3);margin-top:0.2rem;letter-spacing:0.06em;} .modal-body{padding:1.25rem 1.5rem;overflow-y:auto;flex:1;} .modal-footer{padding:0.75rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:0.5rem;justify-content:flex-end;} .modal-msg{font-family:var(--mono);font-size:0.58rem;margin-top:0.5rem;min-height:1rem;} .btn-modal-cancel, .btn-modal-primary, .btn-modal-ok{font-family:var(--disp);font-size:0.65rem;font-weight:700;letter-spacing:0.02em;padding:0.45rem 1rem;border-radius:2px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%);border:1px solid var(--border-hi,var(--border2));box-shadow:0 1px 0 rgba(255,255,255,0.03) inset,0 1px 2px rgba(0,0,0,0.25);} .btn-modal-cancel{color:var(--text2);} .btn-modal-primary, .btn-modal-ok{color:var(--text1);} .btn-modal-cancel:hover, .btn-modal-primary:hover, .btn-modal-ok:hover{background:linear-gradient(180deg,#20303f 0%,#16222d 100%);border-color:var(--accent);color:var(--accent);} .btn-modal-ok:disabled{opacity:0.5;cursor:not-allowed;border-color:var(--border-hi,var(--border2));color:var(--text2);} .btn-modal-ok.danger:hover{background:linear-gradient(180deg,#2a1416 0%,#1d0e10 100%);border-color:var(--danger);color:var(--danger);} .temp-pw-box{background:var(--bg-deep);border:1px solid var(--success);padding:0.75rem 1rem;margin-top:0.75rem;font-family:var(--mono);font-size:1rem;color:var(--success);letter-spacing:0.1em;text-align:center;} .temp-pw-note{font-family:var(--mono);font-size:0.55rem;color:var(--text3);text-align:center;margin-top:0.4rem;} /* ── PERSONNEL & SHARED ── */ /* --------------------------------------------------------------------------- TABLE FILTER BAR — the control strip that sits above a .data-table. These were being referenced by pages before they existed anywhere, so the controls fell back to raw browser chrome (native select arrow, native checkbox) while the buttons beside them looked kit-styled. Defined here once so every filtered table shares one look instead of each page inventing its own flat .f-* variant. Raised treatment matches .div-select and .c4-btn: --border-hi, 2px radius, uppercase mono, gradient fill. --------------------------------------------------------------------------- */ .c4-tbl-controls{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;padding:0.6rem 0.75rem;border-bottom:1px solid var(--border);} .c4-tbl-search, .c4-tbl-sel{ font-family:var(--mono);font-size:0.68rem;letter-spacing:0.06em; padding:0.42rem 0.7rem; background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%); border:1px solid var(--border-hi,var(--border2)); border-radius:2px;color:var(--text1);outline:none;box-sizing:border-box; transition:border-color 0.15s,box-shadow 0.15s; } .c4-tbl-search{min-width:200px;} .c4-tbl-search::placeholder{color:var(--text3);} /* Chevron and gradient are layered in one background-image so the control keeps the raised fill while still suppressing the native arrow. */ .c4-tbl-sel{ cursor:pointer;min-width:140px; padding-right:1.9rem;appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"),linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%); background-repeat:no-repeat,no-repeat; background-position:right 0.65rem center,center; background-size:auto,100% 100%; } .c4-tbl-sel option{background:#0c1015;color:var(--text1);} .c4-tbl-search:hover, .c4-tbl-sel:hover{border-color:var(--accent);} .c4-tbl-search:focus, .c4-tbl-sel:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);} .c4-tbl-check{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--mono);font-size:0.64rem;letter-spacing:0.02em;color:var(--text2);cursor:pointer;user-select:none;} .c4-tbl-check input[type="checkbox"]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0;} .c4-tbl-check:hover{color:var(--text1);} .c4-tbl-count{margin-left:auto;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.06em;color:var(--text3);} .c4-tbl-empty{padding:1.5rem;text-align:center;font-family:var(--mono);font-size:0.7rem;color:var(--text3);} /* Scroll/border shell for a .data-table. Was being redefined locally on reports, users and bids with small differences, and not at all on admin — so a table there rendered with no card around it. Defined here as the shared baseline; pages needing a max-height or different overflow still override locally. */ .table-wrap{background:var(--bg-card);border:1px solid var(--border);overflow-x:auto;} .data-table{width:100%;border-collapse:collapse;} .data-table th{position:sticky;top:0;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text2);padding:8px 10px;border-bottom:2px solid var(--gold);text-align:left;background:#161e28;font-weight:600;} .data-table td{padding:0.45rem 0.75rem;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle;font-size:0.85rem;} /* Uniform styling for the main data columns (Badge, Rank, Division) so size, color, weight and font are guaranteed identical instead of drifting per-cell. */ .cell-data{font-family:var(--mono);font-size:0.8rem;font-weight:500;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;} .cell-sub{font-family:var(--mono);font-size:0.6rem;font-weight:400;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:1px;} /* Manage flyout menu — anchored dropdown of row actions */ .manage-menu{position:fixed;z-index:9999;min-width:180px;background:var(--bg-card);border:1px solid var(--border-hi,var(--border2,var(--border)));border-radius:3px;box-shadow:0 8px 24px rgba(0,0,0,0.5);padding:0.3rem;display:flex;flex-direction:column;gap:0.1rem;} .manage-item{display:flex;align-items:center;gap:0.5rem;width:100%;text-align:left;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.04em;color:var(--text2);background:none;border:none;padding:0.4rem 0.55rem;cursor:pointer;border-radius:2px;transition:background 0.12s,color 0.12s;white-space:nowrap;} .manage-item:hover{background:rgba(255,255,255,0.05);color:var(--text1);} .manage-item.danger{color:var(--danger);} .manage-item.danger:hover{background:rgba(255,68,68,0.12);} .manage-item.success{color:var(--success);} .manage-item.success:hover{background:rgba(80,200,120,0.12);} .manage-divider{height:1px;background:var(--border2);margin:0.2rem 0;} /* Count badge shown inline with table titles (e.g. "Personnel 325"). Stands out with the accent color and a pill outline without shouting. */ .count-badge{display:inline-block;font-family:var(--mono);font-size:0.7rem;font-weight:600;color:var(--accent);background:rgba(0,170,255,0.1);border:1px solid var(--accent);border-radius:2px;padding:0.1rem 0.55rem;margin-left:0.5rem;vertical-align:middle;letter-spacing:0.04em;} .data-table td:first-child{color:var(--text1);} /* Uniform table-cell text — override the per-cell inline sizes; pills/swatch keep their own size. */ .data-table td span:not(.supervisory-badge):not(.disabled-tag):not(.color-swatch):not(.role-pill){font-size:0.85rem !important;} .data-table tbody tr:nth-child(even) td{background:rgba(255,255,255,0.018);} .data-table tbody tr:hover td{background:rgba(255,255,255,0.06);} .modal-msg{font-family:var(--mono);font-size:0.6rem;color:var(--text2);margin-top:0.5rem;min-height:1rem;} /* Personnel-specific modal */ .p-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.82);z-index:700;display:none;align-items:center;justify-content:center;} .p-modal-overlay.show{display:flex;} .p-modal{width:min(640px,95vw);max-height:88vh;display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--border2);position:relative;} .p-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);} .p-modal-hdr{padding:1rem 1.25rem;border-bottom:1px solid var(--border);} .p-modal-title{font-family:var(--disp);font-size:1.1rem;font-weight:700;letter-spacing:0.05em;color:var(--text1);} .p-modal-sub{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.02em;color:var(--text3);margin-top:0.25rem;} .p-modal-body{padding:1.25rem;overflow-y:auto;flex:1;} .p-modal-footer{padding:0.85rem 1.25rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:0.5rem;} /* ── FILLED BUTTON TREATMENT (applied to all buttons on this page) ────────── Subtle filled background + soft top-light gradient + slightly raised feel, so buttons read as solid objects instead of vacant outlined rectangles. Applied to c4-btn, topbar-btn, btn-sm, and act-btn. This is the going-forward style; promote to code4-ui.css in the UI-kit pass. Overrides the linked css (this block is later). */ .c4-btn, .topbar-btn, .btn-sm, .act-btn{ background: linear-gradient(180deg, #1c2937 0%, #121d28 100%); border-color: var(--border-hi, var(--border2, var(--border))); color: var(--text1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.30); } .c4-btn:hover, .topbar-btn:hover, .btn-sm:hover, .act-btn:hover{ background: linear-gradient(180deg, #20303f 0%, #16222d 100%); border-color: var(--accent); color: var(--accent); } .c4-btn:active, .topbar-btn:active, .btn-sm:active, .act-btn:active{ box-shadow: 0 1px 2px rgba(0,0,0,0.35) inset; } /* Danger buttons: neutral at rest like any button; red border+text on hover only. */ .act-btn.danger:hover, .c4-btn.c4-btn-danger:hover{ border-color: var(--danger); color: var(--danger); } .act-btn.success{ color: var(--success); border-color: var(--success); } /* Primary — the ONE main action per screen, marked by how it behaves rather than by sitting permanently lit. Neutral at rest so a dialog reads calmly; fills solid accent on hover so the main action is still obvious the moment you reach for it. The old version was solid accent PLUS a 10px blue glow, which is why primaries kept reading as alarming on dark panels. Note: no glow here on purpose. */ .c4-btn.c4-btn-primary{ background: transparent; border-color: var(--border-hi, var(--border2, var(--border))); color: var(--text2); box-shadow: none; } .c4-btn.c4-btn-primary:hover{ background: var(--accent); border-color: var(--accent); color: var(--bg-deep); filter: none; } /* ── Modal kit ───────────────────────────────────────────── Canonical modal shell shared across pages. Pair with .c4-btn for footer actions. Overlay toggles via the .open class. */ .c4-modal-overlay{ display:none;position:fixed;inset:0;z-index:100; background:rgba(0,0,0,0.75);backdrop-filter:blur(4px); align-items:center;justify-content:center;padding:1rem; } .c4-modal-overlay.open{ display:flex; } .c4-modal{ width:100%;max-width:420px;max-height:88vh; display:flex;flex-direction:column;overflow:hidden;position:relative; background:var(--bg-card); border:1px solid var(--border-hi, var(--border2, var(--border))); animation:c4ModalIn 0.15s ease; } /* Accent top-bar highlight */ .c4-modal::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); } .c4-modal-header{ padding:1.25rem 1.5rem 0.9rem; border-bottom:1px solid var(--border); } .c4-modal-title{ font-family:var(--disp);font-size:1.05rem;font-weight:700; letter-spacing:0.04em;color:var(--text1); } .c4-modal-sub{ font-family:var(--mono);font-size:0.62rem;letter-spacing:0.02em; color:var(--text3);margin-top:0.3rem; } .c4-modal-body{ padding:1.25rem 1.5rem; overflow-y:auto; } .c4-modal-footer{ padding:0.9rem 1.5rem 1.25rem;border-top:1px solid var(--border); display:flex;gap:0.6rem;flex-wrap:wrap; } @keyframes c4ModalIn{ from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} } /* ============================================================ TOPBAR SHELL — shared app header (logo, brand, division select). Promoted into the kit so new pages inherit it; existing pages keep their local copies (which override these harmlessly). .topbar-btn and the .c4-btn family are defined above. ============================================================ */ .topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:0.75rem; padding:0 1.25rem; height:50px; background:rgba(8,11,14,0.97); border-bottom:1px solid var(--border); backdrop-filter:blur(10px); } .topbar-brand { display:flex; align-items:center; gap:0.7rem; flex-shrink:0; } .topbar-logo { flex-shrink:0; } .topbar-brand-text { display:flex; flex-direction:column; gap:0.1rem; border-left:1px solid var(--border2); padding-left:0.7rem; } .topbar-portal-label { font-family:var(--mono); font-size:0.78rem; letter-spacing:0.02em; color:var(--accent); font-weight:700; } .topbar-agency { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.02em; color:var(--text1); } .topbar-agency-logo { height:34px; width:auto; object-fit:contain; } .topbar-divider { width:1px; height:24px; background:var(--border); flex-shrink:0; } .topbar-spacer { flex:1; } /* Mobile: the topbar is a fixed-height no-wrap row on desktop; on small screens let it wrap so nothing (especially the nav) gets pushed off the right edge and forces horizontal scroll. Drop the expanding spacer + brand chrome that eat width. */ @media (max-width:820px){ .topbar{flex-wrap:wrap;height:auto;min-height:50px;padding:0.45rem 0.7rem;gap:0.4rem 0.45rem;} .topbar-spacer{display:none;} .topbar-divider{display:none;} .topbar-agency-logo{display:none;} .topbar-agency{display:none;} .topbar-brand-text{border-left:none;padding-left:0;} } .div-select { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.02em; padding:0.42rem 1.9rem 0.42rem 0.8rem; background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-deep) 100%); border:1px solid var(--border-hi,var(--border2)); border-radius:2px; color:var(--text1); outline:none; cursor:pointer; appearance:none; transition:border-color 0.15s,box-shadow 0.15s; } .div-select:hover { border-color:var(--accent); } .div-select:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); } .div-select option { background:#0c1015; color:var(--text1); } .div-select-wrap { position:relative; display:flex; align-items:center; } .div-select-wrap::after { content:'▾'; position:absolute; right:0.6rem; color:var(--accent); font-size:0.8rem; pointer-events:none; } /* ── Admin-style shell: left sidebar + settings cards ─────────────────────────── Canonical home for the layout Admin, Accruals and friends share. Pages used to each carry a private copy, which is how they drifted apart in the first place. */ .app-body{display:flex;min-height:calc(100vh - 50px);} /* Sticky under the 50px topbar. Settings panes run long — the security and photo cards alone push well past a screen — and losing the section list at the bottom of a scroll means scrolling back up to change pane. Scrolls independently if the nav itself ever outgrows the viewport. */ .sidebar{width:200px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);padding:1rem 0; position:sticky;top:50px;align-self:flex-start;max-height:calc(100vh - 50px);overflow-y:auto;} .sidebar-item{display:flex;align-items:center;gap:0.6rem;padding:0.65rem 1.25rem;cursor:pointer;transition:background 0.12s;border-left:2px solid transparent;font-family:var(--mono);font-size:0.58rem;letter-spacing:0.02em;color:var(--text2);} .sidebar-item:hover{background:rgba(255,255,255,0.03);color:var(--text1);} .sidebar-item.active{border-left-color:var(--gold);color:var(--gold);background:var(--gold-glow);} .sidebar-icon{font-size:1rem;width:1.2rem;text-align:center;display:flex;align-items:center;justify-content:center;} .sidebar-icon svg{width:1rem;height:1rem;} .main-panel{flex:1;padding:1.5rem;min-width:0;max-width:1200px;overflow-x:auto;} .settings-card{position:relative;background:var(--bg-card);border:1px solid var(--border);padding:1.25rem;margin-bottom:1rem;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,0.28);transition:border-color 0.15s,box-shadow 0.15s;} .settings-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);border-radius:2px 2px 0 0;} .card-title{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.02em;color:var(--text1);font-weight:700;margin-bottom:1rem;padding-bottom:0.55rem;border-bottom:1px solid var(--border2);} .save-bar{display:flex;align-items:center;gap:0.75rem;margin-top:0.75rem;} .save-msg{font-family:var(--mono);font-size:0.58rem;flex:1;} @media (max-width:820px){ .app-body{flex-direction:column;} .sidebar{width:auto;display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:0.3rem 0;} .sidebar-item{flex:0 0 auto;border-left:none;border-bottom:2px solid transparent;} .sidebar-item.active{border-left-color:transparent;border-bottom-color:var(--gold);} .main-panel{padding:1rem;} }