@charset "utf-8";

/* ============================================================
   DESKTOP STYLES — ORIGINAL, UNCHANGED
   ============================================================ */

/* 🎨 Variables globales */
:root {
  /* Couleurs */
  --color-main-purple: #4e28a7;
  --color-hover-purple: #301c7a;
  --color-grey-text: #efefef;/*color-grey-text: #767171;*/
  --color-hover-yellow: #57B0C4; /*--color-yellow: #FFBE00;*/
  --color-yellow-dark: #6ab78d;/*--color-yellow-dark: #E8AD00;*/
  --color-yellow: #8FA6B2;
  --color-grey-bg: #A1A1A3;/*--color-grey-bg: #efefef;*/
  --color-grey-hover: #d6d6d6;
  --color-dark: #101010;
  --color-male: #6C97B1;/*--color-male: #C2D3EC;*/
  --color-female: #6AB98A;/*--color-female: #F5E2E1;*/
  --color-total: #57B0C4;/*--color-total: #FFBE00;*/
  --color-info-icon: #8db817;
  --color-arrow-icon: #ff7b00;
  --color-chart-icon: #FFFFF0;/*--color-chart-icon: #ff3c00;*/
  --warning-yellow: #ffc107;
  --primary-purple: #57B0C4;
  --dark-red: #a72839;

  /* Box Shadows */
  --shadow-main: 0 3px 10px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  --shadow-inset-hover: inset 0 -3px 0 rgba(0, 0, 0, 0.32);
  --shadow-inset-active: inset 0px -1px 0 rgba(0, 0, 0, 0.22);

  /* Fonts et tailles */
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
}

/* 🧱 Mise en page */
.labor-force-viz.container {
  position: relative;
  z-index: 1;
}

.labor-force-viz #Top, 
.labor-force-viz #Sec, 
.labor-force-viz #Ter, 
.labor-force-viz #End {
  text-align: center;
  align-self: center;
  height: 15em;
  font-size: var(--font-sm);
  color: var(--color-grey-text);
}

.labor-force-viz #Top {
  background: url('/wp-content/LabourForceFiles/assets/img/total1.png') no-repeat;
  background-size: 100% 91%;
}

.labor-force-viz #Sec {
  background: url('/wp-content/LabourForceFiles/assets/img/total2.png') no-repeat;
  background-size: 100% 90%;
}

.labor-force-viz #Ter {
  background: url('/wp-content/LabourForceFiles/assets/img/total3.png') no-repeat;
  background-size: 100% 90%;
}

.labor-force-viz #End {
  background: url('/wp-content/LabourForceFiles/assets/img/end.png') no-repeat;
  background-size: 100% 90%;
}

.labor-force-viz #SubTop, 
.labor-force-viz #SubEnd, 
.labor-force-viz #SubSec, 
.labor-force-viz #SubTer {
  font-size: 10px;
  text-align: center;
  align-self: center;
  height: 19em;
  position: relative;
  z-index: 5;
}

/* 📊 Titres et Valeurs */
.labor-force-viz .Title {
  font-size: var(--font-md);
  color: var(--color-yellow-dark);
  height: 2.1em;
  border-radius: 10px;
  border: none;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.labor-force-viz .Value {
  font-size: var(--font-lg);
  color: var(--color-grey-text);
  height: 2.1em;
  border-radius: 10px;
  border: none;
  padding: 4px 16px;
  background-color: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.labor-force-viz .Value:hover {
  color: var(--color-hover-yellow);
  background-color: #BABABA;
}


.labor-force-viz .share {
  color: #666;
  /*font-weight: normal;*/
}

/* Gender & Alignement */
.labor-force-viz .Centred {
  justify-content: center;
}

/* 📦 Boutons */
.labor-force-viz .button-wrap {
  position: relative;
  font-size: var(--font-md);
  text-align: center;
  top: 50%;
}

.labor-force-viz .button-label {
  display: inline-block;
  width: 30%;
  height: 15%;
  padding: 10px;
  margin: 0px 1px;
  cursor: pointer;
  color: var(--color-grey-text);
  border-radius: 10px;
  background: var(--color-grey-bg);
  box-shadow: var(--shadow-main), var(--shadow-inset);
  transition: 0.3s;
  user-select: none;
}

.labor-force-viz .button-label h1 {
  font-size: 0.9em;
}

.labor-force-viz .button-label:hover {
  background: var(--color-grey-hover);
  color: var(--color-dark);
  box-shadow: var(--shadow-main), var(--shadow-inset-hover);
}

.labor-force-viz .button-label:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-main), var(--shadow-inset-active);
}

.labor-force-viz .Value strong {
 /* font-weight: normal;*/
}

.labor-force-viz .button-label strong {
  /*font-weight: normal;*/
}

@media (max-width: 40em) {
  .labor-force-viz .button-label {
    padding: 10px;
    border-radius: 20px;
  }
}

