/* ============================================================================
   BAJ Royal Farm — Workspace (Module Launcher)        control-panel.css · v2.0.0
   Designed & Developed by: Babatunde Adedeji Adelaja · 2026
   ----------------------------------------------------------------------------
   Fully SCOPED under .cp-ws / .cp-* and self-contained. Text colours are FIXED
   (never var(--ink/--soft) from the global theme) so nothing can inherit the
   light-on-light bug. Every text/background pair passes WCAG AA. Uses the
   --ds-* design tokens (design-system.css) with hard fallbacks.
   ============================================================================ */

/* ---- the workspace lives on its own page: give it the app's light surface ---- */
#pg-workspace { background: var(--ds-surface, #f4f6f5); }
#pg-workspace .cp-host { max-width: 1240px; margin: 0 auto; padding: clamp(14px, 3vw, 30px) clamp(12px, 3vw, 26px) 80px; }

/* ============================ WORKSPACE ROOT ============================ */
.cp-ws {
  font-family: var(--ds-font);
  color: var(--ds-ink, #16202e);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- hero header ---------------- */
.cp-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-4, 16px);
  flex-wrap: wrap; padding-bottom: var(--ds-4, 16px); margin-bottom: var(--ds-5, 20px);
  border-bottom: 1px solid var(--ds-line, #e4e8ee);
}
.cp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-c-mgmt, #0f6b4a); margin-bottom: 4px; }
.cp-greet { font-family: var(--ds-font-display, Georgia, serif); font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; line-height: 1.1; color: var(--ds-ink, #16202e); letter-spacing: -.01em; }
.cp-subline { margin-top: 6px; font-size: 13.5px; color: var(--ds-soft, #5c6673); font-weight: 600; }
.cp-subline b { color: var(--ds-ink-2, #3a4351); font-weight: 800; }
.cp-role { display: inline-block; background: var(--ds-good-bg, #e7f6ec); color: var(--ds-good-ink, #0f5c30); font-weight: 800; font-size: 11px; text-transform: capitalize; padding: 2px 9px; border-radius: 999px; }

.cp-head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-searchwrap { position: relative; display: flex; align-items: center; }
.cp-search-ic { position: absolute; left: 12px; font-size: 15px; color: var(--ds-soft, #5c6673); pointer-events: none; }
.cp-search {
  width: min(320px, 62vw); box-sizing: border-box; padding: 10px 62px 10px 34px;
  border: 1px solid var(--ds-line, #e4e8ee); border-radius: var(--ds-r-md, 12px);
  background: var(--ds-card, #fff); color: var(--ds-ink, #16202e);
  font: inherit; font-size: 14px; box-shadow: var(--ds-sh-xs); transition: box-shadow var(--ds-t), border-color var(--ds-t);
}
.cp-search::placeholder { color: var(--ds-ph, #8a94a3); }
.cp-search:focus { outline: none; border-color: var(--ds-gold, #D4A437); box-shadow: var(--ds-sh-focus); }
.cp-kbd { position: absolute; right: 8px; font-family: var(--ds-font); font-size: 10.5px; font-weight: 800; color: var(--ds-soft, #5c6673); background: var(--ds-card-2, #f8faf9); border: 1px solid var(--ds-line, #e4e8ee); border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.cp-kbd:hover { color: var(--ds-ink, #16202e); border-color: var(--ds-gold, #D4A437); }

.cp-icbtn {
  width: 40px; height: 40px; border-radius: var(--ds-r-md, 12px); border: 1px solid var(--ds-line, #e4e8ee);
  background: var(--ds-card, #fff); color: var(--ds-ink-2, #3a4351); font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--ds-sh-xs); transition: var(--ds-t);
}
.cp-icbtn:hover { color: var(--ds-ink, #16202e); border-color: var(--ds-gold, #D4A437); transform: translateY(-1px); box-shadow: var(--ds-sh-sm); }
.cp-btn { border-radius: var(--ds-r-md, 12px); border: 1px solid var(--ds-line, #e4e8ee); background: var(--ds-card, #fff); color: var(--ds-ink, #16202e); font: inherit; font-weight: 700; font-size: 13px; padding: 10px 14px; cursor: pointer; box-shadow: var(--ds-sh-xs); transition: var(--ds-t); }
.cp-btn:hover { border-color: var(--ds-gold, #D4A437); transform: translateY(-1px); box-shadow: var(--ds-sh-sm); }
.cp-btn-ghost { background: var(--ds-card-2, #f8faf9); }

/* ---------------- quick create ---------------- */
.cp-quick { margin-bottom: var(--ds-5, 20px); }
.cp-quick-l { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-soft, #5c6673); margin-bottom: 10px; }
.cp-quick-row { display: flex; flex-wrap: wrap; gap: 9px; }
.cp-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--ds-line, #e4e8ee); border-radius: var(--ds-r-pill, 999px);
  background: var(--ds-card, #fff); color: var(--ds-ink, #16202e); font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; box-shadow: var(--ds-sh-xs); transition: var(--ds-t);
}
.cp-chip:hover { border-color: var(--ds-gold, #D4A437); color: var(--ds-green, #0B4D3A); transform: translateY(-1px); box-shadow: var(--ds-sh-sm); }
.cp-chip-ic { font-size: 15px; }
.cp-chip-ghost { background: var(--ds-card-2, #f8faf9); color: var(--ds-soft, #5c6673); font-weight: 600; }

/* ---------------- sections ---------------- */
.cp-body { display: flex; flex-direction: column; gap: var(--ds-6, 24px); }
.cp-sec-h { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.cp-sec-h.clk { cursor: pointer; user-select: none; }
.cp-sec-t { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-ink, #16202e); }
.cp-sec-n { font-size: 11px; font-weight: 800; color: var(--ds-soft, #5c6673); background: var(--ds-card-2, #f8faf9); border: 1px solid var(--ds-line, #e4e8ee); border-radius: 999px; padding: 1px 8px; }
.cp-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--ds-c-gen, #556070); box-shadow: 0 0 0 3px rgba(85,96,112,.14); }
.cs-mgmt .cp-dot { background: var(--ds-c-mgmt, #0f6b4a); box-shadow: 0 0 0 3px rgba(15,107,74,.15); }
.cs-doc  .cp-dot { background: var(--ds-c-doc, #b07d12);  box-shadow: 0 0 0 3px rgba(176,125,18,.15); }
.cs-fn   .cp-dot { background: var(--ds-c-fn, #b4601f);   box-shadow: 0 0 0 3px rgba(180,96,31,.15); }
.cs-pub  .cp-dot { background: var(--ds-c-pub, #12756b);  box-shadow: 0 0 0 3px rgba(18,117,107,.15); }
.cs-fav  .cp-dot { background: var(--ds-gold, #D4A437);   box-shadow: 0 0 0 3px rgba(212,164,55,.20); }
.cs-rec  .cp-dot { background: var(--ds-info, #1663b0);   box-shadow: 0 0 0 3px rgba(22,99,176,.15); }
.cp-sec-h.clk:hover .cp-sec-t { color: var(--ds-green, #0B4D3A); }
.cp-collapsed .cp-cards { display: none; }

/* ---------------- cards ---------------- */
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.cp-card {
  position: relative; display: flex; align-items: flex-start; gap: 13px; text-align: left;
  padding: 16px 16px; border: 1px solid var(--ds-line, #e4e8ee); border-radius: var(--ds-r-lg, 16px);
  background: var(--ds-card, #fff); color: var(--ds-ink, #16202e); cursor: pointer;
  box-shadow: var(--ds-sh-sm); transition: transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t);
  overflow: hidden;
}
.cp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ds-c-gen, #556070); opacity: 0; transition: opacity var(--ds-t); }
.cp-card:hover { transform: translateY(-3px); box-shadow: var(--ds-sh-lg); border-color: transparent; }
.cp-card:hover::before { opacity: 1; }
.cp-card:focus-visible { outline: none; box-shadow: var(--ds-sh-focus), var(--ds-sh-md); }
.cp-card.c-mgmt::before { background: var(--ds-c-mgmt, #0f6b4a); }
.cp-card.c-doc::before  { background: var(--ds-c-doc, #b07d12); }
.cp-card.c-fn::before   { background: var(--ds-c-fn, #b4601f); }
.cp-card.c-pub::before  { background: var(--ds-c-pub, #7a5a12); }

/* ============================================================
   SURFACE CONTRACT (theme engine fix) — the Workspace page sits
   on the app's dark emerald body (the retrofit repaints <body>),
   but its --ds-* tokens assumed a light page. Tokens now follow
   the SURFACE: page-level text maps to on-dark ink; each card and
   the command palette re-map to light-card ink for their subtree.
   Every existing rule reads var(--ds-*), so all Workspace text
   inherits correct accessible colors automatically.
   ============================================================ */
#pg-workspace .cp-ws{
  --ds-ink:      var(--ds-on-dark,   #f5f8f5);
  --ds-ink-2:    var(--ds-on-dark-2, #cfe0d6);
  --ds-soft:     var(--ds-on-dark-3, #a9c4b7);
  --ds-line:     rgba(255,255,255,.16);
  --ds-line-2:   rgba(255,255,255,.10);
  --ds-c-mgmt:   #7fd6a9;   /* accents brightened for AA on the dark page */
  --ds-green:    #8fdcae;
}
#pg-workspace .cp-card{
  --ds-ink:    #16202e;
  --ds-ink-2:  #3a4351;
  --ds-soft:   #5c6673;
  --ds-line:   #e4e8ee;
  --ds-line-2: #eef1f5;
  --ds-c-mgmt: #0f6b4a;
  --ds-green:  #0B4D3A;
}

/* ════════════════════════════════════════════════════════════════════════
   BAJ OS EXECUTIVE WORKSPACE SKIN · v2.0 (visual layer only)
   Redesigns the existing markup (.cp-card/.cp-l/.cp-d/.cp-ic/.cp-sec-h…)
   to match the Executive Dashboard. No logic, ordering, drag, persistence,
   search or handlers are touched. Palette: white · soft white · gold ·
   emerald only. Overrides the light-token block above by cascade order.
   ════════════════════════════════════════════════════════════════════════ */

/* 1·11 — the BAJ OS application card: emerald, gold hairline, taller */
#pg-workspace .cp-card{
  background:linear-gradient(168deg,#0f5a40,#0d5138 45%,#063d2a) !important;
  border:1px solid rgba(224,169,74,.35) !important;
  border-radius:14px !important;
  box-shadow:0 2px 4px rgba(0,0,0,.28),0 14px 30px -18px rgba(0,0,0,.55) !important;
  min-height:96px;padding:16px 14px !important;
  align-items:flex-start;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}

/* 2·10 — typography: white 800 titles, soft-white 500 descriptions */
#pg-workspace .cp-card .cp-l{
  color:#ffffff !important;font-weight:800 !important;font-size:15px !important;
  line-height:1.25;margin-bottom:3px;
}
#pg-workspace .cp-card .cp-d{
  color:rgba(255,255,255,.92) !important;font-weight:500 !important;font-size:13.5px !important;
  white-space:normal !important;overflow:visible !important;line-height:1.45;opacity:1 !important;
}

/* 3 — icons first: larger, in a circular emerald/gold badge */
#pg-workspace .cp-card .cp-ic{
  width:42px;height:42px;min-width:42px;border-radius:50% !important;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px !important;
  background:rgba(224,169,74,.14) !important;
  border:1.5px solid rgba(224,169,74,.55) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* card actions readable on emerald */
#pg-workspace .cp-card .cp-star{color:#f3d79a !important}
#pg-workspace .cp-card .cp-star.on{color:#e0a94a !important}
#pg-workspace .cp-card .cp-hide{color:rgba(255,255,255,.75) !important}

/* 5·12 — hover: lift, deeper shadow, gold glow; press = active emphasis */
#pg-workspace .cp-card:hover{
  transform:translateY(-3px);
  border-color:#e0a94a !important;
  box-shadow:0 4px 8px rgba(0,0,0,.3),0 22px 44px -20px rgba(0,0,0,.65),
             0 0 0 1px rgba(224,169,74,.5),0 0 18px -4px rgba(224,169,74,.45) !important;
}
#pg-workspace .cp-card:hover::before{opacity:1}
#pg-workspace .cp-card:active,#pg-workspace .cp-card:focus-visible{
  background:linear-gradient(168deg,#13684a,#0f5a40 50%,#0a4531) !important;
  border-color:#e0a94a !important;
  box-shadow:0 6px 10px rgba(0,0,0,.32),0 26px 50px -20px rgba(0,0,0,.7),
             0 0 0 2px rgba(224,169,74,.55) !important;
  outline:none;
}

/* 7 — category headers: large white title, colored dot, gold divider */
#pg-workspace .cp-sec{margin-bottom:26px}
#pg-workspace .cp-sec-h{
  padding:0 0 10px;margin-bottom:14px;
  border-bottom:1px solid rgba(224,169,74,.35);
}
#pg-workspace .cp-sec-t{
  color:#ffffff !important;font-size:15px !important;font-weight:800 !important;
  letter-spacing:.03em;
}
#pg-workspace .cp-sec-n{
  color:#063d2a !important;background:#e0a94a;border-radius:999px;
  padding:1px 9px;font-weight:800;font-size:11px;
}
#pg-workspace .cp-dot{width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 8px currentColor;}

/* 8 — Recently Used & Pinned: premium inset sections */
#pg-workspace .cp-sec.cs-rec,#pg-workspace .cp-sec.cs-fav{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(224,169,74,.22);
  border-radius:16px;padding:16px 16px 6px;
}
#pg-workspace .cp-sec.cs-rec .cp-sec-t::after{
  content:"Quick return to your latest tools";
  display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.85);
  letter-spacing:0;text-transform:none;margin-top:2px;
}
#pg-workspace .cp-sec.cs-fav .cp-sec-t::after{
  content:"Your pinned modules";
  display:block;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.85);
  letter-spacing:0;text-transform:none;margin-top:2px;
}

/* 9 — grid breathes */
#pg-workspace .cp-cards{gap:16px !important}

/* header zone: executive voice */
#pg-workspace .cp-eyebrow{color:#f3d79a !important;letter-spacing:.16em}
#pg-workspace .cp-greet{color:#ffffff !important;font-weight:800}
#pg-workspace .cp-subline{color:rgba(255,255,255,.92) !important}
#pg-workspace .cp-subline b{color:#ffffff !important}
#pg-workspace .cp-role{color:#063d2a !important;background:#e0a94a;border-radius:999px;padding:1px 9px;font-weight:800}

/* search & tools match the BAJ OS control system */
#pg-workspace .cp-search{
  background:#04301f !important;color:#ffffff !important;font-weight:600;
  border:1px solid rgba(224,169,74,.55) !important;border-radius:10px !important;
}
#pg-workspace .cp-search::placeholder{color:rgba(255,255,255,.65) !important}
#pg-workspace .cp-search:focus{border-color:#e0a94a !important;box-shadow:0 0 0 3px rgba(224,169,74,.35) !important;outline:none}
#pg-workspace .cp-search-ic{color:rgba(255,255,255,.8) !important}
#pg-workspace .cp-kbd{color:#f3d79a !important;border-color:rgba(224,169,74,.5) !important}
#pg-workspace .cp-icbtn,#pg-workspace .cp-btn-ghost{
  background:rgba(255,255,255,.06) !important;color:#ffffff !important;
  border:1px solid rgba(224,169,74,.4) !important;border-radius:10px !important;
}
#pg-workspace .cp-icbtn:hover,#pg-workspace .cp-btn-ghost:hover{border-color:#e0a94a !important}

/* quick-create chips & hidden tray on the emerald canvas */
#pg-workspace .cp-quick-l{color:#f3d79a !important;font-weight:800}
#pg-workspace .cp-chip{
  background:rgba(255,255,255,.07) !important;color:#ffffff !important;font-weight:600;
  border:1px solid rgba(224,169,74,.35) !important;border-radius:999px !important;
  transition:border-color .15s ease,background .15s ease;
}
#pg-workspace .cp-chip:hover{border-color:#e0a94a !important;background:rgba(224,169,74,.16) !important}
#pg-workspace .cp-hidden-l{color:rgba(255,255,255,.85) !important;font-weight:700}

@media (prefers-reduced-motion:reduce){
  #pg-workspace .cp-card,#pg-workspace .cp-chip{transition:none !important}
  #pg-workspace .cp-card:hover{transform:none}
}

/* ── WORKSPACE CARD TYPOGRAPHY & RHYTHM · v2.1 ──────────────────────────
   Root cause of merged text: .cp-l and .cp-d are inline <span>s inside
   .cp-meta — "Daily OperationsDaily health checks…". The meta column now
   stacks them with a real gap. Breathing room, secondary utility actions,
   stronger icon, premium Recently Used — same palette, same layout. ── */

/* 1·2 — title on its own line, clear hierarchy, guaranteed separation */
#pg-workspace .cp-card .cp-meta{
  display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;
}
#pg-workspace .cp-card .cp-l{
  display:block;font-size:16px !important;margin:0 !important;
}
#pg-workspace .cp-card .cp-d{
  display:block;font-size:13.5px !important;margin:0 !important;
}

/* 3·8 — breathing room: card padding, icon↔text gap, grid spacing */
#pg-workspace .cp-card{padding:18px 16px !important;gap:14px !important;min-height:104px}
#pg-workspace .cp-cards{gap:18px !important}

/* 4 (final) — utility controls removed from cards entirely. display:none
   takes the whole .cp-card-acts container (star + hide) out of the layout:
   no placeholder column remains and .cp-meta{flex:1} absorbs the freed
   width. Handlers in cardEl() are untouched — zero JS changes. */
#pg-workspace .cp-card .cp-card-acts{display:none !important}

/* 5 — module icon dominates: larger badge, larger glyph, stronger ring */
#pg-workspace .cp-card .cp-ic{
  width:48px;height:48px;min-width:48px;
  font-size:24px !important;
  border-width:2px !important;
  background:rgba(224,169,74,.18) !important;
}

/* 6 — Recently Used / Pinned: brighter surface, soft gold glow, stronger head */
#pg-workspace .cp-sec.cs-rec,#pg-workspace .cp-sec.cs-fav{
  background:rgba(255,255,255,.06);
  border-color:rgba(224,169,74,.34);
  box-shadow:0 0 26px -10px rgba(224,169,74,.28);
}
#pg-workspace .cp-sec.cs-rec .cp-sec-t,#pg-workspace .cp-sec.cs-fav .cp-sec-t{
  font-size:15.5px !important;
}

/* 7 — header rhythm only: alignment + consistent spacing */
#pg-workspace .cp-sec-h{display:flex;align-items:center;gap:10px}
#pg-workspace .cp-sec{margin-bottom:30px}

/* 9 — hover refinement: same motion, brighter gold edge */
#pg-workspace .cp-card:hover{border-color:#f0b429 !important}