/* ==========================================================================
   ChomokaPlus UI refresh
   --------------------------------------------------------------------------
   Layered on top of the existing theme.min.css. Three parts:

     1. Dashboard components  — namespaced `ck-`, additive only.
     2. Sidebar               — restyles the theme's own `.app-sidebar`, so the
                                selectors deliberately match the theme's depth.
     3. Tables & controls     — scoped to `.card .table` and friends.

   Nothing here removes a theme rule; if this file fails to load every screen
   falls back to the stock Bootstrap 4 look.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Brand — sampled directly from assets/img/logo.png:
         #1B0B78  indigo  (the wave / wordmark, 19152px)
         #81BF20  green   (the leaf / "PLUS", 8520px)
       Both ramps keep the logo's hue (249deg indigo, 83deg green); only
       lightness and saturation move, so every tint reads as the same brand.
       ---------------------------------------------------------------------- */

    --ck-brand: #1b0b78;          /* logo indigo, exact */
    --ck-brand-deep: #12084f;     /* darker, for the sidebar header */
    --ck-brand-mid: #2a1590;
    --ck-brand-lift: #3a22c4;     /* interactive indigo — legible at button size */
    --ck-brand-glow: #8f7fec;     /* light indigo for accents on dark ground */

    --ck-leaf: #81bf20;           /* logo green, exact */
    --ck-leaf-deep: #5f8c17;      /* green that passes contrast on white */

    /* ----------------------------------------------------------------------
       Working blue.

       The logo indigo above is 83% saturated and sits at 249deg — well into
       violet. At logo scale that is striking; spread across a sidebar and
       every button it reads vivid rather than corporate. This ramp keeps the
       family but pulls saturation down to ~50% and the hue to ~230deg, which
       is a true navy-blue. #1B0B78 is still held above and still used for
       brand marks, so nothing is lost.
       ---------------------------------------------------------------------- */

    --ck-navy-deep: #12162e;      /* sidebar header */
    --ck-navy: #1d2450;           /* sidebar body */
    --ck-navy-mid: #232c66;
    --ck-blue: #3457c5;           /* primary interactive — 6.3:1 with white */
    --ck-blue-hover: #2b48a6;
    --ck-blue-glow: #8aa2ee;      /* light blue for accents on dark ground */

    /* Sidebar ground — darkens downward so the panel settles rather than
       climbing, and stays quieter than the page content it frames. */
    --ck-nav-top: #1d2450;
    --ck-nav-mid: #1a2044;
    --ck-nav-bottom: #161b38;
    --ck-nav-header: var(--ck-navy-deep);

    /* Surfaces — a cool grey canvas rather than a violet-tinted one */
    --ck-page: #f4f6fa;
    --ck-surface: #ffffff;
    --ck-surface-soft: #f7f9fc;
    --ck-border: rgba(29, 36, 80, 0.09);
    --ck-border-strong: rgba(29, 36, 80, 0.17);

    /* Ink — neutral navy-grey, no violet cast */
    --ck-ink: #1c2237;
    --ck-ink-soft: #515b70;
    --ck-muted: #7d8799;

    /* Sidebar / hero ground */
    --ck-slate: var(--ck-navy);
    --ck-slate-dark: var(--ck-navy-deep);
    --ck-slate-deep: var(--ck-navy-deep);

    /* Accents.
       Primary is the working navy-blue; success stays the exact logo green.
       Info moved off violet — it was competing with primary — to a muted teal
       that stays distinct from every other status. */
    --ck-primary: var(--ck-blue);
    --ck-primary-soft: rgba(52, 87, 197, 0.11);
    --ck-success: var(--ck-leaf);
    --ck-success-soft: rgba(129, 191, 32, 0.16);
    --ck-warning: #e8912b;
    --ck-warning-soft: rgba(232, 145, 43, 0.14);
    --ck-danger: #d84a3d;
    --ck-danger-soft: rgba(216, 74, 61, 0.12);
    --ck-info: #2f8fa6;
    --ck-info-soft: rgba(47, 143, 166, 0.13);

    /* Elevation */
    --ck-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --ck-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -14px rgba(16, 24, 40, 0.22);
    --ck-shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 20px 40px -18px rgba(16, 24, 40, 0.28);

    --ck-radius: 14px;
    --ck-radius-sm: 10px;
    --ck-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Authentication
   -------------------------------------------------------------------------- */

body:has(.ck-login) { overflow: hidden; }
.ck-login { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); overflow: hidden; background: var(--ck-page); color: var(--ck-ink); }
.ck-login__welcome { position: relative; isolation: isolate; overflow: hidden; height: 100%; padding: clamp(2rem, 5vw, 4.5rem) clamp(2.2rem, 7vw, 7rem); color: #fff; background: linear-gradient(135deg, #12162e 0%, #1d2450 52%, #3457c5 125%); }
.ck-login__welcome::before, .ck-login__welcome::after, .ck-login__pattern { position: absolute; content: ''; z-index: -1; border-radius: 50%; pointer-events: none; }
.ck-login__welcome::before { width: 45rem; height: 45rem; top: -25rem; right: -18rem; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 0 0 4rem rgba(255,255,255,.035), 0 0 0 8rem rgba(255,255,255,.02); }
.ck-login__welcome::after { width: 32rem; height: 32rem; bottom: -16rem; left: -13rem; background: radial-gradient(circle, rgba(129,191,32,.32), rgba(129,191,32,0) 69%); }
.ck-login__pattern { width: 18rem; height: 18rem; right: 9%; bottom: 13%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 2.5rem rgba(255,255,255,.025); }
.ck-login__welcome-content { min-height: calc(100vh - clamp(4rem, 10vw, 9rem)); display: flex; flex-direction: column; align-items: flex-start; }
.ck-login__brand { display: inline-block; padding: .5rem .75rem; border-radius: .75rem; background: #fff; }
.ck-login__brand img, .ck-login__mobile-brand img { display: block; width: auto; height: 54px; max-width: 230px; object-fit: contain; }
.ck-login__message { max-width: 37rem; margin: auto 0; }
.ck-login__eyebrow { display: block; margin-bottom: .7rem; color: var(--ck-leaf); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ck-login__message h1 { margin: 0 0 1rem; color: #fff; font-size: clamp(2.2rem,4.2vw,4.1rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.ck-login__message p { max-width: 31rem; margin: 0; color: rgba(255,255,255,.74); font-size: 1.04rem; line-height: 1.7; }
.ck-login__highlights { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; margin-top: 2.5rem; }
.ck-login__highlight { display: flex; align-items: center; gap: .65rem; color: rgba(255,255,255,.78); font-size: .85rem; }
.ck-login__highlight-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: .55rem; color: var(--ck-leaf); background: rgba(255,255,255,.07); }
.ck-login__copyright { margin: 2rem 0 0; color: rgba(255,255,255,.45); font-size: .75rem; }
.ck-login__panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem clamp(1.5rem,6vw,7rem); background: #fff; }
.ck-login__form-wrap { width: min(100%,25rem); }
.ck-login__mobile-brand { display: none; margin-bottom: 3rem; }
.ck-login__heading { margin-bottom: 2rem; }
.ck-login__heading h2 { margin: 0 0 .55rem; color: var(--ck-ink); font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; }
.ck-login__heading p, .ck-login__help { margin: 0; color: var(--ck-muted); font-size: .9rem; line-height: 1.6; }
.ck-login__field { margin-bottom: 1.3rem; }
.ck-login__field label { display: block; margin-bottom: .5rem; color: var(--ck-ink-soft); font-size: .82rem; font-weight: 700; }
.ck-login__input-wrap { position: relative; }
.ck-login__input-wrap > i { position: absolute; z-index: 1; top: 50%; left: 1rem; color: var(--ck-muted); font-size: 1rem; transform: translateY(-50%); pointer-events: none; }
.ck-login .form-control { height: 3.2rem; padding: .75rem 1rem .75rem 2.9rem; border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-sm); color: var(--ck-ink); font-size: .93rem; box-shadow: none; transition: border-color 160ms var(--ck-ease), box-shadow 160ms var(--ck-ease); }
.ck-login .form-control::placeholder { color: #a5adba; }
.ck-login .form-control:focus { border-color: var(--ck-primary); box-shadow: 0 0 0 3px var(--ck-primary-soft); }
.ck-login .form-control.is-invalid { border-color: var(--ck-danger); }
.ck-login__error { display: block; margin-top: .4rem; color: var(--ck-danger); font-size: .78rem; }
.ck-login__remember { display: inline-flex; align-items: center; gap: .55rem; margin: .2rem 0 1.7rem; color: var(--ck-ink-soft); font-size: .84rem; cursor: pointer; }
.ck-login__remember input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ck-primary); }
.ck-login__submit { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: center; border: 0; border-radius: var(--ck-radius-sm); color: #fff; background: var(--ck-primary); box-shadow: 0 10px 18px -12px rgba(52,87,197,.85); font-size: .93rem; font-weight: 700; transition: transform 160ms var(--ck-ease), background 160ms var(--ck-ease), box-shadow 160ms var(--ck-ease); }
.ck-login__submit:hover, .ck-login__submit:focus { color: #fff; background: var(--ck-blue-hover); box-shadow: 0 13px 22px -12px rgba(52,87,197,.9); transform: translateY(-1px); }
.ck-login__submit:disabled { cursor: wait; opacity: .82; transform: none; }
.ck-login__submit i { margin-left: .45rem; }
.ck-login__help { margin-top: 1.65rem; text-align: center; font-size: .78rem; }
@media (max-width: 900px) { .ck-login { grid-template-columns: minmax(0,1fr); } .ck-login__welcome { display: none; } .ck-login__panel { min-height: 0; } .ck-login__mobile-brand { display: inline-block; } }
@media (max-width: 480px) { .ck-login__panel { padding: 2rem 1.35rem; align-items: flex-start; } .ck-login__form-wrap { padding-top: 1rem; } .ck-login__mobile-brand { margin-bottom: 2.5rem; } .ck-login__heading h2 { font-size: 1.55rem; } }

/* --------------------------------------------------------------------------
   Page canvas
   -------------------------------------------------------------------------- */

.ck-dash {
    color: var(--ck-ink);
}

.main-content .container-fluid:has(.ck-dash),
body:has(.ck-dash) .main-content {
    background: var(--ck-page);
}

.ck-dash .card,
.ck-dash .widget {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow-sm);
    background: var(--ck-surface);
}

.ck-dash .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ck-border);
    padding: 1.1rem 1.35rem;
}

