/*
  ══════════════════════════════════════════════════════════════
  DASHBOARD DESIGN OVERRIDE — Warm & Editorial
  Rabbi Yosef Sonnenschein Personal AI Scheduler

  Loads as a <link> in index.html. Targets both:
    • Tailwind/shadcn CSS variables (--background, --card, etc.)
    • cl-* design-kit variables
    • feed-column.css classes
    • tasks-column inline style override via className hooks

  Goal: match the reference screenshot — warm parchment palette,
  large Cormorant Garamond date heading, saturated event blocks,
  always-visible feed actions, prominent task sections.
  ══════════════════════════════════════════════════════════════
*/

/* ── 1. GLOBAL CSS VARIABLE OVERRIDES ──────────────────────────
   Override Tailwind/shadcn HSL variables to warm cream palette.
   !important is valid on custom property declarations and ensures
   these win regardless of cascade order.
   ─────────────────────────────────────────────────────────────*/
:root {
  /* The dashboard sits on one continuous pristine-white surface. */
  --background:        0 0% 100% !important;
  --card:              0 0% 100% !important;
  --card-foreground:   230 29% 15% !important;
  --card-border:       35 20% 87% !important;
  --border:            35 20% 87% !important;
  --muted:             36 18% 93% !important;
  --muted-foreground:  220 10% 46% !important;

  /* cl-* system variables — warm equivalents */
  --cl-bg:             #FFFFFF !important;
  --cl-surface:        #FFFFFF !important;
  --cl-surface-2:      #F3F0EB !important;
  --cl-border:         #E5E0DA !important;
  --cl-border-strong:  #D8D2CA !important;
  --cl-text-muted:     #9A918A !important;
  --cl-text-secondary: #6B6460 !important;

  /* feed-column variables — warm equivalents */
  --f-bg:      #FFFFFF !important;
  --f-surface: #FFFFFF !important;
  --f-border:  #E5E0DA !important;
}

/* ── 2. COLUMN BACKGROUNDS ───────────────────────────────────── */

/*
  .col has no explicit background — it inherits from body.
  Body uses bg-background (Tailwind) = hsl(--background).
  Force warm cream on every column explicitly.
*/
.col {
  background: #FFFFFF !important;
}

/* The feed-col re-declares --f-* variables locally which would
   override the :root warm values. Fix them here at a higher
   specificity so the warm backgrounds actually apply. */
.feed-col {
  background: #FFFFFF !important;
}
.feed-topbar,
.feed-role-filter {
  background: #FFFFFF !important;
  border-color: #E5E0DA !important;
}
.feed-list {
  background: #FFFFFF !important;
}
.feed-thread {
  background: #FDFCFA !important;
  border-color: #E5E0DA !important;
  border-radius: 14px !important;
}
.feed-thread:hover {
  background: #FDFCFA !important;
  box-shadow: 0 4px 12px -4px rgba(80,60,40,0.12) !important;
}
.feed-thread.feed-thread--email,
.feed-thread.feed-thread--email:hover {
  background: #F5FAFF !important;
}
.feed-thread.feed-thread--whatsapp,
.feed-thread.feed-thread--whatsapp:hover {
  background: #F4FCF6 !important;
}
.feed-thread.feed-thread--text,
.feed-thread.feed-thread--text:hover {
  background: #FFFAF3 !important;
}
.feed-thread.feed-thread--email .feed-thread-main,
.feed-thread.feed-thread--email .feed-actions,
.feed-thread.feed-thread--whatsapp .feed-thread-main,
.feed-thread.feed-thread--whatsapp .feed-actions,
.feed-thread.feed-thread--text .feed-thread-main,
.feed-thread.feed-thread--text .feed-actions {
  background: inherit !important;
}

/* The bg-zinc-100 Tailwind wrapper around HebrewDateHeader */
.bg-zinc-100 {
  background: #FFFFFF !important;
  border-color: #E5E0DA !important;
}

.cl-nav {
  background: #FFFFFF !important;
}

/*
  Secular date — Cormorant Garamond editorial serif, 32px/700.
  The div also carries Tailwind "font-bold leading-tight" but
  !important overrides those utilities.
*/
.cl-header__date {
  font-size:    32px !important;
  font-weight:  700 !important;
  font-family:  'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  color:        #1C2033 !important;
  line-height:  1.08 !important;
  letter-spacing: -0.01em !important;
}

