/* ═══════════════════════════════════════════════════════════════
   CorkBoard Studio · Phase 120 — Campaign Forge Polish
   Visual refinement layer for Ad Suite v12 (v12-* class prefix)
   Fully standalone — no JS changes required.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variable overrides on the shell ─────────────────────── */
.v12-shell {
  --cf-blue:        #2563EB;
  --cf-blue-dim:    rgba(37, 99, 235, 0.08);
  --cf-blue-ring:   rgba(37, 99, 235, 0.20);
  --cf-purple:      #7C3AED;
  --cf-purple-dim:  rgba(124, 58, 237, 0.08);
  --cf-pink:        #DB2777;
  --cf-pink-dim:    rgba(219, 39, 119, 0.08);
  --cf-green:       #059669;
  --cf-green-dim:   rgba(5, 150, 105, 0.08);
  --cf-amber:       #D97706;
  --cf-amber-dim:   rgba(217, 119, 6, 0.08);
  --cf-teal:        #0D9488;
  --cf-radio:       #059669;
  --cf-ooh:         #D97706;
  --cf-print:       #374151;
  --cf-surface:     #FFFFFF;
  --cf-surface2:    #FAFAFA;
  --cf-border:      #E5E7EB;
  --cf-border-h:    #D1D5DB;
  --cf-text:        #111827;
  --cf-muted:       #6B7280;
  --cf-r:           12px;
  --cf-r-sm:        8px;
  --cf-gap:         8px;
  --cf-shadow:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --cf-shadow-md:   0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
}

/* ── General body text & label baseline ─────────────────────── */
.v12-shell,
.v12-main,
.v12-sidebar {
  color: var(--cf-text) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* ── Tab navigation — Campaign Forge phases ─────────────────── */
.v12-tabnav {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 20px !important;
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  height: 44px !important;
  min-height: 44px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.v12-tabnav::-webkit-scrollbar {
  display: none !important;
}

.v12-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
  height: 44px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cf-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color 0.15s, border-color 0.15s !important;
  outline: none !important;
  letter-spacing: 0.01em !important;
}
.v12-tab:hover {
  color: var(--cf-text) !important;
  background: var(--cf-blue-dim) !important;
}
.v12-tab:focus-visible {
  outline: 2px solid var(--cf-blue) !important;
  outline-offset: -2px !important;
  border-radius: 4px !important;
}

/* Brief tab — blue */
.v12-tab[data-tab="brief"].active,
.v12-tab[data-tab="brief"]:focus-visible {
  color: var(--cf-blue) !important;
  border-bottom-color: var(--cf-blue) !important;
  font-weight: 700 !important;
}
/* Strategy tab — purple */
.v12-tab[data-tab="strategy"].active {
  color: var(--cf-purple) !important;
  border-bottom-color: var(--cf-purple) !important;
  font-weight: 700 !important;
}
/* Creative tab — pink */
.v12-tab[data-tab="creative"].active {
  color: var(--cf-pink) !important;
  border-bottom-color: var(--cf-pink) !important;
  font-weight: 700 !important;
}
/* Deliver / fourth tab — green */
.v12-tab[data-tab="deliver"].active,
.v12-tab[data-tab="media"].active,
.v12-tab[data-tab="assets"].active {
  color: var(--cf-green) !important;
  border-bottom-color: var(--cf-green) !important;
  font-weight: 700 !important;
}

/* ── Section / card panels ───────────────────────────────────── */
.v12-main .v12-sw,
.v12-main section,
.v12-main .v12-card,
.v12-main .v12-tip-box,
.v12-sidebar .v12-sw {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-r) !important;
  padding: 20px !important;
  box-shadow: var(--cf-shadow) !important;
  margin-bottom: 16px !important;
}

/* Tip box variation — no shadow, softer */
.v12-tip-box {
  background: var(--cf-blue-dim) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  box-shadow: none !important;
  border-radius: var(--cf-r-sm) !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--cf-blue) !important;
}
.v12-tip-box .ti {
  flex-shrink: 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}
.v12-tip-box.amber {
  background: var(--cf-amber-dim) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
  color: #92400E !important;
}
.v12-tip-box.red {
  background: rgba(220, 38, 38, 0.07) !important;
  border-color: rgba(220, 38, 38, 0.18) !important;
  color: #991B1B !important;
}

