/* ============================================================================
   TASKIFY — CLICKUP SKIN  (tk-clickup-skin.css)
   ----------------------------------------------------------------------------
   Approved by Babul 2026-07-24. Verified against clickup.com live CSS:
   brand purple #5500C7 (--color-v3-purple-1), app accent #FF7A00,
   ink #292D34, tertiary #838383, radius 8-12px, solid status pills,
   dark icon rail even in light mode, graphite (not black) dark theme.

   Loads AFTER custom.css + tk-design-system.css and only overrides tokens +
   a small set of components. Remove the <link> in layout.blade.php to roll
   the whole skin back in one line.
   ============================================================================ */

/* ------------------------------------------------------------------ LIGHT */
:root {
    /* accent: ClickUp purple */
    --signal: #FF7A00;
    --signal-fg: #ffffff;
    --signal-glow: rgba(255, 122, 0, 0.28);

    /* surfaces */
    --bg-0: #ffffff;               /* base surface            */
    --bg-1: #fdfdfe;               /* panels / cards           */
    --bg-2: #f6f7f8;               /* content wash             */
    --bg-3: #eff1f4;               /* hover                    */
    --line: #e9ebf0;
    --line-2: #dcdfe5;

    /* ink */
    --fg-0: #292d34;               /* ClickUp ink              */
    --fg-1: #43484f;
    --fg-2: #656f7d;
    --fg-3: #87909e;

    /* shape */
    --r-2: 8px;

    /* bootstrap side */
    --bs-primary: #ff7a00;
    --bs-primary-rgb: 255, 122, 0;
    --bs-body-bg: #f7f8f9;
    --bs-body-bg-rgb: 247, 248, 249;
    --bs-body-color: #292d34;
    --bs-body-color-rgb: 41, 45, 52;
}

/* ------------------------------------------------------- DARK (graphite) */
[data-theme="dark"] {
    --signal: #ff7a00;
    --signal-fg: #ffffff;
    --signal-glow: rgba(255, 122, 0, 0.35);

    --bg-0: #000000;               /* rail — pure black        */
    --bg-1: #0a0a0a;               /* panels / cards           */
    --bg-2: #0d0d0d;
    --bg-3: #1a1a1a;               /* hover                    */
    --line: #262626;
    --line-2: #333333;

    --fg-0: #ffffff;               /* full white text          */
    --fg-1: #ffffff;
    --fg-2: #d0d0d0;
    --fg-3: #a0a0a0;

    --bs-primary: #ff7a00;
    --bs-primary-rgb: 255, 122, 0;
    --bs-body-bg: #000000;         /* pure black               */
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: #ffffff;      /* full white               */
    --bs-body-color-rgb: 255, 255, 255;
}

/* Pure-black dark: force common surfaces + text to black/white so no
   graphite leaks through vendor components. */
[data-theme="dark"] body,
[data-theme="dark"] .layout-page,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .tk-rail,
[data-theme="dark"] .tk-panel { background-color: #000000 !important; }
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .table,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .accordion-item { background-color: #0a0a0a !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text { background-color: #0d0d0d !important; color: #ffffff !important; border-color: #262626 !important; }
[data-theme="dark"] body,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] label,
[data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] li,
[data-theme="dark"] .text-dark, [data-theme="dark"] .card-title,
[data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .menu-link { color: #ffffff !important; }
[data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary,
[data-theme="dark"] small { color: #b0b0b0 !important; }

/* ------------------------------------------------- ClickUp dark icon rail
   ClickUp keeps a near-black icon rail even in light mode — signature look. */
:root:not([data-theme="dark"]) .tk-rail {
    background: #1f2023;
    border-right-color: #2c2d31;
}
:root:not([data-theme="dark"]) .tk-rail .tk-rail-btn {
    color: #b8bcc4;
}
:root:not([data-theme="dark"]) .tk-rail .tk-rail-btn:hover {
    background: #2c2d31;
    color: #ffffff;
}
:root:not([data-theme="dark"]) .tk-rail .tk-rail-btn.active,
:root:not([data-theme="dark"]) .tk-rail .tk-rail-btn[aria-current] {
    background: #ff7a00;
    color: #ffffff;
}

/* ------------------------------------------------------------ buttons */
.btn-primary {
    background-color: #ff7a00 !important;
    border-color: #ff7a00 !important;
    border-radius: 8px;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #e86d00 !important;
    border-color: #e86d00 !important;
}
.btn-outline-primary {
    color: #ff7a00 !important;
    border-color: #ff7a00 !important;
    border-radius: 8px;
}
.btn-outline-primary:hover {
    background-color: #ff7a00 !important;
    color: #fff !important;
}
.btn { border-radius: 8px; }

/* ------------------------------------------------------- status pills
   ClickUp uses SOLID colored pills with white text (DONE / IN PROGRESS…). */
.badge[class*="bg-label-"] {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
    padding: 0.36em 0.65em;
}
.badge.bg-label-success  { background: #27ae60 !important; color: #fff !important; }
.badge.bg-label-primary  { background: #ff7a00 !important; color: #fff !important; }
.badge.bg-label-info     { background: #2e90fa !important; color: #fff !important; }
.badge.bg-label-warning  { background: #f5a623 !important; color: #fff !important; }
.badge.bg-label-danger   { background: #e5484d !important; color: #fff !important; }
.badge.bg-label-secondary{ background: #87909e !important; color: #fff !important; }
.badge.bg-label-dark     { background: #43484f !important; color: #fff !important; }

/* ------------------------------------------------------------- shape */
.card, .modal-content, .dropdown-menu, .offcanvas,
.form-control, .form-select, .input-group-text {
    border-radius: 8px;
}
.card { border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
[data-theme="dark"] .card { box-shadow: 0 1px 3px rgba(0,0,0,0.35); }

/* focus ring → purple */
.form-control:focus, .form-select:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 0.2rem rgba(255, 122, 0, 0.18);
}
.form-check-input:checked { background-color: #ff7a00; border-color: #ff7a00; }

/* links + selected menu pill */
a { color: #ff7a00; }
a:hover { color: #e86d00; }
.tk-panel .active, .tk-panel [aria-current="page"] {
    background: color-mix(in srgb, #ff7a00 12%, transparent);
    color: #ff7a00;
    border-radius: 6px;
}

/* table row hover — ClickUp list feel */
.table-hover > tbody > tr:hover > * {
    background-color: var(--bg-3);
}

/* pagination + tabs accent */
.page-item.active .page-link { background-color: #ff7a00; border-color: #ff7a00; }
.nav-pills .nav-link.active { background-color: #ff7a00; }
.nav-tabs .nav-link.active { color: #ff7a00; border-bottom-color: #ff7a00; }

/* Joldisoft rebrand: ink wordmark becomes white in dark theme */
[data-theme="dark"] img[src*="default_full_logo"] {
    filter: brightness(0) invert(1);
}