/* Custom styles for the application */

:root {
    --ink: #1E1B16;
    --ink-soft: #6B6255;
    --canvas: #F4F0E6;
    --paper: #FFFFFF;
    --paper-alt: #FBF8F1;
    --thread: #DED6C2;
    --patch: #F2A429;
    --patch-deep: #D97706;
    --patch-ink: #7A4B0A;
    --patch-soft: #FBE4B8;
    --ok: #3F8F5F;
    --ok-soft: #E3F3E8;
    --danger: #C0413A;
    --danger-soft: #FBE7E4;
    --mascot-ink: #221D16;

    /* Alias historiques, conservés pour compatibilité avec le code existant */
    --primary-color: var(--patch-deep);
    --secondary-color: var(--ink-soft);
    --success-color: var(--ok);
    --warning-color: var(--patch);
    --error-color: var(--danger);
    --background-color: var(--canvas);
    --card-background: var(--paper);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --border-color: var(--thread);
}

/* Pas de variante sombre automatique : une grande partie du code existant
   (bg-white, text-gray-700/800/900 Tailwind non migrés) suppose un thème
   clair fixe. Faire varier les tokens avec prefers-color-scheme créait des
   textes illisibles partout où ces classes n'avaient pas été retouchées. */

/* Hide admin-only elements for normal users */
.admin-only {
    display: none !important;
}

/* Show admin-only elements for admins and super-admins */
body[data-user-role="admin"] .admin-only,
body[data-user-role="super-admin"] .admin-only {
    display: inline-block !important;
}

body[data-user-role="admin"] .admin-only.btn,
body[data-user-role="super-admin"] .admin-only.btn {
    display: inline-flex !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--canvas);
    color: var(--ink);
}

/* Aligned job site and section code pairs */
.job-sites-container,
.job-hours-container,
.section-codes-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.job-site-pair {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Horizontal alignment for job site row */
.job-site-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: nowrap;
    width: 100%;
}

.job-site-row .form-select.job-site-select {
    flex: 1;
    /* min-width: 0 (au lieu d'un plancher en px) laisse le select rétrécir sous sa largeur
       de contenu naturelle — sans ça, un nom de chantier long forçait toute la colonne
       (et donc le tableau entier) à dépasser le cadre visible. Le texte tronqué reste
       consultable via l'infobulle native du navigateur au survol. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-site-row .btn {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
}

/* Job hours row alignment */
.job-hours-row {
    display: flex;
    align-items: center;
}

.job-hours-row .form-input.job-site-hours {
    width: 100%;
}

/* Section code row alignment */
.section-code-row {
    display: flex;
    align-items: center;
}

.section-code-row .form-select.section-code-select {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure table cells have proper alignment */
#hoursTableBody td {
    vertical-align: top;
}

#hoursTableBody .job-sites-container,
#hoursTableBody .job-hours-container,
#hoursTableBody .section-codes-container {
    min-height: 40px;
}

/* Ensure rows are aligned across columns */
.job-site-row,
.job-hours-row,
.section-code-row {
    min-height: 38px;
    display: flex;
    align-items: center;
}

/* Colonnes compactes : le total (~700px) tient sans barre de défilement horizontale sur
   un écran d'ordinateur portable standard, au lieu des ~1200px imposés auparavant.
   table-layout: fixed rend chaque largeur ci-dessous contraignante (pas juste indicative),
   donc un contenu trop long (nom de chantier, libellé d'absence...) est tronqué avec des
   points de suspension plutôt que d'élargir la colonne. Les sélecteurs "th" ciblaient
   auparavant #hoursTableBody (le <tbody>) — un <th> n'y vit jamais, donc ces règles ne
   s'appliquaient jamais aux en-têtes, d'où le désalignement avec les colonnes de données. */
#hoursTable {
    table-layout: fixed;
}

/* Temps/Jour n'est plus une colonne séparée depuis 2026-07-25 : affiché en sous-texte
   directement sous le nom (voir .employee-daily-hours dans createEmployeeRow), ce qui
   libère une colonne entière. */
#hoursTable thead th:nth-child(1), /* Agent de Production (+ Temps/Jour en sous-texte) */
#hoursTableBody td:nth-child(1) {
    width: 150px;
}

