/* =========================================================
   TIMECAST — WORKSPACE HEADER
   ---------------------------------------------------------
   Composant partagé des produits opérationnels TimeCast.

   Cibles :
   - Manager
   - Dashboard
   - Team
   - Settings
   - Planning

   Principes :
   - structure commune
   - branding dynamique
   - aucune dépendance aux styles Platform / Index
   - aucune dépendance aux classes globales .btn / .badge
   ========================================================= */


/* =========================================================
   SHELL
   ========================================================= */

.tc-workspace-header {
  position: relative;
  overflow: hidden;

  margin-bottom: 24px;
  padding: 22px 24px 0;

  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 28px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(20, 184, 166, .22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #020617 0%,
      #0f172a 58%,
      #111827 100%
    );

  box-shadow:
    0 24px 60px rgba(15, 23, 42, .18);
}


.tc-workspace-header::after {
  content: "";

  position: absolute;
  top: -120px;
  right: -90px;

  width: 280px;
  height: 280px;

  border-radius: 999px;

  background:
    rgba(20, 184, 166, .10);

  pointer-events: none;
}


/* =========================================================
   TOP LAYOUT
   ========================================================= */

.tc-workspace-header-top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 26px;
}


/* =========================================================
   BRAND
   ========================================================= */

.tc-workspace-brand {
  display: flex;
  align-items: center;

  gap: 15px;

  min-width: 0;
}


.tc-workspace-logo {
  width: 64px;
  height: 64px;

  flex: 0 0 64px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, .14);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, .10);

  color: #5eead4;

  font-size: 16px;
  font-weight: 950;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08);
}


.tc-workspace-logo-image {
  display: block;

  width: 100%;
  height: 100%;

  padding: 0;

  object-fit: contain;
  object-position: center;
}


.tc-workspace-title {
  margin: 0 0 5px;

  color: #ffffff;

  font-size: 29px;
  line-height: 1;

  letter-spacing: -.045em;
}


.tc-workspace-subtitle {
  max-width: 650px;

  margin: 0;

  color:
    rgba(255, 255, 255, .66);

  font-size: 13px;
  line-height: 1.45;
}


/* =========================================================
   META
   ---------------------------------------------------------
   Desktop :

   date        environment
   time        refresh
   lastUpdate  refresh
   ========================================================= */

.tc-workspace-meta {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(150px, auto)
    auto;

  grid-template-areas:
    "date         environment"
    "time         refresh"
    "last-refresh refresh";

  align-items: center;
  justify-items: end;

  column-gap: 14px;
  row-gap: 4px;

  min-width: 300px;
}


.tc-workspace-date {
  grid-area: date;

  color:
    rgba(255, 255, 255, .62);

  font-size: 12px;
  font-weight: 800;

  text-transform: capitalize;
}


.tc-workspace-time {
  grid-area: time;

  color: #ffffff;

  font-size: 22px;
  line-height: 1;

  font-weight: 950;

  letter-spacing: -.035em;

  font-variant-numeric:
    tabular-nums;
}


.tc-workspace-last-refresh {
  grid-area: last-refresh;

  color:
    rgba(255, 255, 255, .46);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 700;
}


/* =========================================================
   ENVIRONMENT BADGE
   ========================================================= */

.tc-workspace-env {
  grid-area: environment;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding: 5px 10px;

  border:
    1px solid rgba(94, 234, 212, .22);

  border-radius: 999px;

  background:
    rgba(94, 234, 212, .12);

  color: #5eead4;

  font-size: 11px;
  font-weight: 850;

  white-space: nowrap;
}


/* =========================================================
   REFRESH BUTTON
   ========================================================= */

.tc-workspace-refresh {
  grid-area: refresh;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 38px;

  padding: 8px 12px;

  border:
    1px solid rgba(255, 255, 255, .16);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, .09);

  color: #ffffff;

  font: inherit;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background .16s ease,
    border-color .16s ease,
    opacity .16s ease,
    transform .08s ease;
}


.tc-workspace-refresh:hover {
  background:
    rgba(255, 255, 255, .15);

  border-color:
    rgba(255, 255, 255, .22);

  transform: translateY(-1px);
}


.tc-workspace-refresh:active {
  transform: translateY(0);
}


.tc-workspace-refresh:disabled {
  cursor: wait;

  opacity: .72;

  transform: none;
}


.tc-workspace-refresh-icon {
  display: inline-block;
}


.tc-workspace-refresh.is-loading
.tc-workspace-refresh-icon {
  animation:
    tc-workspace-refresh-spin
    .8s
    linear
    infinite;
}


