:root {
    /* University of Luzon palette. */
    --ul-maroon: #680700;
    --ul-maroon-dark: #3d0500;
    --ul-gold: #C79900;
    --ul-bg: #F7F7F7;
    --ul-surface: #FFFFFF;
    --ul-text: #171717;
    --ul-muted: #5C5C5C;
    --ul-border: #E5E5E5;
    --ul-border-input: #8A8A8A;

    --color-bg: var(--ul-bg);
    --color-surface: var(--ul-surface);
    --color-ink: var(--ul-text);
    --color-ink-soft: var(--ul-muted);
    --color-accent: var(--ul-maroon);
    --color-accent-hover: var(--ul-maroon-dark);
    --color-gold: var(--ul-gold);
    --color-on-accent: #FFFFFF;
    --color-border: var(--ul-border);

    --color-pass: #2E6F58;
    --color-fail: #B3492B;
    --color-pending: #B8862E;
    --color-pending-text: #8A5E0B;

    --font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-body);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;

    --radius-control: 0.5rem;
    --radius-card: 0.75rem;
    --radius-panel: 1rem;
    --shadow-card: 0 1px 2px rgba(23, 23, 23, 0.06), 0 2px 8px rgba(23, 23, 23, 0.05);
}
/* Visual direction adapted from Unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-ink);
    line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin-bottom: 0.75rem; }
h1 { font-size: 1.75rem; font-weight: 600; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; }
strong, b { font-weight: 600; }
p { max-width: 65ch; }
a { color: var(--ul-link); }
.site-main a:not(.btn):hover { color: var(--ul-link-hover); }

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--ul-surface);
    color: var(--ul-text);
    border-bottom: 1px solid var(--ul-border);
}
.site-header__brand { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--ul-maroon); }
.site-header__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; }
.site-header__nav a { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: var(--radius-control); text-decoration: none; color: var(--ul-text); }
.site-header__nav a:hover, .site-header__nav a:focus-visible { background: var(--ul-bg); text-decoration: underline; }
.ui-icon { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.icon-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.icon-message { display: flex; align-items: flex-start; gap: 0.5rem; }
.icon-message .ui-icon { margin-top: 0.125rem; }
.nav-toggle {
    display: none; padding: 0.5rem 0.75rem; border: 1px solid var(--color-on-accent);
    border-radius: var(--radius-control); background: none; color: var(--ul-text);
    font: inherit; font-weight: 500; cursor: pointer;
}



.site-header .nav-toggle { border-color: var(--ul-border-input); }
.site-header button:focus-visible { outline-color: var(--ul-maroon); }

.site-main { max-width: 90rem; margin: 0 auto; padding: var(--space-7); }
.site-footer { text-align: center; padding: 1.5rem; color: var(--color-ink-soft); font-size: 0.85rem; }
.site-footer p { margin-left: auto; margin-right: auto; }

form label { display: block; font-size: 0.9rem; font-weight: 500; margin-top: var(--space-4); margin-bottom: var(--space-2); color: var(--ul-text); }
form input, form select, form textarea {
    width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--ul-border-input);
    border-radius: var(--radius-control); font-family: var(--font-body); font-size: 1rem;
    background: var(--ul-surface); color: var(--ul-text);
}
form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--ul-maroon); outline-offset: 1px; border-color: var(--ul-maroon); }
form input[readonly] { background: var(--ul-bg); color: var(--ul-muted); }

button[type="submit"], .btn {
    margin-top: var(--space-6); display: inline-block; min-height: 2.75rem; padding: 0.75rem 1.25rem;
    background: var(--color-accent); color: white; border: none; border-radius: var(--radius-control);
    font-family: var(--font-body); font-size: 1rem; font-weight: 500; cursor: pointer; text-decoration: none;
}
button[type="submit"]:hover, .btn:hover { background: var(--color-accent-hover); }
button[type="submit"]:disabled { background: #6B6B6B; cursor: wait; opacity: 1; }

/* Shared outline treatment for back-navigation links. */
.back-link {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--ul-border); border-radius: var(--radius-control); background: var(--ul-surface);
    color: var(--color-accent); font-weight: 500; text-decoration: none;
}
.back-link:hover { border-color: var(--color-accent); background: rgba(104, 7, 0, 0.06); color: var(--ul-maroon-dark); text-decoration: underline; }
.back-link:focus-visible { outline: 2px solid var(--ul-maroon); outline-offset: 2px; }
@media (max-width: 760px), (pointer: coarse) { .back-link { min-height: 2.75rem; } }