#hoursTable thead th:nth-child(2), /* Absence */
#hoursTableBody td:nth-child(2) {
    width: 90px;
}

#hoursTable thead th:nth-child(3), /* Chantier */
#hoursTableBody td:nth-child(3) {
    width: 165px;
}

#hoursTable thead th:nth-child(4), /* Heures */
#hoursTableBody td:nth-child(4) {
    width: 48px;
}

#hoursTable thead th:nth-child(5), /* Code Section */
#hoursTableBody td:nth-child(5) {
    width: 68px;
}

#hoursTable thead th:nth-child(6), /* Restant */
#hoursTableBody td:nth-child(6) {
    width: 74px;
}

#hoursTable .absence-select,
#hoursTable .employee-daily-hours,
#hoursTable .employee-remaining-hours {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- stitch motif: recurring dashed border ---------- */
.stitch-rule {
    border: none;
    border-top: 2px dashed var(--thread);
    margin: 0;
}

.stitch-box {
    border: 2px dashed var(--thread);
    border-radius: 14px;
}

/* Card styles */
.card {
    background: var(--paper);
    border: 2px dashed var(--thread);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(30, 27, 22, 0.06);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card-header {
    border-bottom: 2px dashed var(--thread);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

/* Dashboard tile grid (navigation en tuiles, style Odoo) */
.dashboard-tile-category-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1.75rem 0 0.75rem;
}

.dashboard-tile-category-title:first-of-type {
    margin-top: 0;
}

.dashboard-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.dashboard-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    background: var(--paper);
    border: 2px dashed var(--thread);
    border-radius: 0.75rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-tile:hover,
.dashboard-tile:focus-visible {
    border-color: var(--patch);
    box-shadow: 0 4px 10px rgba(30, 27, 22, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.dashboard-tile-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--patch-soft);
    color: var(--patch-ink);
    font-size: 1.1rem;
}

.dashboard-tile-title {
    font-weight: 600;
    color: var(--ink);
}

.dashboard-tile-desc {
    font-size: 0.8rem;
    color: var(--ink-soft);
    line-height: 1.35;
}

.dashboard-tile-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.dashboard-tile-badge--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.activity-row--clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.activity-row--clickable:hover,
.activity-row--clickable:focus-visible {
    background: var(--patch-soft) !important;
    outline: none;
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-size: 0.875rem;
}

.btn-primary {
    background-color: var(--patch);
    color: var(--patch-ink);
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--patch-deep);
    color: white;
}

.btn-secondary {
    background-color: var(--ink-soft);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--ink);
}

.btn-success {
    background-color: var(--ok);
    color: white;
}

.btn-success:hover {
    filter: brightness(0.92);
}

.btn-warning {
    background-color: var(--patch);
    color: var(--patch-ink);
}

.btn-warning:hover {
    background-color: var(--patch-deep);
}

.btn-danger {
    background-color: var(--danger);
    color: white;
}

.btn-danger:hover {
    filter: brightness(0.9);
}

.btn-outline {
    background-color: transparent;
    border: 2px dashed var(--thread);
    color: var(--ink);
}

.btn-outline:hover {
    background-color: var(--paper-alt);
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* Form styles */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--thread);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: var(--paper);
    color: var(--ink);
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--patch);
    box-shadow: 0 0 0 3px var(--patch-soft);
}

/* Champ mot de passe avec œil de visibilité (togglePasswordVisibility, main.js) */
.password-field-wrapper {
    position: relative;
}

.password-field-wrapper .form-input,
.password-field-wrapper input[type="password"],
.password-field-wrapper input[type="text"] {
    padding-right: 2.5rem;
}

.password-toggle-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--ink-soft);
}

.password-toggle-icon:hover {
    color: var(--ink);
}

.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--thread);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: var(--paper);
    color: var(--ink);
    transition: border-color 0.2s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--patch);
    box-shadow: 0 0 0 3px var(--patch-soft);
}

.form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--thread);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: var(--paper);
    color: var(--ink);
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--patch);
    box-shadow: 0 0 0 3px var(--patch-soft);
}

/* Table styles */
.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--paper);
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--thread);
}

.table th {
    background-color: var(--paper-alt);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.875rem;
}

