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

.pl-board-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.pl-board-title{
  font-size:20px;
  font-weight:700;
  flex:0 0 auto;
  white-space:nowrap;
}

.pl-board-filters{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  flex:0 0 auto;
  white-space:nowrap;
}

.pl-board-filters select[name="station"]{
  width:200px;
  box-sizing:border-box;
}

.pl-board-filters select[name="refresh"]{
  width:90px;
  box-sizing:border-box;
  text-align-last:center;
}

.pl-board-filters .butAction{
  width:110px;
  box-sizing:border-box;
  flex:0 0 auto;
}

.pl-board-filters #plFullscreen{
  width:120px;
}

.pl-board-check{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  white-space:nowrap;
}

.pl-board-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.8;
  flex:1 1 auto;
  white-space:nowrap;
  justify-content:flex-end;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

.pl-dot{opacity:.5}

/* 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-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;}

/* 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);}

/* Late only filter */
body.pl-filter-late-only .pl-card:not(.pl-card-late){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;}

/* Fullscreen tweaks */
body.pl-fullscreen .pl-board-top{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);padding:8px;border-radius:12px;z-index:10;}
/* 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;
}