/* ============================================================
   v4.12.250 — PLANNER DASHBOARD
   Inline styles for the page shell, KPI hero strip, and tab
   navigation. Subsequent phases will progressively replace
   placeholder cards with real charts and widgets.
   ============================================================ */
.cbq-planner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.cbq-planner * { box-sizing: border-box; }

/* Header */
/* v4.12.325 — Hero-style background for the Planner header.
   Was a plain flex row with no padding. Now a soft-gradient
   card with a decorative glow blob in the top-right corner.
   Internal flex layout untouched (title left, button right) so
   the existing markup keeps working. KPI strip remains separate
   below the header. */
.planner-head {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    /* v4.12.327 — Gap bumped 16px → 24px so title and Report button
       have room between them when content widens. */
    gap: 24px;
    /* v4.12.329 — Padding adjusted back to 28px 36px per user request.
       v327's 32px 48px was too generous; 28x36 is the goldilocks value
       for desktop. Mobile breakpoints scale proportionally below. */
    padding: 28px 36px;
    margin-bottom: 16px;
    border-radius: 16px;
    border: 1px solid var(--mcqp-border, #e2e8f0);
    background:
        radial-gradient(ellipse 320px 180px at 90% -20%, rgba(139, 92, 246, .14), transparent 60%),
        linear-gradient(135deg, #f0f4ff 0%, #f5f3ff 50%, #fdf4ff 100%);
}
/* Subtle decorative inner blob (soft purple glow, top-right).
   ::before keeps the markup unchanged — pure CSS. */
.planner-head::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, .14), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
/* Make sure children sit above the blob */
.planner-head > * { position: relative; z-index: 1; }

/* Dark mode: deeper gradient + warmer accent blob */
html[data-mcqp-theme="dark"] .planner-head,
.mcqp-fe[data-theme="dark"] .planner-head {
    border-color: rgba(99, 102, 241, .18);
    background:
        radial-gradient(ellipse 320px 180px at 90% -20%, rgba(139, 92, 246, .22), transparent 60%),
        linear-gradient(135deg, #151c36 0%, #1a1d3d 50%, #221b40 100%);
}
html[data-mcqp-theme="dark"] .planner-head::before,
.mcqp-fe[data-theme="dark"] .planner-head::before {
    background: radial-gradient(circle, rgba(167, 139, 250, .22), transparent 65%);
}

/* Title color: white in dark, dark slate in light. Subtitle slightly muted. */
.planner-title {
    font-size: 26px; font-weight: 800;
    margin: 0;
    color: var(--mcqp-text, #0f172a);
    letter-spacing: -.02em;
}
html[data-mcqp-theme="dark"] .planner-title,
.mcqp-fe[data-theme="dark"] .planner-title { color: #f1f5f9; }
.planner-subtitle {
    font-size: 13px;
    color: var(--mcqp-text-muted, #64748b);
    margin: 4px 0 0;
    font-weight: 500;
}
html[data-mcqp-theme="dark"] .planner-subtitle,
.mcqp-fe[data-theme="dark"] .planner-subtitle { color: #cbd5e1; }
.planner-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
    border: 1px solid;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    background: var(--mcqp-surface, #fff);
}
.planner-btn-ghost {
    color: var(--mcqp-text-muted, #64748b);
    border-color: var(--mcqp-border, #e2e8f0);
}
.planner-btn-ghost:hover:not(:disabled) {
    background: var(--mcqp-surface-2, #f8fafc);
    border-color: var(--mcqp-text-soft, #94a3b8);
}
.planner-btn-ghost:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* v4.12.325 — Report button on the gradient header — translucent
   white in both themes so it reads cleanly on the soft gradient. */
.planner-head .planner-btn-ghost {
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(99, 102, 241, .22);
    color: #4338ca;
}
.planner-head .planner-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(99, 102, 241, .4);
}
.planner-head .planner-btn-ghost:disabled {
    background: rgba(255, 255, 255, .55);
    color: #6366f1;
    opacity: .75;
}
html[data-mcqp-theme="dark"] .planner-head .planner-btn-ghost,
.mcqp-fe[data-theme="dark"] .planner-head .planner-btn-ghost {
    background: rgba(30, 27, 75, .55);
    border-color: rgba(167, 139, 250, .28);
    color: #c7d2fe;
}
html[data-mcqp-theme="dark"] .planner-head .planner-btn-ghost:hover:not(:disabled),
.mcqp-fe[data-theme="dark"] .planner-head .planner-btn-ghost:hover:not(:disabled) {
    background: rgba(49, 46, 129, .6);
    border-color: rgba(167, 139, 250, .45);
}
html[data-mcqp-theme="dark"] .planner-head .planner-btn-ghost:disabled,
.mcqp-fe[data-theme="dark"] .planner-head .planner-btn-ghost:disabled {
    background: rgba(30, 27, 75, .4);
    color: #a5b4fc;
    opacity: .7;
}
.planner-btn-primary {
    color: #fff;
    background: var(--mcqp-primary, #2563eb);
    border-color: var(--mcqp-primary, #2563eb);
}
.planner-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* KPI Hero Strip — 5 cards in a row
   v4.12.276 — Modern SaaS look: stronger icon badges, larger
   values, refined hover with lift. Cards now feel intentional
   rather than placeholder. */
.planner-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.planner-kpi {
    background: var(--mcqp-surface, #fff);
    border: 1px solid var(--mcqp-border, #e6ebf5);
    border-radius: 14px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: transform .18s cubic-bezier(.2, .9, .25, 1.05),
                border-color .15s,
                box-shadow .18s;
}
.planner-kpi::before {
    /* Subtle accent gradient on top — colored thin line per tint */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kpi-accent, #6366f1), transparent 80%);
    opacity: .8;
}
.planner-kpi.tint-blue    { --kpi-accent: #3b82f6; }
.planner-kpi.tint-emerald { --kpi-accent: #10b981; }
.planner-kpi.tint-amber   { --kpi-accent: #f59e0b; }
.planner-kpi.tint-violet  { --kpi-accent: #8b5cf6; }
.planner-kpi.tint-rose    { --kpi-accent: #f43f5e; }

.planner-kpi:hover {
    border-color: var(--mcqp-text-soft, #cbd5e1);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, .12),
                0 2px 6px -2px rgba(15, 23, 42, .04);
    transform: translateY(-1px);
}
.planner-kpi-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    margin-bottom: 12px;
}
/* Icon badges — slightly stronger backgrounds for SaaS-grade visibility */
.planner-kpi-icon.tint-blue    { background: #dbeafe; color: #2563eb; }
.planner-kpi-icon.tint-emerald { background: #d1fae5; color: #059669; }
.planner-kpi-icon.tint-amber   { background: #fef3c7; color: #d97706; }
.planner-kpi-icon.tint-violet  { background: #ede9fe; color: #7c3aed; }
.planner-kpi-icon.tint-rose    { background: #ffe4e6; color: #e11d48; }
.planner-kpi-icon svg { width: 20px; height: 20px; }

.planner-kpi-value {
    font-size: 28px; font-weight: 800;
    color: var(--mcqp-text, #0f172a);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.planner-kpi-label {
    font-size: 11px; font-weight: 700;
    color: var(--mcqp-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 6px;
}

/* Tabs — v4.12.276: switched from pill style to underline style.
   Active tab gets an indigo bottom border, others muted slate. */
.planner-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--mcqp-border, #e6ebf5);
    scrollbar-width: thin;
    margin-bottom: -1px;  /* overlap so card content sits on the line */
}
.planner-tab {
    flex-shrink: 0;
    padding: 12px 16px;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mcqp-text-muted, #64748b);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.planner-tab:hover {
    color: var(--mcqp-text, #0f172a);
}
.planner-tab.is-active {
    color: var(--mcqp-accent, #4f46e5);
    border-bottom-color: var(--mcqp-accent, #4f46e5);
    font-weight: 700;
    background: transparent;
    box-shadow: none;
}

/* Body / cards */
.planner-body { display: flex; flex-direction: column; gap: 14px; }
.planner-card {
    background: var(--mcqp-surface, #fff);
    border: 1px solid var(--mcqp-border, #e6ebf5);
    border-radius: 14px;
    padding: 18px;
}
.planner-card-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.planner-card-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: grid; place-items: center;
}
.planner-card-icon.tint-blue    { background: #eff6ff; color: #2563eb; }
.planner-card-icon.tint-emerald { background: #ecfdf5; color: #059669; }
.planner-card-icon.tint-amber   { background: #fffbeb; color: #d97706; }
.planner-card-icon.tint-violet  { background: #f5f3ff; color: #7c3aed; }
.planner-card-icon.tint-rose    { background: #fff1f2; color: #e11d48; }
.planner-card-title {
    font-size: 11px; font-weight: 800;
    color: var(--mcqp-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Overview grid (2 columns of placeholder cards) */
.planner-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.planner-placeholder-body {
    min-height: 160px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--mcqp-surface-2, #f8fafc) 0%, transparent 100%);
    border-radius: 8px;
}
.planner-coming {
    font-size: 13px;
    font-weight: 600;
    color: var(--mcqp-text-muted, #64748b);
}

/* Empty / coming-soon card (used by sub-tab placeholder pages) */
.planner-empty-card {
    text-align: center;
    padding: 60px 24px;
}
.planner-empty-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.planner-empty-title {
    font-size: 18px; font-weight: 800;
    margin: 0 0 6px;
    color: var(--mcqp-text, #0f172a);
    letter-spacing: -.01em;
}
.planner-empty-text {
    font-size: 13px;
    color: var(--mcqp-text-muted, #64748b);
    max-width: 460px;
    margin: 0 auto 18px;
    line-height: 1.55;
}

/* Mobile */
@media (max-width: 768px) {
    /* v4.12.329 — Mobile padding reverted proportionally with desktop
       28x36. Tablet 22x20 keeps comfortable breathing on narrower viewport. */
    .planner-head { padding: 22px 20px; margin-bottom: 12px; border-radius: 14px; }
    .planner-head::before { width: 160px; height: 160px; top: -50px; right: -50px; }
    .planner-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .planner-overview-grid { grid-template-columns: 1fr; }
    .planner-title { font-size: 22px; }
    .planner-kpi { padding: 14px 14px 12px; }
    .planner-kpi-value { font-size: 22px; }
    .planner-kpi-icon { width: 32px; height: 32px; margin-bottom: 8px; }
    .planner-kpi-icon svg { width: 16px; height: 16px; }
    .planner-tab { padding: 10px 12px; font-size: 12.5px; }
}
@media (max-width: 420px) {
    .planner-head { padding: 18px 16px; }
    .planner-kpi-strip { grid-template-columns: 1fr 1fr; }
    .planner-kpi { padding: 12px; }
}

/* Dark mode */
html[data-mcqp-theme="dark"] .planner-kpi,
html[data-mcqp-theme="dark"] .planner-card {
    background: var(--mcqp-surface, #141b2d);
    border-color: rgba(148, 163, 184, .14);
}
html[data-mcqp-theme="dark"] .planner-kpi:hover {
    border-color: rgba(148, 163, 184, .3);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
}
/* v4.12.276 — Tabs are now underline-style; dark-mode override
   updates the bottom border + active accent color. */
html[data-mcqp-theme="dark"] .planner-tabs {
    background: transparent;
    border-bottom-color: rgba(148, 163, 184, .14);
}
html[data-mcqp-theme="dark"] .planner-tab {
    color: #94a3b8;
}
html[data-mcqp-theme="dark"] .planner-tab:hover {
    color: #f1f5f9;
}
html[data-mcqp-theme="dark"] .planner-tab.is-active {
    background: transparent;
    color: #a5b4fc;
    border-bottom-color: #818cf8;
}
html[data-mcqp-theme="dark"] .planner-kpi-icon.tint-blue    { background: rgba(37, 99, 235, .15); color: #93c5fd; }
html[data-mcqp-theme="dark"] .planner-kpi-icon.tint-emerald { background: rgba(5, 150, 105, .15); color: #6ee7b7; }
html[data-mcqp-theme="dark"] .planner-kpi-icon.tint-amber   { background: rgba(217, 119, 6, .15); color: #fcd34d; }
html[data-mcqp-theme="dark"] .planner-kpi-icon.tint-violet  { background: rgba(124, 58, 237, .15); color: #c4b5fd; }
html[data-mcqp-theme="dark"] .planner-kpi-icon.tint-rose    { background: rgba(225, 29, 72, .15); color: #fda4af; }
html[data-mcqp-theme="dark"] .planner-card-icon.tint-blue    { background: rgba(37, 99, 235, .15); color: #93c5fd; }
html[data-mcqp-theme="dark"] .planner-card-icon.tint-emerald { background: rgba(5, 150, 105, .15); color: #6ee7b7; }
html[data-mcqp-theme="dark"] .planner-card-icon.tint-amber   { background: rgba(217, 119, 6, .15); color: #fcd34d; }
html[data-mcqp-theme="dark"] .planner-card-icon.tint-violet  { background: rgba(124, 58, 237, .15); color: #c4b5fd; }
html[data-mcqp-theme="dark"] .planner-card-icon.tint-rose    { background: rgba(225, 29, 72, .15); color: #fda4af; }
html[data-mcqp-theme="dark"] .planner-placeholder-body {
    background: linear-gradient(180deg, rgba(148, 163, 184, .06) 0%, transparent 100%);
}

/* v4.12.251 — Widgets row (3 columns: Tasks / Pomodoro / Habits).
   Phase 2.2 only ships Tasks; the row is single-column for now and
   will become 3-column once Pomodoro + Habits land. */
.planner-widgets-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}
@media (min-width: 1024px) {
    .planner-widgets-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .planner-widgets-row > .pt-card {
        grid-column: span 1;
    }
}
@media (max-width: 1023px) {
    .planner-widgets-row > .pt-card {
        grid-column: 1 / -1;
    }
}