/* awto-frontend-dashboard-spa/css/custom.css */

/* Variables de couleur personnalisées (si vous voulez surcharger Pico) */
/* Exemple : Vous pouvez définir vos propres couleurs primaires, secondaires, etc.
   Pico.css utilise des variables CSS, donc vous pouvez les redéfinir.
   Consultez la documentation de Pico.css pour les noms des variables.
   Par exemple, pour changer la couleur primaire :
   :root {
       --primary: #5469d4; --primary-hover: #475bc2; --primary-focus: rgba(84, 105, 212, 0.125); --primary-inverse: #FFF;
   }
*/

:root {
    --awto-black: #000000;
    --awto-white: #ffffff;
    --awto-blue-cta: #00AFED; /* Example blue */
    --awto-blue-cta-hover: #0afed0;
    --awto-grey-light: #f8f8f8;
    --awto-grey-medium: #e0e0e0;
    --awto-grey-dark: #555555;
    --awto-text-color: #333333;
    --awto-hero-overlay: rgba(0, 0, 0, 0.6);
    --awto-red-error: #991b1b;
    --awto-red-light: #fee2e2;
    --awto-green-color: #166534;
    --awto-green-light: #dcfce7;
    --header-height: 70px;
    --font-primary: 'Inter', sans-serif;
    --transition-speed: 0.3s;
    --spacing: 1rem 1.5rem;
}

/* Styles pour le logo */
.brand-logo img {
    height: 40px; /* Ajustez selon la taille de votre logo */
    margin-right: 0rem;
    vertical-align: middle;
    display: inline-block;
}
.brand-logo span {
    font-weight: bold;
    font-size: 1.2rem;
    vertical-align: middle;
    color: var(--awto-black);
}

/* Ajustements de mise en page spécifiques à Awto */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--awto-blue-cta);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--awto-blue-cta-hover);
    text-decoration: none; /* Or underline if preferred */
}

#app-header nav ul {
    padding-left: 0;
}

#app-header nav li {
    padding-right: 1rem;
}
#app-header nav li:last-child {
    padding-right: 0;
}

main#app-root {
    flex-grow: 1; /* Pour que le footer reste en bas */
    padding-top: 1rem;
    padding-bottom: 2rem;
}

#app-footer {
    text-align: center;
    padding: 1.5rem 0;
    border-top: 1px solid var(--muted-border-color);
    margin-top: auto; /* Pousse le footer en bas */
}

/* Indicateur de chargement (simple) */
#loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    padding: 1em;
    border-bottom: 1px solid var(--muted-border-color);
}
html[data-theme="dark"] #loading-indicator {
    background-color: rgba(30, 33, 39, 0.9); /* Couleur de fond pour le mode sombre */
}


/* Style pour les formulaires (Pico s'en charge en grande partie) */
form article { /* Si on met les formulaires dans des <article> pour le style de carte Pico */
    padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
}
form button[type="submit"] {
    margin-top: var(--spacing);
}

/* Style pour les messages d'erreur/succès */
.message {
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    border-style: solid;
    border-radius: var(--border-radius);
    border-width: 1px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: opacity 0.3s ease;
}
.message.error {
    color: var(--awto-red-error, var(--invalid));
    border-color: var(--awto-red-error, var(--invalid));
    background-color: var(--awto-red-light, rgba(210, 50, 50, 0.1));
}
.message.success {
    color: var(--form-element-valid-active-border-color, var(--valid));
    border-color: var(--form-element-valid-active-border-color, var(--valid));
    background-color: var(--form-element-valid-background-color, rgba(60, 180, 60, 0.1));
}

/* Navigation active */
nav a.active-link {
    background-color: var(--muted-border-color);
    color: var(--awto-blue-cta);
    /* Ou une autre indication visuelle */
}

.plans-grid {
    /* Pico.css grid est par défaut 2 colonnes sur mobile, 3 sur tablette, etc. */
    /* Vous pouvez ajuster le nombre de colonnes si besoin avec des media queries */
    /* ou en utilisant --grid-cols sur le conteneur .grid */
}
.plan-card footer button {
    width: 100%; /* Faire en sorte que le bouton prenne toute la largeur du footer de la carte */
}