/* +--------------------------------------------------------------------------+
// colonnes.css - PMB column helpers + tab system (Genbib 2027, layout v2)
// Legacy class names all kept: .colonne .colonne2 .colonne3 .colonne4 .colonne5
// .colonne10 .colonne40 .colonne60 .colonne80 .colonne_suite
// Tab classes all kept: .content .tabs .tab .tabActive .tabHover (tabSystem.js)
// Colours come from the tokens defined in genbib.css; the fallbacks below keep
// this file usable on its own. ASCII-only on purpose.
//
// WHAT CHANGED IN v2
//  - Columns: flex + gap + calc() widths. No floats (floats survive only in a
//    fallback for browsers without :has()). The last column no longer carries a
//    dead gutter, and every row adds up to exactly 100%.
//  - Tabs: div.tabs is now a flex row in normal flow, sitting on top of .content
//    instead of being absolutely positioned with hardcoded top/left offsets.
//    That is what removes the tabs / .content overlap at every width.
//  - Fields inside columns can never be wider than their column.
//  - Breakpoints: <= 1024 (dense layouts relax), <= 768 (columns stack),
//    <= 420 (4 / 5 column layouts go single column).
// +--------------------------------------------------------------------------+ */


/* ---------------------------------------------------------------------------
   0. LAYOUT TOKENS
   Override them in genbib.css (or per page) if you want tighter / looser rows.
   --------------------------------------------------------------------------- */

:root {
  --col-gap: var(--space-4, 1rem);         /* gutter between columns          */
  --col-row-gap: var(--space-2, 0.5rem);   /* vertical gap once columns wrap  */

  /* Tab bar placement. Default = normal flow (relative + zero offsets).
     To go back to the legacy absolute placement, set on :root:
       --tabs-position: absolute;  --tabs-top: 11px;    --tabs-left: 174px;
       --tabs-in-top: 20px;        --tabs-in-left: 52px;                      */
  --tabs-position: relative;
  --tabs-top: 0;
  --tabs-left: 0;
  --tabs-in-top: 0;
  --tabs-in-left: 0;
}


/* ---------------------------------------------------------------------------
   1. COLUMNS
   A parent that DIRECTLY contains a colonne* child becomes a wrapping flex row
   (detected with :has(), supported by all current browsers). td is excluded on
   purpose so table layout is never touched.

   Width maths (border-box, gap = --col-gap):
     n equal columns  -> (100% - (n - 1) * gap) / n
     a 60 / 40 pair   -> (100% - gap) * 0.6  and  (100% - gap) * 0.4
   so a full row always fits on one line without overflow.
   --------------------------------------------------------------------------- */

.colonne,
.colonne2,
.colonne3,
.colonne4,
.colonne5,
.colonne10,
.colonne40,
.colonne60,
.colonne80,
.colonne_suite {
  box-sizing: border-box;
  min-width: 0;          /* lets long words / inputs shrink instead of overflowing */
  max-width: 100%;
}

/* the flex row */
:is(div, form, fieldset, section):has(> :is(.colonne, .colonne2, .colonne3, .colonne4, .colonne5,
  .colonne10, .colonne40, .colonne60, .colonne80, .colonne_suite)) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--col-gap);
  row-gap: var(--col-row-gap);
}

/* a .row (or a clearing hr) sitting between columns keeps its old "clear: both"
   meaning: it takes a full line of its own */
:is(div, form, fieldset, section):has(> :is(.colonne, .colonne2, .colonne3, .colonne4, .colonne5,
  .colonne10, .colonne40, .colonne60, .colonne80, .colonne_suite)) > :is(.row, hr, .clear, .clearer) {
  flex: 0 0 100%;
  width: 100%;
}

/* widths */
.colonne2  { flex: 0 1 auto; width: calc((100% - var(--col-gap)) / 2); }
.colonne3  { flex: 0 1 auto; width: calc((100% - 2 * var(--col-gap)) / 3); }
.colonne4  { flex: 0 1 auto; width: calc((100% - 3 * var(--col-gap)) / 4); }
.colonne5  { flex: 0 1 auto; width: calc((100% - 4 * var(--col-gap)) / 5); }