/* ── Section titles / card heads ─────────────────────────────── */
.v12-sw-title,
.v12-main h2,
.v12-main h3,
.v12-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cf-text) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--cf-border) !important;
}

/* ── Form fields ─────────────────────────────────────────────── */
.v12-field,
.v12-grid .v12-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
}

.v12-label,
.v12-field > label,
.v12-field > span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--cf-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
}

.v12-shell input[type="text"],
.v12-shell input[type="number"],
.v12-shell input[type="date"],
.v12-shell input[type="email"],
.v12-shell input[type="url"],
.v12-shell textarea,
.v12-select,
.v12-shell select {
  padding: 8px 10px !important;
  background: var(--cf-surface2) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-r-sm) !important;
  font-size: 14px !important;
  color: var(--cf-text) !important;
  width: 100% !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  line-height: 1.5 !important;
}
.v12-shell input[type="text"]:focus,
.v12-shell input[type="number"]:focus,
.v12-shell input[type="date"]:focus,
.v12-shell input[type="email"]:focus,
.v12-shell input[type="url"]:focus,
.v12-shell textarea:focus,
.v12-select:focus,
.v12-shell select:focus {
  border-color: var(--cf-blue) !important;
  box-shadow: 0 0 0 3px var(--cf-blue-ring) !important;
  background: var(--cf-surface) !important;
}

/* Campaign name input in topbar */
.v12-campaign-name-input {
  padding: 6px 10px !important;
  background: var(--cf-surface2) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-r-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cf-text) !important;
  min-width: 220px !important;
}
.v12-campaign-name-input:focus {
  border-color: var(--cf-blue) !important;
  box-shadow: 0 0 0 3px var(--cf-blue-ring) !important;
  outline: none !important;
}

/* Select tip text */
.v12-sel-tip {
  font-size: 12px !important;
  color: var(--cf-muted) !important;
  padding: 6px 10px !important;
  background: var(--cf-blue-dim) !important;
  border-radius: var(--cf-r-sm) !important;
  margin-top: 4px !important;
  display: flex !important;
  gap: 6px !important;
  align-items: flex-start !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.v12-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--cf-gap) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--cf-r-sm) !important;
  border: 1px solid var(--cf-border) !important;
  background: var(--cf-surface) !important;
  color: var(--cf-text) !important;
  cursor: pointer !important;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s !important;
  white-space: nowrap !important;
  outline: none !important;
  line-height: 1.4 !important;
}
.v12-btn:hover {
  background: var(--cf-surface2) !important;
  border-color: var(--cf-border-h) !important;
}
.v12-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--cf-blue-ring) !important;
}
.v12-btn.primary {
  background: var(--cf-blue) !important;
  border-color: var(--cf-blue) !important;
  color: #fff !important;
}
.v12-btn.primary:hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}

/* Action row — consistent 8px gap */
.v12-action-row,
.v12-main .action-row {
  display: flex !important;
  gap: var(--cf-gap) !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.v12-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 20px !important;
  height: 56px !important;
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  box-shadow: 0 1px 0 var(--cf-border) !important;
  flex-shrink: 0 !important;
}
.v12-topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.v12-topbar-brand .brand-word {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--cf-text) !important;
  letter-spacing: -0.2px !important;
}
.v12-topbar-brand .brand-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.v12-sep {
  width: 1px !important;
  height: 22px !important;
  background: var(--cf-border) !important;
  flex-shrink: 0 !important;
}

/* ── Type chip in topbar ─────────────────────────────────────── */
.v12-type-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: var(--cf-blue-dim) !important;
  color: var(--cf-blue) !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  white-space: nowrap !important;
}
.v12-type-chip:hover {
  background: rgba(37, 99, 235, 0.14) !important;
}

/* Status select */
.v12-status-select {
  padding: 5px 8px !important;
  border-radius: var(--cf-r-sm) !important;
  border: 1px solid var(--cf-border) !important;
  background: var(--cf-surface2) !important;
  font-size: 13px !important;
  color: var(--cf-text) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* ── Campaign type picker tiles ──────────────────────────────── */
.v12-type-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 4px !important;
}
.v12-type-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 16px 12px !important;
  border-radius: var(--cf-r) !important;
  border: 1.5px solid var(--cf-border) !important;
  background: var(--cf-surface) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s !important;
}
.v12-type-tile:hover {
  border-color: var(--cf-blue) !important;
  box-shadow: var(--cf-shadow-md) !important;
  transform: translateY(-1px) !important;
}
.v12-type-tile.selected {
  border-color: var(--cf-blue) !important;
  background: var(--cf-blue-dim) !important;
  box-shadow: 0 0 0 3px var(--cf-blue-ring) !important;
}
.v12-type-tile .t-emoji {
  font-size: 22px !important;
  line-height: 1.1 !important;
}
.v12-type-tile .t-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--cf-text) !important;
}
.v12-type-tile .t-desc {
  font-size: 11px !important;
  color: var(--cf-muted) !important;
  line-height: 1.35 !important;
}