.ck-dash .card-header h3,
.ck-dash .card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ck-ink);
}

.ck-dash .card-body {
    padding: 1.35rem;
}

/* --------------------------------------------------------------------------
   Hero header
   -------------------------------------------------------------------------- */

.ck-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--ck-radius);
    padding: 1.65rem 1.75rem;
    margin-bottom: 1.5rem;
    color: #fff;
    background: linear-gradient(118deg, var(--ck-navy-deep) 0%, var(--ck-navy-mid) 48%, var(--ck-blue) 100%);
    box-shadow: var(--ck-shadow);
}

/* A green bloom in the corner, echoing the leaf sweeping across the logo's
   indigo wave. Sits under the content via z-index on .ck-hero > *. */
.ck-hero::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -6%;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 191, 32, 0.34) 0%, rgba(129, 191, 32, 0.08) 45%, rgba(129, 191, 32, 0) 70%);
    pointer-events: none;
}

.ck-hero > * {
    position: relative;
    z-index: 1;
}

.ck-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.35rem;
}

.ck-hero__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
    color: #fff;
}

.ck-hero__subtitle {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.9rem;
    margin: 0;
}

.ck-hero .btn-light {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    font-weight: 500;
    border-radius: var(--ck-radius-sm);
    padding: 0.55rem 1.1rem;
    transition: background 180ms var(--ck-ease), transform 180ms var(--ck-ease);
}

.ck-hero .btn-light:hover,
.ck-hero .btn-light:focus {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */

.ck-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.9rem 0 0.9rem;
}

.ck-section:first-of-type {
    margin-top: 0;
}

.ck-section__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ck-muted);
    margin: 0;
}

.ck-section__link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ck-primary);
    text-decoration: none;
    white-space: nowrap;
}

.ck-section__link:hover {
    color: var(--ck-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */

.ck-stat {
    position: relative;
    height: 100%;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 1.25rem 1.3rem;
    box-shadow: var(--ck-shadow-sm);
    overflow: hidden;
    transition: transform 200ms var(--ck-ease), box-shadow 200ms var(--ck-ease),
        border-color 200ms var(--ck-ease);
}

/* Accent strip, tinted per tone */
.ck-stat::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ck-stat-tone, var(--ck-primary));
    opacity: 0.85;
}

.ck-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--ck-shadow-lg);
    border-color: var(--ck-border-strong);
}

.ck-stat__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.ck-stat__label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ck-muted);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.ck-stat__value {
    font-size: 1.7rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ck-ink);
    margin: 0;
    word-break: break-word;
}

.ck-stat__value--sm {
    font-size: 1.28rem;
}

.ck-stat__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 1.05rem;
    background: var(--ck-stat-tone-soft, var(--ck-primary-soft));
    color: var(--ck-stat-tone, var(--ck-primary));
}

.ck-stat__desc {
    display: block;
    margin-top: 0.7rem;
    font-size: 0.74rem;
    color: var(--ck-muted);
    line-height: 1.4;
}

/* Tones */
.ck-stat--primary { --ck-stat-tone: var(--ck-primary); --ck-stat-tone-soft: var(--ck-primary-soft); }
.ck-stat--success { --ck-stat-tone: var(--ck-success); --ck-stat-tone-soft: var(--ck-success-soft); }
.ck-stat--warning { --ck-stat-tone: var(--ck-warning); --ck-stat-tone-soft: var(--ck-warning-soft); }
.ck-stat--danger  { --ck-stat-tone: var(--ck-danger);  --ck-stat-tone-soft: var(--ck-danger-soft); }
.ck-stat--info    { --ck-stat-tone: var(--ck-info);    --ck-stat-tone-soft: var(--ck-info-soft); }
.ck-stat--slate   { --ck-stat-tone: var(--ck-slate);   --ck-stat-tone-soft: rgba(64, 78, 103, 0.11); }

/* Compact variant for dense KPI strips */
.ck-stat--compact {
    padding: 0.95rem 1rem;
}

.ck-stat--compact .ck-stat__value {
    font-size: 1.35rem;
}

.ck-stat--compact .ck-stat__icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
    border-radius: 9px;
}

/* --------------------------------------------------------------------------
   List rows (attention lists, follow-ups, summaries)
   -------------------------------------------------------------------------- */

.ck-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ck-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ck-border);
}

.ck-list__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ck-list__row:first-child {
    padding-top: 0;
}

.ck-list__title {
    font-weight: 550;
    color: var(--ck-ink);
    text-decoration: none;
    font-size: 0.9rem;
}

