:root {
    --bg: #f4f5f7;
    --card: #ffffff;
    --ink: #1f2430;
    --muted: #6b7280;
    --line: #e2e5ea;
    --accent: #2f6fed;
    --accent-ink: #ffffff;
    --danger: #c62828;
    --warn-bg: #fdecea;
    --ok: #2e7d32;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }

/* ---------- Top bars ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .7rem 1.2rem;
    background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--ink); }
.brand:hover { text-decoration: none; }
.mainnav { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.mainnav a { padding: .35rem .7rem; border-radius: 8px; color: var(--muted); }
.mainnav a:hover { text-decoration: none; background: var(--bg); }
.mainnav a.active { color: var(--ink); background: var(--bg); font-weight: 600; }
.mainnav a.right { margin-left: .6rem; }

.subbar {
    display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
    padding: .55rem 1.2rem; background: var(--card);
    border-bottom: 1px solid var(--line);
}
.subbar-title { font-weight: 700; margin-right: .6rem; }
.subbar a { padding: .3rem .6rem; border-radius: 8px; color: var(--muted); }
.subbar a:hover { text-decoration: none; background: var(--bg); }
.subbar a.active { color: var(--accent); background: #eef3fe; font-weight: 600; }

/* ---------- Layout ---------- */
.container { max-width: 1000px; margin: 1.4rem auto 4rem; padding: 0 1.2rem; }
.container-auth { max-width: 380px; margin-top: 8vh; }

.page-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}

/* ---------- Flash ---------- */
.flash {
    max-width: 1000px; margin: .8rem auto 0; padding: .6rem 1rem;
    border-radius: 8px; font-weight: 500;
}
.flash-success { background: #e7f4e8; color: var(--ok); }
.flash-error { background: var(--warn-bg); color: var(--danger); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem 1.1rem;
}
.card h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.card-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .7rem; font-size: .92rem; }

/* ---------- Forms ---------- */
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
    font: inherit; padding: .45rem .55rem; border: 1px solid var(--line);
    border-radius: 8px; background: #fff; color: var(--ink); max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #cfe0ff; border-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
label { display: inline-flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--muted); }
label > input, label > select { color: var(--ink); }

button {
    font: inherit; cursor: pointer; padding: .5rem .9rem;
    border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
    border-radius: 8px;
}
button:hover { filter: brightness(1.05); }
button.link {
    background: none; border: none; color: var(--accent); padding: .2rem .3rem;
}
button.link:hover { text-decoration: underline; }
button.link.danger { color: var(--danger); }
.btn, .btn-sm {
    display: inline-block; background: var(--accent); color: #fff;
    padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--accent);
}
.btn:hover, .btn-sm:hover { text-decoration: none; filter: brightness(1.05); }
.btn-sm { padding: .3rem .6rem; font-size: .88rem; }
button.big { padding: .6rem 1.2rem; font-size: 1.05rem; }

.inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.row-form { display: inline; }
.form-actions { margin-top: 1rem; }
.session-meta { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--ink); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.grid-form .wide { grid-column: 1 / -1; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } }

details.import { margin-top: .8rem; }
details.import summary { cursor: pointer; color: var(--accent); }
details.import textarea { margin: .5rem 0; }

/* ---------- Tables ---------- */
.grid {
    width: 100%; border-collapse: collapse; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.grid th, .grid td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--line); }
.grid th { background: #fafbfc; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.grid tr:last-child td { border-bottom: none; }
.grid tr.inactive td, .grid tr.inactive a { color: var(--muted); }
.grid .right, th.right, td.right { text-align: right; }
.grid .nowrap, .nowrap { white-space: nowrap; }
.grid td.warn { color: var(--danger); font-weight: 700; }

.table-wrap { overflow-x: auto; }

/* ---------- Roll call chips ---------- */
.status-cell { display: flex; gap: .3rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
    display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px; font-weight: 700; color: var(--muted);
    background: #fff;
}
.chip input:checked + span { color: #fff; border-color: transparent; }
.chip-present input:checked + span { background: var(--ok); }
.chip-absent  input:checked + span { background: var(--danger); }
.chip-retard  input:checked + span { background: #e08600; }
.chip-justifie input:checked + span { background: #6b7280; }

/* ---------- Tags ---------- */
.tag { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.tag-present { background: #e7f4e8; color: var(--ok); }
.tag-absent { background: var(--warn-bg); color: var(--danger); }
.tag-retard { background: #fdf0e0; color: #b56b00; }
.tag-justifie { background: #eef0f3; color: #4b5563; }

/* ---------- Misc ---------- */
.muted { color: var(--muted); }
.small { font-size: .85rem; }

code {
    background: #eef0f3; padding: .05rem .35rem; border-radius: 4px;
    font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sample {
    background: var(--card); border: 1px solid var(--line); border-radius: 8px;
    padding: .8rem 1rem; overflow-x: auto; font-size: .85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.filterbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.pill {
    padding: .25rem .7rem; border-radius: 999px; font-size: .88rem;
    border: 1px solid var(--line); color: var(--muted); background: #fff;
}
.pill:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.empty {
    background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
    padding: 1.6rem; text-align: center;
}
.empty .inline-form { justify-content: center; }

.draw-box {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.drawn-banner {
    margin-top: .7rem; padding: .7rem 1rem; border-radius: 8px;
    background: #eef3fe; color: var(--ink); font-size: 1.1rem;
}

.auth-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem;
}
.auth-card h1 { margin-bottom: .3rem; }
.auth-card form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.auth-card label { color: var(--ink); }
.auth-card input { width: 100%; }