.table td {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.table tbody tr:hover {
    background-color: var(--paper-alt);
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background-color: var(--ok-soft);
    color: var(--ok);
}

.badge-warning {
    background-color: var(--patch-soft);
    color: var(--patch-ink);
}

.badge-danger {
    background-color: var(--danger-soft);
    color: var(--danger);
}

.badge-info,
.badge-accent {
    background-color: var(--patch-soft);
    color: var(--patch-ink);
}

.badge-neutral {
    background-color: var(--paper-alt);
    color: var(--ink-soft);
    border: 1px solid var(--thread);
}

.app-header .user-menu-toggle:hover {
    color: var(--patch);
}

/* En-tête cliquable : retour à l'accueil (remplace l'ancien bandeau de navigation) */
.header-home-link {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.header-home-link:hover,
.header-home-link:focus-visible {
    opacity: 0.8;
    outline: none;
}

/* Écran de connexion (personne connecté) : pas de tuile "Utilisateurs"/menu à équilibrer sur la
   droite, donc juste le titre, centré sur la largeur de page — pas de logo, pas de clic (voir
   goToDashboard() qui refuse déjà d'agir sans session, cette règle n'est qu'un rappel visuel). */
body:not([data-user-role]) #headerBar {
    justify-content: center;
}

body:not([data-user-role]) .header-home-link {
    cursor: default;
}

body:not([data-user-role]) .header-home-link:hover,
body:not([data-user-role]) .header-home-link:focus-visible {
    opacity: 1;
}

body:not([data-user-role]) .header-home-link .mascot {
    display: none;
}

/* Kiosque repas : goToDashboard() (main.js) refuse déjà d'agir pour ce rôle (pas de tableau de
   bord à revoir), mais restait visuellement cliquable — même logique que l'écran de connexion,
   sauf que le logo reste affiché ici (identité du kiosque, contrairement à l'écran de connexion
   où il est retiré). La visite guidée est elle aussi désactivée pour ce rôle (voir tour.js
   maybeAutoStart) — le bouton "Revoir la visite guidée" n'a donc pas lieu d'apparaître non plus. */
body[data-user-role="repas"] .header-home-link {
    cursor: default;
}

body[data-user-role="repas"] .header-home-link:hover,
body[data-user-role="repas"] .header-home-link:focus-visible {
    opacity: 1;
}

body[data-user-role="repas"] #tourMenuButton {
    display: none;
}

/* Titre de page fusionné dans le bandeau d'en-tête — remplace les anciens blocs <h2>/<p> répétés
   sur chaque page. La description n'est jamais affichée en permanence : accessible via le bouton
   ⓘ (popover au clic, info-bulle native au survol via l'attribut title). */
.header-info-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s ease;
}

.header-info-btn:hover,
.header-info-btn:focus-visible {
    color: var(--patch);
}

#headerTitlePage {
    position: relative;
}

.header-info-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    max-width: 320px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--thread);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
}

#headerPageText {
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #headerPageText {
        max-width: 40vw;
    }

    #headerTitleDefault {
        font-size: 1rem;
    }
}

/* Visite guidée — même palier que .modal (1000), jamais ouverte en même temps qu'une modale */
.tour-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(30, 27, 22, 0.65);
    z-index: 1000;
}

.tour-spotlight {
    position: fixed;
    z-index: 1000;
    border: 2px solid var(--patch);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 9999px rgba(30, 27, 22, 0.65);
    pointer-events: auto;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.tour-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 320px;
    background: var(--paper);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(30, 27, 22, 0.3);
}

.tour-tooltip--centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tour-tooltip-progress {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-bottom: 0.25rem;
}

.tour-tooltip-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.tour-tooltip-text {
    font-size: 0.9rem;
    color: var(--ink);
    margin-bottom: 1rem;
}

.tour-tooltip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tour-tooltip-nav {
    display: flex;
    gap: 0.5rem;
}

