/* cockpit.css — supplemental styles for the publishing cockpit.
   Layout is hand-written CSS (not Tailwind utilities) because theme.css is a purged
   build and only contains classes the template itself used. Colours reference the
   theme's CSS variables so light/dark mode stay consistent with the kit. */

:root {
  --ck-gap: 1.5rem;
  --ck-surface: var(--white);
  --ck-muted: var(--bodytext);
}
html.dark {
  --ck-surface: var(--dark);
}

/* ---- Page scaffolding ---- */
.ck-page { padding: 1.5rem 0 3rem; }
.ck-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--ck-gap); }
.ck-page-head h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--dark); }
html.dark .ck-page-head h1 { color: var(--white); }
.ck-page-head p { color: var(--ck-muted); margin-top: .25rem; font-size: .9rem; }

/* ---- Grids ---- */
.ck-grid { display: grid; gap: var(--ck-gap); }
.ck-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ck-cols-2 { grid-template-columns: 1fr; }
.ck-cols-3 { grid-template-columns: 1fr; }
.ck-cols-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 900px) {
  .ck-cols-2 { grid-template-columns: 2fr 1fr; }
  .ck-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ck-cols-2.ck-even { grid-template-columns: 1fr 1fr; }
}

/* ---- KPI card ---- */
.ck-kpi { padding: 1.25rem 1.4rem; }
.ck-kpi .ck-kpi-label { font-size: .8rem; color: var(--ck-muted); display: flex; align-items: center; gap: .5rem; }
.ck-kpi .ck-kpi-value { font-size: 1.7rem; font-weight: 700; margin-top: .35rem; color: var(--dark); }
html.dark .ck-kpi .ck-kpi-value { color: var(--white); }
.ck-kpi .ck-kpi-delta { font-size: .78rem; margin-top: .3rem; }
.ck-up { color: var(--success); }
.ck-down { color: var(--error); }
.ck-kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }

/* ---- Lanes (Now / Next / Later / Done) ---- */
.ck-lanes { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ck-lanes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .ck-lanes { grid-template-columns: repeat(4, 1fr); } }
.ck-lane { background: color-mix(in oklch, var(--ck-surface), transparent 0%); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 1rem; min-height: 140px; }
html.dark .ck-lane { border-color: var(--darkborder); }
.ck-lane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.ck-lane-now .ck-lane-head { color: var(--primary); }
.ck-lane-count { background: var(--lightprimary); color: var(--primary); border-radius: 999px; padding: 0 .55rem; font-size: .72rem; line-height: 1.4rem; }

/* ---- Task / list items ---- */
.ck-task { display: flex; gap: .65rem; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; margin-bottom: .6rem; transition: border-color .15s, transform .05s; }
html.dark .ck-task { background: color-mix(in oklch, var(--dark), white 4%); border-color: var(--darkborder); }
.ck-task:hover { border-color: var(--primary); }
.ck-task .ck-check { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 6px; cursor: pointer; margin-top: 2px; display: flex; align-items: center; justify-content: center; color: transparent; }
.ck-task .ck-check:hover { border-color: var(--primary); }
.ck-task.is-done { opacity: .55; }
.ck-task.is-done .ck-check { background: var(--success); border-color: var(--success); color: #fff; }
.ck-task.is-done .ck-task-title { text-decoration: line-through; }
.ck-task-title { font-size: .92rem; font-weight: 500; }
.ck-task-meta { font-size: .72rem; color: var(--ck-muted); margin-top: .15rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ck-prio-high { color: var(--error); }
.ck-prio-low { color: var(--ck-muted); }
.ck-task-del { margin-left: auto; color: var(--ck-muted); cursor: pointer; opacity: 0; font-size: 1rem; }
.ck-task:hover .ck-task-del { opacity: .7; }
.ck-task-del:hover { color: var(--error); opacity: 1; }

/* ---- Chips / tags ---- */
.ck-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; padding: .12rem .55rem; border-radius: 999px; background: var(--lightprimary); color: var(--primary); }
.ck-chip-success { background: var(--lightsuccess); color: var(--success); }
.ck-chip-warning { background: var(--lightwarning); color: var(--warning); }
.ck-chip-error { background: var(--lighterror); color: var(--error); }
.ck-chip-info { background: var(--lightinfo); color: var(--info); }
.ck-chip-muted { background: color-mix(in oklch, var(--bodytext), transparent 88%); color: var(--bodytext); }

/* ---- Quick links / launcher tiles ---- */
.ck-tiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ck-tile { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s, transform .08s; background: var(--white); }
html.dark .ck-tile { background: color-mix(in oklch, var(--dark), white 4%); border-color: var(--darkborder); }
.ck-tile:hover { border-color: var(--primary); transform: translateY(-2px); }
.ck-tile .ck-tile-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--lightprimary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.ck-tile .ck-tile-label { font-weight: 600; font-size: .9rem; }
.ck-tile .ck-tile-host { font-size: .72rem; color: var(--ck-muted); word-break: break-all; }
.ck-tile-del { position: absolute; }

/* ---- Empty states ---- */
.ck-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ck-muted); }
.ck-empty iconify-icon { font-size: 2.2rem; opacity: .5; }
.ck-empty p { margin-top: .5rem; font-size: .9rem; }

