/*
 * Ajouts GestStock par-dessus le thème Velzon (web/mainAssets/, chargé avant
 * ce fichier — guide §10.1). La couleur de marque vient du thème lui-même
 * (data-theme-colors="green" sur <html>, voir views/layouts/main.php et
 * login_layout.php) : ce fichier ne redéfinit plus de mise en page (topbar,
 * sidebar, cartes, boutons, champs...), seulement ce que le thème ne fournit
 * pas — toastr et SweetAlert2 sont émulés par web/js/panel.js tant qu'aucune
 * vraie bibliothèque toastr n'est ajoutée à MainAsset.
 */

:root {
    --gs-success: #0ab39c;
    --gs-warning: #f7b84b;
    --gs-error: #f06548;
    --gs-info: #299cdb;
}

/* ---------- Toasts (émulation toastr) ---------- */

.gs-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gs-toast {
    min-width: 220px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 6px;
    color: #fff;
    background: var(--gs-info);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.gs-toast-visible { opacity: 1; transform: translateY(0); }

.gs-toast-success { background: var(--gs-success); }
.gs-toast-error { background: var(--gs-error); }
.gs-toast-warning { background: var(--gs-warning); }
.gs-toast-info { background: var(--gs-info); }

/* ---------- Modales (émulation SweetAlert2, tant que sa vraie CSS charge déjà
   — voir web/js/panel.js : ne s'active que si window.Swal est absent) ---------- */

.gs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 19, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
}

.gs-modal-box {
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3);
}

.gs-modal-title { margin: 0 0 8px; font-size: 18px; }
.gs-modal-text { margin: 0 0 18px; color: #6b7670; font-size: 14px; }
.gs-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Menu latéral (repli robuste, voir web/js/panel.js) : classe posée
   par notre propre script, indépendante de la classe "vertical-sidebar-enable"
   du thème (celui-ci reste en place, inoffensif, au cas où il fonctionne par
   ailleurs). !important nécessaire : le thème fixe déjà margin-left avec
   !important sur .app-menu, il faut la même arme pour la remplacer. ---------- */

body.gs-sidebar-open .app-menu {
    margin-left: 0 !important;
    z-index: 1005;
}

body.gs-sidebar-open .vertical-overlay {
    display: block !important;
}

/* ---------- Identité de l'établissement dans le menu latéral (étape 2, hors
   dossier) : remplace le texte fixe "GestStock" du bloc .navbar-brand-box —
   plusieurs établissements partagent la même installation, chacun doit
   reconnaître le sien au premier coup d'œil. Classes gs-* posées sur la
   structure logo/logo-sm/logo-lg déjà fournie par le thème (web/mainAssets),
   pas de nouveau balisage indépendant. ---------- */

.gs-brand-box {
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gs-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: normal;
    text-decoration: none;
}

.gs-brand-mark {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.gs-brand-initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.gs-brand-nom {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 148px;
}

/* .logo-sm : PAS de display:none ici. Le thème le montre lui-même à la place
   de .logo-lg en dessous de 768px (app.css, media query max-width: 767.98px)
   — un override inconditionnel masquait les deux à la fois sur petit écran :
   c'est exactement ce qui laissait le bloc vide. */

/* ---------- Menu latéral : accent sur l'écran actif, transitions plus
   franches. Le thème gère déjà couleur/fond via ses variables --vz-vertical-
   menu-item-*, on ne fait qu'ajouter le repère visuel qui manque et adoucir
   le survol — aucune couleur codée en dur, tout reprend les variables du
   thème pour rester cohérent quel que soit le jeu de couleurs actif. ---------- */

.app-menu .navbar-nav > .nav-item > .nav-link.menu-link,
.app-menu .navbar-nav .nav-sm .nav-link {
    position: relative;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

.app-menu .navbar-nav > .nav-item > .nav-link.menu-link:hover,
.app-menu .navbar-nav .nav-sm .nav-link:hover {
    padding-left: 14px;
}

.app-menu .navbar-nav > .nav-item > .nav-link.menu-link.active::before,
.app-menu .navbar-nav .nav-sm .nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--vz-vertical-menu-item-active-color, #fff);
}

.app-menu .navbar-nav .menu-title span {
    letter-spacing: .06em;
    font-size: 11px;
}

/* ---------- Caisse (views/layouts/caisse_layout.php) : plein écran, sans
   sidebar ni page-title-box — le thème ne prévoit que la mise en page avec
   menu, ce gabarit s'en écarte volontairement (dossier §5.3). ---------- */

.gs-caisse-body { background-color: var(--vz-body-bg, #f3f6f9); }

.gs-caisse-topbar {
    display: flex;
    align-items: center;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.gs-caisse-contenu { padding: 16px; }

@media (min-width: 992px) {
    .gs-caisse-contenu { padding: 20px 24px; }
}

/* ---------- Écrans d'authentification (connexion, inscription, réinitialisation,
   étape 2 hors dossier) : la carte auth-page-wrapper vient du thème, ces règles
   n'ajoutent que ce qu'il ne fournit pas — l'ombre est volontairement un peu plus
   marquée que le défaut Velzon pour détacher la carte du fond à particules. ---------- */

.gs-auth-card {
    box-shadow: 0 10px 34px rgba(0, 0, 0, .12);
    border: none;
}

.gs-auth-icone {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--vz-primary-rgb), .1);
    color: var(--vz-primary);
    font-size: 26px;
    margin: 0 auto 14px;
}

/* Choix des modules à l'inscription : une carte cliquable par module, plutôt
   qu'une liste de cases nues — le motif "plan/option à cocher" attendu d'un
   formulaire d'inscription moderne. La case reste un vrai <input type=checkbox>
   (accessibilité, soumission de formulaire inchangée) : seule l'habillage visuel
   change selon son état, via .gs-module-checked posée en JS au clic. */

.gs-module-carte {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1.5px solid var(--vz-border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.gs-module-carte:hover {
    border-color: rgba(var(--vz-primary-rgb), .5);
}

.gs-module-carte.gs-module-checked {
    border-color: var(--vz-primary);
    background-color: rgba(var(--vz-primary-rgb), .06);
}

.gs-module-carte input.form-check-input {
    margin-top: 3px;
    flex-shrink: 0;
}

.gs-module-carte .gs-module-icone {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--vz-primary-rgb), .1);
    color: var(--vz-primary);
    font-size: 17px;
}