/* Hebrew date — David Libre, richer blue */
.cl-header__hebrew {
  font-size:   17px !important;
  color:       #185FA5 !important;
  font-weight: 600 !important;
  margin-top:  3px !important;
  font-family: 'David Libre', serif !important;
}

/* Zmanim row */
.cl-header__zmanim {
  font-size: 11px !important;
  color:     #7A7670 !important;
  gap:       14px !important;
}

/* ── 3. SCHEDULE COLUMN — action buttons ────────────────────── */

.cl-action-btn {
  background:   #EDE9E3 !important;
  border-color: #D8D2CA !important;
  color:        #4A4540 !important;
}
.cl-action-btn:hover {
  background: #E6E1DA !important;
}
.cl-action-btn--primary {
  background:   #185FA5 !important;
  border-color: #185FA5 !important;
}
.cl-action-btn--primary:hover {
  background:   #0D4A87 !important;
  border-color: #0D4A87 !important;
}
.cl-action-btn__label {
  font-size:   11px !important;
  font-weight: 500 !important;
  color:       #4A4540 !important;
}
.cl-action-btn--primary .cl-action-btn__label {
  color: #FFFFFF !important;
}

/* ── 4. FEED COLUMN — topbar ────────────────────────────────── */

/*
  "Inbox" heading — 24px/700 Cormorant Garamond to match date scale.
*/
.feed-topbar-title {
  font-size:   24px !important;
  font-weight: 700 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color:       #1C2033 !important;
}

.feed-remaining {
  color:       #185FA5 !important;
  font-weight: 600 !important;
  font-size:   13px !important;
}

/* Channel filter pills */
.feed-ch-btn {
  background:   #EDE9E3 !important;
  border-color: #D8D2CA !important;
  color:        #6A6560 !important;
}
.feed-ch-btn.active {
  background:   #185FA5 !important;
  border-color: transparent !important;
  color:        #FFFFFF !important;
}

/* Role filter pills */
.feed-role-btn {
  background:   #EDE9E3 !important;
  border-color: #D8D2CA !important;
  color:        #6A6560 !important;
}
.feed-role-btn.active.r-all {
  background:   #1C2033 !important;
  border-color: transparent !important;
  color:        #FFFFFF !important;
}

/* ── 5. FEED COLUMN — thread cards ─────────────────────────── */

.feed-thread {
  border-color: #E5E0DA !important;
}
.feed-thread.unread {
  border-left-color: #E5E0DA !important;
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}
.feed-thread-sender {
  color: #1C2033 !important;
}
.feed-thread.unread .feed-thread-sender {
  font-weight: 700 !important;
}
.feed-date-div {
  color:           #9A918A !important;
  letter-spacing:  0.08em !important;
}
.feed-date-div::before,
.feed-date-div::after {
  background: #E5E0DA !important;
}

/* Action buttons — always visible, warm style */
.feed-action-btn {
  border-color: #D8D2CA !important;
  color:        #6A6560 !important;
  background:   #F3F0EB !important;
}
.feed-action-btn:hover {
  background: #EDE9E3 !important;
}
.feed-action-btn.reply {
  border-color: #185FA5 !important;
  color:        #185FA5 !important;
  background:   #EBF3FB !important;
}
.feed-action-btn.reply:hover {
  background: #DBE9F7 !important;
}
.feed-action-btn.del {
  border-color: #C0392B !important;
  color:        #C0392B !important;
}
.feed-action-btn.del:hover {
  background: #FDECEA !important;
}
.feed-source-link {
  color: #9A918A !important;
}

/* ── 6. TASKS COLUMN — header title ─────────────────────────── */

/*
  tasks-col-title className was added to the div that carries
  the inline st.hTitle style. !important overrides inline styles.
*/
.tasks-col-title {
  font-size:      24px !important;
  font-weight:    700 !important;
  font-family:    'Cormorant Garamond', Georgia, serif !important;
  color:          #1C2033 !important;
  letter-spacing: -0.01em !important;
}

/* ── 7. COLUMN SEPARATORS ───────────────────────────────────── */

.col {
  border-right-color: #E5E0DA !important;
}

/* ── 8. NAV BAR ─────────────────────────────────────────────── */

.cl-nav {
  background:   #FFFFFF !important;
  border-bottom-color: #E5E0DA !important;
}
.cl-icon-btn {
  border-color: #D8D2CA !important;
  color:        #6A6560 !important;
}
.cl-icon-btn:hover {
  background: #EDE9E3 !important;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation:  none !important;
  }
}