.colonne60 { flex: 0 1 auto; width: calc((100% - var(--col-gap)) * 0.6); }
.colonne40 { flex: 0 1 auto; width: calc((100% - var(--col-gap)) * 0.4); }
.colonne80 { flex: 0 1 auto; width: calc((100% - var(--col-gap)) * 0.8); }

/* very small column (checkbox, icon) */
.colonne10 { flex: 0 0 auto; width: calc((100% - var(--col-gap)) * 0.1); min-width: 2.75rem; }

/* .colonne (no width) sizes to its content, .colonne_suite takes what is left */
.colonne       { flex: 0 1 auto; }
.colonne_suite { flex: 1 1 0%; }

/* .row is kept for parts of PMB that still use it as a plain block wrapper */
.row {
  display: flow-root;
  clear: both;
}


/* ---- fields inside columns: never wider than the column ------------------ */
:is(.colonne, .colonne2, .colonne3, .colonne4, .colonne5, .colonne10,
    .colonne40, .colonne60, .colonne80, .colonne_suite)
  :is(input:not([type]), input[type="text"], input[type="search"], input[type="password"],
      input[type="email"], input[type="url"], input[type="tel"], input[type="number"],
      input[type="date"], select, textarea) {
  max-width: 100%;
  min-width: 0;
}

/* PMB's fixed-width helpers (saisie-5em ... saisie-80em) must not overflow a
   narrow column or a phone screen */
[class*="saisie-"] {
  max-width: 100%;
}

textarea {
  max-width: 100%;
}


/* ---- tablet (<= 1024px): dense 4 / 5 column layouts relax to 3-up ---- */
@media (max-width: 1024px) {
  .colonne4,
  .colonne5 {
    width: calc((100% - 2 * var(--col-gap)) / 3);
  }
}


/* ---- tablet and phone (<= 768px): columns stack ---- */
@media (max-width: 768px) {
  .colonne2,
  .colonne3,
  .colonne40,
  .colonne60 {
    flex: 0 0 100%;
    width: 100%;
  }

  .colonne_suite {
    flex: 1 1 100%;
  }

  /* 4 and 5 column layouts keep a 2-up grid */
  .colonne4,
  .colonne5 {
    width: calc((100% - var(--col-gap)) / 2);
  }

  /* a tiny column (checkbox, icon) stays beside the wide one */
  .colonne10 {
    flex: 0 0 auto;
    width: auto;
  }

  .colonne80 {
    flex: 1 1 0%;
    width: auto;
  }

  /* auto-width columns take their own line instead of squeezing */
  .colonne {
    flex: 1 1 100%;
    width: 100%;
  }

  /* checkboxes / radios that live in a small column: 44px tap area */
  .colonne10 input[type="checkbox"],
  .colonne10 input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.75rem;
  }
}


/* ---- small phones (<= 420px): 4 / 5 column layouts go single column ---- */
@media (max-width: 420px) {
  .colonne4,
  .colonne5 {
    flex: 0 0 100%;
    width: 100%;
  }
}


/* ---- fallback: browsers WITHOUT :has() keep the old float layout ----------
   Only reached where the flex row above cannot be detected. Gutter = padding,
   so plain percentages still add up to 100%. */
@supports not selector(:has(*)) {
  .colonne,
  .colonne2,
  .colonne3,
  .colonne4,
  .colonne5,
  .colonne10,
  .colonne40,
  .colonne60,
  .colonne80,
  .colonne_suite {
    float: left;
    padding-inline-end: 0.75rem;
  }

  .colonne2  { width: 50%; }
  .colonne3  { width: 33.333%; }
  .colonne4  { width: 25%; }
  .colonne5  { width: 20%; }
  .colonne10 { width: 10%; }
  .colonne40 { width: 40%; }
  .colonne60 { width: 60%; }
  .colonne80 { width: 80%; }

  @media (max-width: 768px) {
    .colonne2,
    .colonne3,
    .colonne40,
    .colonne60,
    .colonne {
      float: none;
      width: 100%;
      padding-inline-end: 0;
    }

    .colonne4,
    .colonne5 {
      width: 50%;
    }
  }
}


