/* ============================================================================
DALIJAY E-Voting — modern SaaS design system
Layered over AdminLTE 2 / Bootstrap 3. Same-origin (CSP-safe). WCAG-AA minded.
Font (Inter) is loaded via in the page .
Theme colour: pages may override --c-primary inline (System Settings).
============================================================================ */
/* ---- Theme tokens --------------------------------------------------------
Colour is split into two layers:
· brand + geometry live on :root and are shared by both themes
· every surface / ink / line value is redefined per [data-theme]
Nothing below this block should hardcode a colour — that is what made the
old dashboard impossible to re-theme without editing every rule.
The admin area boots in dark; the voter-facing pages stay light. The theme is
written to before first paint (see admin/includes/header.php)
so there is no flash of the wrong theme. --------------------------------- */
:root {
/* Brand — --c-primary may be overridden inline by System Settings. */
--c-primary: #2563EB;
--c-primary-600: color-mix(in srgb, var(--c-primary) 84%, black);
--c-primary-050: color-mix(in srgb, var(--c-primary) 8%, white);
--c-primary-100: color-mix(in srgb, var(--c-primary) 16%, white);
/* Readable against dark surfaces whatever brand colour the school picked. */
--c-primary-lift: color-mix(in srgb, var(--c-primary) 55%, white);
--c-glow: #22D3EE;
--c-success: #16A34A;
--c-warning: #F59E0B;
--c-danger: #DC2626;
--c-info: #0891B2;
--r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
--t-fast: .15s ease; --t: .25s ease;
--e-out: cubic-bezier(.16,1,.3,1);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-num: 'Inter', ui-monospace, 'Segoe UI', system-ui, sans-serif;
}
/* ---- Light ---- */
:root, [data-theme="light"] {
--c-ink: #0f172a;
--c-ink-soft: #64748b;
--c-line: #e5e7eb;
--c-surface: #ffffff;
--c-surface-2: #f1f5f9;
--c-bg: #f8fafc;
--c-glass: rgba(255,255,255,.72);
--c-glass-line: rgba(15,23,42,.08);
--c-track: #e9eef6;
--sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
--sh-md: 0 6px 18px rgba(15,23,42,.08);
--sh-lg: 0 18px 40px rgba(15,23,42,.16);
--c-accent: var(--c-primary);
--ambient-1: color-mix(in srgb, var(--c-primary) 12%, transparent);
--ambient-2: rgba(34,211,238,.10);
}
/* ---- Dark (admin default) --------------------------------------------------
Deep navy rather than pure black: #000 smears on OLED and crushes the
elevation scale. Surfaces step up in lightness as they come forward. ------ */
[data-theme="dark"] {
--c-ink: #E8F0FA;
--c-ink-soft: #93A9C7;
--c-line: rgba(255,255,255,.10);
--c-surface: #10203A;
--c-surface-2: #16294a;
--c-bg: #0A1628;
--c-glass: rgba(20,38,66,.62);
--c-glass-line: rgba(255,255,255,.09);
--c-track: rgba(255,255,255,.09);
--sh-sm: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.30);
--sh-md: 0 8px 24px rgba(0,0,0,.40);
--sh-lg: 0 22px 52px rgba(0,0,0,.55);
/* Brand blues go muddy on navy — lift the accent for AA contrast. */
--c-accent: var(--c-primary-lift);
--c-success: #34D399;
--c-warning: #FBBF24;
--c-danger: #F87171;
--ambient-1: color-mix(in srgb, var(--c-primary) 26%, transparent);
--ambient-2: rgba(34,211,238,.16);
}
/* Fallback if color-mix is unsupported */
@supports not (color: color-mix(in srgb, red, blue)) {
:root { --c-primary-600:#1d4ed8; --c-primary-050:#eff6ff; --c-primary-100:#dbeafe; --c-primary-lift:#7EA6FF; }
[data-theme="dark"] { --ambient-1: rgba(37,99,235,.26); }
}
/* Colour changes are animated so the toggle reads as one deliberate switch
rather than a jarring repaint. */
body, .content-wrapper, .box, .main-header, .main-sidebar, .metric, .panel-glass {
transition: background-color var(--t), border-color var(--t), color var(--t);
}
/* ---- Base ---------------------------------------------------------------- */
body, .content-wrapper, .wrapper { font-family: var(--font); color: var(--c-ink); }
body { background: var(--c-bg); }
.content-wrapper { background: var(--c-bg); }
h1,h2,h3,h4,h5,.box-title,.page-header { font-family: var(--font); font-weight: 700; letter-spacing:-.01em; }
a { color: var(--c-primary); }
a:hover, a:focus { color: var(--c-primary-600); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
outline: 3px solid color-mix(in srgb, var(--c-primary) 45%, transparent);
outline-offset: 2px;
}
/* ---- Buttons (all variants + states) ------------------------------------ */
.btn {
border-radius: var(--r-sm); font-weight: 600; border: 1px solid transparent;
transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.btn.btn-flat { border-radius: var(--r-sm); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn.disabled { opacity:.6; transform:none; box-shadow:none; }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--c-primary-600); border-color: var(--c-primary-600); }
.btn-success { background: var(--c-success); border-color: var(--c-success); }
.btn-warning { background: var(--c-warning); border-color: var(--c-warning); color:#fff; }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); }
.btn-default { background:#fff; border-color: var(--c-line); color: var(--c-ink); }
.btn-default:hover { background:#f8fafc; border-color:#cbd5e1; }
.btn-outline { background:transparent; border-color: var(--c-primary); color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary-050); }
.btn-lg { border-radius: var(--r-md); }
/* loading spinner */
.btn.is-loading { color: transparent !important; pointer-events:none; position: relative; }
.btn.is-loading::after {
content:""; position:absolute; width:16px; height:16px; top:calc(50% - 8px); left:calc(50% - 8px);
border:2px solid rgba(255,255,255,.6); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---- Cards / boxes ------------------------------------------------------- */
.box { border:1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-sm); border-top-width:1px; }
.box:hover { box-shadow: var(--sh-md); }
.box > .box-header { border-radius: var(--r-md) var(--r-md) 0 0; }
.box-header .box-title { font-size:16px; }
.callout { border-radius: var(--r-md); box-shadow: var(--sh-sm); border-left-width:5px; }
/* Small stat boxes (dashboard) */
.small-box { border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.small-box:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.small-box h3 { font-weight: 800; }
.small-box .icon { opacity:.28; transition: transform var(--t); }
.small-box:hover .icon { transform: scale(1.06) rotate(-4deg); }
.small-box > .small-box-footer { background: rgba(0,0,0,.10); }
/* ---- Tables -------------------------------------------------------------- */
.box .box-body > .table, .table { border-radius: var(--r-sm); overflow: hidden; }
.table > thead > tr > th {
position: sticky; top: 0; z-index: 2;
background:#f1f5f9; color: var(--c-ink); border-bottom:2px solid var(--c-line);
text-transform: uppercase; font-size:11.5px; letter-spacing:.05em; font-weight:700;
}
.table > tbody > tr { transition: background var(--t-fast); }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: var(--c-primary-050); }
.table > tbody > tr > td { vertical-align: middle; }
code { background:#f1f5f9; color:#0f172a; border:1px solid var(--c-line); border-radius:var(--r-sm); padding:2px 8px; font-weight:700; }
/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border:1px solid var(--c-line); border-radius: var(--r-sm); padding:4px 8px; }
.dataTables_wrapper .paginate_button.current { background: var(--c-primary) !important; border-color: var(--c-primary) !important; color:#fff !important; border-radius: var(--r-sm); }
.dataTables_wrapper .paginate_button { border-radius: var(--r-sm) !important; }
/* ---- Forms --------------------------------------------------------------- */
.form-control { border-radius: var(--r-sm); border-color: var(--c-line); box-shadow:none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent); }
label { font-weight: 600; color:#334155; }
.help-block, .text-muted { color: var(--c-ink-soft); }
.label, .badge { border-radius: var(--r-pill); padding:.3em .7em; font-weight:600; }
.input-group-addon { border-radius: var(--r-sm) 0 0 var(--r-sm); background:#f1f5f9; border-color:var(--c-line); }
/* password toggle */
.pw-wrap { position: relative; }
.pw-wrap .pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--c-ink-soft); cursor:pointer; padding:4px; }
.pw-wrap .pw-toggle:hover { color: var(--c-primary); }
/* password strength meter */
.pw-meter { height:6px; border-radius: var(--r-pill); background:#e5e7eb; overflow:hidden; margin-top:8px; }
.pw-meter > span { display:block; height:100%; width:0; transition: width var(--t), background var(--t); }
/* ---- Modals -------------------------------------------------------------- */
.modal-content { border:0; border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow:hidden; }
.modal-header { border-bottom:1px solid var(--c-line); }
.modal-footer { border-top:1px solid var(--c-line); }
.modal.fade .modal-dialog { transform: translateY(-16px); transition: transform var(--t); }
.modal.in .modal-dialog { transform: translateY(0); }
/* ---- Alerts / notifications --------------------------------------------- */
.alert { border:0; border-radius: var(--r-md); box-shadow: var(--sh-sm); animation: slideIn var(--t); }
.alert-success { background:#ecfdf5; color:#065f46; }
.alert-danger { background:#fef2f2; color:#991b1b; }
.alert-info { background:#ecfeff; color:#155e75; }
.alert-warning { background:#fffbeb; color:#92400e; }
@keyframes slideIn { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform:none; } }
/* ---- Empty states -------------------------------------------------------- */
.empty-state { text-align:center; padding:48px 20px; color: var(--c-ink-soft); }
.empty-state i { font-size:56px; opacity:.35; margin-bottom:12px; display:block; }
/* ---- Header / Sidebar ---------------------------------------------------- */
.skin-blue .main-header .logo,
.skin-blue .main-header .navbar { background: var(--c-primary); }
.skin-blue .main-header .logo:hover { background: var(--c-primary-600); }
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a { border-left:3px solid var(--c-primary); background:#1a2332; }
.skin-blue .sidebar-menu > li > a { transition: background var(--t-fast), border-color var(--t-fast); border-left:3px solid transparent; }
.sidebar-menu > li.header { letter-spacing:.08em; font-size:11px; color:#8aa4c8; }
.sidebar .user-panel { padding:14px 12px; }
.main-header .logo b, .main-header .logo { font-weight:800; }
.navbar-nav > .user-menu .user-image { border:2px solid rgba(255,255,255,.6); }
.brand-logo { height:30px; width:auto; vertical-align:middle; border-radius:6px; background:#fff; padding:2px; }
/* ---- Two-column auth layout --------------------------------------------- */
.auth-wrap { min-height:100vh; display:flex; }
/* The copy sits at the BOTTOM, not centred. Centred text landed directly over
the ballot-box artwork and hid it; anchoring low keeps the upper two-thirds
of the image clear while the text still has a dark base to sit on. */
.auth-visual {
flex:1 1 52%; position:relative; color:#fff; display:flex;
align-items:flex-end; justify-content:flex-start;
background: #0b1220 center/cover no-repeat;
overflow:hidden;
}
/* Scrim graded bottom-up: opaque where the words are, near-clear over the
artwork. A flat overlay dimmed the whole image for no benefit. */
.auth-visual::before {
content:""; position:absolute; inset:0;
background:
linear-gradient(to top,
rgba(6,14,32,.94) 0%,
rgba(6,14,32,.86) 26%,
rgba(8,18,42,.52) 52%,
rgba(10,22,52,.20) 78%,
rgba(10,22,52,.10) 100%),
linear-gradient(120deg, rgba(15,23,42,.34), rgba(37,99,235,.14));
}
.auth-visual .auth-visual-inner {
position:relative; z-index:1; width:100%; max-width:560px;
padding: 36px clamp(28px, 4vw, 48px);
}
/* Logo beside the name rather than above it — on a long school name the stacked
version pushed the headline onto four lines and swallowed the panel. */
.auth-visual .auth-brandrow { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.auth-visual .auth-logo {
flex:0 0 auto; height:56px; width:56px; margin:0; padding:5px;
border-radius:13px; background:#fff; object-fit:contain;
box-shadow: 0 6px 18px rgba(0,0,0,.34);
}
.auth-visual .auth-brandcopy { min-width:0; }
.auth-visual h1 {
/* Scales down as the name gets longer instead of wrapping indefinitely. */
font-size: clamp(19px, 2vw, 26px); font-weight:800; line-height:1.16;
margin:0 0 3px; text-shadow:0 2px 12px rgba(0,0,0,.5); overflow-wrap:anywhere;
}
.auth-visual .auth-sub { font-size:14.5px; opacity:.92; }
.auth-visual .auth-desc { font-size:14px; line-height:1.6; opacity:.9; margin:0; max-width:46ch; }
.auth-visual .auth-tag {
margin-top:16px; font-size:13.5px; opacity:.9;
border-left:3px solid rgba(255,255,255,.6); padding-left:12px;
}
/* Sign-in panel reduced to a logo and one statement, so that statement has to
carry the panel on its own — set at headline scale rather than as a caption.
A separate class, so the small .auth-tag on other screens is unaffected. */
.auth-visual .auth-logo-solo { margin-bottom:22px; height:64px; width:64px; }
.auth-visual .auth-statement {
margin:0; max-width:15ch;
font-size: clamp(28px, 3.4vw, 44px);
font-weight:800; line-height:1.14; letter-spacing:-.02em;
text-shadow: 0 3px 18px rgba(0,0,0,.55);
}
/* Colour the last sentence so the line has a focal point rather than reading
as one flat block. */
.auth-visual .auth-statement::after {
content:""; display:block; width:64px; height:5px; border-radius:3px;
margin-top:18px; background: linear-gradient(90deg,#60A5FA, rgba(96,165,250,0));
}
@media (max-width: 991px) {
/* Below the split breakpoint the panel becomes a short banner — keep the
brand row and drop the supporting copy so the box stays visible. */
.auth-visual { min-height:210px; }
.auth-visual .auth-desc, .auth-visual .auth-tag { display:none; }
.auth-visual .auth-visual-inner { padding:22px 24px; }
}
.auth-form { flex:1 1 48%; display:flex; align-items:center; justify-content:center; padding:32px; background: var(--c-bg); }
.auth-card {
width:100%; max-width:420px; background:#fff; border-radius: var(--r-lg);
box-shadow: var(--sh-lg); padding:34px 30px; animation: rise var(--t);
}
.auth-card .auth-brand { text-align:center; margin-bottom:18px; }
.auth-card .auth-brand img { height:52px; margin-bottom:8px; }
.auth-card .auth-brand .school { font-weight:800; font-size:20px; color:var(--c-ink); }
/* Centred to sit under the logo and school name above, which are already
centred — left-aligned headings broke that axis. */
.auth-card h2 { font-size:22px; margin:0 0 4px; text-align:center; }
.auth-card h2 .fa { margin-right:4px; }
.auth-card .auth-lead { color:var(--c-ink-soft); margin-bottom:20px; text-align:center; }
.auth-card .form-control { padding:12px 14px; height:auto; font-size:15px; }
.auth-card .btn-block { padding:12px; font-size:16px; }
.auth-code { letter-spacing:3px; text-transform:uppercase; font-weight:800; text-align:center; font-size:22px; }
@keyframes rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@media (max-width: 900px) {
.auth-visual { display:none; }
.auth-form { flex-basis:100%; }
}
/* ---- Voter ballot polish -------------------------------------------------
These rules were previously split between assets/app.css and an inline