@keyframes tc-workspace-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.tc-workspace-nav {
  position: relative;
  z-index: 1;

  display: flex;

  gap: 4px;

  margin-top: 20px;

  overflow-x: auto;

  scrollbar-width: none;

  border-top:
    1px solid rgba(255, 255, 255, .10);
}


.tc-workspace-nav::-webkit-scrollbar {
  display: none;
}


.tc-workspace-nav button {
  flex: 0 0 auto;

  padding: 14px 12px 12px;

  border: 0;

  border-bottom:
    3px solid transparent;

  border-radius: 0;

  background: transparent;

  color:
    rgba(255, 255, 255, .58);

  font: inherit;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  white-space: nowrap;

  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease;
}


.tc-workspace-nav button:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, .05);

  transform: none;
}


.tc-workspace-nav button.active {
  color: #ffffff;

  border-bottom-color:
    #5eead4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .tc-workspace-header {
    padding:
      20px
      18px
      0;
  }


  .tc-workspace-header-top {
    align-items: flex-start;

    flex-direction: column;
  }


  .tc-workspace-meta {
    width: 100%;

    min-width: 0;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    justify-items: start;
  }


  .tc-workspace-env {
    justify-self: end;
  }


  .tc-workspace-refresh {
    justify-self: end;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .tc-workspace-header {
    margin-bottom: 18px;

    padding:
      18px
      16px
      0;

    border-radius: 22px;
  }


  .tc-workspace-header-top {
    gap: 18px;
  }


  .tc-workspace-brand {
    align-items: flex-start;
  }


  .tc-workspace-logo {
    width: 54px;
    height: 54px;

    flex-basis: 54px;

    border-radius: 14px;
  }


  .tc-workspace-title {
    font-size: 25px;
  }


  .tc-workspace-subtitle {
    font-size: 12px;
  }


  .tc-workspace-meta {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    grid-template-areas:
      "date         environment"
      "time         refresh"
      "last-refresh refresh";

    column-gap: 10px;
  }


  .tc-workspace-time {
    font-size: 20px;
  }


  .tc-workspace-refresh {
    min-height: 36px;

    padding: 7px 10px;
  }


  .tc-workspace-nav {
    margin-top: 16px;
  }


  .tc-workspace-nav button {
    padding:
      13px
      10px
      11px;

    font-size: 12px;
  }

}

/* =========================================================
   WORKSPACE HEADER — PRODUCT EXTENSIONS
   ---------------------------------------------------------
   Extensions facultatives pour les produits opérationnels.
   Sans impact sur le rendu historique Index.
   ========================================================= */


/* SIDE */

.tc-workspace-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 14px;

  min-width: 0;
}


/* BRAND COPY */

.tc-workspace-brand-copy {
  min-width: 0;
}


/* BADGES */

.tc-workspace-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 10px;
}


.tc-workspace-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding: 5px 10px;

  border:
    1px solid rgba(255, 255, 255, .14);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .08);

  color:
    rgba(255, 255, 255, .82);

  font-size: 11px;
  font-weight: 850;

  white-space: nowrap;
}


/* CONTEXT */

.tc-workspace-context {
  display: flex;
  flex-direction: column;

  gap: 3px;

  margin-top: 9px;
}


.tc-workspace-context-line {
  color:
    rgba(255, 255, 255, .68);

  font-size: 12px;
  line-height: 1.35;

  font-weight: 700;
}


/* ACTIONS */

.tc-workspace-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


.tc-workspace-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 8px 13px;

  border:
    1px solid rgba(255, 255, 255, .16);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, .09);

  color: #ffffff;

  text-decoration: none;

  font: inherit;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background .16s ease,
    border-color .16s ease,
    opacity .16s ease,
    transform .08s ease;
}


.tc-workspace-action:hover {
  background:
    rgba(255, 255, 255, .15);

  border-color:
    rgba(255, 255, 255, .22);

  transform: translateY(-1px);
}


.tc-workspace-action:active {
  transform: translateY(0);
}


.tc-workspace-action.is-current {
  background: #ffffff;

  color: #0f172a;

  border-color: #ffffff;

  pointer-events: none;
}


.tc-workspace-action.is-danger {
  color: #fecaca;

  border-color:
    rgba(248, 113, 113, .22);

  background:
    rgba(185, 28, 28, .10);
}


.tc-workspace-action.is-danger:hover {
  background:
    rgba(185, 28, 28, .20);
}


/* =========================================================
   PRODUCT THEME — BRANDING SHOP / ORGANISATION
   ========================================================= */