/* ── Channel type chips — colored by type ───────────────────── */
/* Applied as data-type or data-channel attributes or via specific parent context */
[data-channel-type="tv"] .v12-type-chip,
.v12-shell [data-type="tv"] {
  background: var(--cf-purple-dim) !important;
  color: var(--cf-purple) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
}
[data-channel-type="social"] .v12-type-chip,
.v12-shell [data-type="social"] {
  background: var(--cf-pink-dim) !important;
  color: var(--cf-pink) !important;
  border-color: rgba(219, 39, 119, 0.2) !important;
}
[data-channel-type="digital"] .v12-type-chip,
.v12-shell [data-type="digital"] {
  background: var(--cf-blue-dim) !important;
  color: var(--cf-blue) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}
[data-channel-type="radio"] .v12-type-chip,
.v12-shell [data-type="radio"] {
  background: var(--cf-green-dim) !important;
  color: var(--cf-radio) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}
[data-channel-type="ooh"] .v12-type-chip,
.v12-shell [data-type="ooh"] {
  background: var(--cf-amber-dim) !important;
  color: var(--cf-ooh) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}
[data-channel-type="print"] .v12-type-chip,
.v12-shell [data-type="print"] {
  background: rgba(55, 65, 81, 0.07) !important;
  color: var(--cf-print) !important;
  border-color: rgba(55, 65, 81, 0.18) !important;
}

/* Type-specific tile active color per channel */
.v12-type-tile.selected[data-type="tv"] {
  border-color: var(--cf-purple) !important;
  background: var(--cf-purple-dim) !important;
  box-shadow: 0 0 0 3px var(--cf-purple-dim) !important;
}
.v12-type-tile.selected[data-type="social"] {
  border-color: var(--cf-pink) !important;
  background: var(--cf-pink-dim) !important;
}
.v12-type-tile.selected[data-type="radio"] {
  border-color: var(--cf-radio) !important;
  background: var(--cf-green-dim) !important;
}
.v12-type-tile.selected[data-type="ooh"] {
  border-color: var(--cf-ooh) !important;
  background: var(--cf-amber-dim) !important;
}
.v12-type-tile.selected[data-type="print"] {
  border-color: var(--cf-print) !important;
  background: rgba(55, 65, 81, 0.06) !important;
}

