/* src/web_ui/static/web_ui/css/srp.css */

/* ==========================================================================
   1) Variables globales (thème SRP)
   ========================================================================== */
   :root{
    --bg: #f5f6fa;                    /* Couleur de fond globale du site */
    --card: rgba(255,255,255,0.82);   /* Fond semi-transparent des panneaux/cartes */
    --border: rgba(0,0,0,0.10);       /* Couleur standard des bordures */
    --text: #111827;                  /* Couleur de texte principale */
    --muted: rgba(0,0,0,0.65);        /* Couleur de texte secondaire (atténuée) */
  }
  
  /* ==========================================================================
     2) Base (body)
     ========================================================================== */
  body{
    margin: 0;                        /* Retire la marge par défaut du navigateur */
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Police standard */
    background: var(--bg);            /* Applique la couleur de fond globale */
    color: var(--text);               /* Applique la couleur de texte globale */
  }
  
  /* ==========================================================================
     3) Topbar (barre du haut)
     ========================================================================== */
  .srp-topbar{
    position: sticky;                 /* La barre reste visible en haut pendant le scroll */
    top: 0;                           /* Collée au haut de la fenêtre */
    z-index: 10;                      /* Passe au-dessus du contenu */
    background: rgba(255,255,255,0.75); /* Fond translucide */
    backdrop-filter: blur(10px);      /* Flou derrière la barre (effet verre) */
    border-bottom: 1px solid var(--border); /* Ligne de séparation sous la barre */
  }
  
  .srp-topbar-inner{
    max-width: 1200px;                /* Largeur max du contenu centré */
    margin: 0 auto;                   /* Centre horizontalement */
    padding: 12px 16px;               /* Espacement interne */
    display: flex;                    /* Place les éléments sur une ligne */
    justify-content: space-between;   /* Écarte gauche/droite */
    align-items: center;              /* Aligne verticalement au centre */
    gap: 12px;                        /* Espace entre éléments */
  }
  
  .srp-title{
    font-size: 15px;                  /* Taille du titre */
    font-weight: 700;                 /* Épaisseur du titre */
    letter-spacing: .2px;             /* Espacement des lettres (légèrement) */
  }
  
  .srp-sub{
    font-size: 12px;                  /* Taille du sous-texte */
    color: var(--muted);              /* Couleur atténuée */
  }
  
  /* ==========================================================================
     4) Container / Layout générique
     ========================================================================== */
  .srp-container{
    max-width: 1200px;                /* Largeur max */
    margin: 0 auto;                   /* Centre horizontalement */
    padding: 16px;                    /* Espacement interne */
  }
  
  .srp-grid{
    display: flex;                    /* Mise en colonnes flex */
    gap: 16px;                        /* Espace entre colonnes */
    align-items: flex-start;          /* Aligne les colonnes en haut */
  }
  
  .srp-left{
    flex: 0 0 25%;                    /* Colonne gauche fixe à 25% */
    width: 25%;                       /* Force 25% */
    min-width: 260px;                 /* Empêche d’être trop étroit */
  }
  
  .srp-right{
    flex: 1;                          /* Colonne droite prend l’espace restant */
  }
  
  /* ==========================================================================
     5) Panneaux / Cartes
     ========================================================================== */
  .srp-panel{
    background: var(--card);          /* Fond de panneau */
    border: 1px solid var(--border);  /* Bordure standard */
    border-radius: 14px;              /* Coins arrondis */
    padding: 12px;                    /* Espacement interne */
  }
  
  .srp-panel_onglet{
    background: var(--card);          /* Fond du panneau “onglet” (si utilisé) */
    border: 1px solid var(--border);  /* Bordure standard */
    border-radius: 14px;              /* Coins arrondis */
    padding: 12px;                    /* Espacement interne */
  }
  
  .srp-card{
    background: var(--card);          /* Fond de carte */
    border: 1px solid var(--border);  /* Bordure standard */
    border-radius: 14px;              /* Coins arrondis */
    padding: 12px;                    /* Espacement interne */
  }
  
  .srp-card-head{
    display: flex;                    /* Layout header de carte */
    justify-content: space-between;   /* Sépare gauche/droite */
    align-items: flex-start;          /* Aligne en haut */
    gap: 10px;                        /* Espace entre éléments */
  }
  
  .srp-card-name{
    font-size: 14px;                  /* Taille du titre de carte */
    font-weight: 700;                 /* Épaisseur du titre */
  }
  
  .srp-muted{
    font-size: 12px;                  /* Texte secondaire plus petit */
    color: var(--muted);              /* Couleur atténuée */
  }
  
  /* ==========================================================================
     6) Listes / Grilles de cartes
     ========================================================================== */
  .srp-list{
    margin-top: 12px;                 /* Espace au-dessus */
    display: flex;                    /* Colonne flex */
    flex-direction: column;           /* Empile verticalement */
    gap: 8px;                         /* Espace entre items */
  }
  
  .srp-listitem{
    display: flex;                    /* Ligne flex */
    justify-content: space-between;   /* Sépare contenu / actions */
    align-items: center;              /* Aligne verticalement */
    gap: 10px;                        /* Espace entre colonnes internes */
    padding: 10px;                    /* Espacement interne */
    border: 1px solid rgba(0,0,0,0.10); /* Bordure légère */
    border-radius: 12px;              /* Coins arrondis */
    background: rgba(255,255,255,0.90); /* Fond plus opaque */
  }
  
  .srp-cards{
    display: grid;                    /* Layout en grille */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Colonnes adaptatives */
    gap: 12px;                        /* Espace entre cartes */
  }
  
  /* ==========================================================================
     7) Formulaires (inputs / boutons / rangées)
     ========================================================================== */
  .srp-row{
    display: flex;                    /* Met inputs/boutons en ligne */
    gap: 8px;                         /* Espace entre éléments */
    align-items: center;              /* Aligne verticalement */
  }
  
  /* NOTE: on garde UNE SEULE définition srp-input et srp-btn (doublons retirés) */
  .srp-label{
    display: block;                   /* Label sur sa propre ligne */
    font-size: 12px;                  /* Taille petite */
    margin: 8px 0 6px;                /* Espacement vertical */
    opacity: 0.85;                    /* Atténue le label */
  }
  
  .srp-input{
    width: 100%;                      /* Prend toute la largeur du parent */
    box-sizing: border-box;           /* Inclut bordure/padding dans width */
    padding: 10px;                    /* Espacement interne */
    border-radius: 10px;              /* Coins arrondis */
    border: 1px solid rgba(0,0,0,0.12); /* Bordure légère */
    background: #fff;                 /* Fond blanc */
  }
  
  .srp-btn{
    padding: 10px 12px;               /* Taille du bouton */
    border-radius: 10px;              /* Coins arrondis */
    border: 1px solid rgba(0,0,0,0.12); /* Bordure légère */
    background: #fff;                 /* Fond blanc */
    cursor: pointer;                  /* Curseur main */
  }
  
  .srp-btn:active{
    transform: translateY(1px);       /* Effet “pression” au clic */
  }
  
  .srp-btn-block{
    width: 100%;                      /* Bouton pleine largeur */
    margin-top: 10px;                 /* Espace au-dessus */
  }
  
  /* ==========================================================================
     8) Layout “Gestion” (header + grille + panels)
     ========================================================================== */
  .srp-page-head{
    display: flex;                    /* Titre + bloc droite en ligne */
    align-items: flex-end;            /* Aligne en bas */
    justify-content: space-between;   /* Sépare gauche/droite */
    gap: 12px;                        /* Espace si wrap */
    margin-bottom: 12px;              /* Espace sous header */
  }
  
  .srp-page-title{
    font-size: 28px;                  /* Gros titre */
    line-height: 1.2;                 /* Compresse verticalement */
  }
  
  .srp-page-sub{
    font-size: 12px;                  /* Sous-titre discret */
    opacity: 0.75;                    /* Atténué */
  }
  
  .srp-gestion-grid{
    display: flex;                    /* Main + side */
    gap: 16px;                        /* Espace entre colonnes */
    align-items: flex-start;          /* Aligne en haut */
    flex-wrap: wrap;                  /* Responsive (passe en colonne si petit écran) */
    margin-top: 0;                    /* Pas d’espace en haut */
    padding-top: 0;                   /* Pas de padding en haut */
  }
  
  .srp-gestion-main{
    flex: 1 1 520px;                  /* Colonne principale flexible */
    min-width: 520px;                 /* Largeur minimum */
  }
  
  .srp-gestion-side{
    flex: 0 0 340px;                  /* Colonne latérale fixe */
    width: 340px;                     /* Fixe la largeur */
  }
  
  .srp-gestion-actions{
    display: flex;                    /* Ligne d’actions */
    gap: 10px;                        /* Espace entre boutons */
    flex-wrap: wrap;                  /* Passe à la ligne si nécessaire */
    margin: 10px 0 12px 0;            /* Espacement vertical */
  }
  
  .srp-gestion-result{
    padding: 12px;                    /* Espacement interne */
    border-radius: 10px;              /* Coins arrondis */
    border: 1px solid rgba(0,0,0,0.10); /* Bordure légère */
    background: rgba(0,0,0,0.04);     /* Fond gris clair */
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Police “console” */
    white-space: pre-wrap;            /* Garde les retours ligne */
  }
  
  .srp-fullwidth{
    margin-bottom: 0;                 /* Réduit l’espace sous le bloc fullwidth */
    padding-bottom: 0;                /* Réduit le padding bas */
  }
  
  /* Empilement vertical standard (fullwidth + grid) */
  .srp-gestion-stack{
    display: grid;                    /* Grid pour empiler */
    gap: var(--srp-gap, 16px);        /* Gap uniforme (fallback 16px) */
  }
  
  /* Ajustement ciblé sur #targetTabs */
  #targetTabs{
    /* margin-left: 10px; */          /* Option : décale les onglets */
    margin-bottom: 0;                /* Enlève l’espace sous l’onglet */
    padding-bottom: 0;               /* Enlève padding bas */
  }
  
  /* ==========================================================================
     9) Onglets (cibles)
     ========================================================================== */
  .srp-tabs{
    display: flex;                    /* Onglets sur une même ligne */
    gap: 0;                           /* Pas de gap automatique */
    align-items: flex-end;            /* Aligne en bas (effet onglets) */
    margin: 0 0 12px 0;               /* Espace sous la rangée */
    padding: 0 8px;                   /* Air à gauche/droite */
    overflow-x: auto;                 /* Scroll horizontal si trop d’onglets */
    scrollbar-width: thin;            /* Scrollbar fine (Firefox) */
  }
  
  .srp-tab{
    appearance: none;                 /* Retire style natif bouton */
    background: rgba(0, 0, 0, 0.03);  /* Fond onglet inactif */
    border: 1px solid rgba(0, 0, 0, 0.12); /* Bordure fine */
    border-bottom: none;              /* Pas de bordure bas (colle au contenu) */
    border-top-left-radius: 12px;     /* Arrondi haut gauche */
    border-top-right-radius: 12px;    /* Arrondi haut droit */
    padding: 10px 16px;               /* Confort de clic */
    margin: 0 6px 0 0;                /* Espace entre onglets (mettre 0 pour coller) */
    cursor: pointer;                  /* Curseur main */
    color: inherit;                   /* Hérite la couleur */
    font: inherit;                    /* Hérite la police */
    white-space: nowrap;              /* Empêche retour ligne */
    user-select: none;                /* Empêche sélection texte */
  }
  
  .srp-tab:hover{
    background: rgba(0, 0, 0, 0.05);  /* Survol */
  }
  
  .srp-tab.is-active{
    background: #fff;                 /* Actif blanc */
    border-color: rgba(0, 0, 0, 0.20); /* Bordure plus visible */
    position: relative;               /* Permet le décalage */
    top: 1px;                         /* Monte légèrement l’actif */
  }
  
  /* Ajustements “Tâche faite” */
  .srp-tabs-row{
    margin-bottom: 0;                 /* Réduit l’espace sous la rangée */
  }
  
  #doneTargetTabs.srp-tabs{
    margin-bottom: 0;                 /* Réduit l’espace sous doneTargetTabs */
  }

  /* Onglet qui nécessite une action (pending) */
  .srp-tab.srp-tab-attn{
    border-color: rgba(220, 38, 38, 0.55);
    background: rgba(220, 38, 38, 0.10);
  }

  /* Si l’onglet est actif et en attention, on garde un rendu clair mais visible */
  .srp-tab.is-active.srp-tab-attn{
    border-color: rgba(220, 38, 38, 0.70);
    background: #fff;
    box-shadow: inset 0 -2px 0 rgba(220, 38, 38, 0.55);
  }
  
  /* ==========================================================================
     10) Colonnes “right” (si utilisé)
     ========================================================================== */
  .srp-gestion-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start; /* IMPORTANT : empêche l'étirement vertical/largeur forcée */
  }
    
  .srp-gestion-right > .srp-panel {
    align-self: stretch;     /* garde la largeur de colonne, sans forcer la hauteur */
  }

  .srp-gestion-right .srp-gestion-side{
    height: auto;
    align-self: stretch;
  }

  /* --------------------------------------------------------------------------
   Colonne droite : en mode "column", .srp-gestion-side ne doit PAS imposer une hauteur.
   Son flex-basis 340px doit rester une largeur uniquement.
   -------------------------------------------------------------------------- */
  .srp-gestion-right{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* IMPORTANT: annule le flex-basis 340px (qui devient une HAUTEUR en column) */
  .srp-gestion-right .srp-gestion-side{
    flex: 0 0 auto;   /* hauteur = contenu */
    width: 340px;     /* garde la largeur de la colonne droite */
    height: auto;     /* sécurité */
  }


  /* ======================
   Responsive mobile
   ====================== */
   @media (max-width: 480px) {
    /* Empêche les débordements horizontaux */
    html, body {
      overflow-x: hidden;
    }
  
    /* Grille principale (tache-faite / gestion / suivi) : empile */
    .srp-gestion-grid {
      flex-direction: column;
    }
  
    /* Colonnes : prennent toute la largeur */
    .srp-gestion-main,
    .srp-gestion-side {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0; /* crucial: permet au contenu de se replier */
    }
  
    /* Ancienne grille générique si utilisée ailleurs */
    .srp-grid {
      flex-direction: column;
    }
  
    .srp-left,
    .srp-right {
      width: 100%;
      min-width: 0;
      flex: 1 1 auto;
    }
  
    /* Texte : autoriser le retour à la ligne partout */
    .srp-panel,
    .srp-panel p,
    .srp-panel span,
    .srp-panel div {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  
    /* Tâches/Baraque : sur mobile, empile texte + bouton
       (on cible les .srp-card qui ont un display:flex inline) */
    /* Baraque (et aussi tache-faite si même structure) : le "row" interne devient une colonne */
    #tasksList .srp-card > div[style*="display:flex"][style*="justify-content:space-between"],
    #tasksList .srp-card > div[style*="display: flex"][style*="justify-content: space-between"] {
      flex-direction: column;
      align-items: stretch;
    }
  
    /* Baraque : conteneur du bouton (align-items:flex-end) -> stretch */
    #tasksList div[style*="flex-direction:column"][style*="align-items:flex-end"] {
      align-items: stretch;
    }
  
    /* Mobile : bouton à droite, taille pouce */
    #tasksList .srp-btn {
      min-height: 44px;
      min-width: 140px;
      white-space: normal;
    }

    /* Mobile : zone bouton alignée à droite */
    #tasksList div[style*="flex-direction:column"][style*="align-items:flex-end"] {
      align-items: flex-end; /* rétablit l'alignement à droite */
    }

    /* Mobile : la zone bouton prend toute la largeur, puis aligne à droite */
    #tasksList div[style*="flex-direction:column"][style*="align-items:flex-end"] {
      width: 100%;
      display: flex;
      align-items: flex-end;
    }

    /* Mobile : bouton à droite, taille pouce */
    #tasksList .srp-btn {
      min-height: 44px;
      min-width: 140px;
      width: auto;       /* important: pas full width */
      white-space: normal;
    }

    /* Suivi : empile chaque ligne (texte puis actions) */
    .srp-row {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    /* Suivi : zone actions prend toute la largeur et aligne à droite */
    .srp-row .srp-actions {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }

    /* Suivi : bouton confortable (sans full width) */
    .srp-row .srp-actions .srp-btn {
      min-height: 44px;
      min-width: 140px;
      width: auto;
      white-space: normal;
    }
  }