/* ---------------------------------------------------------------------------
   2. TAB SYSTEM  (tabSystem.js)
   TAB GEOMETRY IS FROZEN: paddings, border widths, font-size and line-height of
   .tab / .tabActive are exactly the legacy values because the script measures
   them. What changed is only WHERE the bar sits: it is now a flex row in normal
   flow directly above its .content, not an absolutely positioned overlay.

   LEGEND
   .content   -- the content div, also the className for tabSystem divs
   .tabs      -- the div that holds all tabs
   .tab       -- an inactive tab
   .tabActive -- an active tab
   .tabHover  -- an inactive tab onMouseOver
   --------------------------------------------------------------------------- */

.content {
  position: relative;
  z-index: 500;
  width: 100%;
  margin: 0;
  padding: 8px 12px 12px 12px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif);
  color: var(--color-text, #1F2D3D);
  background-color: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-strong, #B9C2BE);
  border-radius: var(--radius-lg, 14px);
  border-start-start-radius: 0;   /* flush corner under the first tab (mirrors in RTL) */
  box-shadow: var(--shadow-1, 0 1px 2px rgba(16, 35, 58, 0.06));
}

.content .padder {
  height: 200px;
}

/* the bar: sits above .content and overlaps its top border by exactly 1px, so
   the active tab and the panel read as one piece */
div.tabs {
  position: var(--tabs-position);
  top: var(--tabs-top);
  left: var(--tabs-left);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  max-width: 100%;
  margin: 0 0 -1px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif);
  font-size: 14px;
  line-height: 16px;
  font-weight: 700 !important; /* legacy script writes inline weights */
  white-space: nowrap;
  cursor: default !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* a bar nested INSIDE a panel: first row of the panel, with air below it */
.content div.tabs {
  top: var(--tabs-in-top);
  left: var(--tabs-in-left);
  margin: 0 0 8px;
}

/* every tab: fixed size, no squeezing, z-index actually applies */
.tab,
.tabHover,
.tabActive {
  position: relative;
  flex: 0 0 auto;
}

/* inactive tab */
.tab {
  z-index: 100;
  padding: 3px 3px 3px 4px;
  color: var(--color-primary, #10233A);
  background-color: var(--color-surface-subtle, #EFF1EE);
  border: 1px solid var(--color-border-strong, #B9C2BE);
  border-bottom-width: 0;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

/* hover: soft accent wash + a thin accent line, no geometry change */
.tabHover {
  z-index: 1200;
  color: var(--color-accent-hover, #084F4F);
  background-color: var(--color-accent-soft, #E1F0EF);
  border-bottom-width: 0;
  box-shadow: inset 0 2px 0 var(--color-accent, #0B6B6A);
  cursor: pointer;
}

/* active: ink tab with a marine indicator on top */
.tabActive {
  z-index: 10000;
  padding: 3px 9px 3px 9px;
  color: #FFFFFF;
  background-color: var(--color-primary, #10233A);
  border-color: var(--color-primary, #10233A);
  box-shadow: inset 0 2px 0 var(--color-accent-on-dark, #7FD6D0);
  cursor: default;
}

/* keyboard */
.tab:focus-visible,
.tabHover:focus-visible,
.tabActive:focus-visible {
  outline: 2px solid var(--color-accent, #0B6B6A);
  outline-offset: 2px;
}

#viewsrc {
  position: absolute;
  width: 130px;
  margin: 8px;
  background-color: var(--color-surface-subtle, #EFF1EE);
  border: 1px solid var(--color-border-strong, #B9C2BE);
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .tab {
    transition: none;
  }
}

@media (forced-colors: active) {
  .tab,
  .tabActive {
    border: 1px solid CanvasText;
    border-bottom-width: 0;
  }
}

/* ---- tab bar on narrow screens (<= 768px) --------------------------------
   One line, scrolls sideways when there are more tabs than room. Tab paddings,
   borders, font-size and line-height stay frozen. ---- */
@media (max-width: 768px) {
  div.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  div.tabs::-webkit-scrollbar {
    display: none;
  }

  /* the bar clips its children, so the focus ring is drawn inside the tab */
  .tab:focus-visible,
  .tabHover:focus-visible,
  .tabActive:focus-visible {
    outline-offset: -2px;
  }
}