.form-error { background: #FBEAE4; color: var(--color-fail); padding: 0.75rem 1rem; border-radius: var(--radius-control); font-size: 0.9rem; margin-bottom: 0.5rem; }
.form-success { background: #E4F0EA; color: var(--color-pass); padding: 0.75rem 1rem; border-radius: var(--radius-control); font-size: 0.9rem; margin-bottom: 0.5rem; }

.shell-notice { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.shell-notice ul { margin: 0.75rem 0 0 1.25rem; }
.shell-notice li { margin-bottom: 0.25rem; color: var(--color-ink-soft); }
.flash { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-control); margin: 0 0 1.5rem; }
.flash .ui-icon { margin-top: 0.1rem; }
.flash--error { background: #FBEAE4; color: var(--color-fail); }
.flash--success { background: #E4F0EA; color: var(--color-pass); }

.status-badge { display: inline-block; min-width: 4.75rem; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; text-align: center; white-space: nowrap; }
.status-badge--pass { background: #E4F0EA; color: var(--color-pass); }
.status-badge--fail { background: #FBEAE4; color: var(--color-fail); }
.status-badge--pending { background: #FBF1E1; color: var(--color-pending-text); }

.card { background: var(--ul-surface); border: 1px solid var(--ul-border); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); overflow-x: auto; box-shadow: var(--shadow-card);}
.card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.card small { color: var(--ul-muted); font-size: 0.875rem; font-weight: 400; }
.card--prose p + p { margin-top: 0.5rem; }
pre.csv-sample { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--ul-bg); border: 1px solid var(--ul-border); border-radius: var(--radius-control); font-size: 0.85rem; overflow-x: auto; }

table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
table.data-table th, table.data-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--ul-border); font-size: 0.95rem; line-height: 1.45; }
table.data-table th { padding-top: 0.75rem; padding-bottom: 0.75rem; background: var(--ul-bg); font-weight: 500; color: var(--ul-muted); font-size: 0.85rem; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover td { background: var(--ul-bg); }
table.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rule-list { list-style: none; }
.rule-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.rule-list li:last-child { border-bottom: none; }
.rule-list__details { flex: 1; min-width: 0; }
.rule-list__details strong { display: block; margin-bottom: 0.15rem; }
.rule-list__summary { color: var(--ul-text); }
.rule-list__actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.rule-list__actions form { margin: 0; }
.rule-list__action { display: inline-flex; align-items: center; justify-content: center; min-width: 5rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; border: 1px solid var(--color-accent); border-radius: var(--radius-control); font: inherit; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; }
.rule-list__action--edit { color: var(--color-on-accent); background: var(--color-accent); }
.site-main a.rule-list__action--edit:hover, .site-main a.rule-list__action--edit:focus-visible { color: var(--color-on-accent); background: var(--color-accent-hover); }
.rule-list__actions button[type="submit"].rule-list__action { margin: 0; }
.rule-list__action--deactivate { color: var(--color-fail); background: var(--color-surface); border-color: var(--color-fail); }
.rule-list__action--deactivate:hover { color: white; background: var(--color-fail); }
.action-confirmation .rule-list__action--deactivate { color: white; background: var(--color-accent); border-color: var(--color-accent); }
.action-confirmation .rule-list__action--deactivate:hover { color: white; background: var(--color-accent-hover); }

@media (max-width: 600px) {
    .rule-list li.rule-list__item { align-items: stretch; flex-direction: column; gap: 0.75rem; }
    .rule-list__actions { align-self: flex-start; }
}

.page-actions { margin-bottom: 1.5rem; }

/* Focus (keyboard) */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.site-header a:focus-visible, .site-header summary:focus-visible { outline-color: var(--ul-maroon); }

/* Empty states: a short sentence plus the next step */
table.data-table td.empty-state, .rule-list li.empty-state { color: var(--ul-muted); text-align: center; padding: 1.25rem 0.75rem; }
.rule-list li.empty-state { justify-content: center; }
.empty-state__content { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.empty-state__content .ui-icon { color: var(--ul-muted); }

/* Office renewal decisions use a neutral outline; semantic statuses keep their own colors. */
.decision-chip { display: inline-block; padding: 0.125rem 0.5rem; border: 1px solid var(--ul-text); border-radius: 6px; background: var(--ul-surface); color: var(--ul-text); font-size: 0.8rem; font-weight: 500; }

/* Term + demo chrome */
.demo-banner {
    margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--ul-border);
    background: #FBF1E1; color: #8A5E0B; font-size: 0.9rem; text-align: center;
}
.term-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0 0 1rem; padding: 0.25rem 0.65rem; border: 1px solid var(--ul-border);
    border-radius: 999px; background: var(--ul-surface); color: var(--ul-muted); font-size: 0.85rem;
}
.term-chip__label {
    color: var(--ul-maroon); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.status-next, .status-why {
    display: block; margin-top: 0.25rem; color: var(--ul-muted); font-size: 0.85rem; font-weight: 400;
}
.status-why { font-style: italic; }
.file-missing { display: inline-flex; align-items: center; gap: 0.35rem; color: #B3492B; font-size: 0.9rem; }
.file-missing .ui-icon { width: 1rem; height: 1rem; }
.term-rules-warning { margin: 0 0 1rem; }
.recheck-form { margin-bottom: 1rem; }

/* Password fields: show/hide, strength hint, confirm match (script in includes/footer.php) */
/* Password fields: show/hide stays INSIDE the input */
.password-field {
    position: relative;
    display: block;
    width: 100%;
}
.password-field input[type="password"],
.password-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding-right: 4.5rem; /* room for Show/Hide */
}
.password-toggle {
    position: absolute;
    top: 0;
    right: 0.35rem;
    bottom: 0;
    z-index: 2;
    margin: auto 0;
    height: 2.25rem;
    min-width: 3.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ul-link, var(--color-accent));
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transform: none; /* avoid translateY fighting login layout */
}
.password-toggle:hover {
    background: var(--ul-bg);
    text-decoration: underline;
}
.password-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.password-meter { margin-top: var(--space-2); }
.password-meter__bars { display: flex; gap: 0.25rem; }
.password-meter__bars span { flex: 1; height: 0.375rem; border-radius: 999px; background: var(--ul-border); }
.password-meter[data-level="short"] .password-meter__bars span:nth-child(1),
.password-meter[data-level="weak"] .password-meter__bars span:nth-child(1),
.password-meter[data-level="long"] .password-meter__bars span { background: var(--color-fail); }
.password-meter[data-level="fair"] .password-meter__bars span:nth-child(-n+2) { background: var(--color-pending); }
.password-meter[data-level="strong"] .password-meter__bars span { background: var(--color-pass); }
.password-meter__text, .password-match { margin-top: 0.25rem; color: var(--ul-muted); font-size: 0.85rem; }
.password-match.is-match { color: var(--color-pass); }
.password-match.is-mismatch { color: var(--color-fail); }