/* Cuckoord — custom styling for dashboard cards & kanban board.
   Hand-written (no Tailwind build step). Works in Filament light & dark mode. */

:root {
    --ck-radius: 14px;
    --ck-border: rgb(17 24 39 / 0.08);
    --ck-shadow: 0 1px 2px rgb(17 24 39 / 0.06), 0 4px 12px rgb(17 24 39 / 0.05);
    --ck-shadow-hover: 0 6px 24px rgb(17 24 39 / 0.12);
    --ck-surface: #ffffff;
    --ck-surface-2: #f8fafc;
    --ck-text: #0f172a;
    --ck-muted: #64748b;
}

.dark {
    --ck-border: rgb(255 255 255 / 0.08);
    --ck-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --ck-shadow-hover: 0 6px 24px rgb(0 0 0 / 0.5);
    --ck-surface: #1f2937;
    --ck-surface-2: #111827;
    --ck-text: #f1f5f9;
    --ck-muted: #94a3b8;
}

.ck-ico { width: 1rem; height: 1rem; display: inline-block; vertical-align: -2px; }

/* ---------- Dashboard ---------- */
.ck-dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ck-dash__title { font-size: 1.05rem; font-weight: 700; color: var(--ck-text); }
.ck-dash__new {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .85rem; font-weight: 600; color: #fff;
    background: #0d9488; padding: .45rem .8rem; border-radius: 9px; text-decoration: none;
    transition: background .15s;
}
.ck-dash__new:hover { background: #0f766e; }

.ck-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ck-pcard {
    display: flex; flex-direction: column;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow);
    overflow: hidden; text-decoration: none; color: inherit;
    transition: box-shadow .18s, transform .18s;
}
.ck-pcard:hover { box-shadow: var(--ck-shadow-hover); transform: translateY(-2px); }

.ck-pcard__cover {
    position: relative; height: 132px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), var(--ck-surface-2));
    display: flex; align-items: center; justify-content: center;
}
.ck-pcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.ck-pcard__initial { font-size: 2.6rem; font-weight: 800; color: var(--accent); opacity: .55; }
.ck-pcard__status {
    position: absolute; top: 10px; right: 10px;
    font-size: .62rem; font-weight: 800; letter-spacing: .04em;
    padding: .2rem .5rem; border-radius: 999px;
    background: rgb(255 255 255 / 0.92); color: #0f172a;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

.ck-pcard__body { padding: .85rem .95rem .4rem; flex: 1; }
.ck-pcard__titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ck-pcard__name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--ck-text); line-height: 1.15; }
.ck-pcard__year { font-size: .8rem; color: var(--ck-muted); font-weight: 600; }
.ck-pcard__sub { font-size: .82rem; color: var(--ck-muted); margin-top: .2rem; line-height: 1.35; }

.ck-pcard__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
.ck-tag {
    font-size: .68rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ck-muted); background: var(--ck-surface-2);
    border: 1px solid var(--ck-border); padding: .15rem .45rem; border-radius: 6px;
}
.ck-tag--more { color: var(--accent); }

.ck-pcard__foot {
    display: flex; align-items: center; gap: .9rem;
    padding: .6rem .95rem; border-top: 1px solid var(--ck-border);
    font-size: .8rem; color: var(--ck-muted);
}
.ck-stat { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.ck-stat--danger { color: #dc2626; }
.ck-avatars { display: inline-flex; align-items: center; margin-left: auto; }
.ck-avatars img {
    width: 24px; height: 24px; border-radius: 999px; margin-left: -7px;
    border: 2px solid var(--ck-surface); object-fit: cover;
}
.ck-avatars__more { font-size: .7rem; color: var(--ck-muted); margin-left: 4px; }

.ck-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ck-muted); }
.ck-empty__icon { width: 2.5rem; height: 2.5rem; margin: 0 auto .6rem; opacity: .4; }