/* Loading spinner */
.spinner {
    border: 2px solid var(--thread);
    border-top: 2px solid var(--patch);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Calendar styles */
.calendar {
    background: var(--paper);
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-header {
    background: var(--paper-alt);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--paper-alt);
    border-right: 1px solid var(--thread);
}

.calendar-day {
    min-height: 80px;
    padding: 0.5rem;
    border-right: 1px solid var(--thread);
    border-bottom: 1px solid var(--thread);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.calendar-day:hover {
    background-color: var(--paper-alt);
}

.calendar-day.today {
    background-color: var(--patch-soft);
}

.calendar-day.selected {
    background-color: var(--patch-soft);
    outline: 2px solid var(--patch);
    outline-offset: -2px;
}

/* Statuts jour par jour — vue calendrier de public/js/missingEntries.js (Suivi des saisies) */
.calendar-day--present {
    background-color: var(--ok-soft);
    color: var(--ok);
}

.calendar-day--missing {
    background-color: var(--danger-soft);
    color: var(--danger);
}

.calendar-day--closed {
    background-color: var(--paper-alt);
    color: var(--ink-soft);
}

.calendar-day--future {
    color: var(--ink-soft);
    opacity: 0.6;
}

/* Centre de notifications — cloche dans le menu utilisateur (public/js/notificationCenter.js) */
.notification-bell-btn {
    position: relative;
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.notification-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.4rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--danger-soft);
    color: var(--danger);
}

.notification-panel-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    /* !important nécessaire : background.css a "header button { color: white !important }" pour
       rester lisible sur le fond d'écran — cette règle matche aussi ces boutons de panneau
       (notifications/recherche), pourtant DOM-descendants de <header>, malgré leur fond blanc. */
    color: var(--ink) !important;
    text-shadow: none !important;
    background: none;
    border: none;
    cursor: pointer;
}

.notification-panel-item:hover {
    background: var(--paper-alt);
}

.notification-panel-empty {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.global-search-category {
    padding: 0.4rem 1rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
}

/* Le bouton de recherche est le plus à gauche des icônes du bandeau utilisateur : ancrer son
   panneau en "absolute right-0" (comme la cloche de notifications) le fait déborder hors de
   l'écran à gauche sur mobile, le panneau (w-72) étant plus large que l'espace disponible à
   gauche de l'icône. Bascule en position fixe pleine largeur sous le bandeau en dessous de 480px. */
@media (max-width: 480px) {
    #globalSearchPanel {
        position: fixed !important;
        top: 70px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
    }
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 27, 22, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--paper);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ink-soft);
}

/* ---------- mascot rendering ---------- */
.mascot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--patch-soft);
    border: 2px dashed var(--patch);
    flex: none;
}

.mascot img {
    display: block;
    width: 68%;
    height: 68%;
    object-fit: contain;
}

.mascot--flat {
    background: none;
    border: none;
}

.mascot--flat img {
    width: 100%;
    height: 100%;
}

.mascot--xl { width: 180px; height: 180px; }
.mascot--lg { width: 128px; height: 128px; }
.mascot--md { width: 88px; height: 88px; }
.mascot--sm { width: 56px; height: 56px; }
.mascot--xs { width: 36px; height: 36px; }

.stat-tile-icon {
    background: var(--patch-soft);
    color: var(--patch-deep);
}

.pill-accent {
    background: var(--patch-soft);
    color: var(--patch-deep);
}

.stat-pill {
    background: var(--patch-soft);
    border: 1px solid var(--patch);
    color: var(--patch-ink);
}

.stat-pill .text-2xl {
    color: var(--patch-deep);
}

.report-selected {
    border-color: var(--patch) !important;
    background-color: var(--patch-soft) !important;
}

.text-danger {
    color: var(--danger);
}

/* ---------- toast notifications ---------- */
.toast-success { background-color: var(--ok); }
.toast-error { background-color: var(--danger); }
.toast-warning { background-color: var(--patch); color: var(--patch-ink); }
.toast-info { background-color: var(--ink); }

/* ---------- shared empty state ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.empty-state .empty-state-message {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.95rem;
}

.empty-state .empty-state-sub {
    color: var(--ink-soft);
    font-size: 0.825rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .card {
        padding: 1rem;
    }

    .table {
        font-size: 0.75rem;
    }

    .table th,
    .table td {
        padding: 0.5rem;
    }
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }

.shadow { box-shadow: 0 1px 3px 0 rgba(30, 27, 22, 0.08); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(30, 27, 22, 0.1), 0 4px 6px -2px rgba(30, 27, 22, 0.05); }