/* =============================================================================
   PAC Manager - Custom Styles
   ============================================================================= */

/* Variables */
:root {
    --color-rouge: #dc3545;
    --color-rouge-light: #f8d7da;
    --color-bleu: #0d6efd;
    --color-bleu-light: #cfe2ff;
    --color-blanc: #6c757d;
    --color-blanc-light: #e9ecef;
    --color-success: #198754;
    --color-success-light: #d1e7dd;
    --color-error: #dc3545;
    --color-error-light: #f8d7da;
}

/* =============================================================================
   Layout
   ============================================================================= */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

footer {
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--pico-muted-border-color);
    color: var(--pico-muted-color);
}

/* =============================================================================
   Navigation
   ============================================================================= */

nav {
    background: var(--pico-card-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
}

nav .nav-brand {
    text-decoration: none;
}

/* =============================================================================
   Login Page
   ============================================================================= */

.login-card {
    max-width: 400px;
    margin: 4rem auto;
}

.login-card header {
    text-align: center;
}

.login-card h1 {
    margin-bottom: 0.5rem;
}

/* =============================================================================
   Alerts
   ============================================================================= */

.alert {
    padding: 1rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
}

.alert-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.alert-error {
    background: var(--color-error-light);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* =============================================================================
   Tempo Badges
   ============================================================================= */

.tempo-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--pico-border-radius);
    font-weight: bold;
    font-size: 0.9rem;
}

.tempo-rouge {
    background: var(--color-rouge-light);
    color: var(--color-rouge);
    border: 2px solid var(--color-rouge);
}

.tempo-bleu {
    background: var(--color-bleu-light);
    color: var(--color-bleu);
    border: 2px solid var(--color-bleu);
}

.tempo-blanc {
    background: var(--color-blanc-light);
    color: var(--color-blanc);
    border: 2px solid var(--color-blanc);
}

/* =============================================================================
   Dashboard State
   ============================================================================= */

.label {
    display: block;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.25rem;
}

.value {
    font-size: 1.25rem;
    font-weight: bold;
}

/* =============================================================================
   Tables
   ============================================================================= */

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

table {
    width: 100%;
}

/* Ligne passée (grisée) */
tr.past {
    opacity: 0.5;
}

/* Cellule raison - troncature */
.raison-cell {
    max-width: 200px;
}

.raison {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cellule actions */
.actions-cell {
    white-space: nowrap;
    width: 100px;
}

.inline-form {
    display: inline;
}

/* =============================================================================
   Buttons
   ============================================================================= */

.button-group {
    display: flex;
    gap: 0.5rem;
}

button.small,
a[role="button"].small {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

button.danger {
    --pico-color: var(--color-error);
    --pico-border-color: var(--color-error);
}

button.danger:hover {
    --pico-background-color: var(--color-error);
    --pico-color: white;
}

/* Header avec bouton à droite */
article header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

article header a[role="button"] {
    margin: 0;
}

/* =============================================================================
   Utilities
   ============================================================================= */

.muted {
    color: var(--pico-muted-color);
}

.small {
    font-size: 0.85rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
    /* Sur mobile, empiler les champs date/heure */
    .grid {
        grid-template-columns: 1fr;
    }
    
    /* Masquer certaines colonnes sur mobile */
    table th:nth-child(3),
    table td:nth-child(3) {
        display: none;
    }
    
    /* Réduire la taille du header */
    article header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* =============================================================================
   Fix boutons actions tableau
   ============================================================================= */
.actions-cell a[role="button"],
.actions-cell button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    margin: 0 0.1rem !important;
    width: auto !important;
}

.actions-cell .inline-form {
    display: inline-block;
    margin: 0;
}

/* =============================================================================
   Home Intervals
   ============================================================================= */
.home-intervals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.interval-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--pico-border-radius);
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid var(--color-success);
    font-weight: 500;
}

/* =============================================================================
   Login - Toggle Password
   ============================================================================= */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    flex: 1;
    padding-right: 3rem;
    margin-bottom: 0;
}

.toggle-password {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.2rem;
    opacity: 0.7;
    width: auto;
    margin: 0;
}

.toggle-password:hover {
    opacity: 1;
    background: none;
}