/* =====================================================================
   gg-modern.css — thème global moderne (formulaires, boutons, modals)
   Chargé par _header.php sur toutes les pages : améliore le rendu des
   contrôles Bootstrap 4/5 existants sans modifier le HTML des pages.
   ===================================================================== */

:root {
    --gg-primary: #1e6fb8;
    --gg-primary-dark: #14304e;
    --gg-border: #dce3ec;
    --gg-bg-input: #fbfcfe;
    --gg-text: #20344c;
    --gg-muted: #6b7f95;
    --gg-radius: 10px;
}

/* ---------- Champs de formulaire ---------- */
.form-control,
.form-select,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="date"].form-control,
input[type="search"].form-control {
    border: 1.5px solid var(--gg-border);
    border-radius: var(--gg-radius);
    padding: 9px 14px;
    background-color: var(--gg-bg-input);
    color: var(--gg-text);
    font-size: .9rem;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gg-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(30, 111, 184, .12);
    outline: none;
}

.form-control::placeholder { color: #a8b6c6; }

.form-select {
    background-position: right 12px center;
}

label,
.form-label,
.o-lbl {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gg-muted);
    margin-bottom: 5px;
    letter-spacing: .01em;
}

.form-group { margin-bottom: 14px; }

/* ---------- Boutons ---------- */
.btn {
    border-radius: 9px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary,
.app-btn-primary,
.theme-btn {
    background-color: var(--gg-primary);
    border-color: var(--gg-primary);
}

.btn-primary:hover,
.app-btn-primary:hover {
    background-color: #185a96;
    border-color: #185a96;
    box-shadow: 0 6px 18px rgba(30, 111, 184, .3);
}

/* ---------- Modals ---------- */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(10, 30, 60, .25);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(120deg, var(--gg-primary) 0%, #2a86d4 100%);
    color: #fff;
    border-bottom: none;
    padding: 15px 20px;
}

.modal-header .modal-title { color: #fff; font-weight: 700; font-size: 1.05rem; }

.modal-header .btn-close,
.modal-header .close {
    filter: brightness(0) invert(1);
    opacity: .85;
}

.modal-footer { border-top: 1px solid #eef1f5; }

/* ---------- Cartes / feuilles ---------- */
.card,
.app-card {
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(20, 40, 80, .06);
}

/* ---------- Tableaux ---------- */
.table thead th,
.table thead td {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #191817;
    background-color: #f7f9fc;
    border-bottom: 1px solid #eef1f5;
    white-space: nowrap;
}

.table tbody tr:hover td { background-color: #f9fbfe; }

.table td,
.table th,
table.dataTable td,
table.dataTable th,
table.dataTable.compact td,
table.dataTable.compact th {
    padding: 10px 14px !important;
}

/* ---------- Cases à cocher / interrupteurs ---------- */
.form-check-input {
    border: 1.5px solid var(--gg-border);
    transition: background-color .15s ease, border-color .15s ease;
}

.form-check-input:checked {
    background-color: var(--gg-primary);
    border-color: var(--gg-primary);
}

/* ============================================================================
   Topbar unifiée — comportement et rendu IDENTIQUES à produits/liste_produits.php
   (classes .admin-topbar/.admin-breadcrumb reprises de gg.css).
   Le <header> legacy devient sticky, hauteur auto, aligné à droite du panneau.
   ========================================================================== */
header.app-header {
  position: sticky !important;
  top: 0;
  height: auto !important;
  z-index: 500;
  background: #FFFFFF !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
body.app { padding-top: 0 !important; }
@media (min-width: 1200px) { header.app-header { margin-left: 250px; } }
body.app-icons-only header.app-header { margin-left: 76px !important; }
@media (max-width: 1199.98px) { header.app-header { margin-left: 0; } }

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  padding: 16px 32px;
  background: #FFFFFF;
  border-bottom: 1px solid #EDEBE6;
  box-shadow: 0 1px 0 rgba(20, 40, 80, .02), 0 8px 20px -16px rgba(20, 40, 80, .18);
}
/* Le profil (à droite) ne doit jamais passer à la ligne : la zone de gauche
   (fil d'Ariane/titre) rétrécit et tronque en premier. */
.gg-topstats { min-width: 0; }
.gg-topbar-right { flex-shrink: 0; }
.admin-topbar h1 { font-size: 18px; font-weight: 700; color: #191817; margin: 0; line-height: 1.3; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-topbar-left { min-width: 0; }

.admin-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #ABA69D; margin-bottom: 5px; }
.admin-breadcrumb a { color: #ABA69D; text-decoration: none; transition: color .15s ease; }
.admin-breadcrumb a:hover { color: #1e6fb8; text-decoration: none; }
.admin-breadcrumb .sep { color: #E4E1DA; font-size: 9px; }
.admin-breadcrumb .current { color: #191817; }

.gg-topstats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gg-topstats .stat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; text-transform: none; letter-spacing: .01em; font-weight: 600; color: #8A8680;
  background: #F7F7F5; border: 1px solid #EEECE6; border-radius: 999px; padding: 6px 12px 6px 11px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.gg-topstats .stat:hover { box-shadow: 0 4px 12px rgba(20, 40, 80, .08); transform: translateY(-1px); }
.gg-topstats .stat b { display: inline-block; margin-left: 0; padding: 0; border-radius: 0; font-size: 13px; font-weight: 700; color: #191817; background: none; }
.gg-topstats .stat.blue { background: #EEF5FB; border-color: #DCEAF6; color: #3E7BA6; }
.gg-topstats .stat.blue b { color: #2A6FA8; }
.gg-topstats .stat.red { background: #FBEEEC; border-color: #F3D9D4; color: #B2604F; }
.gg-topstats .stat.red b { color: #B23B2C; }
.gg-topstats .stat.orange { background: #FBF3E8; border-color: #F3E3C9; color: #B98A45; }
.gg-topstats .stat.orange b { color: #B4680A; }

.gg-topbar-right { display: flex; align-items: center; gap: 14px; position: relative; flex-shrink: 0; }
.gg-topbar-right .sidepanel-toggler { color: #191817; padding: 6px; border-radius: 8px; transition: background-color .15s ease; }
.gg-topbar-right .sidepanel-toggler:hover { background: #F2F3F5; }
.gg-topbar-user { color: #191817; font-size: 13px; }
.gg-topbar-usericon {
  color: #191817 !important; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: #F7F8FA; border: 1px solid #E9EBEF;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.gg-topbar-usericon:hover { background: #EEF5FB; border-color: #DCEAF6; box-shadow: 0 4px 14px rgba(30, 111, 184, .16); }
.gg-topbar-usericon .bi-person-circle { font-size: 22px; color: #8A8680; }
.gg-topbar-usericon:hover .bi-person-circle { color: #1e6fb8; }

.app-user-dropdown .dropdown-menu {
  display: none;
  border: none; border-radius: 14px; padding: 8px; margin-top: 10px !important;
  box-shadow: 0 16px 40px rgba(20, 40, 80, .16);
  grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 2px 6px;
  min-width: 380px;
}
.app-user-dropdown .dropdown-menu.show {
  display: grid;
}
/* Séparateur et déconnexion toujours pleine largeur, en bas du menu (2 colonnes). */
.app-user-dropdown .dropdown-menu .dropdown-item-full {
  grid-column: 1 / -1;
}
.app-user-dropdown .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 12px; font-size: .875rem; color: #3A4A5C; transition: background-color .12s ease, color .12s ease; }
.app-user-dropdown .dropdown-item i { font-size: 15px; width: 18px; text-align: center; color: #8A97A6; }
.app-user-dropdown .dropdown-item:hover { background: #F2F7FC; color: #1e6fb8; }
.app-user-dropdown .dropdown-item:hover i { color: #1e6fb8; }
.app-user-dropdown .dropdown-divider { margin: 6px 4px; border-color: #EEF1F5; }

/* Le titre vit dans la topbar : doublon des pages legacy masqué. */
.app-page-title { display: none !important; }

@media (max-width: 900px) { .gg-topstats { display: none; } }

/* Identité dans la topbar : nom de l'entreprise connectée + utilisateur. */
.gg-topbar-ident { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.gg-topbar-ident .gg-topbar-company { font-size: 13px; font-weight: 700; color: #191817; white-space: nowrap; }
.gg-topbar-ident .gg-topbar-user { font-size: 11.5px; color: #8A8680; }

/* ---------- Messagerie interne : bulle flottante façon WhatsApp (identique à gg.css) ---------- */
.gg-chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 2000; font-family: inherit; }
.gg-chat-bubble {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: #2563EB; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(37,99,235,.35); transition: transform .15s ease, box-shadow .15s ease;
}
.gg-chat-bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,99,235,.42); }
.gg-chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #FF0000; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid #FFFFFF;
}
.gg-chat-panel {
  position: absolute; right: 0; bottom: 72px; width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 120px); background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.gg-chat-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.gg-chat-panel.minimized { height: auto; }
.gg-chat-panel.minimized .gg-chat-contacts,
.gg-chat-panel.minimized .gg-chat-conversation { display: none; }
.gg-chat-panel.minimized .gg-chat-head { cursor: pointer; }
.gg-chat-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #2563EB; color: #fff; flex-shrink: 0;
}
.gg-chat-head .titre { flex: 1; min-width: 0; }
.gg-chat-head .titre b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-chat-head .titre small { display: block; font-size: 11.5px; opacity: .85; }
.gg-chat-head button { background: none; border: none; color: #fff; font-size: 17px; cursor: pointer; padding: 4px; opacity: .9; flex-shrink: 0; }
.gg-chat-head button:hover { opacity: 1; }

.gg-chat-contacts { flex: 1; overflow-y: auto; }
.gg-chat-contact {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #E4E1DA;
  transition: background .1s ease;
}
.gg-chat-contact:hover { background: #F6F5F2; }
.gg-chat-contact .gg-avatar { flex-shrink: 0; position: relative; }
.gg-chat-dot { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #8A8680; border: 2px solid #FFFFFF; }
.gg-chat-dot.en-ligne { background: #16A34A; }
.gg-chat-contact .infos { flex: 1; min-width: 0; }
.gg-chat-contact .ligne1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.gg-chat-contact .nom { font-size: 13.5px; font-weight: 700; color: #191817; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-chat-contact .heure { font-size: 10.5px; color: #8A8680; flex-shrink: 0; }
.gg-chat-contact .ligne2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.gg-chat-contact .apercu { font-size: 12px; color: #8A8680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-chat-contact.non-lu .apercu { color: #191817; font-weight: 600; }
.gg-chat-contact .non-lus { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #2563EB; color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gg-chat-empty { padding: 40px 20px; text-align: center; color: #8A8680; font-size: 13px; }

.gg-chat-conversation { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gg-chat-messages { flex: 1; overflow-y: auto; padding: 14px; background: #F6F5F2; display: flex; flex-direction: column; gap: 2px; }
.gg-chat-jour { align-self: center; background: #E4E1DA; color: #8A8680; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; margin: 10px 0; }
.gg-chat-bulle { max-width: 78%; padding: 7px 10px; border-radius: 12px; font-size: 13px; line-height: 1.4; margin-bottom: 6px; word-wrap: break-word; }
.gg-chat-bulle .txt { white-space: pre-wrap; word-break: break-word; }
.gg-chat-bulle .meta { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 10px; margin-top: 3px; }
.gg-chat-bulle.mine { align-self: flex-end; background: #2563EB; color: #fff; border-bottom-right-radius: 3px; }
.gg-chat-bulle.mine .meta { color: rgba(255,255,255,.75); }
.gg-chat-bulle.mine .meta .lu { color: #7CD4FF; }
.gg-chat-bulle.autre { align-self: flex-start; background: #FFFFFF; color: #191817; border: 1px solid #E4E1DA; border-bottom-left-radius: 3px; }
.gg-chat-bulle.autre .meta { color: #8A8680; }

.gg-chat-piece-attente {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F6F5F2; border-top: 1px solid #E4E1DA;
  font-size: 12px; color: #191817; flex-shrink: 0;
}
.gg-chat-piece-attente span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-chat-piece-attente button { background: none; border: none; color: #8A8680; cursor: pointer; font-size: 14px; padding: 2px; }
.gg-chat-piece-attente button:hover { color: #191817; }

.gg-chat-form { display: flex; align-items: center; gap: 6px; padding: 10px; background: #FFFFFF; border-top: 1px solid #E4E1DA; flex-shrink: 0; }
.gg-chat-form input[type="text"] {
  flex: 1; border: 1.5px solid #E4E1DA; border-radius: 20px; padding: 9px 14px; font-size: 13px; font-family: inherit; outline: none;
}
.gg-chat-form input[type="text"]:focus { border-color: #2563EB; }
.gg-chat-form #ggChatJoindre { background: none; color: #8A8680; box-shadow: none; width: 32px; height: 32px; font-size: 16px; }
.gg-chat-form #ggChatJoindre:hover { color: #191817; }
.gg-chat-form button {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: #2563EB; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; transition: opacity .15s ease;
}
.gg-chat-form button:disabled { opacity: .5; cursor: not-allowed; }

.gg-chat-bulle .piece-img { display: block; max-width: 100%; border-radius: 8px; margin-bottom: 4px; cursor: pointer; }
.gg-chat-bulle .piece-fichier {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; margin-bottom: 4px;
  background: rgba(0,0,0,.06); color: inherit; text-decoration: none; font-size: 12.5px;
}
.gg-chat-bulle.mine .piece-fichier { background: rgba(255,255,255,.18); }
.gg-chat-bulle .piece-fichier i { font-size: 18px; flex-shrink: 0; }
.gg-chat-bulle .piece-fichier span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .gg-chat-widget { right: 12px; bottom: 12px; }
  .gg-chat-panel { right: -6px; width: calc(100vw - 20px); }
}