/* Fullscreen board */
.pl-board-page{margin-top:10px;padding:10px;}

.pl-board-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:6px 10px;
  min-height:42px;
  border-radius:10px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.07);
  font-size:14px;
}

/* ---- Nav: title + view links ---- */
.pl-board-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.pl-board-title{
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  color:#333;
  display:inline-block;
  min-width:110px;
}

/* Small tab variant for top bar */
.pl-tab-sm{
  padding:4px 12px;
  border-radius:7px;
  font-size:0.85em;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  display:inline-block;
  min-width:90px;
  text-align:center;
}
.pl-tab-board   { background:#3a8fd1; color:#fff; }
.pl-tab-board:hover{ background:#2d7cbc; color:#fff; text-decoration:none; }
.pl-tab-planning{ background:#9b6dd6; color:#fff; }
.pl-tab-planning:hover{ background:#8a5cc4; color:#fff; text-decoration:none; }
.pl-tab-gantt{ background:#22c490; color:#fff; }
.pl-tab-gantt:hover{ background:#1aad7e; color:#fff; text-decoration:none; }
.pl-tab-completed{ background:#8e99a4; color:#fff; }
.pl-tab-completed:hover{ background:#7a8490; color:#fff; text-decoration:none; }
.pl-tab-downtime{ background:#e91e63; color:#fff; }
.pl-tab-downtime:hover{ background:#c2185b; color:#fff; text-decoration:none; }
.pl-tab-orderbook{ background:#e67e22; color:#fff; }
.pl-tab-orderbook:hover{ background:#d35400; color:#fff; text-decoration:none; }

/* ---- Filters form ---- */
.pl-board-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex:1 1 auto;
  white-space:nowrap;
}

/* ---- Styled selects ---- */
.pl-select{
  height:30px;
  padding:0 8px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;
  background:#fff;
  font-size:0.88em;
  appearance:auto;
  cursor:pointer;
  width:190px;
  box-sizing:border-box;
}
.pl-select-sm{ width:76px; }
.pl-select:focus{ outline:2px solid #1e6fa8; outline-offset:1px; }

/* ---- Toggle switch ---- */
.pl-toggle-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.pl-toggle-label input[type=checkbox]{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}
.pl-toggle-track{
  display:inline-flex;
  width:34px;
  height:18px;
  border-radius:9px;
  background:rgba(0,0,0,.18);
  transition:background .2s;
  flex:0 0 auto;
  position:relative;
}
.pl-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:left .2s;
}
.pl-toggle-label input:checked ~ .pl-toggle-track{ background:#1e6fa8; }
.pl-toggle-label input:checked ~ .pl-toggle-track .pl-toggle-thumb{ left:18px; }
.pl-toggle-text{
  font-size:0.88em;
  font-weight:600;
}

/* ---- DT native checkbox (smaller tick) ---- */
.pl-dt-toggle-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  user-select:none;
  font-size:0.88em;
  font-weight:600;
  white-space:nowrap;
}
.pl-dt-toggle-label input[type=checkbox]{
  width:12px;
  height:12px;
  transform:scale(0.8);
  transform-origin:center;
  cursor:pointer;
  flex:0 0 auto;
}

/* ---- Fullscreen icon button ---- */
.pl-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  font-size:1.1em;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  transition:background .15s;
}
.pl-icon-btn:hover{ background:rgba(0,0,0,.07); }

/* ---- Meta (clock + last update) ---- */
.pl-board-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.75;
  flex:0 0 auto;
  white-space:nowrap;
  justify-content:flex-end;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:0.85em;
  padding-left:10px;
  border-left:1px solid rgba(0,0,0,.12);
}

#plLastUpdate{ display:inline-block; text-align:right; }


/* Two-section layout (Forming / Trimming) */
.pl-board-layout{display:flex;gap:24px;flex-wrap:wrap;}
.pl-board-section{flex:1 1 400px;min-width:0;}
.pl-section-title{font-size:18px;font-weight:700;margin-bottom:10px;padding:4px 0;border-bottom:2px solid rgba(0,0,0,0.1);}
body.pl-board-dark .pl-section-title{border-bottom-color:rgba(255,255,255,0.15);}

.pl-board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;padding-bottom:8px;}

.pl-col{background:rgba(0,0,0,0.02);border-radius:12px;padding:10px;min-height:200px;}
.pl-col-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:16px;margin-bottom:10px;position:sticky;top:0;z-index:5;background:inherit;padding:8px 0;margin-top:-8px;}
.pl-col-count{font-weight:700;opacity:.7;font-size:13px;}

.pl-card{background:#fff;border-radius:12px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.08);margin-bottom:10px;}
.pl-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.pl-card-mo{font-size:15px;font-weight:800;display:flex;align-items:center;flex:1;}
.pl-card-prod{margin-top:6px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-card-job{margin-top:6px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-card-nums{display:flex;gap:12px;margin-top:8px;}
.pl-card-nums .pl-k{display:block;font-size:11px;opacity:.7}
.pl-card-nums .pl-v{display:block;font-size:16px;font-weight:800}
.pl-ghost-ttl{margin-left:auto;text-align:right;opacity:.75;}

.pl-progress{height:8px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden;margin-top:8px;}
.pl-progress-bar{height:100%;background:rgba(25,168,122,.9);}
.pl-card-times{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12px;opacity:.85}
.pl-dur{margin-left:auto;font-weight:800;}
.pl-card-dur{margin-left:auto;font-weight:800;}
.pl-no-dates{font-style:italic;opacity:.5;}

/* Shadow card badge (parallel / advanced operation) */
.pl-shadow-badge{margin-top:2px;margin-bottom:0;}
.pl-shadow-badge span{display:inline-block;padding:1px 7px;border-radius:5px;font-size:0.78em;font-weight:700;background:rgba(99,102,241,0.12);color:#4f46e5;}
body.pl-board-dark .pl-shadow-badge span{background:rgba(129,140,248,0.2);color:#a5b4fc;}
/* Tighten gap to product line when badge is present */
.pl-shadow-badge + .pl-card-prod{margin-top:2px;}

/* Late alert icon */
.pl-late-icon{font-size:0.85em;margin-left:auto;}
.pl-card .pl-late-icon{color:rgb(188,0,0);}
body.pl-board-dark .pl-card .pl-late-icon{color:rgb(255,107,107);}

/* Subtle late card highlighting */
.pl-card-late{border-left:3px solid rgba(188,0,0,0.5);background:rgba(188,0,0,0.03);}
body.pl-board-dark .pl-card-late{border-left-color:rgba(255,107,107,0.6);background:rgba(255,107,107,0.06);}

/* Status-based card highlighting (only when not late) */
.pl-card-inprogress{border-left:3px solid rgba(25,168,122,0.5);background:rgba(25,168,122,0.03);}
.pl-card-validated{border-left:3px solid rgba(182,146,26,0.5);background:rgba(182,146,26,0.03);}

body.pl-board-dark .pl-card-inprogress{border-left-color:rgba(25,168,122,0.6);background:rgba(25,168,122,0.06);}
body.pl-board-dark .pl-card-validated{border-left-color:rgba(182,146,26,0.6);background:rgba(182,146,26,0.06);}

.pl-card-draft{border-left:3px solid rgba(107,114,128,0.5);background:rgba(107,114,128,0.03);}
body.pl-board-dark .pl-card-draft{border-left-color:rgba(156,163,175,0.6);background:rgba(156,163,175,0.06);}
.pl-card-complete{border-left:3px solid rgba(5,150,105,0.7) !important;background:rgba(5,150,105,0.06) !important;opacity:.82;}
body.pl-board-dark .pl-card-complete{border-left-color:rgba(52,211,153,0.7) !important;background:rgba(52,211,153,0.08) !important;}
.pl-card-completed-at{margin-top:6px;font-size:11px;color:#059669;font-weight:600;}
body.pl-board-dark .pl-card-completed-at{color:#34d399;}

/* Late only filter */
body.pl-filter-late-only .pl-card:not(.pl-card-late){display:none;}
body.pl-filter-late-only .pl-col.pl-col-empty{display:none;}

/* Hide empty columns filter */
body.pl-filter-hide-empty .pl-col.pl-col-empty{display:none;}

.pl-status{display:inline-block !important;padding:2px 8px !important;border-radius:6px !important;font-weight:600 !important;font-size:0.85em !important;white-space:nowrap !important;}
.pl-status-draft{background:#e5e7eb !important;color:#374151 !important;}
.pl-status-validated{background:#b6921a !important;color:#fff !important;}
.pl-status-inprogress{background:#19a87a !important;color:#fff !important;}
.pl-status-produced{background:#cfd4d7 !important;color:#374151 !important;}
.pl-status-cancelled{background:#f3f4f6 !important;color:#6b7280 !important;}
.pl-status-unknown{background:#9ca3af !important;color:#111827 !important;}
.pl-status-complete{background:#19a87a !important;color:#fff !important;}

/* Fullscreen tweaks */
body.pl-fullscreen .pl-board-top{position:sticky;top:0;background:rgba(15,15,15,.85) !important;backdrop-filter:blur(8px);padding:8px 12px;border-radius:12px;z-index:10;border-color:rgba(255,255,255,.08) !important;}
body.pl-fullscreen .pl-board-nav{ padding:6px 12px; }
body.pl-fullscreen .pl-select{background:#1e1e1e;color:#eaeaea;border-color:rgba(255,255,255,.18);}
body.pl-fullscreen .pl-toggle-track{background:rgba(255,255,255,.2);}
body.pl-fullscreen .pl-toggle-label input:checked ~ .pl-toggle-track{background:#1e6fa8;}
body.pl-fullscreen .pl-icon-btn{background:#1e1e1e;border-color:rgba(255,255,255,.18);color:#eaeaea;}
body.pl-fullscreen .pl-icon-btn:hover{background:#2e2e2e;}
body.pl-fullscreen .pl-board-meta{border-left-color:rgba(255,255,255,.15);color:#bbb;}
/* Hide Dolibarr chrome in kiosk/fullscreen */
.pl-kiosk #id-left,
.pl-kiosk #id-top,
.pl-kiosk .side-nav,
.pl-kiosk .tmenudiv,
.pl-kiosk #mainmenu,
.pl-kiosk #topmenu,
.pl-kiosk #menu,
.pl-kiosk #id-left-menu,
.pl-fullscreen #id-left,
.pl-fullscreen #id-top,
.pl-fullscreen .side-nav,
.pl-fullscreen .tmenudiv,
.pl-fullscreen #mainmenu,
.pl-fullscreen #topmenu,
.pl-fullscreen #menu,
.pl-fullscreen #id-left-menu{
  display:none !important;
}
.pl-kiosk #id-right,
.pl-fullscreen #id-right{
  margin-left:0 !important;
  left:0 !important;
  width:100% !important;
}
.pl-kiosk #id-container,
.pl-fullscreen #id-container{
  padding-top:0 !important;
  margin-top:0 !important;
}


/* Prevent layout shift when numbers change */
.pl-board-meta, .pl-board-meta * { font-variant-numeric: tabular-nums; }
#plClock { display:inline-block; min-width: 200px; }
#plRefreshCountdown { display:inline-block; min-width: 2ch; text-align:right; }


/* Auto-hide top bar */
.pl-board-top.pl-top-hidden{transform:translateY(-100%);opacity:0;pointer-events:none;}
.pl-board-top{transition:transform .3s ease, opacity .3s ease;}

#plTopHotzone{position:fixed;top:0;left:0;right:0;height:14px;z-index:10050;}
body:not(.pl-top-hidden) #plTopHotzone{display:none;}

body.pl-top-hidden .pl-board-top{transform:translateY(-110%);opacity:0;pointer-events:none;}
.pl-board-top{transition:transform .25s ease, opacity .25s ease;}

/* =======================================================================
   Theme integration
   - Default should follow Dolibarr light theme
   - Fullscreen should always be dark (kiosk board)
   ======================================================================= */

/* Default (non-fullscreen): keep Dolibarr look (light) */
.pl-board-page { background: transparent; color: var(--colortext, #333); }
.pl-board-top { background: transparent; color: var(--colortext, #333); }
.pl-board-top * { color: inherit; }

/* Card/columns should use Dolibarr body background */
.pl-col { background: var(--colorbackbody, #ffffff); }
.pl-col-head { background: var(--colorbackbody, #ffffff); }
.pl-col-head, .pl-col-head * { color: var(--colortext, #333); }
.pl-card { background: var(--colorbackbody, #ffffff); color: var(--colortext, #333); }
.pl-card * { color: inherit; }
.pl-card a { color: var(--colorlink, #1a5fb4); }
.pl-progress-track { background: #e6e6e6; }

/* Fullscreen: force dark regardless of Dolibarr theme */
body.pl-fullscreen .pl-board-page { background: #0b0b0b !important; color: #eaeaea !important; overflow: auto !important; scrollbar-width: none; }
body.pl-fullscreen .pl-board-page::-webkit-scrollbar { display: none; }
body.pl-fullscreen .pl-board-top { background: rgba(0,0,0,0.70) !important; color: #eaeaea !important; }
body.pl-fullscreen .pl-board-top * { color: inherit !important; }
body.pl-fullscreen .pl-col { background: #121212 !important; }
body.pl-fullscreen .pl-col-head { background: #121212 !important; }
body.pl-fullscreen .pl-col-head, body.pl-fullscreen .pl-col-head * { color: #eaeaea !important; }
body.pl-fullscreen .pl-card { background: #1a1a1a !important; color: #eaeaea !important; }
body.pl-fullscreen .pl-card a { color: #9ecbff !important; }
body.pl-fullscreen .pl-progress-track { background: #2a2a2a !important; }

/* Ensure tooltips visible above everything */
.ui-tooltip { z-index: 10060; }

/* ==========================================================
   Theme switch (Light default, Dark only in fullscreen)
   Controlled by body.pl-board-light / body.pl-board-dark
   ========================================================== */
body.pl-board-light .pl-board-page { background: transparent; color:#222; }
body.pl-board-light .pl-board-top { background: transparent; color:#222; }
body.pl-board-light .pl-board-top * { color: inherit; }
body.pl-board-light .pl-col { background:#ffffff; }
body.pl-board-light .pl-col-head { background:#ffffff; }
body.pl-board-light .pl-col-head, body.pl-board-light .pl-col-head * { color:#222; }
body.pl-board-light .pl-card { background:#ffffff; color:#222; }
body.pl-board-light .pl-card a { color:#1a5fb4; }
body.pl-board-light .pl-progress-track { background:#e6e6e6; }

/* Workstation titles must be readable in light */
body.pl-board-light .pl-col-title,
body.pl-board-light .pl-station-title,
body.pl-board-light .pl-col-head h3 { color:#222; }

/* Dark (fullscreen) */
body.pl-board-dark .pl-board-page { background:#0b0b0b; color:#eaeaea; overflow:auto; scrollbar-width:none; }
body.pl-board-dark .pl-board-page::-webkit-scrollbar { display:none; }
body.pl-board-dark .pl-board-top { background: rgba(0,0,0,0.70); color:#eaeaea; }
body.pl-board-dark .pl-board-top * { color: inherit; }
body.pl-board-dark .pl-col { background:#121212; }
body.pl-board-dark .pl-col-head { background:#121212; }
body.pl-board-dark .pl-col-head, body.pl-board-dark .pl-col-head * { color:#eaeaea; }
body.pl-board-dark .pl-card { background:#1a1a1a; color:#eaeaea; }
body.pl-board-dark .pl-card a { color:#9ecbff; }
body.pl-board-dark .pl-progress-track { background:#2a2a2a; }

/* Tooltip z-index */
.ui-tooltip { z-index: 10060; }

/* TipTip (Dolibarr) tooltip look: white card + rounded corners */
.tiptip_holder{ z-index: 10080 !important; }
.tiptip_holder .tiptip_content{
  background:#fff !important;
  color:#222 !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
  max-width: 640px !important;
}

/* Hide arrow to match Dolibarr card-like tooltip */
.tiptip_holder .tiptip_arrow, .tiptip_holder .tiptip_arrow_inner{ display:none !important; }

/* HTML tooltip fallback container (created in planning/js/board.js)
   Make it match Dolibarr standard white tooltip look.
   Inline styles are overridden via !important.
*/
#plHtmlTooltip{
  background:#fff !important;
  color:#222 !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:10px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
  padding:10px 12px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  max-width:640px !important;
}

#plHtmlTooltip .fa,
#plHtmlTooltip .fas,
#plHtmlTooltip .far{
  color:#a69944 !important;
}

#plHtmlTooltip .badge-status{
  background:#19a87a !important;
  color:#fff !important;
  padding:2px 8px !important;
  border-radius:6px !important;
  font-weight:600 !important;
  font-size:0.85em !important;
  white-space:nowrap !important;
}

#plHtmlTooltip a{
  color:var(--colorlink, #1a5fb4) !important;
  text-decoration:none !important;
}
#plHtmlTooltip a:hover{ text-decoration:underline !important; }




/* =========================
   Top bar controls colors
   - Light: follow Dolibarr
   - Dark: only in fullscreen (pl-board-dark)
   ========================= */
body.pl-board-light .pl-board-top select,
body.pl-board-light .pl-board-top input,
body.pl-board-light #plStation,
body.pl-board-light #plRefresh,
body.pl-board-light select[name="station"],
body.pl-board-light select[name="refresh"]{
  color: var(--colortext, #333) !important;
  background: var(--colorbackbody, #fff) !important;
  border-color: rgba(0,0,0,0.15) !important;
}

body.pl-board-dark .pl-board-top select,
body.pl-board-dark .pl-board-top input,
body.pl-board-dark #plStation,
body.pl-board-dark #plRefresh,
body.pl-board-dark select[name="station"],
body.pl-board-dark select[name="refresh"]{
  color: #eaeaea !important;
  background: #1f1f1f !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Dropdown options (browser-native list) */
body.pl-board-dark #plStation option,
body.pl-board-dark #plRefresh option,
body.pl-board-dark select[name="station"] option,
body.pl-board-dark select[name="refresh"] option{
  background: #fff !important;
  color: #111 !important;
}

/* --- Top bar: stop shifting when numbers change --- */
.pl-board-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Left controls block */
.pl-board-top-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Right info block (Last update + Auto-refresh) */
#plLastUpdate{
  margin-left:auto;
  flex:0 1 auto;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Prevent button width changes */
#plFullscreen, #plApply{
  flex:0 0 auto;
  min-width: 110px;              /* tweak */
}

/* Prevent select width changes */
#plStation, #plRefresh{
  flex:0 0 auto;
  min-width: 140px;              /* tweak */
}

/* If you have checkbox labels like "Show draft" */
.pl-board-top label{
  white-space:nowrap;
}

/* ============================================================
   Mobile / responsive — planning grid nav bar
   ============================================================ */

@media (max-width: 768px) {

  /* Top bar: stack in rows */
  .pl-board-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
  }

  /* Nav row: wrap pills, shrink tabs */
  .pl-board-nav {
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
  }

  /* Hide Planning title text on small screens to save space */
  .pl-board-title {
    min-width: unset;
    font-size: 13px;
  }

  /* Tabs smaller on mobile */
  .pl-tab-sm {
    min-width: unset;
    padding: 4px 8px;
    font-size: 0.78em;
  }

  /* WS pills wrap naturally */
  .pl-ws-pill {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* Filters form: full width, wrap everything */
  .pl-board-filters {
    flex-wrap: wrap !important;
    gap: 6px;
    width: 100%;
    white-space: normal !important;
    flex: 1 1 100%;
  }

  /* Station select: fill available width */
  .pl-select {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Weeks / refresh select - compact */
  .pl-select-sm {
    width: 70px !important;
  }

  /* Toggle labels wrap */
  .pl-toggle-label,
  .pl-toggle-group {
    flex: 0 0 auto;
    margin: 0;
  }

  /* Calc + Setup + fullscreen icon buttons inline */
  .pl-calc-btn,
  .pl-setup-link,
  .pl-icon-btn {
    flex: 0 0 auto;
  }

  /* Last update: full row at bottom, left-aligned */
  #plLastUpdate {
    margin-left: 0 !important;
    width: 100%;
    text-align: left;
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: 4px;
  }

  /* Meta (clock) — full width, left-aligned */
  .pl-board-meta {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 4px;
    width: 100%;
    justify-content: flex-start;
  }
}