/* ============================================================================= 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-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.08em; text-transform: uppercase; 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 — solid accent, for the main action on a screen. */ .c4-btn-primary{ background: var(--accent); border-color: var(--accent); color: var(--bg-deep); } .c4-btn-primary:hover{ filter: brightness(1.2); 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; } .c4-label{ font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; 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.1em; text-transform: uppercase; 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). ========================================================================== */ .f-label{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;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);} .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.08em;text-transform:uppercase;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.12em;text-transform:uppercase;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.08em;text-transform:uppercase;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. */ .role-pill{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.45rem;border:1px solid;border-radius:3px;display:inline-block;} .role-Officer,.role-Employee{border-color:var(--border2);color:var(--text2);background:rgba(255,255,255,0.04);} .role-ShiftSupervisor{border-color:var(--accent);color:var(--accent);background:rgba(0,170,255,0.13);} .role-DivisionHead{border-color:var(--warn);color:var(--warn);background:rgba(255,170,0,0.13);} .role-Admin,.role-SuperAdmin{border-color:var(--danger);color:var(--danger);background:rgba(255,51,68,0.13);} .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.06em;text-transform:uppercase;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;} .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.1em;text-transform:uppercase;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 ── */ .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;text-transform:uppercase;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.1em;color:var(--text3);margin-top:0.25rem;text-transform:uppercase;} .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. Solid accent so it genuinely pops; everything else stays neutral-fill so a single primary leads the eye. */ .c4-btn.c4-btn-primary{ background: var(--accent); border-color: var(--accent); color: var(--bg-deep); box-shadow: 0 2px 10px rgba(0,170,255,0.30), inset 0 1px 0 rgba(255,255,255,0.25); } .c4-btn.c4-btn-primary:hover{ filter: brightness(1.12); color: var(--bg-deep); } /* ── 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.1em; text-transform:uppercase;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)} }