/* ============================================================
   layout.css — chrome applicatif : header, zone de contenu,
   footer. Extrait du bloc <style> inline de _Layout.cshtml.
   Vocabulaire aligne sur auth.css (.lgs-*) ; tokens definis
   dans site.css.
   Charge apres site.css et AVANT les feuilles de marque
   (brand-*.css) et site_overrides.css, qui doivent pouvoir
   surcharger.
   ============================================================ */

:root {
    /* Valeur de premier affichage seulement : chrome.js recale
       --layout-header-height sur la hauteur reelle du header. */
    --layout-header-height: 105px;
    --layout-footer-height: 35px;
}

/* ---------- Bandeau de marque ---------- */
.lgs-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: var(--lgs-ink);
    text-decoration: none;
}

.lgs-brand:hover { color: var(--lgs-ink); }

.lgs-brand img { margin: 2px; }

.bigtext { font-size: 30px; }

.un    { color: var(--brand-title-1); font-weight: bold; }
.deux  { color: var(--brand-title-2); }
.trois { color: var(--brand-title-3); font-weight: bold; }

/* ---------- Header ---------- */
/* Hauteur passee de 105px figes a auto : le contenu dicte, et
   la barre ne deborde plus quand les colonnes passent a la ligne
   sur petit ecran. Le margin:2px a saute, il debordait de 4px en
   largeur et justifiait le overflow-x:hidden sur body. */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    min-height: 44px;
    padding: 6px 12px;
    background-color: var(--brand-header-footer);
    border-bottom: 1px solid var(--lgs-line);
    box-shadow: 0 1px 3px rgba(22,33,62,.06);
    z-index: 1000;
}

.lgs-hello {
    margin: 0;
    color: var(--brand-header-footer-color);
}

/* Bouton icone du header : calque sur .lgs-btn--ghost de auth.css,
   remplace le btn-secondary gris de Bootstrap. */
.lgs-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--lgs-navy);
    background: #fff;
    border: 1px solid var(--lgs-line);
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.lgs-iconbtn:hover {
    color: var(--lgs-navy);
    background: #f4f6f9;
    border-color: #c6ccd8;
}

.lgs-iconbtn:focus-visible {
    outline: 3px solid rgba(223,174,69,.55);
    outline-offset: 2px;
}

/* ---------- Zone de contenu ---------- */
.content {
    position: absolute;
    top: calc(var(--layout-header-height) + 5px);
    bottom: var(--layout-footer-height);
    left: 0;
    right: 0;
    overflow-x: hidden;
}

#wrapper { width: 100%; padding: 0; }

#page-content-wrapper { width: 100%; position: relative; padding: 0; }

main {
    margin: 10px; height: 100%;
}

/* ─────────────────────────────────────────────────────────────
   Vues a convention (titre en <table> + <hr>/<br> + <div> composant) :
   titre et separateur figes en haut, seul le composant scrolle.
   Le selecteur :has(> table) exclut les pages sans cette structure
   (login, pages speciales) qui gardent leur affichage normal.
   ───────────────────────────────────────────────────────────── */
main:has(> table) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* titre/ariane/bookmark groupes a gauche */
    overflow: hidden;
    min-height: 0;
}
main:has(> table) > table,
main:has(> table) > hr,
main:has(> table) > br {
    flex: 0 0 auto;
}
/* L'<hr> est un flex-item : avec align-items: flex-start il ne s'etire
   pas et se reduit a une largeur nulle (invisible). On force sa largeur. */
main:has(> table) > hr {
    align-self: stretch;
    width: 100%;
}
/* <tr> orphelin (bouton retour hors table dans certaines vues) : le rendre bloc pleine largeur */
main:has(> table) > tr {
    flex: 0 0 auto;
    display: block;
    width: 100%;
}
main:has(> table) > div:last-child {
    flex: 1 1 auto;
    align-self: stretch;       /* pleine largeur malgre align-items: flex-start */
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

body { overflow-x: hidden; }

/* ---------- Footer ---------- */
/* line-height:40px dans une barre de 35px poussait le texte vers
   le bas : centrage par flex a la place. */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: var(--layout-footer-height);
    padding: 0 12px;
    background-color: var(--brand-header-footer);
    border-top: 1px solid var(--lgs-line);
    z-index: 999;
}

/* Meme traitement que .lgs-auth__legal en bas de lecran de login */
.lgs-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--brand-header-footer-color);
}

.lgs-footer__legal a { color: var(--brand-header-footer-color); text-decoration: none; }

.lgs-footer__legal a:hover { color: var(--lgs-navy); }