/* ---------- Status badge colors ---------- */
.ck-status--live { background: #16a34a; color: #fff; }
.ck-status--beta { background: #f59e0b; color: #fff; }
.ck-status--in_development { background: #3b82f6; color: #fff; }
.ck-status--idea { background: #64748b; color: #fff; }
.ck-status--paused { background: #6b7280; color: #fff; }
.ck-status--archived { background: #9ca3af; color: #fff; }

/* ---------- Board: type tabs ---------- */
.ck-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.ck-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 600; color: var(--ck-muted);
    background: var(--ck-surface); border: 1px solid var(--ck-border);
    padding: .45rem .85rem; border-radius: 10px; cursor: pointer;
    transition: all .15s;
}
.ck-tab:hover { color: var(--ck-text); border-color: color-mix(in srgb, var(--accent, #0d9488) 40%, var(--ck-border)); }
.ck-tab--active { color: #fff; background: #0d9488; border-color: #0d9488; }
.ck-tab__icon { width: 1.05rem; height: 1.05rem; }
.ck-tab__count {
    font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px;
    background: rgb(0 0 0 / 0.12);
}
.ck-tab--active .ck-tab__count { background: rgb(255 255 255 / 0.25); }

/* ---------- Board: columns ---------- */
.ck-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ck-board { grid-template-columns: 1fr; } }

.ck-col {
    background: var(--ck-surface-2);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: .7rem;
    display: flex; flex-direction: column; min-height: 120px;
}
.ck-col__head { display: flex; align-items: center; gap: .5rem; padding: .15rem .25rem .6rem; }
.ck-col__dot { width: 9px; height: 9px; border-radius: 999px; background: #94a3b8; }
.ck-col--open .ck-col__dot { background: #94a3b8; }
.ck-col--in_progress .ck-col__dot { background: #f59e0b; }
.ck-col--done .ck-col__dot { background: #16a34a; }
.ck-col__title { font-weight: 700; font-size: .85rem; color: var(--ck-text); }
.ck-col__count { font-size: .72rem; color: var(--ck-muted); font-weight: 600; }
.ck-col__add {
    margin-left: auto; width: 24px; height: 24px; border-radius: 7px; border: none;
    background: transparent; color: var(--ck-muted); font-size: 1.2rem; line-height: 1;
    cursor: pointer; transition: background .15s, color .15s;
}
.ck-col__add:hover { background: var(--ck-surface); color: var(--accent, #0d9488); }
.ck-col__body { display: flex; flex-direction: column; gap: .55rem; min-height: 24px; }
.ck-col__empty { text-align: center; color: var(--ck-muted); opacity: .5; font-size: .8rem; padding: .8rem 0; }

/* ---------- Board: cards ---------- */
.ck-card {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 10px; padding: .6rem .65rem;
    box-shadow: var(--ck-shadow); cursor: grab;
}
.ck-card:active { cursor: grabbing; }
.ck-card--ghost { opacity: .4; }
.ck-card--done .ck-card__title { text-decoration: line-through; color: var(--ck-muted); }
.ck-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.ck-card__actions { display: flex; gap: .15rem; opacity: 0; transition: opacity .15s; }
.ck-card:hover .ck-card__actions { opacity: 1; }
.ck-card__actions button {
    border: none; background: transparent; color: var(--ck-muted); cursor: pointer;
    padding: .15rem; border-radius: 5px;
}
.ck-card__actions button:hover { background: var(--ck-surface-2); color: var(--ck-text); }
.ck-card__title { font-weight: 600; font-size: .88rem; color: var(--ck-text); line-height: 1.3; }
.ck-card__desc { font-size: .78rem; color: var(--ck-muted); margin-top: .25rem; line-height: 1.35; }

.ck-thumbs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.ck-thumb { position: relative; width: 48px; height: 48px; border-radius: 7px; overflow: hidden; display: block; }
.ck-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ck-thumb__del {
    position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; line-height: 14px;
    border: none; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff;
    font-size: .7rem; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.ck-thumb:hover .ck-thumb__del { opacity: 1; }

.ck-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .55rem; gap: .5rem; }
.ck-card__meta { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ck-due {
    display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 600;
    color: var(--ck-muted); background: var(--ck-surface-2); border: 1px solid var(--ck-border);
    padding: .08rem .4rem; border-radius: 6px;
}
.ck-due--overdue { color: #dc2626; background: #fee2e2; border-color: #fecaca; }
.dark .ck-due--overdue { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
.ck-cmtcount { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; color: var(--ck-muted); font-weight: 600; }

/* comments thread (modal) */
.ck-comments { display: flex; flex-direction: column; gap: .7rem; max-height: 360px; overflow-y: auto; margin-bottom: .25rem; }
.ck-comments__empty { color: var(--ck-muted); font-size: .85rem; font-style: italic; }
.ck-comment { background: var(--ck-surface-2); border: 1px solid var(--ck-border); border-radius: 9px; padding: .55rem .65rem; }
.ck-comment__head { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.ck-comment__avatar { width: 20px; height: 20px; border-radius: 999px; }
.ck-comment__author { font-weight: 600; font-size: .8rem; color: var(--ck-text); }
.ck-comment__time { font-size: .7rem; color: var(--ck-muted); margin-left: auto; }
.ck-comment__body { font-size: .85rem; color: var(--ck-text); line-height: 1.4; white-space: pre-wrap; }
.ck-assignee { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--ck-muted); }
.ck-assignee img { width: 18px; height: 18px; border-radius: 999px; }
.ck-assignee--none { font-style: italic; opacity: .7; }
.ck-resolved { font-size: .72rem; color: #16a34a; font-weight: 600; }

/* priority badges */
.ck-badge { font-size: .64rem; font-weight: 700; letter-spacing: .02em; padding: .12rem .45rem; border-radius: 999px; text-transform: uppercase; }
.ck-badge--low { background: #e2e8f0; color: #475569; }
.ck-badge--medium { background: #dbeafe; color: #1d4ed8; }
.ck-badge--high { background: #fef3c7; color: #b45309; }
.ck-badge--critical { background: #fee2e2; color: #b91c1c; }
.dark .ck-badge--low { background: #334155; color: #cbd5e1; }
.dark .ck-badge--medium { background: #1e3a5f; color: #93c5fd; }
.dark .ck-badge--high { background: #422006; color: #fcd34d; }
.dark .ck-badge--critical { background: #450a0a; color: #fca5a5; }

/* ---------- Filter bar ---------- */
.ck-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ck-filters__search, .ck-filters__select {
    font-size: .82rem; padding: .4rem .6rem; border-radius: 9px;
    border: 1px solid var(--ck-border); background: var(--ck-surface); color: var(--ck-text);
}
.ck-filters__search { min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.ck-filters__select {
    min-width: 160px;
    appearance: none;
    padding-right: 1.9rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.85rem;
}
.ck-filters__search:focus, .ck-filters__select:focus { outline: none; border-color: #0d9488; }
.ck-filters__check { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--ck-muted); cursor: pointer; }
.ck-filters__reset { font-size: .8rem; color: #0d9488; background: none; border: none; cursor: pointer; font-weight: 600; }
.ck-filters__reset:hover { text-decoration: underline; }

/* ---------- Labels ---------- */
.ck-card__labels { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.ck-label {
    font-size: .65rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px;
    background: color-mix(in srgb, #0d9488 14%, transparent); color: #0f766e;
    border: 1px solid color-mix(in srgb, #0d9488 25%, transparent);
}
.dark .ck-label { color: #5eead4; background: color-mix(in srgb, #0d9488 22%, transparent); }

/* ---------- Item detail modal ---------- */
.ck-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.ck-detail__link {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600;
    color: #0d9488; text-decoration: none; background: var(--ck-surface-2);
    border: 1px solid var(--ck-border); padding: .15rem .5rem; border-radius: 7px;
}
.ck-detail__link:hover { text-decoration: underline; }
.ck-detail__cmthead { font-weight: 700; font-size: .85rem; color: var(--ck-text); margin: 1rem 0 .6rem; }

/* ---------- Markdown prose ---------- */
.ck-prose { font-size: .88rem; color: var(--ck-text); line-height: 1.5; }
.ck-prose p { margin: 0 0 .5rem; }
.ck-prose p:last-child { margin-bottom: 0; }
.ck-prose ul, .ck-prose ol { margin: .3rem 0 .6rem 1.2rem; }
.ck-prose li { margin: .15rem 0; }
.ck-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; background: var(--ck-surface-2); padding: .1rem .3rem; border-radius: 4px; }
.ck-prose pre { background: var(--ck-surface-2); padding: .6rem .7rem; border-radius: 8px; overflow-x: auto; margin: .5rem 0; }
.ck-prose pre code { background: none; padding: 0; }
.ck-prose a { color: #0d9488; text-decoration: underline; }
.ck-prose h1, .ck-prose h2, .ck-prose h3 { font-weight: 700; margin: .6rem 0 .3rem; line-height: 1.25; }
.ck-prose blockquote { border-left: 3px solid var(--ck-border); padding-left: .7rem; color: var(--ck-muted); margin: .5rem 0; }

/* ---------- Activity timeline ---------- */
.ck-activity { display: flex; flex-direction: column; gap: .1rem; max-height: 420px; overflow-y: auto; }
.ck-act { display: flex; gap: .6rem; padding: .5rem 0; }
.ck-act__dot { width: 9px; height: 9px; border-radius: 999px; margin-top: .35rem; flex: none; background: #94a3b8; }
.ck-act__dot.ck-act--created { background: #16a34a; }
.ck-act__dot.ck-act--status { background: #3b82f6; }
.ck-act__dot.ck-act--assignment { background: #8b5cf6; }
.ck-act__dot.ck-act--comment { background: #0d9488; }
.ck-act__dot.ck-act--deleted { background: #dc2626; }
.ck-act__body { flex: 1; border-bottom: 1px solid var(--ck-border); padding-bottom: .5rem; }
.ck-act__line { font-size: .82rem; color: var(--ck-muted); }
.ck-act__line strong { color: var(--ck-text); }
.ck-act__line em { font-style: normal; font-weight: 600; color: var(--ck-text); }
.ck-act__desc { font-size: .85rem; color: var(--ck-text); margin-top: .15rem; }
.ck-act__time { font-size: .72rem; color: var(--ck-muted); margin-top: .2rem; }

/* quick add */
.ck-quickadd { display: flex; gap: .35rem; margin-top: .6rem; }
.ck-quickadd input {
    flex: 1; font-size: .8rem; padding: .4rem .55rem; border-radius: 8px;
    border: 1px solid var(--ck-border); background: var(--ck-surface); color: var(--ck-text);
}
.ck-quickadd input:focus { outline: none; border-color: var(--accent, #0d9488); }
.ck-quickadd button {
    border: 1px solid var(--ck-border); background: var(--ck-surface); color: var(--ck-muted);
    width: 32px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.ck-quickadd button:hover { color: var(--accent, #0d9488); border-color: var(--accent, #0d9488); }