/* ── KPI / metric sidebar widgets ────────────────────────────── */
.v12-kpi-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--cf-border) !important;
  font-size: 13px !important;
}
.v12-kpi-row:last-child {
  border-bottom: none !important;
}
.v12-kpi-row .lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--cf-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}
.v12-kpi-row .val {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cf-text) !important;
}
.v12-kpi-row .val.green { color: #059669 !important; }
.v12-kpi-row .val.amber { color: #D97706 !important; }
.v12-kpi-row .val.red   { color: #DC2626 !important; }

/* KPI pill badges */
.v12-kpi-pill,
.v12-shell .kpi-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  background: var(--cf-blue-dim) !important;
  color: var(--cf-blue) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
  white-space: nowrap !important;
}

/* ── Progress / completeness bar ─────────────────────────────── */
.v12-completeness {
  margin-top: 6px !important;
}
.v12-completeness-bar-wrap,
.v12-mini-bar-wrap {
  height: 6px !important;
  background: var(--cf-border) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}
.v12-completeness-bar,
.v12-mini-bar {
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--cf-blue) !important;
  transition: width 0.35s ease !important;
}
.v12-mini-bar.green { background: #059669 !important; }

/* ── Sidebar layout ──────────────────────────────────────────── */
.v12-sidebar {
  background: #F3F4F6 !important;
  border-left: 1px solid var(--cf-border) !important;
  padding: 16px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.v12-sidebar .v12-sw {
  margin-bottom: 0 !important;
}
.v12-sw-link {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--cf-blue) !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  margin-top: 8px !important;
  text-decoration: none !important;
}
.v12-sw-link:hover {
  text-decoration: underline !important;
}

/* ── Stage & main content area ───────────────────────────────── */
.v12-stage {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.v12-main {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
  background: #F3F4F6 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ── Grid layout for form fields ─────────────────────────────── */
.v12-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.v12-grid.two { grid-template-columns: repeat(2, 1fr) !important; }
.v12-grid.three { grid-template-columns: repeat(3, 1fr) !important; }

/* ── Storyboard sidebar button ───────────────────────────────── */
#v12-storyboard-btn,
#v12-sb-sidebar-btn {
  background: var(--cf-purple-dim) !important;
  color: var(--cf-purple) !important;
  border-color: rgba(124, 58, 237, 0.18) !important;
}
#v12-storyboard-btn:hover,
#v12-sb-sidebar-btn:hover {
  background: rgba(124, 58, 237, 0.14) !important;
}

/* ── Mode context banner ─────────────────────────────────────── */
.mode-context-banner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  background: var(--cf-blue-dim) !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.15) !important;
  font-size: 13px !important;
}
.mode-context-banner .mcb-mode {
  font-weight: 700 !important;
  color: var(--cf-blue) !important;
}
.mode-context-banner .mcb-tip {
  color: var(--cf-muted) !important;
  font-size: 12px !important;
}
.mode-context-banner .mcb-switch,
.mode-context-banner .mcb-dismiss {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--cf-border) !important;
  background: var(--cf-surface) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.mode-context-banner .mcb-dismiss {
  color: var(--cf-muted) !important;
  margin-left: auto !important;
}

/* ── Phase tabs — color ramp: Brief→Strategy→Creative→Deliver ── */
/* Brief = blue */
.v12-tab[data-tab="brief"] { border-bottom-color: transparent !important; }
.v12-tab[data-tab="brief"]:hover { color: var(--cf-blue) !important; }
/* Strategy = purple */
.v12-tab[data-tab="strategy"]:hover { color: var(--cf-purple) !important; }
/* Creative = pink */
.v12-tab[data-tab="creative"]:hover { color: var(--cf-pink) !important; }
/* Deliver = green */
.v12-tab[data-tab="deliver"]:hover,
.v12-tab[data-tab="media"]:hover,
.v12-tab[data-tab="assets"]:hover { color: var(--cf-green) !important; }

/* ── Storyboard / deliverable items ──────────────────────────── */
.v12-shell [data-status="brief"]    { color: var(--cf-blue)   !important; }
.v12-shell [data-status="script"]   { color: var(--cf-purple) !important; }
.v12-shell [data-status="shoot"]    { color: var(--cf-pink)   !important; }
.v12-shell [data-status="post"]     { color: var(--cf-amber)  !important; }
.v12-shell [data-status="delivered"]{ color: var(--cf-green)  !important; }

/* ── Responsive adjustments ──────────────────────────────────── */
@media (max-width: 720px) {
  .v12-topbar {
    padding: 0 12px !important;
    gap: 6px !important;
    height: 50px !important;
  }
  .v12-campaign-name-input {
    min-width: 120px !important;
  }
  .v12-type-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
  }
  .v12-main {
    padding: 14px !important;
  }
  .v12-grid {
    grid-template-columns: 1fr !important;
  }
  .v12-stage {
    flex-direction: column !important;
  }
  .v12-sidebar {
    border-left: none !important;
    border-top: 1px solid var(--cf-border) !important;
    max-height: 260px !important;
  }
}

/* ── Focus accessibility ─────────────────────────────────────── */
.v12-shell button:focus-visible,
.v12-shell select:focus-visible,
.v12-shell input:focus-visible,
.v12-shell textarea:focus-visible,
.v12-shell a:focus-visible {
  outline: 2px solid var(--cf-blue) !important;
  outline-offset: 2px !important;
}

/* ── Scrollbar polish (webkit) ───────────────────────────────── */
.v12-main::-webkit-scrollbar,
.v12-sidebar::-webkit-scrollbar {
  width: 6px !important;
}
.v12-main::-webkit-scrollbar-track,
.v12-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}
.v12-main::-webkit-scrollbar-thumb,
.v12-sidebar::-webkit-scrollbar-thumb {
  background: var(--cf-border-h) !important;
  border-radius: 999px !important;
}