.tc-workspace-theme-product {
  --tc-workspace-brand-primary:
    var(--primary, #1f4e5f);

  --tc-workspace-brand-secondary:
    var(--secondary, #e8f6f3);

  --tc-workspace-brand-accent:
    var(--accent, #37bfa7);

  color: var(--text, #1e293b);

  background:
    radial-gradient(
      circle at 88% 10%,
      color-mix(
        in srgb,
        var(--tc-workspace-brand-accent) 26%,
        transparent
      ),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--tc-workspace-brand-secondary) 82%,
        #ffffff
      )
      0%,
      #ffffff 58%,
      color-mix(
        in srgb,
        var(--tc-workspace-brand-primary) 12%,
        #ffffff
      )
      100%
    );

  border-color:
    color-mix(
      in srgb,
      var(--tc-workspace-brand-primary) 14%,
      transparent
    );

  box-shadow:
    0 18px 44px rgba(15, 23, 42, .08);
}

.tc-workspace-theme-product::after {
  background:
    color-mix(
      in srgb,
      var(--tc-workspace-brand-accent) 12%,
      transparent
    );
}

.tc-workspace-theme-product .tc-workspace-title,
.tc-workspace-theme-product .tc-workspace-shop-name {
  color: var(--text, #1e293b);
}

.tc-workspace-theme-product .tc-workspace-subtitle,
.tc-workspace-theme-product .tc-workspace-context-line,
.tc-workspace-theme-product .tc-workspace-date,
.tc-workspace-theme-product .tc-workspace-last-refresh {
  color: var(--muted, #64748b);
}

.tc-workspace-theme-product .tc-workspace-time {
  color: var(--primary, #1f4e5f);
}

.tc-workspace-theme-product .tc-workspace-logo {
  background:
    color-mix(
      in srgb,
      var(--secondary, #e8f6f3) 74%,
      #ffffff
    );

  border-color:
    color-mix(
      in srgb,
      var(--primary, #1f4e5f) 15%,
      transparent
    );

  color: var(--primary, #1f4e5f);
}

.tc-workspace-theme-product .tc-workspace-badge {
  color: var(--primary, #1f4e5f);

  background:
    color-mix(
      in srgb,
      var(--secondary, #e8f6f3) 68%,
      #ffffff
    );

  border-color:
    color-mix(
      in srgb,
      var(--primary, #1f4e5f) 15%,
      transparent
    );
}

/* =========================================================
   PRODUCT NAVIGATION — PREMIUM
   ========================================================= */

.tc-workspace-theme-product .tc-workspace-actions {
  gap: 6px;
  padding: 5px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--primary, #0247ba) 10%,
      transparent
    );

  border-radius: 16px;

  background: rgba(255, 255, 255, .54);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 8px 20px rgba(15, 23, 42, .04);

  backdrop-filter: blur(12px);
}

.tc-workspace-theme-product .tc-workspace-action {
  min-height: 40px;
  padding: 0 15px;

  border: 1px solid transparent;
  border-radius: 11px;

  background: transparent;
  box-shadow: none;

  color:
    color-mix(
      in srgb,
      var(--primary, #0247ba) 82%,
      #334155
    );

  font-size: 12px;
  font-weight: 850;
}

.tc-workspace-theme-product .tc-workspace-action:hover {
  background: rgba(255, 255, 255, .82);

  border-color:
    color-mix(
      in srgb,
      var(--primary, #0247ba) 12%,
      transparent
    );

  box-shadow:
    0 5px 14px rgba(15, 23, 42, .05);
}

.tc-workspace-theme-product .tc-workspace-action.is-current {
  color: var(--primary-contrast, #ffffff);

  background:
    linear-gradient(
      135deg,
      var(--primary, #0247ba),
      color-mix(
        in srgb,
        var(--primary, #0247ba) 76%,
        var(--accent, #e86cb7)
      )
    );

  border-color: transparent;

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--primary, #0247ba) 24%,
      transparent
    );
}

.tc-workspace-theme-product
.tc-workspace-action#manager-support-trigger {
  background:
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 10%,
      #ffffff
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 22%,
      transparent
    );
}

.tc-workspace-theme-product
.tc-workspace-action#manager-support-trigger:hover {
  background:
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 18%,
      #ffffff
    );
}

.tc-workspace-theme-product
.tc-workspace-action.is-danger {
  color: #b91c1c;

  background: transparent;

  border-color: transparent;
}

.tc-workspace-theme-product
.tc-workspace-action.is-danger:hover {
  color: #991b1b;

  background: rgba(185, 28, 28, .07);

  border-color: rgba(185, 28, 28, .12);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .tc-workspace-side {
    width: 100%;

    align-items: stretch;
  }


  .tc-workspace-actions {
    justify-content: flex-start;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .tc-workspace-badges {
    margin-top: 8px;
  }


  .tc-workspace-context {
    margin-top: 7px;
  }


  .tc-workspace-actions {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
  }


  .tc-workspace-action {
    width: 100%;

    white-space: normal;

    text-align: center;
  }

}


@media (max-width: 420px) {

  .tc-workspace-actions {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   MANAGER — PRODUCT HEADER COMPATIBILITY
   ========================================================= */

.tc-workspace-product-logo {
  display: block;

  width: 100%;
  height: 100%;

  padding: 0;

  object-fit: contain;
  object-position: center;
}

.tc-workspace-shop-name {
  color: #ffffff;

  font-size: 14px;
  font-weight: 900;
}

.tc-workspace-shop-city {
  color: rgba(255, 255, 255, .58);

  font-size: 12px;
  font-weight: 700;
}

.tc-workspace-welcome {
  color: rgba(255, 255, 255, .72);

  font-size: 12px;
}

.tc-workspace-theme-product
.tc-workspace-badge {
  color:
    color-mix(
      in srgb,
      var(--accent, #37bfa7) 62%,
      #ffffff
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent, #37bfa7) 24%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent, #37bfa7) 10%,
      transparent
    );
}

/* Titre produit piloté par le branding */
.tc-workspace-theme-product .tc-workspace-title {
  color: var(--primary, #0247ba);
}

.tc-workspace-theme-product .tc-workspace-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--accent, #e86cb7);
}

.tc-workspace-theme-product .tc-workspace-env {
  min-height: 30px;
  padding: 6px 11px;

  color: var(--primary, #0247ba);

  background:
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 18%,
      #ffffff
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 42%,
      transparent
    );

  box-shadow:
    0 6px 16px
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 14%,
      transparent
    );

  font-weight: 900;
}

/* =========================================================
   PRODUCT NAV — INDEX-LIKE LOWER STRIP
   ========================================================= */

.tc-workspace-theme-product .tc-workspace-nav {
  margin-top: 18px;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--primary, #0247ba) 10%,
      transparent
    );
}

.tc-workspace-theme-product
.tc-workspace-nav a,
.tc-workspace-theme-product
.tc-workspace-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 14px 16px 12px;

  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;

  background: transparent;

  color:
    color-mix(
      in srgb,
      var(--primary, #0247ba) 68%,
      #64748b
    );

  text-decoration: none;

  font: inherit;
  font-size: 13px;
  font-weight: 850;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.tc-workspace-theme-product
.tc-workspace-nav a:hover,
.tc-workspace-theme-product
.tc-workspace-nav button:hover {
  color: var(--primary, #0247ba);

  background:
    color-mix(
      in srgb,
      var(--primary, #0247ba) 5%,
      transparent
    );

  transform: none;
}

.tc-workspace-theme-product
.tc-workspace-nav a.active,
.tc-workspace-theme-product
.tc-workspace-nav button.active {
  color: var(--primary, #0247ba);

  border-bottom-color:
    var(--accent, #e86cb7);

  background:
    color-mix(
      in srgb,
      var(--accent, #e86cb7) 6%,
      transparent
    );
}

.tc-workspace-theme-product
.tc-workspace-module-label {
  color: var(--primary, #0247ba);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
}

.tc-workspace-theme-product
.tc-workspace-title {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  text-transform: none;
}

/* =========================================================
   WORKSPACE LOGO — FINAL SIZE NORMALIZATION
   ========================================================= */

.tc-workspace-logo.tc-workspace-logo-image,
.tc-workspace-logo .tc-workspace-logo-image,
.tc-workspace-logo .tc-workspace-product-logo {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: contain;
  object-position: center;
}


/* Sprint 04.8C.3.2 — Navigation produit globale */

.tc-workspace-tabs a[href*="team.html"],
.tc-workspace-tabs button[data-key="team"],
.tc-workspace-header-nav a[href*="team.html"]{
  position:relative;
}

.tc-workspace-tabs a[href*="team.html"]::after,
.tc-workspace-tabs button[data-key="team"]::after,
.tc-workspace-header-nav a[href*="team.html"]::after{
  content:"Transition";
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  min-height:16px;
  padding:2px 5px;
  border-radius:999px;
  background:#fef3c7;
  color:#92400e;
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
}

@media(max-width:900px){
  .tc-workspace-tabs{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }
}