.ck-list__title:hover {
    color: var(--ck-primary);
}

.ck-list__meta {
    display: block;
    font-size: 0.76rem;
    color: var(--ck-muted);
    margin-top: 0.15rem;
}

.ck-list__value {
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--ck-ink);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Pills / status badges
   -------------------------------------------------------------------------- */

.ck-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
    white-space: nowrap;
}

.ck-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ck-pill--success { background: var(--ck-success-soft); color: #4a7011; }
.ck-pill--warning { background: var(--ck-warning-soft); color: #9c5c0f; }
.ck-pill--danger  { background: var(--ck-danger-soft);  color: #a4291d; }
.ck-pill--info    { background: var(--ck-info-soft);    color: #1f6b7c; }
.ck-pill--primary { background: var(--ck-primary-soft); color: #24408e; }
.ck-pill--muted   { background: rgba(93, 103, 122, 0.14); color: #5b6577; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.ck-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ck-muted);
}

.ck-empty__icon {
    font-size: 1.6rem;
    opacity: 0.4;
    display: block;
    margin-bottom: 0.55rem;
}

.ck-empty__text {
    font-size: 0.86rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Chart cards
   -------------------------------------------------------------------------- */

.ck-chart {
    width: 100%;
}

.ck-dash .c3-line,
.ck-dash .c3-axis path,
.ck-dash .c3-axis line {
    shape-rendering: crispEdges;
}

.ck-dash .c3-axis text {
    fill: var(--ck-muted);
    font-size: 11px;
}

.ck-dash .c3-grid line {
    stroke: var(--ck-border);
}

.ck-dash .c3-legend-item text {
    fill: var(--ck-ink-soft);
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   Motion — a gentle stagger so the grid settles rather than snapping in
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ck-rise {
        animation: ck-rise 420ms var(--ck-ease) both;
    }

    .ck-rise:nth-child(1) { animation-delay: 0ms; }
    .ck-rise:nth-child(2) { animation-delay: 55ms; }
    .ck-rise:nth-child(3) { animation-delay: 110ms; }
    .ck-rise:nth-child(4) { animation-delay: 165ms; }
    .ck-rise:nth-child(5) { animation-delay: 200ms; }
    .ck-rise:nth-child(6) { animation-delay: 235ms; }
}

@keyframes ck-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-stat,
    .ck-hero .btn-light {
        transition: none;
    }

    .ck-stat:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Small screens — agents work from phones and tablets in the field
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .ck-hero {
        padding: 1.3rem 1.15rem;
    }

    .ck-hero__title {
        font-size: 1.22rem;
    }

    .ck-stat {
        padding: 1rem 1.05rem;
    }

    .ck-stat__value {
        font-size: 1.45rem;
    }

    .ck-stat__icon {
        width: 36px;
        height: 36px;
        font-size: 0.92rem;
    }

    .ck-section {
        margin-top: 1.4rem;
    }
}

/* ==========================================================================
   2. SIDEBAR
   --------------------------------------------------------------------------
   The theme ships very deep selectors (7+ levels), so these match that depth
   rather than reaching for !important.
   ========================================================================== */

.wrapper .page-wrap .app-sidebar {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 4px 0 24px -8px rgba(16, 24, 40, 0.18);
}

/* Header — sits flush with the deeper gradient below it */
.wrapper .page-wrap .app-sidebar.colored .sidebar-header {
    background-color: var(--ck-nav-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wrapper .page-wrap .app-sidebar .sidebar-header .header-brand .text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Body — a soft vertical gradient reads less flat than a single fill */
.wrapper .page-wrap .app-sidebar.colored .sidebar-content {
    background-color: var(--ck-nav-top);
    background-image: linear-gradient(180deg, var(--ck-nav-top) 0%, var(--ck-nav-mid) 55%, var(--ck-nav-bottom) 100%);
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main {
    padding: 0.5rem 0 1.5rem;
}

/* Section labels — the theme paints a full-width band; make it a quiet caption */
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-lavel {
    background: transparent;
    /* 0.55 is the floor that keeps these captions at AA on the dark ramp */
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1.15rem 1.55rem 0.45rem;
}

/* Nav items — rounded pills with a smooth hover wash */
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item {
    border-color: transparent;
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a {
    color: rgba(255, 255, 255, 0.76);
    padding: 0.68rem 0.85rem;
    margin: 0.12rem 0.65rem;
    border-radius: var(--ck-radius-sm);
    font-weight: 450;
    transition: background-color 180ms var(--ck-ease), color 180ms var(--ck-ease),
        padding-left 180ms var(--ck-ease);
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
    padding-left: 1.05rem;
    text-decoration: none;
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item a span {
    font-size: 0.83rem;
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a i {
    color: rgba(255, 255, 255, 0.48);
    font-size: 1.05rem;
    margin-right: 0.72rem;
    vertical-align: -3px;
    transition: color 180ms var(--ck-ease);
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a:hover i {
    color: #fff;
}

/* Active item — tinted pill plus an accent bar, replacing the theme's red */
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.active > a,
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.open > a {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-weight: 550;
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.active > a i,
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.open > a i {
    color: #fff;
}

.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.open::after,
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item.active::after {
    background-color: var(--ck-leaf);
    height: 22px;
    top: 50%;
    margin-top: -11px;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

/* Submenus — inset panel, indented rows */
.wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item .submenu-content {
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: var(--ck-radius-sm);
    margin: 0.15rem 0.65rem 0.35rem;
    padding: 0.3rem 0;
    overflow: hidden;
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item {
    padding: 0.5rem 0.9rem 0.5rem 2.6rem;
    margin: 0.05rem 0.4rem;
    font-size: 0.79rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.62);
    transition: background-color 160ms var(--ck-ease), color 160ms var(--ck-ease);
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
    text-decoration: none;
}

.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item.active {
    background-color: rgba(129, 191, 32, 0.26);
    color: #fff;
    font-weight: 550;
}

/* Caret */
.wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub > a::before {
    right: 12px;
    top: 50%;
    margin-top: -8px;
    opacity: 0.5;
}

/* Scrollbar */
.wrapper .page-wrap .app-sidebar .sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.wrapper .page-wrap .app-sidebar .sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.wrapper .page-wrap .app-sidebar .sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.wrapper .page-wrap .app-sidebar .sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.wrapper .page-wrap .app-sidebar .sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a,
    .wrapper .page-wrap .app-sidebar .sidebar-content .nav-container .navigation-main .nav-item.has-sub .submenu-content .menu-item {
        transition: none;
    }

    .wrapper .page-wrap .app-sidebar.colored .sidebar-content .nav-container .navigation-main .nav-item a:hover {
        padding-left: 0.85rem;
    }
}

/* ==========================================================================
   3. TABLES & CONTROLS
   --------------------------------------------------------------------------
   Applies app-wide to tables inside cards, which is how every list screen in
   this project is built.
   ========================================================================== */

/* Cards everywhere pick up the softer elevation, not just on dashboards */
.main-content .card {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow-sm);
}

.main-content .card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ck-border);
    padding: 1.05rem 1.3rem;
}

.main-content .card .card-header h3,
.main-content .card .card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ck-ink);
    margin: 0;
}

/* ---- Table shell ---- */

.card .table-responsive {
    border-radius: var(--ck-radius-sm);
}

.card .table {
    margin-bottom: 0;
    color: var(--ck-ink);
    border-collapse: separate;
    border-spacing: 0;
}

/* Header — quiet uppercase caption row, no heavy rule */
.card .table thead th {
    background: var(--ck-surface-soft);
    border-top: 0;
    border-bottom: 1px solid var(--ck-border);
    color: var(--ck-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.78rem 0.9rem;
    white-space: nowrap;
    vertical-align: middle;
}

.card .table thead th:first-child { border-top-left-radius: var(--ck-radius-sm); }
.card .table thead th:last-child  { border-top-right-radius: var(--ck-radius-sm); }

/* Body — light separators, roomier cells */
.card .table tbody td {
    border-top: 0;
    border-bottom: 1px solid var(--ck-border);
    padding: 0.82rem 0.9rem;
    vertical-align: middle;
    font-size: 0.86rem;
}

.card .table tbody tr:last-child td {
    border-bottom: 0;
}

.card .table tbody td small,
.card .table tbody td .small {
    font-size: 0.75rem;
}

/* Hover — a tint rather than the theme's grey block */
.card .table.table-hover tbody tr {
    transition: background-color 140ms var(--ck-ease);
}

.card .table.table-hover tbody tr:hover {
    background-color: rgba(52, 87, 197, 0.05);
}

/* Nested tables (traceability / history rows) stay visually subordinate */
.card .table .bg-light {
    background-color: var(--ck-surface-soft) !important;
}

.card .table .table-sm td,
.card .table .table-sm th {
    padding: 0.5rem 0.65rem;
    font-size: 0.79rem;
}

/* ---- Badges ---- */

.main-content .badge {
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.32rem 0.66rem;
    line-height: 1.4;
}

.main-content .badge-success   { background-color: var(--ck-success-soft); color: #4a7011; }
.main-content .badge-warning   { background-color: var(--ck-warning-soft); color: #9c5c0f; }
.main-content .badge-danger    { background-color: var(--ck-danger-soft);  color: #a4291d; }
.main-content .badge-info      { background-color: var(--ck-info-soft);    color: #1f6b7c; }
.main-content .badge-primary   { background-color: var(--ck-primary-soft); color: #24408e; }
.main-content .badge-secondary { background-color: rgba(93, 103, 122, 0.14); color: #5b6577; }

/* ---- Buttons ---- */

.main-content .btn {
    border-radius: 9px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    transition: background-color 160ms var(--ck-ease), border-color 160ms var(--ck-ease),
        transform 160ms var(--ck-ease), box-shadow 160ms var(--ck-ease);
}

.main-content .btn:hover {
    transform: translateY(-1px);
}

.main-content .btn:active {
    transform: none;
}

.main-content .btn-sm {
    font-size: 0.76rem;
    padding: 0.34rem 0.7rem;
    border-radius: 7px;
}

.main-content .btn-lg {
    font-size: 0.9rem;
    padding: 0.62rem 1.15rem;
    border-radius: var(--ck-radius-sm);
}

.main-content .btn-primary {
    background-color: var(--ck-primary);
    border-color: var(--ck-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.main-content .btn-primary:hover,
.main-content .btn-primary:focus {
    background-color: var(--ck-blue-hover);
    border-color: var(--ck-blue-hover);
}

.main-content .groups-export-button {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.42rem;
    height: 38px;
    justify-content: center;
    letter-spacing: 0.01em;
    min-width: 126px;
    padding: 0 0.9rem;
}

.main-content .groups-table-header-actions {
    flex-shrink: 0;
    white-space: nowrap;
}

.main-content .groups-table-header {
    flex-wrap: nowrap;
    gap: 1rem;
}

.main-content .groups-table-header > h3 {
    flex: 0 0 auto;
    white-space: nowrap;
}

.main-content .groups-table-header .input-group {
    width: 300px !important;
}

.main-content .groups-export-button span {
    align-items: center;
    display: inline-flex;
    gap: 0.42rem;
}

.main-content .groups-export-button:disabled {
    cursor: wait;
    opacity: 0.75;
}

@media (max-width: 767.98px) {
    .main-content .groups-table-header {
        align-items: stretch !important;
        flex-wrap: wrap;
    }

    .main-content .groups-table-header-actions {
        flex-basis: 100%;
        width: 100%;
    }

    .main-content .groups-table-header .input-group {
        flex: 1 1 auto;
        width: auto !important;
    }
}

.main-content .groups-table tbody tr {
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.main-content .groups-table tbody tr[role="link"] {
    cursor: pointer;
}

.main-content .groups-table tbody tr[role="link"]:focus {
    outline: 2px solid var(--ck-primary);
    outline-offset: -2px;
}

.main-content .groups-table tbody tr:hover {
    background-color: #f3f6fc;
    box-shadow: inset 3px 0 0 var(--ck-primary);
}

.main-content .groups-table tbody tr:hover > td {
    border-color: #e1e8f5;
}

.main-content .btn-secondary {
    background-color: #eef1f6;
    border-color: #e1e6ef;
    color: var(--ck-ink-soft);
}

.main-content .btn-secondary:hover,
.main-content .btn-secondary:focus {
    background-color: #e5eaf2;
    border-color: #d5dbe6;
    color: var(--ck-ink);
}

.main-content .btn-success { background-color: var(--ck-success); border-color: var(--ck-success); }
.main-content .btn-warning { background-color: var(--ck-warning); border-color: var(--ck-warning); color: #fff; }
.main-content .btn-danger  { background-color: var(--ck-danger);  border-color: var(--ck-danger); }
.main-content .btn-info    { background-color: var(--ck-info);    border-color: var(--ck-info); }

/* Action buttons sitting together in a table cell */
.card .table td .btn + .btn {
    margin-left: 0.25rem;
}

/* ---- Form controls ---- */

.main-content .form-control {
    border: 1px solid #dde3ec;
    border-radius: 9px;
    font-size: 0.85rem;
    color: var(--ck-ink);
    padding: 0.5rem 0.8rem;
    height: auto;
    transition: border-color 160ms var(--ck-ease), box-shadow 160ms var(--ck-ease);
}

.main-content .form-control:focus {
    border-color: var(--ck-primary);
    box-shadow: 0 0 0 3px var(--ck-primary-soft);
}

.main-content .form-control::placeholder {
    color: #a3abb9;
}

.main-content .form-control-lg {
    font-size: 0.88rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--ck-radius-sm);
}

.main-content select.form-control {
    padding-right: 2rem;
}

.main-content .form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ck-ink-soft);
    margin-bottom: 0.35rem;
}

/* ---- Group detail dashboard ---- */

.ck-group-dashboard {
    padding-bottom: 1.5rem;
}

.ck-group-hero {
    align-items: center;
    background: linear-gradient(125deg, #1d2450 0%, #2f499f 58%, #3457c5 100%);
    border-radius: var(--ck-radius);
    box-shadow: 0 14px 32px rgba(29, 36, 80, 0.18);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.35rem;
    overflow: hidden;
    padding: 1.65rem 1.8rem;
    position: relative;
}

.ck-group-hero::after {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: '';
    height: 230px;
    position: absolute;
    right: -78px;
    top: -130px;
    width: 230px;
}

.ck-group-hero__content,
.ck-group-hero__export { position: relative; z-index: 1; }

.ck-group-hero__back {
    color: rgba(255, 255, 255, 0.72);
    display: inline-block;
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
}

.ck-group-hero__back:hover { color: #fff; text-decoration: none; }
.ck-group-hero__back i { margin-right: 0.3rem; }

.ck-group-hero__title {
    color: #fff;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0.25rem 0 0;
}

.ck-group-hero__status {
    background: rgba(129, 191, 32, 0.22);
    border: 1px solid rgba(197, 241, 124, 0.45);
    border-radius: 999px;
    color: #efffd5;
    font-size: 0.72rem;
    font-weight: 650;
    margin-top: 0.1rem;
    padding: 0.32rem 0.65rem;
}

.ck-group-hero__meta {
    color: rgba(255, 255, 255, 0.76);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.45rem 1.1rem;
    margin: 0.75rem 0 0;
}

.ck-group-hero__meta i { color: #b9d983; margin-right: 0.25rem; }

.ck-group-hero__export {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 8px;
    color: var(--ck-primary);
    display: inline-flex;
    font-size: 0.79rem;
    font-weight: 650;
    gap: 0.45rem;
    padding: 0.62rem 0.85rem;
    white-space: nowrap;
}

.ck-group-hero__export:hover { background: #eef4ff; color: #1e3e9e; }

.ck-group-stats { margin-bottom: 1.1rem; }

.ck-group-stat {
    background: #fff;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow-sm);
    height: 100%;
    overflow: hidden;
    padding: 1.05rem 1.1rem 0.85rem;
    transition: box-shadow 180ms var(--ck-ease), transform 180ms var(--ck-ease);
}

.ck-group-stat:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10); transform: translateY(-3px); }
.ck-group-stat__top { align-items: flex-start; display: flex; justify-content: space-between; }
.ck-group-stat__top p { color: var(--ck-muted); font-size: 0.76rem; font-weight: 600; margin: 0 0 0.28rem; }
.ck-group-stat__top strong { color: var(--ck-ink); font-size: 1.55rem; letter-spacing: -0.035em; line-height: 1; }
.ck-group-stat__icon { align-items: center; border-radius: 10px; display: inline-flex; font-size: 1.05rem; height: 34px; justify-content: center; width: 34px; }
.ck-group-stat small { color: var(--ck-muted); display: block; font-size: 0.73rem; margin-top: 0.82rem; }
.ck-group-stat__progress { background: var(--ck-surface-soft); border-radius: 3px; display: block; height: 3px; margin-top: 0.55rem; overflow: hidden; }
.ck-group-stat__progress i { border-radius: inherit; display: block; height: 100%; }
.ck-group-stat--primary .ck-group-stat__icon { background: #eaf0ff; color: #3457c5; }
.ck-group-stat--primary .ck-group-stat__progress i { background: #3457c5; }
.ck-group-stat--rose .ck-group-stat__icon { background: #fff0f5; color: #d05a80; }
.ck-group-stat--rose .ck-group-stat__progress i { background: #d05a80; }
.ck-group-stat--sky .ck-group-stat__icon { background: #eaf8fb; color: #2f8fa6; }
.ck-group-stat--sky .ck-group-stat__progress i { background: #2f8fa6; }
.ck-group-stat--leaf .ck-group-stat__icon { background: #f0f9e4; color: #679f13; }
.ck-group-stat--leaf .ck-group-stat__progress i { background: #81bf20; }

.ck-group-workspace { overflow: visible; position: relative; z-index: 1; }
.main-content .card .card-header.ck-group-workspace__header { display: block; padding: 1rem 1.3rem 0; }
.ck-group-workspace__eyebrow { color: var(--ck-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 0.18rem; text-transform: uppercase; }
.ck-group-workspace__header { position: relative; z-index: 2; }
.ck-group-workspace__header .nav-tabs { display: flex; flex-wrap: nowrap; margin: 0.85rem -1.3rem 0; max-width: none; overflow: visible; padding: 0 1.3rem; }
.ck-group-workspace__header .nav-item { flex: 0 0 auto; }
.ck-group-workspace__header .dropdown-menu { z-index: 1050; }
.ck-group-workspace__header .nav-link { padding-bottom: 0.7rem !important; }
.ck-group-workspace .card-body { padding: 1.3rem; }
.ck-group-workspace__header .nav-link i { font-size: 0.84rem; margin-right: 0.28rem; }

.ck-financial-summary { padding: 0.15rem 0; }
.ck-tab-heading { align-items: flex-start; display: flex; justify-content: space-between; margin: 0.1rem 0 1.25rem; }
.ck-tab-heading__eyebrow { color: var(--ck-primary); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 0.25rem; text-transform: uppercase; }
.ck-tab-heading h4 { color: var(--ck-ink); font-size: 1.18rem; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.ck-tab-heading > div > p:last-child { color: var(--ck-muted); font-size: 0.82rem; margin: 0.32rem 0 0; }
.ck-tab-heading__period { background: var(--ck-surface-soft); border-radius: 999px; color: var(--ck-ink-soft); font-size: 0.72rem; padding: 0.42rem 0.7rem; white-space: nowrap; }
.ck-tab-heading__period i { color: var(--ck-primary); margin-right: 0.24rem; }

.ck-balance-card { background: linear-gradient(130deg, #1d2450, #3457c5); border-radius: var(--ck-radius-sm); box-shadow: 0 10px 24px rgba(42, 65, 148, 0.2); color: #fff; height: 100%; overflow: hidden; padding: 1.25rem; position: relative; }
.ck-balance-card::after { background: rgba(255, 255, 255, 0.09); border-radius: 50%; content: ''; height: 145px; position: absolute; right: -48px; top: -75px; width: 145px; }
.ck-balance-card__label, .ck-balance-card__note, .ck-balance-card strong { display: block; position: relative; z-index: 1; }
.ck-balance-card__label { color: rgba(255, 255, 255, 0.7); font-size: 0.76rem; font-weight: 600; }
.ck-balance-card strong { font-size: 1.55rem; letter-spacing: -0.035em; line-height: 1.25; margin: 0.35rem 0 1.1rem; }
.ck-balance-card__note { color: rgba(255, 255, 255, 0.75); font-size: 0.72rem; }
.ck-balance-card__note i { color: #c9ee90; margin-right: 0.25rem; }

.ck-finance-kpi { background: #fff; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); height: 100%; padding: 1rem; position: relative; }
.ck-finance-kpi p { color: var(--ck-muted); font-size: 0.73rem; font-weight: 600; margin: 0 0 0.3rem; }
.ck-finance-kpi strong { color: var(--ck-ink); display: block; font-size: 1.03rem; letter-spacing: -0.02em; line-height: 1.2; padding-right: 2rem; }
.ck-finance-kpi small { color: var(--ck-muted); display: block; font-size: 0.69rem; line-height: 1.3; margin-top: 0.5rem; }
.ck-finance-kpi__icon { align-items: center; border-radius: 9px; display: inline-flex; height: 29px; justify-content: center; position: absolute; right: 0.85rem; top: 0.85rem; width: 29px; }
.ck-finance-kpi--income .ck-finance-kpi__icon { background: #f0f9e4; color: #679f13; }
.ck-finance-kpi--outflow .ck-finance-kpi__icon { background: #fff0ed; color: #d84a3d; }

.ck-breakdown-card { box-shadow: none; }
.main-content .ck-breakdown-card .card-header { align-items: center; display: flex; justify-content: space-between; padding: 0.85rem 1rem; }
.ck-breakdown-card__total { color: #679f13; font-size: 0.78rem; font-weight: 700; }
.ck-breakdown-card__total--outflow { color: #bd4439; }
.ck-finance-list { list-style: none; margin: 0; padding: 0; }
.ck-finance-list li { align-items: center; border-bottom: 1px solid var(--ck-border); display: flex; font-size: 0.8rem; justify-content: space-between; padding: 0.78rem 1rem; }
.ck-finance-list li:last-child { border-bottom: 0; }
.ck-finance-list li > span { color: var(--ck-ink-soft); }
.ck-finance-list li i { color: var(--ck-primary); font-size: 0.82rem; margin-right: 0.48rem; width: 0.9rem; }
.ck-finance-list strong { color: var(--ck-ink); font-size: 0.8rem; font-weight: 650; text-align: right; }

/* Group workspace tables: one consistent, report-ready treatment across tabs. */
.ck-group-workspace .tab-pane > .card {
    border-color: var(--ck-border);
    box-shadow: none;
}

.ck-group-workspace .table-responsive {
    border-radius: var(--ck-radius-sm);
    margin-bottom: 0;
}

.ck-group-workspace .table.table-bordered,
.ck-group-workspace .table.table-bordered td,
.ck-group-workspace .table.table-bordered th {
    border: 0;
}

.ck-group-workspace .table tbody td { border-bottom: 1px solid #edf0f5; }
.ck-group-workspace .table.table-striped tbody tr:nth-of-type(odd),
.ck-group-workspace .table.table-striped tbody tr:nth-of-type(even) { background-color: #fff; }
.ck-group-workspace .table tbody tr { transition: background-color 150ms var(--ck-ease), box-shadow 150ms var(--ck-ease); }
.ck-group-workspace .table tbody tr:hover { background-color: #f2f6ff !important; box-shadow: inset 3px 0 0 var(--ck-primary); }
.ck-group-workspace .table tbody tr:hover td { border-bottom-color: #dae3f5; }
.ck-group-workspace .table td:first-child { font-weight: 500; }
.ck-group-workspace .table td.text-right { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Overview uses detail tables without a header; show field/value pairs as compact data rows. */
.ck-group-workspace #overview .table-responsive { border: 0; }
.ck-group-workspace #overview .table {
    border-radius: 0;
}
.ck-group-workspace #overview .table tbody th {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    color: var(--ck-ink-soft);
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.75rem 0.85rem;
    vertical-align: middle;
    width: 42%;
}
.ck-group-workspace #overview .table tbody td {
    background: #fff;
    border-bottom-color: #edf0f5;
    padding: 0.75rem 0.85rem;
}
.ck-group-workspace #overview .table tbody tr:last-child th { border-bottom: 0; }

.ck-group-workspace .table-actions { align-items: center; display: flex; gap: 0.4rem; justify-content: flex-end; }
.ck-group-workspace .table-actions .btn { font-size: 0.74rem; padding: 0.35rem 0.55rem; }

@media (max-width: 767.98px) {
    .ck-group-hero { align-items: flex-start; flex-direction: column; padding: 1.3rem; }
    .ck-group-hero__export { margin-top: 1.05rem; }
    .main-content .card .card-header.ck-group-workspace__header { padding: 0.9rem 1rem 0; }
    .ck-group-workspace__header .nav-tabs { margin: 0.75rem -1rem 0; padding: 0 1rem; width: auto; }
    .ck-group-workspace .card-body { padding: 1rem; }
    .ck-tab-heading { flex-direction: column; }
    .ck-tab-heading__period { margin-top: 0.65rem; }
    .ck-group-workspace .table thead th,
    .ck-group-workspace .table tbody td { padding: 0.7rem 0.75rem; }
    .ck-group-workspace #overview .table tbody th { padding: 0.7rem 0.75rem; width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-group-stat { transition: none; }
    .ck-group-stat:hover { transform: none; }
}

/* ---- Tabs (group detail, admin sub-screens) ---- */

.main-content .card-header .nav-tabs {
    border-bottom: 0;
}

.main-content .card-header .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ck-muted);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 0.9rem;
    transition: color 160ms var(--ck-ease), border-color 160ms var(--ck-ease);
}

.main-content .card-header .nav-tabs .nav-link:hover {
    color: var(--ck-ink);
    border-bottom-color: var(--ck-border-strong);
}

.main-content .card-header .nav-tabs .nav-link.active {
    color: var(--ck-primary);
    background: transparent;
    border-bottom-color: var(--ck-primary);
    font-weight: 600;
}

/* ---- Pagination ---- */

.main-content .pagination {
    margin-bottom: 0;
}

.main-content .pagination .page-link {
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    margin: 0 2px;
    color: var(--ck-ink-soft);
    font-size: 0.82rem;
    padding: 0.4rem 0.7rem;
    transition: background-color 150ms var(--ck-ease), color 150ms var(--ck-ease),
        border-color 150ms var(--ck-ease);
}

.main-content .pagination .page-link:hover {
    background-color: var(--ck-surface-soft);
    border-color: var(--ck-border-strong);
    color: var(--ck-ink);
}

.main-content .pagination .page-item.active .page-link {
    background-color: var(--ck-primary);
    border-color: var(--ck-primary);
    color: #fff;
}

.main-content .pagination .page-item.disabled .page-link {
    color: #bfc6d2;
    background: transparent;
}

/* ---- Alerts ---- */

.main-content .alert {
    border: 1px solid transparent;
    border-radius: var(--ck-radius-sm);
    font-size: 0.86rem;
    padding: 0.8rem 1.05rem;
}

.main-content .alert-success { background-color: var(--ck-success-soft); border-color: rgba(129, 191, 32, 0.32); color: #4a7011; }
.main-content .alert-danger  { background-color: var(--ck-danger-soft);  border-color: rgba(216, 74, 61, 0.26);  color: #a4291d; }
.main-content .alert-warning { background-color: var(--ck-warning-soft); border-color: rgba(232, 145, 43, 0.26); color: #9c5c0f; }
.main-content .alert-info    { background-color: var(--ck-info-soft);    border-color: rgba(47, 143, 166, 0.26); color: #1f6b7c; }

/* ---- Page header used by the list screens ---- */

.main-content .page-header {
    margin-bottom: 1.35rem;
}

.main-content .page-header .page-header-title h5 {
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ck-ink);
}

.main-content .page-header .page-header-title span {
    color: var(--ck-muted);
    font-size: 0.84rem;
}

/* Shared treatment for the older Livewire data screens. */
.ck-page-shell {
    color: var(--ck-ink);
}

.main-content .ck-page-shell .card,
.main-content .ck-page-shell .widget {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow-sm);
}

.main-content .ck-page-shell .card-header {
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
    padding: 1rem 1.3rem;
}

.main-content .ck-page-shell .card-header h3,
.main-content .ck-page-shell .card-header h5,
.main-content .ck-page-shell .card-header h6 {
    color: var(--ck-ink);
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.main-content .ck-page-shell .card-body {
    padding: 1.3rem;
}

.main-content .ck-page-shell .table {
    margin-bottom: 0;
}

.main-content .ck-page-shell .table thead th {
    background: var(--ck-surface-soft);
    border-bottom: 1px solid var(--ck-border-strong);
    color: var(--ck-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.75rem 0.85rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-content .ck-page-shell .table tbody td {
    border-color: var(--ck-border);
    color: var(--ck-ink-soft);
    font-size: 0.82rem;
    padding: 0.8rem 0.85rem;
    vertical-align: middle;
}

.main-content .ck-page-shell .table tbody tr {
    transition: background-color 160ms var(--ck-ease);
}

.main-content .ck-page-shell .table tbody tr:hover {
    background: var(--ck-primary-soft);
}

.main-content .ck-page-shell .form-control {
    border-color: var(--ck-border-strong);
    border-radius: var(--ck-radius-sm);
    min-height: 40px;
}

.main-content .ck-page-shell .form-control:focus {
    border-color: var(--ck-primary);
    box-shadow: 0 0 0 3px var(--ck-primary-soft);
}

.main-content .ck-page-shell .nav-pills {
    background: var(--ck-surface-soft);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
}

.main-content .ck-page-shell .nav-pills .nav-link {
    border-radius: 7px;
    color: var(--ck-ink-soft);
    font-size: 0.78rem;
    font-weight: 650;
    padding: 0.55rem 0.85rem;
}

.main-content .ck-page-shell .nav-pills .nav-link.active {
    background: var(--ck-primary);
    box-shadow: 0 2px 6px rgba(52, 87, 197, 0.2);
    color: #fff;
}

.main-content .ck-page-shell .badge {
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.35rem 0.58rem;
}

.main-content .ck-business-page > .container-fluid > .card:first-child .card-header,
.main-content .ck-marketplace-page .card-header,
.main-content .ck-assignment-page > .container-fluid > .card > .card-header,
.main-content .ck-institution-page > .container-fluid > .card:first-child .card-header {
    background: linear-gradient(120deg, var(--ck-navy-deep), var(--ck-blue));
    border-bottom: 0;
    color: #fff;
}

.main-content .ck-business-page > .container-fluid > .card:first-child .card-header h5,
.main-content .ck-marketplace-page .card-header h5,
.main-content .ck-assignment-page > .container-fluid > .card > .card-header h5,
.main-content .ck-institution-page > .container-fluid > .card:first-child .card-header h5 {
    color: #fff;
}

.main-content .ck-business-page .widget {
    min-height: 112px;
    overflow: hidden;
}

.main-content .ck-business-page .widget-body {
    padding: 1.15rem 1.25rem;
}

.main-content .ck-business-page .state h6,
.main-content .ck-business-page .state h2 {
    color: inherit;
}

.main-content .ck-business-page .state h6 {
    font-size: 0.72rem;
    font-weight: 650;
    opacity: 0.8;
}

.main-content .ck-business-page .state h2 {
    font-size: 1.35rem;
    margin: 0.35rem 0 0;
}

.main-content .ck-business-page .table-borderless th {
    color: var(--ck-muted);
    font-size: 0.73rem;
    font-weight: 700;
    padding: 0.7rem 0.4rem 0.7rem 0;
    text-transform: uppercase;
}

.main-content .ck-business-page .table-borderless td {
    color: var(--ck-ink);
    font-weight: 600;
    padding: 0.7rem 0;
}

.main-content .ck-activities-page .card-header > .d-flex,
.main-content .ck-activities-page .card-header > div > .d-flex {
    align-items: center;
}

.main-content .ck-activities-page .card-header .row {
    align-items: center;
    flex: 1;
    margin: 0;
    width: 100%;
}

.main-content .ck-activities-page .card-header .row > h3 {
    color: var(--ck-ink);
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
    padding: 0;
}

.main-content .ck-activities-page .card-header .row > div {
    margin-left: auto;
    padding: 0;
}

.main-content .ck-activities-page .card-header input {
    width: min(100%, 360px) !important;
}

.main-content .ck-assignment-page form,
.main-content .ck-institution-page form {
    background: var(--ck-surface-soft);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    padding: 1rem;
}

.main-content .ck-assignment-card .card-header {
    align-items: center;
    display: flex;
    min-height: 82px;
    padding: 1.15rem 1.3rem;
}

.ck-card-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.ck-card-heading__icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: inline-flex;
    font-size: 1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.ck-card-heading small {
    color: rgba(255, 255, 255, 0.72);
    display: block;
    font-size: 0.74rem;
    margin-top: 0.2rem;
}

.main-content .ck-assignment-card .card-body {
    padding: 1.35rem;
}

.main-content .ck-assignment-form {
    background: linear-gradient(135deg, #f7f9fc, #eef4ff) !important;
    border-color: #dce5f5 !important;
    padding: 1.25rem !important;
}

.main-content .ck-assignment-form label {
    color: var(--ck-ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.main-content .ck-assignment-form .btn {
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 650;
    padding: 0.58rem 0.9rem;
}

.main-content .ck-assignment-list {
    border-top: 1px solid var(--ck-border);
    padding-top: 1.25rem;
}

.main-content .ck-assignment-page .mt-4 > h6 {
    color: var(--ck-ink);
    font-size: 0.9rem;
    font-weight: 650;
    margin-bottom: 0.9rem;
}

/* Institution and project management pages */
.main-content .ck-entity-page > .container-fluid > .card:first-child .card-header {
    background: linear-gradient(120deg, var(--ck-navy-deep), var(--ck-blue));
    border-bottom: 0;
    color: #fff;
}

.main-content .ck-entity-page .card-header .ck-card-heading h5 {
    color: #fff;
}

.main-content .ck-entity-page .card-header small,
.main-content .ck-assignment-list__heading small {
    color: var(--ck-muted);
    display: block;
    font-size: .75rem;
    margin-top: .2rem;
}

.main-content .ck-entity-page .ck-entity-page__hero small {
    color: rgba(255, 255, 255, .72);
}

.main-content .ck-entity-page__form {
    background: linear-gradient(135deg, #f7f9fc, #f1f5ff) !important;
    border-color: #dce5f5 !important;
    padding: 1.35rem !important;
}

.main-content .ck-entity-page__form .form-group {
    margin-bottom: .25rem;
}

.main-content .ck-entity-page__form label {
    color: var(--ck-ink-soft);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ck-form-title {
    align-items: center;
    color: var(--ck-ink);
    display: flex;
    font-size: .93rem;
    font-weight: 700;
    gap: .5rem;
    margin-bottom: 1.15rem;
}

.ck-form-title > i {
    align-items: center;
    background: var(--ck-primary-soft);
    border-radius: 7px;
    color: var(--ck-primary);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.main-content .ck-entity-page .form-control[readonly] {
    background: #eef1f6;
    color: var(--ck-muted);
}

.main-content .ck-entity-page .btn,
.main-content .ck-assignment-page .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 650;
    gap: .2rem;
    justify-content: center;
    min-height: 36px;
}

.main-content .ck-entity-page .btn-primary,
.main-content .ck-assignment-page .btn-primary {
    box-shadow: 0 3px 8px rgba(52, 87, 197, .18);
}

.main-content .ck-entity-page .btn-danger,
.main-content .ck-assignment-page .btn-danger {
    box-shadow: 0 3px 8px rgba(216, 74, 61, .15);
}

.ck-entity-page__list-header { gap: 1rem; }
.ck-entity-page__search { min-width: min(100%, 300px); position: relative; }
.ck-entity-page__search > i { color: var(--ck-muted); left: .8rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.ck-entity-page__search .form-control { min-width: 260px; padding-left: 2.25rem; }
.ck-table-actions { white-space: nowrap; }
.ck-role-page code { color: var(--ck-primary); font-size: .78rem; }

.ck-assignment-list__heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.ck-assignment-list__heading h6 { margin-bottom: 0 !important; }
.ck-assignment-list__count { background: var(--ck-primary-soft); border-radius: 999px; color: var(--ck-primary); font-size: .72rem; font-weight: 700; padding: .35rem .6rem; white-space: nowrap; }

@media (max-width: 767.98px) {
    .ck-entity-page__list-header { align-items: flex-start !important; flex-direction: column; }
    .ck-entity-page__search, .ck-entity-page__search .form-control { min-width: 100%; width: 100%; }
}

.main-content .ck-marketplace-page .card-header {
    background: linear-gradient(120deg, var(--ck-navy-deep), var(--ck-blue));
}

.main-content .ck-marketplace-page .card-header h5 {
    color: #fff;
}

.main-content .ck-agent-group-page .card {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow-sm);
}

.main-content .ck-agent-group-page .card-header {
    background: var(--ck-surface);
    border-bottom: 1px solid var(--ck-border);
    padding: 0.65rem 1rem 0;
}

.main-content .ck-agent-group-page .card-header-tabs {
    border-bottom: 0;
    gap: 0.2rem;
}

.main-content .ck-agent-group-page .card-header-tabs .nav-link {
    border: 0;
    border-radius: 8px 8px 0 0;
    color: var(--ck-muted);
    font-size: 0.76rem;
    font-weight: 650;
    margin-bottom: 0;
    padding: 0.7rem 0.85rem;
    transition: background-color 160ms var(--ck-ease), color 160ms var(--ck-ease);
}

.main-content .ck-agent-group-page .card-header-tabs .nav-link:hover {
    background: var(--ck-primary-soft);
    color: var(--ck-primary);
}

.main-content .ck-agent-group-page .card-header-tabs .nav-link.active {
    background: var(--ck-primary);
    color: #fff;
}

.main-content .ck-agent-group-page .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 650;
    gap: 0.4rem;
    justify-content: center;
    min-height: 38px;
    padding: 0.5rem 0.85rem;
}

.main-content .ck-agent-group-page .btn-lg {
    font-size: 0.8rem;
    min-height: 42px;
    padding: 0.6rem 0.95rem;
}

.main-content .ck-agent-group-page .btn-primary {
    box-shadow: 0 3px 8px rgba(52, 87, 197, 0.18);
}

.main-content .ck-agent-group-page .btn-success {
    box-shadow: 0 3px 8px rgba(129, 191, 32, 0.18);
}

.main-content .ck-agent-group-page .btn-info {
    box-shadow: 0 3px 8px rgba(47, 143, 166, 0.18);
}

.main-content .ck-agent-group-page .ck-agent-back-button {
    box-shadow: var(--ck-shadow-sm);
    white-space: nowrap;
}

.main-content .ck-agent-group-page .ck-agent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.main-content .ck-agent-group-page .table thead th {
    background: var(--ck-surface-soft);
    color: var(--ck-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.main-content .ck-agent-group-page form.border {
    background: var(--ck-surface-soft);
    border: 1px solid var(--ck-border) !important;
    border-radius: var(--ck-radius-sm) !important;
}

@media (max-width: 767.98px) {
    .main-content .ck-page-shell .card-body {
        padding: 1rem;
    }

    .main-content .ck-page-shell .nav-pills {
        display: flex;
        overflow-x: auto;
    }

    .main-content .ck-page-shell .nav-pills .nav-item {
        flex: 0 0 auto;
    }

    .main-content .ck-activities-page .card-header .row > div {
        margin: 0.8rem 0 0;
        width: 100%;
    }

    .main-content .ck-activities-page .card-header input {
        width: 100% !important;
    }

    .main-content .ck-agent-group-page .card-header {
        overflow-x: auto;
    }

    .main-content .ck-agent-group-page .card-header-tabs {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .main-content .ck-agent-group-page .ck-agent-actions .btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-content .btn,
    .main-content .form-control,
    .card .table.table-hover tbody tr,
    .main-content .pagination .page-link {
        transition: none;
    }

    .main-content .btn:hover {
        transform: none;
    }
}

/* ---- Small screens: wide tables scroll inside their own container ---- */

@media (max-width: 767.98px) {
    .card .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .card .table thead th,
    .card .table tbody td {
        padding: 0.65rem 0.7rem;
    }

    .main-content .card .card-body {
        padding: 1rem;
    }
}

/* ---- Collapsed rail (theme's .nav-collapsed) ----
   The rail is 60px wide and hides the labels, so the roomier padding above
   would clip the icons. Tighten it and centre them; the hover-expanded state
   restores the full treatment. */

.wrapper.nav-collapsed .page-wrap .app-sidebar:not(:hover) .sidebar-content .nav-container .navigation-main .nav-item a {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.wrapper.nav-collapsed .page-wrap .app-sidebar:not(:hover) .sidebar-content .nav-container .navigation-main .nav-item a:hover {
    padding-left: 0;
}

.wrapper.nav-collapsed .page-wrap .app-sidebar:not(:hover) .sidebar-content .nav-container .navigation-main .nav-item a i {
    margin-right: 0;
}

.wrapper.nav-collapsed .page-wrap .app-sidebar:not(:hover) .sidebar-content .nav-container .navigation-main .nav-item .submenu-content {
    display: none;
}

/* ==========================================================================
   4. ADMIN SIDEBAR VARIANT
   --------------------------------------------------------------------------
   Admins run the system side of ChomokaPlus, so their nav takes a neutral
   graphite ramp instead of the navy-blue every other role sees. Only the nav
   ground changes — the accent, hero, buttons and status colours stay shared,
   so nothing has to be relearned when switching between the two.

   The class is set in resources/views/layouts/sidebar.blade.php. Overriding
   the tokens on the sidebar means every child rule follows automatically.
   ========================================================================== */

.wrapper .page-wrap .app-sidebar.ck-nav-admin {
    --ck-nav-top: #202530;
    --ck-nav-mid: #1c202a;
    --ck-nav-bottom: #181b23;
    --ck-nav-header: #131519;
}

/* ==========================================================================
   5. AGENT MANAGEMENT MODULE CARDS
   --------------------------------------------------------------------------
   Quick access cards for Agent Management dashboard section.
   ========================================================================== */

.ck-module-card {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius);
    box-shadow: var(--ck-shadow-sm);
    background: var(--ck-surface);
    transition: transform 180ms var(--ck-ease), box-shadow 180ms var(--ck-ease), border-color 180ms var(--ck-ease);
}

.ck-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ck-shadow-lg);
    border-color: var(--ck-border-strong);
}

.ck-module-card__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.2rem;
    transition: background-color 180ms var(--ck-ease);
}

.ck-module-card__icon.bg-primary {
    background: var(--ck-primary-soft);
    color: var(--ck-primary);
}

.ck-module-card__icon.bg-secondary {
    background: rgba(93, 103, 122, 0.14);
    color: #5b6577;
}

.ck-module-card:hover .ck-module-card__icon.bg-primary {
    background: var(--ck-primary);
    color: #fff;
}

.ck-module-card:hover .ck-module-card__icon.bg-secondary {
    background: #5b6577;
    color: #fff;
}

/* Agent Activity Feed */
.ck-activity-feed .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 1rem 1.25rem;
    transition: background-color 160ms var(--ck-ease);
}

.ck-activity-feed .list-group-item:first-child {
    border-top: 0;
}

.ck-activity-feed .list-group-item:hover {
    background-color: var(--ck-surface-soft);
}

.ck-activity-feed .list-group-item p {
    color: var(--ck-ink-soft);
    line-height: 1.5;
}

.ck-activity-feed .list-group-item strong {
    color: var(--ck-ink);
    font-weight: 600;
}

/* Quick Actions */
.ck-quick-actions .btn-outline-primary:hover,
.ck-quick-actions .btn-outline-success:hover,
.ck-quick-actions .btn-outline-info:hover,
.ck-quick-actions .btn-outline-warning:hover {
    transform: translateY(-2px);
    box-shadow: var(--ck-shadow-sm);
}

.ck-quick-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 180ms var(--ck-ease);
}

.ck-quick-actions .btn i {
    font-size: 1rem;
}