.lgs-footer__version { font-family: var(--brand-title-font); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .screenin  { display: none; } }
@media (min-width: 1000px) { .screenout { display: none; } }


/* ============================================================
   Arrondis globaux — pilotes par --lgs-radius (defini dans site.css).
   Regler --lgs-radius pour changer l'arrondi de toute l'application.
   ============================================================ */

/* Panneaux du dashboard (cockpit, card) */
.e-dashboardlayout .e-panel,
.e-dashboardlayout .e-panel .e-panel-container {
    border-radius: var(--lgs-radius);
}
/* L'en-tete du panel suit l'arrondi en haut */
.e-dashboardlayout .e-panel .e-panel-header {
    border-top-left-radius: var(--lgs-radius);
    border-top-right-radius: var(--lgs-radius);
}

/* Ombre des panneaux : vignettes / panneaux des cards (SfDashboardLayout) et volets du cockpit.
   Fluent pose sa propre ombre sur .e-dashboardlayout.e-control .e-panel (0,3,0) : meme selecteur ici pour la remplacer. */
.e-dashboardlayout.e-control .e-panel,
.cockpit-pane {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* Cartes Syncfusion */
.e-card { border-radius: var(--lgs-radius); }

/* Grilles (SfGrid / TreeGrid) : arrondir le cadre exterieur */
.e-grid,
.e-grid .e-gridheader,
.e-grid .e-gridcontent { border-radius: 0; }
.e-grid {
    border-radius: var(--lgs-radius);
    overflow: hidden;                 /* pour que l'en-tete et les lignes respectent l'arrondi */
}

/* Fluent supprime la bordure haute du grid (border-style: none solid solid) : le trait du haut
   est porte par la premiere bande (zone de groupage, barre d'outils ou en-tete), qui est carree.
   (le 1er enfant du grid est un .e-spinner-pane technique : on vise la bande qui le suit.)
   On donne la bordure haute au grid, arrondie, et on la retire a la premiere bande (pas de double trait). */
.e-grid { border-top-style: solid; }
.e-grid > .e-spinner-pane + .e-groupdroparea,
.e-grid > .e-spinner-pane + .e-toolbar,
.e-grid > .e-spinner-pane + .e-gridheader { border-top-width: 0; }

/* Editeur de diagramme (Bpmn_smb) : le cadre de la zone, bordure definie en style inline */
.bpmn-host { border-radius: var(--lgs-radius); overflow: hidden; }

/* Splitters (SfSplitter) : le conteneur arrondit et rogne ses volets (grilles, etc.) */
.e-splitter {
    border-radius: var(--lgs-radius);
    overflow: hidden;
}

/* Onglets */
.e-tab { border-radius: var(--lgs-radius); }
/* La bande d'onglets (fond de marque) est un enfant carre : on arrondit ses coins hauts et on la rogne */
.e-tab .e-tab-header {
    border-radius: var(--lgs-radius) var(--lgs-radius) 0 0;
    overflow: hidden;
}

/* Planning (SfSchedule) */
.e-schedule {
    border-radius: var(--lgs-radius) !important;
    overflow: hidden;
    padding: 0 !important;   /* Fluent met 12px a gauche/droite : la bande de marque n'atteignait pas les bords */
}

/* Accordeons */
.e-accordion {
    border-radius: var(--lgs-radius);
    overflow: hidden;
    /* Fluent met un cadre 1px #edebe9 + fond blanc sur le conteneur : avec des items arrondis et separes,
       il laisse un filet gris et des traces blanches aux angles. Les items etant separes, plus de cadre commun. */
    border: 0;
    background: transparent;
}

/* Chaque item de l'accordeon est arrondi et separe du suivant (Fluent impose radius 0 sur
   .e-acrdn-item, .e-acrdn-header et leur :focus, d'ou !important). Item ouvert : l'en-tete
   garde les coins du bas droits, le contenu est colle dessous (.e-select = item deplie ;
   .e-expand-state semble n'etre present qu'avec le focus). */
.e-accordion .e-acrdn-item {
    border-radius: var(--lgs-radius) !important;
    border: 0 !important;             /* Fluent trace un filet #edebe9 sous chaque item : visible une fois les items separes */
    overflow: hidden;
    margin-bottom: 6px !important;
}
.e-accordion .e-acrdn-item:last-child { margin-bottom: 0 !important; }
.e-accordion .e-acrdn-item .e-acrdn-header,
.e-accordion .e-acrdn-item .e-acrdn-header:focus {
    border-radius: var(--lgs-radius) !important;
}
.e-accordion .e-acrdn-item.e-select > .e-acrdn-header,
.e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Boutons Syncfusion */
.e-btn, .e-css.e-btn { border-radius: var(--lgs-radius); }
/* Variantes de taille : fluent.css reimpose 2px via .e-btn.e-small / .e-bigger (0,2,0),
   plus specifique que la regle ci-dessus. On ecarte .e-round (boutons ronds volontaires). */
.e-btn.e-small:not(.e-round),
.e-css.e-btn.e-small:not(.e-round),
.e-small .e-btn:not(.e-round),
.e-btn.e-bigger:not(.e-round),
.e-bigger .e-btn:not(.e-round) { border-radius: var(--lgs-radius); }

/* ---------- Champs de saisie Syncfusion (theme Fluent) ----------
   fluent.css impose border-radius:2px avec une specificite plus
   forte que les regles precedentes :
     - .e-input-group.e-control-wrapper (0,2,0) sur le conteneur ;
     - input.e-input / .e-input-group input.e-input sur le champ
       interne, dont le fond recouvre les coins du conteneur ;
     - .e-input-group.e-control-wrapper.e-input-focus:not(.e-success)
       :not(.e-warning):not(.e-error) (0,6,0), qui reimpose 2px des
       que le champ prend le focus -> l'arrondi disparaissait a
       l'edition.
   D'ou le !important et la couverture explicite des etats. */

/* Conteneurs : TextBox, DropDownList, ComboBox, AutoComplete,
   DatePicker, DateTimePicker, TimePicker, NumericTextBox, MultiSelect */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper,
.e-control-wrapper.e-ddl,
.e-date-wrapper,
.e-datetime-wrapper,
.e-time-wrapper,
.e-numeric.e-control-wrapper,
.e-multi-select-wrapper {
    border-radius: var(--lgs-radius) !important;
}

/* Etats focus / validation / desactive : le theme y reinjecte 2px */
.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus,
.e-input-group.e-success,
.e-input-group.e-warning,
.e-input-group.e-error,
.e-input-group.e-control-wrapper.e-success,
.e-input-group.e-control-wrapper.e-warning,
.e-input-group.e-control-wrapper.e-error,
.e-float-input.e-input-focus,
.e-float-input.e-control-wrapper.e-input-focus,
.e-input-group.e-disabled,
.e-input-group.e-control-wrapper.e-disabled {
    border-radius: var(--lgs-radius) !important;
}

/* Champ interne : sans arrondi, son fond masque les coins du conteneur */
input.e-input,
textarea.e-input,
input.e-input:focus,
textarea.e-input:focus,
.e-input-group input.e-input,
.e-input-group input,
.e-input-group textarea.e-input,
.e-input-group.e-control-wrapper input.e-input,
.e-input-group.e-control-wrapper input,
.e-input-group.e-control-wrapper textarea.e-input,
.e-float-input input,
.e-float-input.e-control-wrapper input {
    border-radius: var(--lgs-radius) !important;
}

/* Icone de droite (fleche du dropdown, calendrier, horloge, clear) :
   elle occupe le coin, il lui faut le meme arrondi cote droit. */
.e-input-group .e-input-group-icon:last-child,
.e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    border-top-right-radius: var(--lgs-radius);
    border-bottom-right-radius: var(--lgs-radius);
}
.e-input-group.e-rtl .e-input-group-icon:last-child,
.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child {
    border-radius: var(--lgs-radius) 0 0 var(--lgs-radius);
}

/* Popups associes (liste deroulante, calendrier) pour rester coherent */
.e-ddl.e-popup,
.e-multi-select-list-wrapper {
    border-radius: var(--lgs-radius);
    overflow: hidden;
}

/* Dialogues / popups */
.e-dialog { border-radius: var(--lgs-radius); overflow: hidden; }

/* Conteneurs Bootstrap courants utilises dans l'appli */
.card,
.shadow, .shadow-sm, .shadow-lg, .shadow-none,
.rounded, .bg-white.rounded { border-radius: var(--lgs-radius) !important; }

/* Tout element portant une ombre doit suivre l'arrondi (sinon l'ombre parait carree).
   La combinaison ombre + coins droits donne une ombre carree : on force le radius. */
[class*="shadow"] { border-radius: var(--lgs-radius) !important; }
.e-card, .e-dashboardlayout .e-panel { border-radius: var(--lgs-radius) !important; }

/* Cartes internes cockpit/card definies dans les composants */
.cockpit-lien-row,
.card-ver,
.card-ver-more { border-radius: var(--lgs-radius); }