/* 🎯 Sélections */
.labor-force-viz #Total:checked + .button-label {
  background: var(--color-total);
}

.labor-force-viz #Male:checked + .button-label {
  background: var(--color-male);
}

.labor-force-viz #Female:checked + .button-label {
  background: var(--color-female);
}

.labor-force-viz .hidden {
  display: none;
}

/* 📅 Dropdown */
.labor-force-viz .dropdown-field {
  position: relative;
  width: 100px;
  z-index: 10;
}

.labor-force-viz .dropdown-field select {
  appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fdfdfd;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 11;
    }

.labor-force-viz .dropdown-field select:focus {
  background-color: #fff9cc;
  border-color: #999;
  outline: none;
}

.labor-force-viz .dropdown-field::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
  font-size: 14px;
}

/* ✨ Animation clignotement */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.labor-force-viz .blink-arrow {
  animation: blink 0.7s infinite;
}

/* 🎯 Icônes & interactions */
.labor-force-viz .icon-hover {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.labor-force-viz .icon-hover:hover {
  transform: scale(1.3);
}

.labor-force-viz .bi-info-circle:hover {
  color: var(--color-info-icon);
}

.labor-force-viz .fas.fa-arrow-down:hover {
  color: var(--color-arrow-icon);
}

.labor-force-viz .bi-bar-chart:hover {
  color: var(--color-chart-icon);
}

.labor-force-viz .arrow-icon {
  position: absolute;
  right: 12px;
  /*top: 50%;
  transform: translateY(-50%);*/
  font-size: 22px;
}

.labor-force-viz .bi-bar-chart {
  position: absolute;
  right: 50px;
  transform: translateY(-20%);
  font-size: 22px;
}

.labor-force-viz .icon-chart-hover {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--color-main-purple);
  cursor: pointer;
}

.labor-force-viz .icon-chart-hover:hover {
  transform: scale(1.2);
  color: var(--color-hover-purple);
}

#lf-app .container.labor-force-viz {
 max-width: 85% !important;
 margin-right: 5px!important;
 margin-rleft: 5px!important;
}

#lf-app .row {
  margin: 0 !important;
  padding: 0 !important;
}

#lf-app {
max-height: 110%;
margin-bottom: 50px;
}


/* ============================================================
   MOBILE — scale the entire widget down to fit the screen.
   Nothing in the layout changes; it is simply rendered smaller.

   How it works:
   • The app is rendered at full desktop width (set via
     --lf-desktop-width, matching the 85% container cap).
   • transform: scale() shrinks the rendered output visually.
   • transform-origin: top left keeps it anchored to the left edge.
   • The scaled element still occupies its original space in the
     document flow, so we compensate with a negative margin-bottom
     and an explicit height on the wrapper to collapse that gap.

   Adjust --lf-scale to taste — 0.55 fits ~390px phones nicely.
   ============================================================ */

@media (max-width: 600px) {

  #lf-app {
    /* The scale factor: ratio of screen width to desktop render width.
       At 390px screen / ~700px desktop render ≈ 0.55.
       Use a CSS custom property so it is easy to tweak.           */
    --lf-scale: 0.55;

    /* The desktop layout renders at roughly this width (in px).
       Used to calculate the collapsed height after scaling.        */
    --lf-desktop-width: 700px;

    /* After scaling, the element still occupies full desktop height
       in the flow. We override width/height so the wrapper collapses
       to the scaled visual size and doesn't leave a scroll gap.    */
    width: calc(var(--lf-desktop-width) * var(--lf-scale)) !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
  }

  #lf-app .container.labor-force-viz {
    /* Render at full desktop width before scaling */
    width: var(--lf-desktop-width) !important;
    max-width: var(--lf-desktop-width) !important;

    /* Scale down from the top-left corner */
    transform: scale(var(--lf-scale));
    transform-origin: top left;

    /* Collapse the leftover flow space that the unscaled element
       would otherwise occupy (scaled height - original height).
       calc() approximates: height shrinks by (1 - scale) factor.
       The negative margin pulls subsequent content up correctly.   */
    margin-bottom: calc((var(--lf-scale) - 1) * 100%) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
    /* ── RTL (Arabic): anchor scale to the RIGHT edge instead ──
     Targets any ancestor with dir="rtl", which WordPress/SharePoint
     sets on <html lang="ar"> or the page wrapper automatically.    */
  [dir="rtl"] #lf-app .container.labor-force-viz {
    transform-origin: top right;
  }
 
  /* ── Fallback: if dir is set on #lf-app itself or its container ── */
  #lf-app[dir="rtl"] .container.labor-force-viz,
  #lf-app .container.labor-force-viz[dir="rtl"] {
    transform-origin: top right;
  }
  
  html[lang="ar"] #lf-app .container.labor-force-viz {
      transform-origin: top-right;
  }

}
/* end @media (max-width: 600px) */