/* ==========================================================================
   Heures — administration
   Coquille à barre latérale, par-dessus app.css.
   ========================================================================== */

.app { display: flex; min-height: 100vh; align-items: stretch; }

/* --- Barre latérale --------------------------------------------------------- */

.sidebar {
    flex: 0 0 244px;
    background: var(--white);
    border-right: 1px solid var(--line);
    padding: 1.25rem .75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: block;
    padding: .375rem .625rem 0;
    text-decoration: none;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .75rem;
    border-radius: var(--r-sm);
    font-size: .9375rem; font-weight: 500;
    color: var(--slate); text-decoration: none;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.sidebar-nav a svg { flex: 0 0 20px; opacity: .75; }
.sidebar-nav a:hover { background: var(--violet-50); color: var(--ink); }
.sidebar-nav a.is-current { background: var(--violet-100); color: var(--violet-700); font-weight: 600; }
.sidebar-nav a.is-current svg { opacity: 1; }

.sidebar-count {
    margin-left: auto;
    font-size: .75rem; font-weight: 700;
    background: var(--rose-200); color: var(--rose-700);
    padding: .0625rem .5rem; border-radius: 999px;
}

.sidebar-foot { margin-top: auto; }
.sidebar-foot .sidebar-nav a { font-size: .875rem; color: var(--muted); }

.sidebar-tip {
    background: var(--violet-50);
    border-radius: var(--r);
    padding: .875rem 1rem;
    font-size: .8125rem;
    color: var(--violet-800);
    line-height: 1.5;
    margin: 0 .25rem .75rem;
}
.sidebar-tip strong { display: block; font-weight: 700; margin-bottom: .125rem; }

/* --- Zone principale --------------------------------------------------------- */

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 2rem 4rem;
}
.app-main > .shell { padding: 0; }

/* --- En-tête de page ---------------------------------------------------------- */

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.25rem; flex-wrap: wrap;
    margin: 0 0 1.25rem;
}
.page-head h1 { margin: 0; }
.page-head h2 { margin: 0; }
.page-head--sub { margin: 2rem 0 1rem; align-items: baseline; }
.head-state { display: flex; align-items: center; gap: .75rem; }

/* --- Tableaux ------------------------------------------------------------------ */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin: 0 0 1.25rem;
    font-size: .9375rem;
}
.table th, .table td {
    text-align: left;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.table thead th {
    font-size: .75rem; font-weight: 600;
    color: var(--muted);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--violet-50); }
.table tfoot th {
    font-size: .9375rem; font-weight: 700;
    background: var(--paper);
    border-bottom: 0;
    border-top: 1px solid var(--line);
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table a { color: var(--ink); text-decoration: none; font-weight: 600; }
.table a:hover { color: var(--violet-600); }

.table--plain {
    border: 0; background: none; border-radius: 0;
    margin-bottom: .75rem; font-size: .875rem;
}
.table--plain td { padding: .4375rem 0; border-bottom: 1px solid var(--line-soft); }
.table--plain tr:last-child td { border-bottom: 0; }
.table--plain tr:hover { background: none; }

.table--entries td { padding: .6875rem 1.125rem; }
.table tr.is-deleted td { color: var(--muted); }
.table tr.is-deleted td:nth-child(-n+4) { text-decoration: line-through; }
.table tr.is-archived td { color: var(--muted); }

/* Le formulaire de correction s'ouvre dans la dernière colonne, la plus
   étroite. On lui rend de la place et l'alignement à gauche, sinon il se
   replie en colonne d'un centimètre. */
.table--entries .entry-edit[open] {
    display: block;
    width: 26rem;
    max-width: 60vw;
    text-align: left;
    margin-top: .5rem;
}

/* --- À vérifier ----------------------------------------------------------------- */

.review-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .75rem 0;
    border-top: 1px solid var(--line-soft);
    font-size: .9375rem;
}
.review-row:first-of-type { border-top: 0; }

/* --- Colonnes -------------------------------------------------------------------- */

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.columns .card { margin-bottom: 0; }

/* --- Connexion ------------------------------------------------------------------- */

.login-shell {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
}
.login-card {
    width: 100%; max-width: 24rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}

/* --- Petits écrans ---------------------------------------------------------------- */

@media (max-width: 60rem) {
    .app { display: block; }
    .sidebar {
        position: static; height: auto; width: 100%;
        flex-direction: row; align-items: center; gap: .75rem;
        overflow-x: auto; padding: .75rem 1rem;
        border-right: 0; border-bottom: 1px solid var(--line);
    }
    .sidebar-brand { padding: 0; flex: 0 0 auto; }
    .sidebar-brand .logo { height: 26px; }
    .sidebar-nav { flex-direction: row; gap: .25rem; }
    .sidebar-nav a { padding: .5rem .75rem; white-space: nowrap; }
    .sidebar-nav a span { display: none; }
    .sidebar-nav a.is-current span { display: inline; }
    .sidebar-tip { display: none; }
    .sidebar-foot { margin-top: 0; margin-left: auto; }
    .app-main { padding: 1.25rem 1rem 3rem; }
    .table--entries { display: block; overflow-x: auto; }
}