/* ---- Integration rows ---- */
.ck-int { display: flex; align-items: center; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
html.dark .ck-int { border-color: var(--darkborder); }
.ck-int:last-child { border-bottom: 0; }
.ck-int-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--lightprimary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto; }
.ck-int-name { font-weight: 600; font-size: .92rem; }
.ck-int-sub { font-size: .75rem; color: var(--ck-muted); }
.ck-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: var(--bodytext); }
.ck-dot.on { background: var(--success); }

/* ---- Focus timer ---- */
.ck-timer { display: flex; align-items: center; gap: .6rem; }
.ck-timer-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; min-width: 4ch; text-align: center; }

/* ---- Quick capture FAB ---- */
.ck-fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; border-radius: 999px; background: var(--primary); color: #fff; border: none; cursor: pointer; box-shadow: 0 10px 25px -5px color-mix(in oklch, var(--primary), transparent 40%); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: transform .1s; }
.ck-fab:hover { transform: scale(1.06); }

/* ---- Capture modal ---- */
.ck-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ck-modal-backdrop.open { display: flex; }
.ck-modal { width: min(560px, 92vw); background: var(--white); border-radius: 16px; padding: 1.25rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
html.dark .ck-modal { background: var(--dark); }
.ck-modal h3 { font-weight: 700; margin-bottom: .25rem; }
.ck-modal-seg { display: flex; gap: .4rem; margin: .8rem 0; flex-wrap: wrap; }
.ck-seg-btn { border: 1px solid var(--border); background: transparent; border-radius: 999px; padding: .3rem .9rem; font-size: .82rem; cursor: pointer; color: var(--bodytext); }
.ck-seg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- Assistant drawer ---- */
.ck-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100vw); background: var(--white); z-index: 70; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: -10px 0 30px -10px rgba(0,0,0,.3); }
html.dark .ck-drawer { background: var(--dark); }
.ck-drawer.open { transform: translateX(0); }
.ck-drawer-head { padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
html.dark .ck-drawer-head { border-color: var(--darkborder); }
.ck-chat { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .75rem; }
.ck-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 14px; font-size: .88rem; line-height: 1.4; white-space: pre-wrap; }
.ck-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.ck-msg.bot { align-self: flex-start; background: var(--lightprimary); color: var(--dark); border-bottom-left-radius: 4px; }
html.dark .ck-msg.bot { color: var(--white); }
.ck-chat-form { padding: .8rem 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; }
html.dark .ck-chat-form { border-color: var(--darkborder); }

/* ---- misc helpers ---- */
.ck-row { display: flex; align-items: center; gap: .6rem; }
.ck-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ck-muted { color: var(--ck-muted); }
.ck-mt { margin-top: var(--ck-gap); }
.ck-stack > * + * { margin-top: 1rem; }
.ck-banner { display: flex; gap: .6rem; align-items: flex-start; background: var(--lightinfo); color: var(--info); border-radius: 12px; padding: .8rem 1rem; font-size: .85rem; }
.ck-scrollx { overflow-x: auto; }

/* ---- Active sidebar link ---- */
#sidebarnav .sidebar-link.active { background: var(--primary); color: #fff; }
#sidebarnav .sidebar-link.active iconify-icon { color: #fff; }

/* Chart containers keep a stable height before ApexCharts renders */
.ck-chart { min-height: 300px; }
.ck-chart-sm { min-height: 230px; }