/* web/static/css/pages/portfolio.enveloppe.css */

/* ======================================================================
   PORTFOLIO — Context-bar masquée (page contextuelle sans sélecteur visible)
   La barre existe dans base.html mais n'est pas affichée sur cette page.
   Le contexte (branch/sim) est récupéré via page:context-ready normalement.
   ====================================================================== */

.page-portfolio #global-context-bar{
  display: none;
}

/* ======================================================================
   Page header
   ====================================================================== */

.portfolio-page .portfolio-subtitle{
  margin-top: .25rem;
  font-size: .9rem;
  color: var(--color-text-muted);
}

/* ======================================================================
   Cockpit section
   ====================================================================== */

.portfolio-page .portfolio-cockpit{
  margin-top: 1.5rem;
}

.portfolio-page .cockpit-header{
  margin-bottom: .75rem;
}

.portfolio-page .cockpit-header .kicker{
  margin: 0;
}

/* ======================================================================
   Hero (cockpit compact — KPIs globaux)
   ====================================================================== */

.portfolio-page .envelopes-hero{
  margin: .5rem 0 .75rem 0;
}

.portfolio-page .envelopes-hero-grid--cockpit{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  align-items: stretch;
}

.portfolio-page .envelopes-hero-grid--cockpit.envelopes-hero-grid--cockpit-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portfolio-page .envelopes-hero-grid--cockpit > *{
  min-width: 0;
}

.portfolio-page .hero-card{
  border-radius: var(--radius-lg);
  padding: .8rem .9rem;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--color-border-light, rgba(255,255,255,.08));
}

.portfolio-page .hero-card--primary{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}

/* ======================================================================
   Table enveloppes
   ====================================================================== */

.portfolio-page .envelopes-table-container{
  /* IMPORTANT:
     - keep horizontal scrolling INSIDE the container if needed
     - never let table overflow the page */
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light, rgba(255,255,255,.08));
  background: rgba(0,0,0,.12);
  -webkit-overflow-scrolling: touch;
}

.portfolio-page .envelopes-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* allow table to shrink with container */
  min-width: 0;
}

.portfolio-page .envelopes-table thead th{
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-muted);
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--color-border-light, rgba(255,255,255,.08));
  white-space: nowrap;
}

.portfolio-page .envelopes-table thead th:not(:first-child){
  text-align: right;
}

/* ======================================================================
   Rows enveloppes
   ====================================================================== */

.env-row{
  cursor: pointer;
  transition: background .12s ease;
}

.env-row:hover{
  background: var(--surface-hover, rgba(255,255,255,.035));
}

.env-row.is-pos { --delta-color: var(--color-success, #2ecc71); }
.env-row.is-neg { --delta-color: var(--color-danger, #e74c3c); }
.env-row.is-zero{ --delta-color: var(--color-text-muted, #888); }

.env-row .delta{
  color: var(--delta-color);
  font-size: .85em;
  margin-left: .25rem;
}

/* Active row — liseré accent */
.env-row.is-active{
  background: rgba(79,124,255,.06);
  box-shadow: inset 3px 0 0 var(--accent-color, #4f7cff);
}

.portfolio-page .env-row td{
  padding: .75rem .85rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.portfolio-page .env-row td:not(:first-child){
  text-align: right;
}

.portfolio-page .env-cell-title{
  font-size: .95rem;
  font-weight: 650;
}

.portfolio-page .env-cell-sub{
  margin-top: .2rem;
  font-size: .8rem;
  color: var(--color-text-muted);
}

/* ======================================================================
   Empty / Error states
   ====================================================================== */

.portfolio-page .envelopes-empty,
.portfolio-page .envelopes-error{
  padding: 1.5rem;
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: .9rem;
}

.portfolio-page .envelopes-error{
  color: var(--color-danger, #e74c3c);
}

/* ======================================================================
   DRAWER RAIL — portfolio (SSOT base.html #ptf-drawer)
   ====================================================================== */

/* Le drawer kernel gère is-open / aria-hidden via drawer.js.
   Ici on stylise uniquement le contenu portfolio injecté. */

.portfolio-page .ptf-drawer-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-border-light, rgba(255,255,255,.08));
  gap: .75rem;
}

.portfolio-page .ptf-drawer-title-text{
  font-size: 1rem;
  font-weight: 650;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-page .ptf-drawer-body{
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden; /* IMPORTANT: no horizontal scroll in drawer */
}

/* ======================================================================
   Portfolio Summary — Drawer (STEP 5)
   ====================================================================== */

.ptf-summary{
  padding: .75rem 0;
}

.ptf-summary-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .75rem;
}

.ptf-summary .kpi .k{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

.ptf-summary .kpi .v{
  font-size: 1rem;
  font-weight: 650;
  margin-top: .15rem;
}

.ptf-summary .kpi .v.is-pos{ color: var(--color-success, #2ecc71); }
.ptf-summary .kpi .v.is-neg{ color: var(--color-danger, #e74c3c); }

/* Coloration P/L — s'applique sur toute cellule td ou div portant ces classes */
.is-pos{ color: var(--color-success, #2ecc71); }
.is-neg{ color: var(--color-danger, #e74c3c); }
.is-zero{ color: var(--color-text-muted, #888); }

/* ======================================================================
   Tags table — Drawer
   FIX: table must fit drawer width (no min-width), fixed layout + ellipsis
   ====================================================================== */

.ptf-tags-section{
  margin-top: 1.25rem;
}

.ptf-tags-section h3{
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin-bottom: .6rem;
}

.portfolio-table{
  width: 100%;
  max-width: 100%;
  min-width: 0;          /* IMPORTANT */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;   /* drawer-friendly */
}

.portfolio-table thead th{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  padding: .5rem .65rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-table thead th:not(:first-child){
  text-align: right;
}

.ptf-tag-row{
  cursor: pointer;
  transition: background .12s ease;
}

.ptf-tag-row:hover{
  background: rgba(255,255,255,.04);
}

.ptf-tag-row.is-active{
  background: rgba(79,124,255,.06);
  box-shadow: inset 2px 0 0 var(--accent-color, #4f7cff);
}

.ptf-tag-row td{
  padding: .6rem .65rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ptf-tag-row td:not(:first-child){
  text-align: right;
}

.ptf-tag-row .chevron{
  color: var(--color-text-muted);
  transition: transform .15s ease;
}

.ptf-tag-row.is-active .chevron{
  transform: rotate(90deg);
}

/* ======================================================================
   Positions inline (accordion sous tag)
   ====================================================================== */

.ptf-positions-row td{
  padding: 0;
  border: none;
}

.ptf-positions{
  padding: .5rem .65rem .75rem;
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.06);
}

.ptf-positions-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0 .5rem;
}

.ptf-positions-header strong{
  font-size: .85rem;
}

.ptf-empty{
  font-style: italic;
  color: var(--color-text-muted);
  padding: .5rem 0;
  font-size: .85rem;
}

.mini-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* tighter + predictable in drawer */
}

.mini-table thead th{
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
  padding: .35rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-table thead th:not(:first-child){
  text-align: right;
}

.mini-table td{
  padding: .4rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-table td:not(:first-child){
  text-align: right;
}

.mini-table tr:hover{
  background: rgba(255,255,255,.04);
}

/* ======================================================================
   Responsive
   ====================================================================== */

@media (max-width: 980px){
  .portfolio-page .envelopes-hero-grid--cockpit{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .portfolio-page .envelopes-table thead th:nth-child(3),
  .portfolio-page .env-row td:nth-child(3){
    display: none; /* masque Liquidités sur mobile */
  }

  .ptf-summary-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}