/* ================================================================
   EES CREW MANAGER — Task Management CSS
   tasks.css  |  Standalone, no shared dependencies
   ================================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --tk-primary:       #2563eb;
    --tk-primary-light: #eff6ff;
    --tk-primary-dark:  #1d4ed8;
    --tk-success:       #16a34a;
    --tk-success-light: #f0fdf4;
    --tk-warning:       #d97706;
    --tk-warning-light: #fffbeb;
    --tk-danger:        #dc2626;
    --tk-danger-light:  #fef2f2;
    --tk-info:          #0891b2;
    --tk-info-light:    #ecfeff;
    --tk-surface:       #ffffff;
    --tk-bg:            #f8fafc;
    --tk-border:        #e2e8f0;
    --tk-text:          #1e293b;
    --tk-muted:         #64748b;
    --tk-radius:        10px;
    --tk-radius-sm:     6px;
    --tk-shadow:        0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --tk-shadow-md:     0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --tk-shadow-lg:     0 10px 25px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
    --tk-transition:    all .18s cubic-bezier(.4,0,.2,1);
}

/* ── Reset for task UI ──────────────────────────────────────── */
.tk-wrap *, .tk-composer *, .tk-detail *, .tk-page * {
    box-sizing: border-box;
}

/* ================================================================
   MY TASKS PAGE  (Page_MyTasks)
   ================================================================ */
.tk-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tk-bg);
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--tk-text);
    font-size: 14px;
    border-top: 2px solid #4CAF50;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.tk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    background: var(--tk-surface);
    border-bottom: 1px solid var(--tk-border);
    flex-wrap: wrap;
    box-shadow: var(--tk-shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ── Title: chỉ icon, animated ────────────────────────────── */
    .tk-toolbar .tk-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background-color: #0288D1;
        color: #fff;
        font-size: 17px;
        flex-shrink: 0;
        animation: tkTitlePulse 3s ease-in-out infinite;
    }
@keyframes tkTitlePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,.4); }
    50%      { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}
.tk-title-icon { animation: tkIconSpin 8s linear infinite; }
@keyframes tkIconSpin {
    0%   { transform: rotate(0deg) scale(1); }
    45%  { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.15); }
    95%  { transform: rotate(180deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
}

.tk-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

/* ── Search box ────────────────────────────────────────────── */
.tk-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
}
.tk-search-icon {
    position: absolute;
    left: 13px;
    font-size: 14px;
    color: #991b1b;
    font-weight: 900;
    pointer-events: none;
    z-index: 1;
}
.tk-search-input {
    height: 36px;
    padding: 0 32px 0 38px;
    border: 1.5px solid var(--tk-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--tk-text);
    background: #f8fafc;
    width: 210px;
    transition: var(--tk-transition);
    outline: none;
    padding-left:32px !important;
}
.tk-search-input:focus {
    border-color: var(--tk-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    width: 240px;
}
.tk-search-clear {
    position: absolute;
    right: 8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: #cbd5e1;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    z-index: 1;
}
.tk-search-clear:hover { background: #94a3b8; }

/* ── Filter selects (legacy native — giữ lại cho backward compat) */
.tk-filter-select-wrap { display: none; }

/* ── TkDropdown custom ─────────────────────────────────────── */
.tkdd {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    user-select: none;
}
.tkdd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px 0 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tk-text);
    transition: var(--tk-transition);
    white-space: nowrap;
    min-width: 155px;
}
.tkdd-trigger:hover, .tkdd-open .tkdd-trigger {
    border-color: var(--tk-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.tkdd-lead-icon { font-size: 12px; color: #64748b; flex-shrink: 0; }
.tkdd-selected-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
.tkdd-label { flex: 1; }
.tkdd-arrow {
    font-size: 10px; color: #94a3b8; flex-shrink: 0;
    transition: transform .2s;
}
.tkdd-open .tkdd-arrow { transform: rotate(180deg); }

/* dropdown menu */
.tkdd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: max(100%, 190px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.15), 0 2px 8px rgba(15,23,42,.08);
    z-index: 6000;
    padding: 6px;
    animation: tkDropIn .15s cubic-bezier(.2,.8,.3,1.2);
    overflow: hidden;
}
@keyframes tkDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tkdd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    transition: background .12s;
}
.tkdd-item:hover { background: #f1f5f9; }
.tkdd-item.active { background: #eff6ff; color: var(--tk-primary); font-weight: 600; }
.tkdd-item-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}
.tkdd-item-icon { font-size: 13px; flex-shrink: 0; }
.tkdd-item-label { flex: 1; }
.tkdd-item-check { font-size: 11px; color: var(--tk-primary); margin-left: auto; }
.tkdd-backdrop {
    position: fixed; inset: 0; z-index: 5999;
    background: transparent;
}


/* ── Date range native inputs ──────────────────────────────── */
.tk-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: tkFadeIn .2s ease;
}


/* ── TkDatePicker self-contained component ────────────────── */
.tkdp-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Trigger button */
.tkdp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tk-text);
    white-space: nowrap;
    min-width: 148px;
    transition: var(--tk-transition);
    user-select: none;
}
.tkdp-trigger:hover,
.tkdp-wrap-open .tkdp-trigger {
    border-color: var(--tk-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.tkdp-trigger-icon { font-size: 12px; color: #64748b; flex-shrink: 0; }
.tkdp-trigger-label { flex: 1; }
.tkdp-chevron { font-size: 10px; color: #94a3b8; flex-shrink: 0; transition: transform .2s; }
.tkdp-wrap-open .tkdp-chevron { transform: rotate(180deg); }
.tkdp-clear-x {
    width: 18px; height: 18px; border-radius: 50%;
    background: #cbd5e1; color: #fff; font-size: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; transition: background .15s;
    border: none;
}
.tkdp-clear-x:hover { background: #94a3b8; }

/* Popup calendar */
.tkdp-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 6100;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
    padding: 16px;
    width: 300px;
    border: 1px solid #e2e8f0;
    animation: tkDropIn .18s cubic-bezier(.2,.8,.3,1.2);
}
.tkdp-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 4px;
}
.tkdp-month-label {
    flex: 1; text-align: center;
    font-size: 13px; font-weight: 700; color: #0f172a; letter-spacing: .03em;
}
.tkdp-nav {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #f8fafc;
    cursor: pointer; font-size: 11px; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
}
.tkdp-nav:hover { background: var(--tk-primary-light); color: var(--tk-primary); border-color: var(--tk-primary); }
.tkdp-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    margin-bottom: 12px;
}
.tkdp-dow {
    text-align: center; font-size: 10.5px; font-weight: 700;
    color: #94a3b8; padding: 5px 0; text-transform: uppercase;
}
.tkdp-day {
    aspect-ratio: 1; width: 100%;
    border: none; background: transparent; cursor: pointer;
    border-radius: 8px; font-size: 12.5px; font-weight: 500;
    color: #334155; display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.tkdp-day:hover:not(.selected) { background: var(--tk-primary-light); color: var(--tk-primary); }
.tkdp-day.other { color: #cbd5e1; }
.tkdp-day.other:hover { color: #94a3b8; }
.tkdp-day.today {
    background: #fef3c7; color: #d97706; font-weight: 700;
    box-shadow: 0 0 0 1.5px #fbbf24;
}
.tkdp-day.selected {
    background: var(--tk-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37,99,235,.4);
}
.tkdp-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    border-top: 1px solid #f1f5f9; padding-top: 10px;
}
.tkdp-today-btn, .tkdp-clear-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1.5px solid; transition: all .15s;
}
.tkdp-today-btn { background: var(--tk-primary); border-color: var(--tk-primary); color: #fff; }
.tkdp-today-btn:hover { background: var(--tk-primary-dark); }
.tkdp-clear-btn { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.tkdp-clear-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.tkdp-backdrop {
    position: fixed; inset: 0; z-index: 6099; background: transparent;
}

/* ── Advanced Filter Panel ─────────────────────────────────── */
.tk-adv-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.tk-adv-btn {
    position: relative;
}
.tk-adv-btn-active {
    border-color: var(--tk-primary) !important;
    color: var(--tk-primary) !important;
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}
.tk-adv-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(220,38,38,.45);
    border: 2px solid #fff;
    pointer-events: none;
}
.tk-adv-backdrop {
    position: fixed; inset: 0; z-index: 6149; background: transparent;
}
.tk-adv-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 6150;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(15,23,42,.18), 0 4px 20px rgba(15,23,42,.09);
    padding: 20px;
    width: 360px;
    animation: tkDropIn .2s cubic-bezier(.2,.8,.3,1.1);
}
.tk-adv-panel::before {
    content: "";
    position: absolute;
    top: -7px; left: 20px;
    width: 13px; height: 13px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    transform: rotate(45deg);
    border-radius: 2px;
}
.tk-adv-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid #f1f5f9;
}
.tk-adv-title {
    font-size: 13.5px; font-weight: 800; color: #0f172a;
    display: flex; align-items: center; gap: 8px;
}
.tk-adv-title i { color: var(--tk-primary); }
.tk-adv-reset {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: #dc2626;
    background: #fff5f5; border: 1.5px solid #fca5a5;
    border-radius: 8px; padding: 5px 11px; cursor: pointer;
    transition: all .15s;
}
.tk-adv-reset:hover { background: #fee2e2; border-color: #ef4444; transform: translateY(-1px); }
.tk-adv-row { margin-bottom: 16px; }
.tk-adv-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 7px;
}
.tk-adv-label i { font-size: 12px; color: var(--tk-primary); }

/* ── Category custom dropdown ─── */
.tk-adv-cat-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 38px;
    padding: 0 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px; color: #334155;
    cursor: pointer; outline: none;
    transition: all .15s;
    box-sizing: border-box;
}
.tk-adv-cat-trigger:hover, .tk-adv-cat-trigger.open {
    border-color: var(--tk-primary); background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.tk-adv-cat-trigger .cat-arrow { font-size: 10px; color: #94a3b8; transition: transform .2s; }
.tk-adv-cat-trigger.open .cat-arrow { transform: rotate(180deg); }
.tk-adv-cat-val { display: flex; align-items: center; gap: 7px; overflow: hidden; }
.tk-adv-cat-val span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-adv-cat-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, var(--tk-primary), #7c3aed);
    flex-shrink: 0;
}
.tk-adv-cat-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px);
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.14);
    z-index: 200; overflow: hidden;
    animation: tkDropIn .15s ease;
    max-height: 220px; overflow-y: auto;
}
.tk-adv-cat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; font-size: 13px; color: #334155;
    transition: background .1s;
}
.tk-adv-cat-item:hover { background: #f1f5f9; }
.tk-adv-cat-item.active { background: #eff6ff; color: var(--tk-primary); font-weight: 600; }
.tk-adv-cat-item .tk-adv-cat-dot { flex-shrink: 0; }

/* ── User search ─── */
.tk-adv-user-wrap { position: relative; }
.tk-adv-user-input {
    width: 100%; height: 38px;
    padding: 0 36px 0 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px; color: #334155;
    outline: none; transition: all .15s; box-sizing: border-box;
}
.tk-adv-user-input:focus { border-color: var(--tk-primary); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.tk-adv-user-search-ico {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #94a3b8; pointer-events: none;
}
.tk-adv-user-drop {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.14);
    z-index: 200; overflow: hidden;
    animation: tkDropIn .15s ease;
    max-height: 220px; overflow-y: auto;
}
.tk-adv-user-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; cursor: pointer;
    transition: background .1s; border-bottom: 1px solid #f8fafc;
}
.tk-adv-user-item:last-child { border-bottom: none; }
.tk-adv-user-item:hover { background: #f1f5f9; }
.tk-adv-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; border: 1.5px solid #e2e8f0;
}
.tk-adv-avatar-init {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--tk-primary), #7c3aed);
    color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #e2e8f0;
}
.tk-adv-uinfo { display: flex; flex-direction: column; overflow: hidden; }
.tk-adv-uname { font-size: 12.5px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.tk-adv-ufull { font-size: 11.5px; color: #64748b; line-height: 1.3; }
.tk-adv-udep {
    font-size: 10.5px; color: #94a3b8; font-style: italic;
    display: flex; align-items: center; gap: 4px;
}
/* ── Selected chip ─── */
.tk-adv-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 36px; padding: 5px 6px 5px 10px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1.5px solid #bfdbfe;
    border-radius: 10px; font-size: 13px; font-weight: 600; color: #1d4ed8;
    width: 100%;
}
.tk-adv-chip-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; border: 1.5px solid #93c5fd; flex-shrink: 0;
}
.tk-adv-chip-init {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--tk-primary), #7c3aed);
    color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.tk-adv-chip-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.tk-adv-chip-name { font-size: 12.5px; font-weight: 700; color: #1d4ed8; line-height: 1.2; }
.tk-adv-chip-sub { font-size: 11px; color: #3b82f6; font-weight: 400; }
.tk-adv-chip-clear {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 1.5px solid #93c5fd; background: #bfdbfe; color: #1d4ed8;
    font-size: 10px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all .15s; margin-left: auto;
}
.tk-adv-chip-clear:hover { background: #60a5fa; color: #fff; border-color: #60a5fa; }
.tk-adv-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    border-top: 1.5px solid #f1f5f9; padding-top: 14px; margin-top: 6px;
}

.tk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid transparent;
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--tk-transition);
    white-space: nowrap;
    outline: none;
    text-decoration: none;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.tk-btn-primary {
    background: var(--tk-primary);
    color: #fff;
    border-color: var(--tk-primary);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.tk-btn-primary:hover {
    background: var(--tk-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

.tk-btn-outline {
    background: transparent;
    color: var(--tk-primary);
    border-color: var(--tk-border);
}
.tk-btn-outline:hover {
    background: var(--tk-primary-light);
    border-color: var(--tk-primary);
}

.tk-btn-danger {
    background: var(--tk-danger);
    color: #fff;
    border-color: var(--tk-danger);
}
.tk-btn-danger:hover { background: #b91c1c; }

.tk-btn-success {
    background: var(--tk-success);
    color: #fff;
    border-color: var(--tk-success);
}
.tk-btn-success:hover { background: #15803d; }

.tk-btn-warning {
    background: var(--tk-warning);
    color: #fff;
    border-color: var(--tk-warning);
}
.tk-btn-warning:hover { background: #b45309; }

.tk-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.tk-btn:disabled {
    opacity: .5;
    pointer-events: none;
}

/* ── Search & Filters ─────────────────────────────────────────── */
.tk-input {
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    color: var(--tk-text);
    background: var(--tk-surface);
    transition: var(--tk-transition);
    outline: none;
}
.tk-input:focus {
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.tk-select {
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    color: var(--tk-text);
    background: var(--tk-surface);
    cursor: pointer;
    outline: none;
    transition: var(--tk-transition);
}
.tk-select:focus { border-color: var(--tk-primary); }

/* ── Role Tabs ─────────────────────────────────────────────────── */
.tk-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
    border-bottom: 2px solid var(--tk-border);
    position: relative;
}

.tk-tab {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #303F9F;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    border-radius: 10px 10px 0 0;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: visible;
}
/* All tab */
.tk-tab:nth-child(1):hover { color: #6366f1; background: #eef2ff; border-color: #c7d2fe; }
.tk-tab:nth-child(1).active {
    color: #4f46e5; border-color: #6366f1; border-bottom-color: #6366f1;
    font-weight: 700; background: #eef2ff;
    box-shadow: 0 -2px 8px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.8);
}
.tk-tab:nth-child(1).active::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:2.5px;
    background: linear-gradient(90deg,#6366f1,#818cf8); border-radius:2px 2px 0 0;
}
/* Executor tab */
.tk-tab:nth-child(2):hover { color: #2563eb; background: #eff6ff; border-color: #93c5fd; }
.tk-tab:nth-child(2).active {
    color: #1d4ed8; border-color: #3b82f6; border-bottom-color: #3b82f6;
    font-weight: 700; background: #eff6ff;
    box-shadow: 0 -2px 8px rgba(37,99,235,.15), inset 0 1px 0 rgba(255,255,255,.8);
}
.tk-tab:nth-child(2).active::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:2.5px;
    background: linear-gradient(90deg,#2563eb,#60a5fa); border-radius:2px 2px 0 0;
}
/* Supervisor tab */
.tk-tab:nth-child(3):hover { color: #d97706; background: #fffbeb; border-color: #fcd34d; }
.tk-tab:nth-child(3).active {
    color: #b45309; border-color: #f59e0b; border-bottom-color: #f59e0b;
    font-weight: 700; background: #fffbeb;
    box-shadow: 0 -2px 8px rgba(245,158,11,.15), inset 0 1px 0 rgba(255,255,255,.8);
}
.tk-tab:nth-child(3).active::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:2.5px;
    background: linear-gradient(90deg,#f59e0b,#fcd34d); border-radius:2px 2px 0 0;
}
/* Observer tab */
.tk-tab:nth-child(4):hover { color: #7c3aed; background: #f5f3ff; border-color: #c4b5fd; }
.tk-tab:nth-child(4).active {
    color: #6d28d9; border-color: #8b5cf6; border-bottom-color: #8b5cf6;
    font-weight: 700; background: #f5f3ff;
    box-shadow: 0 -2px 8px rgba(139,92,246,.15), inset 0 1px 0 rgba(255,255,255,.8);
}
.tk-tab:nth-child(4).active::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:2.5px;
    background: linear-gradient(90deg,#8b5cf6,#c4b5fd); border-radius:2px 2px 0 0;
}

.tk-tab-badge {
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    transition: all .2s;
}
.tk-tab:nth-child(1) .tk-tab-badge { background: #e0e7ff; color: #4f46e5; }
.tk-tab:nth-child(1).active .tk-tab-badge { background: #6366f1; color: #fff; box-shadow: 0 1px 4px rgba(99,102,241,.4); }
.tk-tab:nth-child(2) .tk-tab-badge { background: #dbeafe; color: #1d4ed8; }
.tk-tab:nth-child(2).active .tk-tab-badge { background: #2563eb; color: #fff; box-shadow: 0 1px 4px rgba(37,99,235,.4); }
.tk-tab:nth-child(3) .tk-tab-badge { background: #fef3c7; color: #b45309; }
.tk-tab:nth-child(3).active .tk-tab-badge { background: #f59e0b; color: #fff; box-shadow: 0 1px 4px rgba(245,158,11,.4); }
.tk-tab:nth-child(4) .tk-tab-badge { background: #ede9fe; color: #6d28d9; }
.tk-tab:nth-child(4).active .tk-tab-badge { background: #8b5cf6; color: #fff; box-shadow: 0 1px 4px rgba(139,92,246,.4); }

/* ── Task List ─────────────────────────────────────────────────── */
/* ── Task List Area ───────────────────────────────────── */
.tk-list-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    padding-bottom:35px;
}

.tk-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--tk-muted);
}
.tk-empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    opacity: .4;
}
.tk-empty p { font-size: 15px; margin: 0; }

/* ── Card Grid: responsive multi-column ───────────────── */
.tk-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}
@media (max-width: 700px) {
    .tk-card-grid { grid-template-columns: 1fr; }
}

/* ── Card item ────────────────────────────────── */
.tk-card {
    background: var(--tk-surface);
    border: 1.5px solid var(--tk-border);
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: var(--tk-transition);
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow:hidden;
}
.tk-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--tk-border);
    border-radius: 14px 0 0 14px;
    transition: var(--tk-transition);
    z-index: 1;
}
.tk-card:hover {
    border-color: var(--tk-primary);
    box-shadow: 0 6px 20px rgba(37,99,235,.12), 0 2px 6px rgba(0,0,0,.07);
    transform: translateY(-3px);
    z-index: 10;
}
.tk-card:hover::before { background: var(--tk-primary); }

/* Priority card accents */
.tk-card.priority-urgent { border-color: #fecaca; }
.tk-card.priority-urgent::before { background: #e11d48; }
.tk-card.priority-urgent:hover { border-color: #e11d48; box-shadow: 0 6px 20px rgba(220,38,38,.15); }
.tk-card.priority-high { border-color: #fed7aa; }
.tk-card.priority-high::before   { background: #ea580c; }
.tk-card.priority-high:hover { border-color: #ea580c; box-shadow: 0 6px 20px rgba(234,88,12,.15); }
.tk-card.priority-medium::before { background: #2563eb; }
.tk-card.priority-low { border-color: #bbf7d0; }
.tk-card.priority-low::before    { background: #16a34a; }
.tk-card.priority-low:hover { border-color: #16a34a; box-shadow: 0 6px 20px rgba(22,163,74,.12); }

/* Card body */
.tk-card-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 10px 18px;
    min-width: 0;
}

/* Row 1: code left + status badge right */
.tk-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    position: relative;
    overflow: visible;
}

/* Task code — màu theo priority */
.tk-card-code {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: .4px;
    border: 1px solid;
    flex-shrink: 0;
}
.tk-card.priority-urgent .tk-card-code {
    color: #e11d48;
    background: #fff1f2;
    border-color: #fca5a5;
    border: 0px;
    padding: 5px 10px
}
.tk-card.priority-high .tk-card-code {
    color: #ea580c;
    background: #fff7ed;
    border-color: #fdba74;
    border: 0px;
    padding: 5px 10px
}
.tk-card.priority-medium .tk-card-code { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; border:0px; padding:5px 10px }
.tk-card.priority-low .tk-card-code {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
    border: 0px;
    padding: 5px 10px
}
.tk-card.priority-medium .tk-card-code i{
    margin-right:5px;
}
/* Priority code tooltip */
.tk-prio-code {
    position: relative;
    cursor: default;
}
.tk-prio-tooltip {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 99999;
    transition: opacity .15s ease, transform .15s ease;
    transform: translateY(-4px);
    white-space: normal;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
.tk-prio-code:hover .tk-prio-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.tk-prio-tooltip-urgent { background: #fff1f2; border-color: #fca5a5; color: #9f1239; }
.tk-prio-tooltip-high   { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.tk-prio-tooltip-medium { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.tk-prio-tooltip-low    { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.tk-prio-tt-name {
    display: block;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 3px;
}
.tk-prio-tt-desc {
    display: block;
    opacity: .85;
    font-size: 11px;
}

/* Row 2: title */
.tk-title-icon {
    font-size: 14px;
    margin-right: 3px;
    flex-shrink: 0;
}

/* Row 3: subrow counts trái + report status phải */
.tk-card-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
    position: relative;
    overflow: visible;
    background-color: #fafafa;
    padding: 5px 10px;
    user-select: none;
    color: #5D4037 !important;
}
.tk-card-counts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;
}

/* Row 2: Title */
.tk-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-text);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Crew summary row trong task card ── */
.tk-card-crew {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
    font-size: 11.5px;
    color: #0e7490;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 6px;
    padding: 3px 8px;
    border:0px;
    user-select:none;
}
    .tk-card-crew .tk-crew-meta-group {
        display: block !important;
        width: 100%;
        padding-left: 30px;
        margin-top: -5px;
        margin-bottom:3px;
    }
        .tk-card-crew .tk-crew-meta-group .tk-crew-meta{
            margin-right:10px;
        }
        .tk-card-crew > i {
            color: #0891b2;
            font-size: 11px;
            flex-shrink: 0;
        }
.tk-card-crew-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #a5f3fc;
    flex-shrink: 0;
}
.tk-crew-rank {
    background: #0891b2;
    color: #fff;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
}
.tk-crew-name { font-weight: 600; color: #0e7490; }
.tk-crew-meta { display: inline-flex; align-items: center; gap: 3px; color: #64748b; font-size: 11px; }
.tk-crew-meta i { font-size: 10px; color: #94a3b8; }

/* ── Task Detail — Crew block ─────────────────────── */
.tkd-crew-block { margin-top: 4px; }
.tkd-crew-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #ecfeff;
    border: 0px solid #a5f3fc;
    border-radius: 10px;
    padding: 10px 14px;
    unicode-bidi:normal;
}
.tkd-crew-avatar-wrap { flex-shrink: 0; }
.tkd-crew-avatar-img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0891b2;
    display: block;
}
.tkd-crew-info { flex: 1; min-width: 0; }
.tkd-crew-code-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.tkd-crew-code {
    font-size: 11px; font-weight: 700;
    color: #64748b;
    background: #e0f2fe;
    border-radius: 4px;
    padding: 1px 6px;
}
.tkd-crew-fullname { font-size: 13px; font-weight: 700; color: #0e7490; margin-bottom: 4px; }
.tkd-crew-meta-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: #64748b; margin-bottom: 8px; }
.tkd-crew-meta-row i { font-size: 11px; color: #94a3b8; }
.tkd-crew-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tkd-crew-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    border: 0px solid #bae6fd;
    background: #fff;
    color: #388E3C;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
    .tkd-crew-btn:hover {
        background: #FFEBEE;
        border-color: #C2185B;
        color: #D32F2F;
    }
.tkd-crew-btn i { font-size: 12px; }

.tk-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #795548;
    white-space: nowrap;
}
.tk-meta-item i { font-size: 10.5px; flex-shrink: 0; }
.tk-meta-category {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-deadline-warning { color: #ef4444 !important; font-weight: 600; }

/* Badge nhỏ trong meta */
.tk-badge-meta {
    font-size: 10.5px;
    padding: 2px 7px;
}

/* Row trạng thái cuối card: task status + report status */
.tk-card-status-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: nowrap;
    border:0px !important;
}
.tk-card-status-row .tk-badge {
    font-size: 10.5px;
    padding: 2px 8px;
}
.tk-card-status-row .tk-badge-meta {
    margin-left: 0;
}
/* Group vai trò + trạng thái xử lý cùng 1 hàng, sát nhau */
.tk-card-role-status-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

/* Card footer: creator trái + actions phải */
.tk-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px 7px 18px;
    background: var(--tk-bg);
    border-top: 1px solid var(--tk-border);
    border-radius: 0 0 14px 14px;
    overflow: visible;
}
.tk-card-footer-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    user-select:none;
}
    .tk-card-footer-info span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #795548;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
.tk-card-footer-info i { font-size: 10px; flex-shrink: 0; }
.tk-card-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Role badge (vai trò của tôi trong task) ──────── */
.tk-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .2px;
    border:0px !important;
    padding:5px 10px;
    border-radius:5px;
    user-select:none;
}
.tk-role-badge.role-executor  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.tk-role-badge.role-supervisor { background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; }
.tk-role-badge.role-observer  { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.tk-role-badge i { font-size: 9px; }

/* ── Member tooltip ──────────────────────────────── */
.tk-member-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
/* Tooltip dùng position: fixed (set bởi JS khi hover) để thoát khỏi overflow scroll container */
/* Template ẩn nằm trong tk-member-wrap (chỉ là data source cho JS) */
.tk-member-wrap > .tk-member-tooltip {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important; height: 0 !important;
    overflow: hidden !important;
}
/* Singleton hiển thị (inject vào body bởi JS) */
#tk-tip-singleton.tk-member-tooltip {
    display: none;
    position: fixed;
    min-width: 260px;
    max-width: 320px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.09);
    z-index: 100010;
    overflow: hidden;
    transition: opacity .15s ease;
    pointer-events: auto;
}
.tk-member-tooltip {
    display: none;
    position: fixed;
    min-width: 260px;
    max-width: 320px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.09);
    z-index: 100010;
    overflow: hidden;
    transition: opacity .15s ease;
}
@keyframes mtt-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tk-mtt-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 10px 14px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-bottom: 1px solid #e2e8f0;
}
.tk-mtt-list {
    padding: 6px 0;
    max-height: 220px;
    overflow-y: auto;
}
.tk-mtt-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    transition: background .12s;
}
.tk-mtt-item:hover { background: #f8fafc; }
.tk-mtt-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
    overflow: hidden;
}
.tk-mtt-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.tk-mtt-avatar.role-2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.tk-mtt-avatar.role-3 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tk-mtt-info { flex: 1; min-width: 0; }
.tk-mtt-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-mtt-role {
    font-size: 10px;
    color: #64748b;
    margin-top: 1px;
}
.tk-mtt-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tk-mtt-status.s1 { background: #f1f5f9; color: #64748b; }
.tk-mtt-status.s2 { background: #fef3c7; color: #b45309; }
.tk-mtt-status.s3 { background: #dcfce7; color: #15803d; }
.tk-mtt-report {
    font-size: 10px;
    color: #64748b;
    padding: 0 14px 6px;
    font-style: italic;
}
/* ── Pagination hiện đại ────────────────────────────── */
.tk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 8px;
    grid-column: 1 / -1;
}
.tk-pagination .tk-btn {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: var(--tk-transition);
}
.tk-pagination .tk-btn:not(:disabled):hover {
    background: var(--tk-primary);
    color: #fff;
    border-color: var(--tk-primary);
    box-shadow: 0 4px 12px rgba(37,99,235,.3);
    transform: scale(1.1);
}
.tk-pagination .tk-btn:disabled { opacity: .35; cursor: not-allowed; }
.tk-pagination-info {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--tk-surface);
    border: 1.5px solid var(--tk-border);
    border-radius: 99px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tk-text);
    box-shadow: var(--tk-shadow);
    user-select: none;
}
.tk-pagination-info .sep { color: var(--tk-border); margin: 0 2px; }
.tk-pagination-info .pg-cur { color: var(--tk-primary); font-weight: 800; font-size: 15px; }
.tk-pagination-info .pg-total { color: var(--tk-muted); }
.tk-pagination-info .pg-count { color: var(--tk-muted); font-weight: 400; font-size: 11.5px; }

/* ── Priority Badges ────────────────────────────────────────── */
.tk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 400 !important;
    white-space: nowrap;
    border:0px !important;
    padding:5px 10px;
    user-select:none;
}
.tk-badge-urgent {
    background: #fff1f2;
    color: #e11d48;
    border: 1.5px solid #f43f5e;
    font-weight: 700;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-high     { background: #fff7ed; color: #ea580c; border: 1.5px solid #f97316; font-weight: 700; }
.tk-badge-medium {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1.5px solid #3b82f6;
    font-weight: 700;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-low {
    background: #f0fdf4;
    color: #15803d;
    border: 1.5px solid #22c55e;
    font-weight: 700;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-open {
    background: #FAFAFA;
    color: #1976D2;
    border: 1.5px solid #93c5fd;
    font-weight: 600;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-completed {
    background: #FAFAFA;
    color: #15803d;
    border: 1.5px solid #86efac;
    font-weight: 600;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-cancelled {
    background: #FAFAFA;
    color: #b91c1c;
    border: 1.5px solid #fca5a5;
    font-weight: 600;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-not-started {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border: 0px !important;
    padding: 5px 10px !important;
}
.tk-badge-processing   { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; border:0px !important;padding:5px 10px !important; }
.tk-badge-done {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    border: 0px !important;
    padding: 5px 10px !important;
}



/* ================================================================
   TASK COMPOSER (Dialog tạo/sửa phiếu giao việc)
   ================================================================ */
.tk-composer {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--tk-surface);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--tk-text);
}

.tk-composer-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.tk-field { display: flex; flex-direction: column; gap: 5px; }
.tk-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.tk-field-row .tk-field { flex: 1; min-width: 180px; }

.tk-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tk-label.required::after {
    content: '*';
    color: var(--tk-danger);
    margin-left: 2px;
}

.tk-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--tk-primary-light);
    border: 1px solid #bfdbfe;
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-primary);
    letter-spacing: .5px;
}

/* Priority radio group */
.tk-priority-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tk-priority-option {
    display: none;
}
.tk-priority-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: var(--tk-transition);
    user-select: none;
}
.tk-priority-label:hover { border-color: var(--tk-primary); }
.tk-priority-option:checked + .tk-priority-label {
    box-shadow: 0 0 0 2px currentColor;
}
.priority-lbl-urgent { color: var(--tk-danger); border-color: #fecaca; background: #fff1f2; }
.priority-lbl-urgent.checked, .tk-priority-option:checked + .priority-lbl-urgent { background: #fee2e2; border-color: var(--tk-danger); }
.priority-lbl-high   { color: var(--tk-warning); border-color: #fde68a; background: #fffbeb; }
.priority-lbl-high.checked, .tk-priority-option:checked + .priority-lbl-high { background: #fef3c7; border-color: var(--tk-warning); }
.priority-lbl-medium { color: var(--tk-info); border-color: #bae6fd; background: #f0f9ff; }
.priority-lbl-medium.checked, .tk-priority-option:checked + .priority-lbl-medium { background: #e0f2fe; border-color: var(--tk-info); }
.priority-lbl-low    { color: #64748b; border-color: var(--tk-border); background: #f8fafc; }
.priority-lbl-low.checked, .tk-priority-option:checked + .priority-lbl-low { background: #f1f5f9; border-color: #64748b; }

/* Assignees panel */
.tk-assignees-panel {
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius);
    overflow: hidden;
}

.tk-assignees-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--tk-bg);
    border-bottom: 1px solid var(--tk-border);
}
.tk-assignees-header span {
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-text);
}

.tk-assignees-add {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tk-border);
    align-items: center;
    flex-wrap: wrap;
}

.tk-assignee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f4f8;
    transition: var(--tk-transition);
}
.tk-assignee-item:last-child { border-bottom: none; }
.tk-assignee-item:hover { background: var(--tk-bg); }

.tk-assignee-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--tk-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.tk-assignee-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tk-assignee-info { flex: 1; min-width: 0; }
.tk-assignee-name { font-size: 13px; font-weight: 600; }
.tk-assignee-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
}
.role-executor   { background: #dbeafe; color: #1d4ed8; }
.role-supervisor { background: #fce7f3; color: #9d174d; }
.role-observer   { background: #f0fdf4; color: #166534; }

/* File drop zone */
.tk-dropzone {
    border: 2px dashed var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 24px;
    text-align: center;
    transition: var(--tk-transition);
    cursor: pointer;
    position: relative;
    background: var(--tk-bg);
}
.tk-dropzone:hover,
.tk-dropzone.drag-over {
    border-color: var(--tk-primary);
    background: var(--tk-primary-light);
}
.tk-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.tk-dropzone-icon { font-size: 28px; color: var(--tk-muted); margin-bottom: 8px; }
.tk-dropzone-text { font-size: 13px; color: var(--tk-muted); }
.tk-dropzone-text strong { color: var(--tk-primary); }

.tk-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tk-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
}
.tk-file-icon { font-size: 16px; color: var(--tk-muted); flex-shrink: 0; }
.tk-file-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-file-size { font-size: 11px; color: var(--tk-muted); white-space: nowrap; }
.tk-file-remove {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--tk-danger); cursor: pointer;
    border-radius: 4px; font-size: 13px;
    transition: var(--tk-transition);
    flex-shrink: 0;
}
.tk-file-remove:hover { background: var(--tk-danger-light); }

/* ================================================================
   TASK DETAIL (Dialog xem & báo cáo)
   ================================================================ */
.tk-detail {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--tk-text);
    background: var(--tk-surface);
}

.tk-detail-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--tk-border);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.tk-detail-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tk-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tk-text);
    line-height: 1.4;
    margin: 0 0 10px;
}

.tk-detail-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}

.tk-section {
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius);
    overflow: hidden;
}

.tk-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-text);
    background: var(--tk-bg);
    border-bottom: 1px solid var(--tk-border);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tk-section-title i { color: var(--tk-primary); }

.tk-section-body { padding: 14px 16px; }

.tk-description-view {
    line-height: 1.7;
    color: var(--tk-text);
    font-size: 14px;
}
.tk-description-view h1, .tk-description-view h2, .tk-description-view h3 { margin-top: 12px; }
.tk-description-view blockquote {
    border-left: 3px solid var(--tk-primary);
    padding-left: 12px;
    color: var(--tk-muted);
    margin: 8px 0;
}
.tk-description-view ul, .tk-description-view ol { padding-left: 20px; }
.tk-description-view p { margin: 6px 0; }

/* Report form */
.tk-report-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tk-status-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tk-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tk-transition);
    background: transparent;
}
.tk-status-btn.active-not-started { background: #f1f5f9; border-color: #94a3b8; color: #475569; }
.tk-status-btn.active-processing  { background: #fef3c7; border-color: var(--tk-warning); color: #92400e; }
.tk-status-btn.active-done        { background: #dcfce7; border-color: var(--tk-success); color: #14532d; }
.tk-status-btn:not(.active-not-started):not(.active-processing):not(.active-done):hover {
    border-color: var(--tk-primary);
    background: var(--tk-primary-light);
}

.tk-report-note {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    transition: var(--tk-transition);
    outline: none;
}
.tk-report-note:focus {
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Supervisor action area */
.tk-supervisor-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
}
.tk-supervisor-remark-input {
    width: 100%;
    min-height: 70px;
    padding: 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: var(--tk-transition);
}
.tk-supervisor-remark-input:focus {
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.tk-supervisor-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Assignee list in detail */
.tk-assignee-list-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tk-assignee-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f4f8;
    transition: var(--tk-transition);
}
.tk-assignee-row:last-child { border-bottom: none; }
.tk-assignee-row:hover { background: var(--tk-bg); }

.tk-assignee-status-indicator {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ind-not-started { background: #94a3b8; }
.ind-processing  { background: var(--tk-warning); box-shadow: 0 0 0 3px rgba(217,119,6,.2); }
.ind-done        { background: var(--tk-success); }

.tk-assignee-info-detail { flex: 1; min-width: 0; }
.tk-assignee-name-detail { font-size: 13px; font-weight: 600; }
.tk-assignee-sub { font-size: 11px; color: var(--tk-muted); margin-top: 2px; }

/* Files list in detail */
.tk-file-list-detail { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; }
.tk-file-item-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    transition: var(--tk-transition);
    background: var(--tk-bg);
}
.tk-file-item-detail:hover { border-color: var(--tk-primary); background: var(--tk-primary-light); }
.tk-file-link {
    flex: 1;
    font-size: 13px;
    color: var(--tk-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-file-link:hover { text-decoration: underline; }

/* ================================================================
   MODAL OVERLAY (for composer & detail)
   ================================================================ */
.tk-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tkFadeIn .2s ease;
}
@keyframes tkFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tk-modal {
    background: var(--tk-surface);
    border-radius: 14px;
    box-shadow: var(--tk-shadow-lg);
    width: min(860px, 95vw);
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    animation: tkSlideUp .22s cubic-bezier(.34,1.56,.64,1);
    overflow: visible; /* allow fixed overlays & native pickers to escape */
}
.tk-modal-wide { width: min(1100px, 95vw); }
@keyframes tkSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.tk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--tk-border);
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    flex-shrink: 0;
}
.tk-modal-header-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tk-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.tk-modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: #fff; cursor: pointer;
    border-radius: var(--tk-radius-sm);
    font-size: 16px;
    transition: var(--tk-transition);
}
.tk-modal-close:hover { background: var(--tk-danger-light); color: var(--tk-danger); }

.tk-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 14px;
    border-top: 1px solid var(--tk-border);
    background: var(--tk-bg);
    flex-shrink: 0;
}

/* ── Loading spinner ──────────────────────────────────────────── */
.tk-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    color: var(--tk-muted);
    font-size: 13px;
}
.tk-spinner-icon {
    width: 20px; height: 20px;
    border: 2.5px solid var(--tk-border);
    border-top-color: var(--tk-primary);
    border-radius: 50%;
    animation: tkSpin .8s linear infinite;
}
@keyframes tkSpin { to { transform: rotate(360deg); } }

/* ── Info rows ─────────────────────────────────────────────────── */
.tk-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}
.tk-info-item { display: flex; flex-direction: column; gap: 3px; }
.tk-info-label { font-size: 11px; font-weight: 600; color: var(--tk-muted); text-transform: uppercase; letter-spacing: .4px; }
.tk-info-value { font-size: 13px; font-weight: 500; color: var(--tk-text); }

/* ── Deadline warning ──────────────────────────────────────────── */
.tk-deadline-warning { color: var(--tk-danger); font-weight: 600; }
.tk-deadline-ok      { color: var(--tk-success); }

/* ── Scrollbar styling ─────────────────────────────────────────── */
.tk-list-area::-webkit-scrollbar,
.tk-composer-body::-webkit-scrollbar,
.tk-detail-body::-webkit-scrollbar { width: 6px; }
.tk-list-area::-webkit-scrollbar-thumb,
.tk-composer-body::-webkit-scrollbar-thumb,
.tk-detail-body::-webkit-scrollbar-thumb {
    background: var(--tk-border);
    border-radius: 99px;
}

/* ── Utility ──────────────────────────────────────────────────── */
.tk-flex        { display: flex; align-items: center; }
.tk-flex-gap-8  { gap: 8px; }
.tk-flex-gap-12 { gap: 12px; }
.tk-mt-8   { margin-top: 8px; }
.tk-mt-12  { margin-top: 12px; }
.tk-fw-600 { font-weight: 600; }
.tk-text-muted  { color: var(--tk-muted); }
.tk-text-sm     { font-size: 12px; }
.tk-text-danger { color: var(--tk-danger); }
.tk-w-full      { width: 100%; }

/* ================================================================
   COMPOSER SECTIONS (new card-style blocks)
   ================================================================ */
.tk-composer-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.tk-composer-section {
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius);
    overflow: visible;
    background: var(--tk-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .18s;
}
.tk-composer-section:focus-within {
    box-shadow: 0 0 0 3px rgba(37,99,235,.08);
    border-color: #bfdbfe;
}

.tk-composer-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tk-text);
    background: var(--tk-bg);
    border-bottom: 1px solid var(--tk-border);
    border-radius: var(--tk-radius) var(--tk-radius) 0 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tk-composer-section-title i { color: var(--tk-primary); font-size: 13px; }

.tk-composer-section-body { padding: 14px 16px; }

/* Accent border-left per section type */
.tk-composer-section-supervisor { border-left: 3px solid #e879f9; }
.tk-composer-section-assignees  { border-left: 3px solid var(--tk-primary); position: relative; z-index: 10; }
.tk-composer-section-files      { border-left: 3px solid var(--tk-info); }

.tk-section-count {
    background: var(--tk-primary);
    color: #fff;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.6;
}

.tk-required-star {
    color: var(--tk-danger);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* Search results dropdown */
.tk-search-results {
    border-top: 1px solid var(--tk-border);
    background: var(--tk-surface);
    max-height: 240px;
    overflow-y: auto;
    position: relative;
    z-index: 50;
}
.tk-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f4f8;
    transition: var(--tk-transition);
}
.tk-search-result-item:last-child { border-bottom: none; }
.tk-search-result-item:hover { background: var(--tk-primary-light); }

/* Avatar variants */
.avatar-supervisor { background: #9333ea !important; }
.avatar-observer   { background: #0891b2 !important; }

/* Empty hint */
.tk-empty-hint {
    padding: 16px;
    text-align: center;
    color: var(--tk-muted);
    font-size: 13px;
    font-style: italic;
}

/* File group label */
.tk-file-group-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 8px 0 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Pending file item highlight */
.tk-file-item-pending {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
}

/* Soft file link */
.tk-file-link-soft {
    color: var(--tk-text);
    text-decoration: none;
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tk-file-link-soft:hover { color: var(--tk-primary); text-decoration: underline; }

/* Alert blocks */
.tk-alert {
    padding: 10px 14px;
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tk-alert-danger {
    color: var(--tk-danger);
    background: var(--tk-danger-light);
    border: 1px solid #fecaca;
}

/* Dropzone as label */
.tk-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px dashed var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 20px;
    text-align: center;
    transition: var(--tk-transition);
    cursor: pointer;
    background: var(--tk-bg);
}
.tk-dropzone:hover {
    border-color: var(--tk-primary);
    background: var(--tk-primary-light);
}

/* ================================================================
   SUPERVISOR SECTION (detail view)
   ================================================================ */
.tk-section-supervisor {
    border-color: var(--tk-warning) !important;
    border-left: 4px solid var(--tk-warning) !important;
}

/* Executor summary table */
.tk-executor-summary {
    margin-bottom: 14px;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    overflow: hidden;
}
.tk-executor-summary-title {
    padding: 8px 12px;
    background: #fffbeb;
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.tk-executor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tk-executor-table thead tr {
    background: var(--tk-bg);
}
.tk-executor-table th {
    padding: 7px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--tk-border);
    white-space: nowrap;
}
.tk-executor-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f4f8;
    vertical-align: middle;
}
.tk-executor-table tr:last-child td { border-bottom: none; }
.tk-executor-table .row-done    td { background: #f0fdf4; }
.tk-executor-table .row-processing td { background: #fffbeb; }
.tk-executor-table .row-not-started td { background: #f8fafc; }
.tk-executor-table .row-remark td { background: #fffbeb; border-bottom: 1px solid #fde68a; }

/* ================================================================
   TASK DETAIL — REDESIGNED LAYOUT (tkd-*)
   ================================================================ */

/* ── Skeleton screen ─────────────────────────────────────── */
@keyframes tkSkeleton {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.tk-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 800px 100%;
    animation: tkSkeleton 1.4s ease-in-out infinite;
    border-radius: 6px;
}
/* Detail dialog skeleton wrapper */
.tkd-skeleton {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow: hidden;
}
/* Title bar */
.tkd-sk-title-row {
    display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
}
.tkd-sk-icon  { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.tkd-sk-title { height: 22px; width: 55%; border-radius: 8px; }
.tkd-sk-badge { height: 20px; width: 80px; border-radius: 20px; }
/* Meta row */
.tkd-sk-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.tkd-sk-meta-item { height: 16px; border-radius: 10px; }
/* Section label */
.tkd-sk-label { height: 13px; width: 120px; border-radius: 6px; margin-bottom: 8px; }
/* Description block */
.tkd-sk-desc { height: 14px; border-radius: 6px; }
/* Assignee avatars row */
.tkd-sk-assignees {
    display: flex; gap: 10px; align-items: center;
}
.tkd-sk-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.tkd-sk-ainfo  { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tkd-sk-aname  { height: 13px; width: 120px; border-radius: 6px; }
.tkd-sk-arole  { height: 11px; width: 80px; border-radius: 6px; }
/* Two-column grid */
.tkd-sk-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.tkd-sk-field { display: flex; flex-direction: column; gap: 7px; }
.tkd-sk-fl { height: 12px; width: 90px; border-radius: 6px; }
.tkd-sk-fv { height: 32px; border-radius: 8px; }
/* Comment line */
.tkd-sk-comment-row {
    display: flex; gap: 10px; align-items: flex-start;
}
.tkd-sk-comment-bubble {
    flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.tkd-sk-comment-line { height: 13px; border-radius: 6px; }

/* ── Modal shell ──────────────────────────────────────────── */
.tkd-modal {
    background: var(--tk-surface);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
    width: min(92vw, 1060px);
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: clip; /* clip thay hidden để slide panel con không bị cắt */
    position: relative;
    animation: tkSlideUp .22s cubic-bezier(.34,1.56,.64,1);
}

/* ── Modal header ─────────────────────────────────────────── */
.tkd-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
    flex-shrink: 0;
}
.tkd-modal-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.tkd-modal-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}
.tkd-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.tkd-modal-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.tkd-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.tkd-modal-header-actions .tk-btn-outline {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
.tkd-modal-header-actions .tk-btn-outline:hover {
    background: rgba(255,255,255,.22);
}
.tkd-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.18);
    color: #e0f2fe;
    border: 1px solid rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .03em;
}
.tkd-close-btn {
    width: 30px; height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background .15s;
}
.tkd-close-btn:hover { background: rgba(255,255,255,.25); }

/* ── Title section ────────────────────────────────────────── */
.tkd-title-section {
    padding: 10px 18px 9px;
    border-bottom: 1px solid var(--tk-border);
    background: #f8faff;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tkd-title-main { flex: 1; min-width: 0; }
.tkd-main-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-text);
    margin: 0 0 10px;
    line-height: 1.4;
}
.tkd-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--tk-muted);
 user-select:none;
}
.tkd-meta-row i { font-size: 11px; margin-right: 2px; color: var(--tk-primary); }

/* ── Badge "Tự quản lý" (no-supervisor) ──────────────────── */
.tkd-nosup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid #bbf7d0;
}
.tkd-nosup-badge i { color: #15803d; }

/* ── Toggle "Không cần giám sát" trong Composer ─────────── */
.tkc-nosup-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 6px;
    user-select: none;
}
.tkc-nosup-toggle input[type="checkbox"] { display: none; }
.tkc-nosup-slider {
    position: relative;
    width: 34px;
    height: 18px;
    background: #cbd5e1;
    border-radius: 20px;
    transition: background .2s;
    flex-shrink: 0;
}
.tkc-nosup-slider::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tkc-nosup-toggle input:checked ~ .tkc-nosup-slider { background: #16a34a; }
.tkc-nosup-toggle input:checked ~ .tkc-nosup-slider::after { transform: translateX(16px); }
.tkc-nosup-label { font-size: 12px; font-weight: 500; }

/* ── Two-column body ──────────────────────────────────────── */
.tkd-body {
    display: flex;
    gap: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.tkd-left {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: 1px solid var(--tk-border);
}
.tkd-right {
    width: 305px;
    flex-shrink: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--tk-bg);
}

/* ── Generic block ────────────────────────────────────────── */
.tkd-block { display: flex; flex-direction: column; gap: 8px; }
.tkd-block-label {
    font-size: 11px;
    font-weight: 700;
    color: #303F9F;
    text-transform: uppercase;
    letter-spacing: .6px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--tk-border);
}
.tkd-block-label i { color: var(--tk-primary); }
.tkd-count-badge {
    margin-left: auto;
    background: var(--tk-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Description ──────────────────────────────────────────── */
.tkd-description {
    font-size: 12px;
    line-height:16px;
    color: #000;
    min-height: 28px;
}
.tkd-description p { margin: 4px 0; }
.tkd-description ul, .tkd-description ol { padding-left: 18px; }
.tkd-description blockquote {
    border-left: 3px solid var(--tk-primary);
    padding-left: 10px;
    color: var(--tk-muted);
    margin: 6px 0;
}

/* ── Member list ──────────────────────────────────────────── */
.tkd-member-list { display: flex; flex-direction: column; gap: 6px; user-select:none; }
.tkd-member-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    transition: var(--tk-transition);
}
.tkd-member-row:hover { border-color: var(--tk-primary); background: var(--tk-primary-light); }
.tkd-status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}
.dot-pending { background: #94a3b8; }
.dot-wip     { background: var(--tk-warning); box-shadow: 0 0 0 3px rgba(217,119,6,.2); }
.dot-done    { background: var(--tk-success); }
.tkd-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tk-primary) 0%, #3b82f6 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.tkd-avatar-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
}
.tkd-member-info { flex: 1; min-width: 0; }
.tkd-member-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.tkd-member-full { font-size: 12px; font-weight: 400; color: var(--tk-muted); margin-left: 5px; }
.tkd-member-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.tkd-meta-chip {
    font-size: 11px;
    color: var(--tk-muted);
    background: var(--tk-bg);
    border: 1px solid var(--tk-border);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex; align-items: center; gap: 3px;
}
.tkd-chip-done {
    color: var(--tk-success);
    background: var(--tk-success-light);
    border-color: #bbf7d0;
}
.tkd-remark-chip {
    font-size: 11px;
    color: var(--tk-warning);
    background: var(--tk-warning-light);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex; align-items: center; gap: 3px;
}
.tkd-note-inline {
    width: 100%;
    font-size: 11px;
    color: #E64A19;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tkd-muted-text { font-size: 11px; color: var(--tk-muted); }

/* ── File grid ────────────────────────────────────────────── */
.tkd-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.tkd-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--tk-radius-sm);
    border: 1px solid var(--tk-border);
    background: var(--tk-surface);
    transition: var(--tk-transition);
    min-width: 0;
}
.tkd-file-card:hover { border-color: var(--tk-primary); box-shadow: var(--tk-shadow); }
.tkd-file-card-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.tkd-file-card-icon.icon-img  { background: #eff6ff; color: #2563eb; }
.tkd-file-card-icon.icon-office { background: #f0fdf4; color: #16a34a; }
.tkd-file-card-icon.icon-generic { background: var(--tk-bg); color: var(--tk-muted); }
.tkd-file-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.tkd-file-card-info { flex: 1; min-width: 0; }
.tkd-file-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tkd-file-card-size { font-size: 11px; color: var(--tk-muted); margin-top: 2px; }
.tkd-file-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.tkd-file-action-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--tk-border);
    background: var(--tk-surface);
    color: var(--tk-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: var(--tk-transition);
    text-decoration: none;
}
.tkd-file-action-btn:hover { background: var(--tk-primary); border-color: var(--tk-primary); color: #fff; }

/* ── Right panels ─────────────────────────────────────────── */
.tkd-panel {
    border-radius: var(--tk-radius);
    border: 1.5px solid var(--tk-border);
    overflow: auto;
    background: var(--tk-surface);
}
.tkd-panel-report    { border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.tkd-panel-supervisor { border-color: var(--tk-warning); box-shadow: 0 0 0 3px rgba(217,119,6,.07); }
.tkd-panel-reset     { border-color: var(--tk-info);    box-shadow: 0 0 0 3px rgba(8,145,178,.07); }
.tkd-panel-closed-summary { border-color: #6b7280; box-shadow: 0 0 0 3px rgba(107,114,128,.07); }
.tkd-panel-closed-summary .tkd-panel-header { background: #f1f5f9; color: #374151; }

/* Summary rows */
.tkd-summary-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--tk-border);
}
.tkd-summary-row:last-child { border-bottom: none; }
.tkd-summary-row > i { font-size: 15px; color: #6b7280; margin-top: 2px; flex-shrink: 0; }
.tkd-summary-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.tkd-summary-value { font-size: 13px; font-weight: 600; color: #1e293b; }
.tkd-overdue { color: var(--tk-danger) !important; }
.tkd-ontime  { color: var(--tk-success) !important; }
.tkd-badge-late {
    font-size: 10px; font-weight: 700; padding: 1px 6px;
    background: #fee2e2; color: #dc2626; border-radius: 10px; margin-left: 5px;
}
.tkd-badge-ok {
    font-size: 10px; font-weight: 700; padding: 1px 6px;
    background: #dcfce7; color: #16a34a; border-radius: 10px; margin-left: 5px;
}
.tkd-summary-bar-wrap {
    height: 5px; background: #e2e8f0; border-radius: 4px; margin-top: 5px; overflow: hidden;
}
.tkd-summary-bar {
    height: 100%; background: var(--tk-success); border-radius: 4px;
    transition: width .4s ease;
    min-width: 4px;
}
.tkd-summary-stars {
    display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 2px;
}
.tkd-summary-score {
    font-size: 12px; font-weight: 800; color: #92400e;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 8px; padding: 1px 7px; margin-left: 4px;
}
.tkd-summary-score-label {
    font-size: 11px; color: #78350f; font-weight: 600; margin-left: 2px;
}
.tkd-summary-remark {
    padding: 8px 10px; background: #f8fafc;
    border: 1px solid var(--tk-border); border-radius: 8px;
}
.tkd-summary-remark-text {
    font-size: 13px; color: #374151; margin-top: 4px; line-height: 1.5;
    white-space: pre-wrap;
}

.tkd-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--tk-bg);
    border-bottom: 1px solid var(--tk-border);
}
.tkd-panel-report .tkd-panel-header    { background: var(--tk-primary-light); color: var(--tk-primary); }
.tkd-panel-supervisor .tkd-panel-header { background: var(--tk-warning-light); color: #92400e; }
.tkd-panel-reset .tkd-panel-header     { background: var(--tk-info-light);    color: var(--tk-info); }

.tkd-panel-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Report: locked state ─────────────────────────────────── */
.tkd-report-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--tk-text);
}

/* ── Report form ──────────────────────────────────────────── */
.tkd-field { display: flex; flex-direction: column; gap: 4px; }
.tkd-field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tk-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex; align-items: center; gap: 4px;
}
.tkd-required-badge {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--tk-danger-light);
    color: var(--tk-danger);
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
}
.tkd-status-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tkd-st-btn {
    flex: 1;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 8px;
    border: 2px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tk-transition);
    background: transparent;
    white-space: nowrap;
    color: var(--tk-muted);
}
.tkd-st-btn:hover  { border-color: var(--tk-primary); background: var(--tk-primary-light); color: var(--tk-primary); }
.tkd-st-btn.st-pending { background: #f1f5f9; border-color: #94a3b8; color: #475569; }
.tkd-st-btn.st-wip     { background: #fef3c7; border-color: var(--tk-warning); color: #92400e; }
.tkd-st-btn.st-done    { background: #dcfce7; border-color: var(--tk-success); color: #14532d; }

.tkd-textarea {
    width: 100%;
    min-height: 74px;
    padding: 8px 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: var(--tk-transition);
    background: var(--tk-surface);
}
.tkd-textarea:focus { border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.tkd-submit-btn { width: 100%; justify-content: center; }

.tkd-error {
    font-size: 12px;
    color: var(--tk-danger);
    display: flex; align-items: center; gap: 5px;
}

/* ── Supervisor action buttons ────────────────────────────── */
.tkd-supervisor-actions {
    display: flex;
    gap: 8px;
}
.tkd-supervisor-actions .tk-btn { flex: 1; justify-content: center; }

/* ── Deadline chips ───────────────────────────────────────── */
.tk-deadline-warning {
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.tk-deadline-ok      { color: #fff;  display: flex; align-items: center; gap: 4px; font-size: 12px;}

/* ── Empty state ──────────────────────────────────────────── */
.tkd-empty-state {
    padding: 48px;
    text-align: center;
    color: var(--tk-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.tkd-empty-state i { font-size: 36px; }
.tkd-empty-state p { font-size: 14px; margin: 0; }

/* ── FILE PREVIEW OVERLAY ─────────────────────────────────── */
.tkd-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.tkd-preview-box {
    background: var(--tk-surface);
    border-radius: var(--tk-radius);
    box-shadow: var(--tk-shadow-lg);
    width: min(96vw, 960px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tkd-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tk-border);
    background: var(--tk-bg);
    flex-shrink: 0;
}
.tkd-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tkd-preview-title i { color: var(--tk-primary); font-size: 16px; flex-shrink: 0; }
.tkd-preview-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 200px;
    background: #f1f5f9;
}
.tkd-preview-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--tk-radius-sm);
    box-shadow: var(--tk-shadow-md);
}
.tkd-preview-iframe {
    width: 100%;
    height: 70vh;
    border: none;
    border-radius: var(--tk-radius-sm);
}
.tkd-preview-office-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px;
    text-align: center;
    color: var(--tk-muted);
    font-size: 13px;
}
.tkd-preview-office-note p { margin: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 700px) {
    .tkd-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
    .tkd-body { flex-direction: column; }
    .tkd-left { border-right: none; border-bottom: 1px solid var(--tk-border); }
    .tkd-right { width: 100%; }
    .tkd-file-grid { grid-template-columns: 1fr; }
    .tkd-modal-header-actions .tk-btn-outline span { display: none; }
}

/* ── Legacy: keep old header-strip names for any other refs ── */
.tkd-header-strip { display: none; }
.tkd-title        { display: none; }
/* ================================================================
   TASK COMPOSER — Redesigned compact layout (tkc-*)
   ================================================================ */

/* ── Header ───────────────────────────────────────────────── */
.tkc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
    flex-shrink: 0;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
    border-radius: 10px 10px 0px 0px;
}
.tkc-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
}
.tkc-header-left i { color: #fff; font-size: 18px; }
.tkc-header .tk-code-badge {
    background: rgba(255,255,255,.18);
    color: #e0f2fe;
    border: 1px solid rgba(255,255,255,.3);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}
.tkc-header .tk-modal-close {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s;
    flex-shrink: 0;
}
.tkc-header .tk-modal-close:hover { background: rgba(255,255,255,.3); }

/* ── Body ─────────────────────────────────────────────────── */
.tkc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Footer ───────────────────────────────────────────────── */
.tkc-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border-top: 1px solid var(--tk-border);
    flex-shrink: 0;
    background: #f8fafc;
    border-radius: 0px 0px 12px 12px;
}
.tkc-footer .tk-btn { min-width: 100px; font-weight: 600; }
.tkc-footer .tk-btn-primary {
    background: linear-gradient(135deg,#1d4ed8,#2563eb);
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.tkc-footer .tk-btn-primary:hover { background: linear-gradient(135deg,#1e40af,#1d4ed8); box-shadow: 0 4px 12px rgba(37,99,235,.4); }
.tkc-footer .tk-btn-outline { border-color: #cbd5e1; color: #64748b; }
.tkc-footer .tk-btn-outline:hover { border-color: #94a3b8; background: #f1f5f9; }

/* ── Generic field wrap ───────────────────────────────────── */
.tkc-field-wrap { display: flex; flex-direction: column; gap: 5px; }

.tkc-label {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tkc-label i { color: #1d4ed8; font-size: 11px; }
.tkc-label.required::after { content: ' *'; color: var(--tk-danger); }

.tkc-required-star { color: var(--tk-danger); font-weight: 700; }

/* ── Crew selector in task composer ─────────────────────── */
.tkc-crew-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    border: 0px solid #a5f3fc;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all .18s ease;
}
.tkc-crew-chip:hover { border-color: #0891b2; background: #cffafe; }
.tkc-crew-chip-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    border: 2px solid #67e8f9;
    box-shadow: 0 1px 4px rgba(8,145,178,.18);
}
.tkc-crew-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkc-crew-chip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tkc-crew-chip-code { font-size: 11.5px; font-weight: 700; color: #0e7490; }
.tkc-crew-chip-name { font-size: 13px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tkc-crew-rank {
    background: #0891b2;
    color: #fff; border-radius: 4px;
    padding: 1px 6px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.tkc-crew-chip-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.tkc-crew-chip-meta span { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #64748b; }
.tkc-crew-chip-meta i { font-size: 10.5px; color: #94a3b8; }
.tkc-crew-chip-remove { color: #0891b2; font-size: 14px; flex-shrink: 0; margin-left: auto; opacity: .7; }
.tkc-crew-chip:hover .tkc-crew-chip-remove { opacity: 1; }

/* Dropdown kết quả crew search */
.tkc-crew-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--tk-surface);
    border: 1.5px solid var(--tk-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--tk-shadow-lg);
    z-index: 1100;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.tkc-crew-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .13s;
    border-bottom: 1px solid var(--tk-border);
}
.tkc-crew-item:last-child { border-bottom: none; }
.tkc-crew-item:hover { background: #ecfeff; }
.tkc-crew-item-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    flex-shrink: 0; border: 1.5px solid #a5f3fc;
}
.tkc-crew-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkc-crew-item-meta { flex: 1; min-width: 0; }
.tkc-crew-item-code { font-size: 12px; font-weight: 700; color: #0e7490; display: flex; align-items: center; gap: 5px; }
.tkc-crew-item-name { font-size: 13px; color: #1e293b; font-weight: 500; margin-top: 1px; }
/* Highlight search keyword */
mark.tkc-hl { background: #fef08a; color: #dc2626; font-weight: 700; border-radius: 2px; padding: 0 1px; }
.tkc-crew-item-info { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tkc-crew-item-info span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #64748b; }
.tkc-crew-item-info i { color: #94a3b8; font-size: 10px; }
.tkc-crew-item-ship { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tkc-crew-item-ship span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #0369a1; }
.tkc-crew-item-ship i { color: #7dd3fc; font-size: 10px; }
.tkc-crew-status {
    display: inline-flex; align-items: center;
    border-radius: 4px; padding: 0 5px;
    font-size: 10.5px; letter-spacing: .2px;
    margin-left: 3px;
}

.tkc-input {
    padding: 8px 10px;
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: var(--tk-transition);
    background: var(--tk-surface);
    color: var(--tk-text);
}
.tkc-input:focus { border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* datetime-local: modern look */
.tkc-input[type="datetime-local"] {
    color-scheme: light;
}

/* ── Select ───────────────────────────────────────────────── */
.tkc-select-wrap { position: relative; display: flex; align-items: center; }
.tkc-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 32px 8px 10px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 100%;
    background: #fff;
    color: var(--tk-text);
    transition: all .18s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.tkc-select:hover { border-color: #94a3b8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.tkc-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.tkc-sel-arrow {
    position: absolute;
    right: 10px;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
    transition: color .15s;
}
.tkc-select-wrap:hover .tkc-sel-arrow { color: #64748b; }

/* ── Title + Category row ─────────────────────────────────── */
.tkc-title-cat-row {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    gap: 12px;
    align-items: start;
}
.tkc-title-field { min-width: 0; }
.tkc-cat-field   { min-width: 0; }

/* ── Supervisor label + toggle row ───────────────────────── */
.tkc-sup-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* Toggle + input/chip cùng 1 hàng */
.tkc-sup-oneline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.tkc-nosup-self-label {
    font-size: 12px;
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.tkc-sup-oneline .tkc-supervisor-inline { flex: 1; min-width: 0; }
.tkc-sup-oneline .tkc-sup-chip-replace  { flex: 1; min-width: 0; }
.tkc-sup-oneline .tkc-usr-input-wrap    { flex: 1; min-width: 0; }

/* ── 3-column row ─────────────────────────────────────────── */
.tkc-row3 {
    display: grid;
    grid-template-columns: 1fr 200px 0.5fr;
    gap: 12px;
    align-items: start;
}

/* 4-col row: category | priority | deadline | supervisor */
.tkc-row4 {
    display: grid;
    grid-template-columns: 160px 1fr 190px 220px;
    gap: 12px;
    align-items: start;
}

/* ── Priority group ───────────────────────────────────────── */
.tkc-priority-group { display: flex; gap: 5px; flex-wrap: wrap; }
.tkc-prio-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    width:130px;
    letter-spacing:1px;
    text-align:center !important;
    display:inline-block;
    border: 1.5px solid var(--tk-border);
    border:0px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    background: var(--tk-surface);
    color: #64748b;
    white-space: nowrap;
    position: relative;
}
.tkc-prio-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.1); }

/* ── Khẩn cấp: đỏ đậm ── */
.tkc-prio-btn.tkc-prio-kncp,
.tkc-prio-btn[data-prio="1"] { border-color: #f43f5e; color: #e11d48; background: #fff1f2; }
.tkc-prio-btn.tkc-prio-kncp:hover,
.tkc-prio-btn[data-prio="1"]:hover { background: #ffe4e6; border-color: #e11d48; }
.tkc-prio-btn.tkc-prio-active[data-prio="1"] {
    background: #e11d48;
    border-color: #be123c; color: #fff;
    box-shadow: 0 2px 8px rgba(225,29,72,.35);
}
/* ── Cao: cam ── */
.tkc-prio-btn.tkc-prio-cao,
.tkc-prio-btn[data-prio="2"] { border-color: #f97316; color: #ea580c; background: #fff7ed; }
.tkc-prio-btn.tkc-prio-cao:hover,
.tkc-prio-btn[data-prio="2"]:hover { background: #ffedd5; border-color: #ea580c; }
.tkc-prio-btn.tkc-prio-active[data-prio="2"] {
    background: #ea580c;
    border-color: #c2410c; color: #fff;
    box-shadow: 0 2px 8px rgba(234,88,12,.35);
}
/* ── Trung bình: xanh ── */
.tkc-prio-btn[data-prio="3"] { border-color: #3b82f6; color: #1d4ed8; background: #eff6ff; }
.tkc-prio-btn[data-prio="3"]:hover { background: #dbeafe; border-color: #1d4ed8; }
.tkc-prio-btn.tkc-prio-active[data-prio="3"] {
    background: #2563eb;
    border-color: #1d4ed8; color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
/* ── Thấp: xanh lá ── */
.tkc-prio-btn[data-prio="4"] { border-color: #22c55e; color: #15803d; background: #f0fdf4; }
.tkc-prio-btn[data-prio="4"]:hover { background: #dcfce7; border-color: #16a34a; }
.tkc-prio-btn.tkc-prio-active[data-prio="4"] {
    background: #16a34a;
    border-color: #15803d; color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,.35);
}
/* Fallback active */
.tkc-prio-btn.tkc-prio-active { border-color: var(--tk-primary); background: var(--tk-primary-light); color: var(--tk-primary); }

/* Native tooltip via title attr + custom enhancement */
.tkc-tooltip { cursor: help; }
.tkc-prio-btn .tkc-prio-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e293b;
    color: #f8fafc;
    font-size: 11.5px;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1200;
    box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
    line-height: 1.4;
    border: 1px solid rgba(255,255,255,.08);
}
/* Tooltip button đầu tiên: căn trái để không bị cắt */
.tkc-prio-btn:first-child .tkc-prio-tooltip { left: 0; transform: translateY(4px); }
.tkc-prio-btn:first-child:hover .tkc-prio-tooltip { visibility: visible; opacity: 1; transform: translateY(0); }
.tkc-prio-btn:first-child .tkc-prio-tooltip::after { left: 16px; transform: none; }
/* Tooltip button thứ hai: căn trái nhẹ */
.tkc-prio-btn:nth-child(2) .tkc-prio-tooltip { left: 0; transform: translateY(4px); }
.tkc-prio-btn:nth-child(2):hover .tkc-prio-tooltip { visibility: visible; opacity: 1; transform: translateY(0); }
.tkc-prio-btn:nth-child(2) .tkc-prio-tooltip::after { left: 20px; transform: none; }
/* Màu tooltip theo priority */
.tkc-prio-btn[data-prio="1"] .tkc-prio-tooltip { background: #7f1d1d; border-color: #f43f5e; box-shadow: 0 8px 24px rgba(225,29,72,.35); }
.tkc-prio-btn[data-prio="2"] .tkc-prio-tooltip { background: #7c2d12; border-color: #f97316; box-shadow: 0 8px 24px rgba(234,88,12,.35); }
.tkc-prio-btn[data-prio="3"] .tkc-prio-tooltip { background: #1e3a8a; border-color: #3b82f6; box-shadow: 0 8px 24px rgba(37,99,235,.35); }
.tkc-prio-btn[data-prio="4"] .tkc-prio-tooltip { background: #14532d; border-color: #22c55e; box-shadow: 0 8px 24px rgba(22,163,74,.35); }
.tkc-prio-btn .tkc-prio-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}
.tkc-prio-btn[data-prio="1"] .tkc-prio-tooltip::after { border-top-color: #7f1d1d; }
.tkc-prio-btn[data-prio="2"] .tkc-prio-tooltip::after { border-top-color: #7c2d12; }
.tkc-prio-btn[data-prio="3"] .tkc-prio-tooltip::after { border-top-color: #1e3a8a; }
.tkc-prio-btn[data-prio="4"] .tkc-prio-tooltip::after { border-top-color: #14532d; }
.tkc-prio-btn:hover .tkc-prio-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── RTE ──────────────────────────────────────────────────── */
.tkc-rte {
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    overflow: hidden;
    transition: var(--tk-transition);
}
.tkc-rte:focus-within { border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.tkc-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px;
    padding: 5px 8px;
    background: #f8fafc;
    border-bottom: 1px solid var(--tk-border);
}
.tkc-rte-sep { width: 1px; height: 16px; background: var(--tk-border); margin: 0 3px; }

.tkc-rte .rteBtn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    color: var(--tk-text-secondary);
    transition: var(--tk-transition);
    padding: 0;
}
.tkc-rte .rteBtn:hover { background: var(--tk-primary-light); color: var(--tk-primary); }
.tkc-rte .rteBtn.active { background: var(--tk-primary); color: #fff; }

.tkc-rte-content {
    min-height: 160px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.7;
    outline: none;
    color: var(--tk-text);
}
/* rteContent is the JS-expected class; alias styles here */
.tkc-rte .rteContent {
    min-height: 160px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.7;
    outline: none;
    color: var(--tk-text);
}
.tkc-rte-content:empty::before,
.tkc-rte .rteContent:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}
.tkc-rte-content p { margin: 4px 0; }
.tkc-rte-content blockquote { border-left: 3px solid var(--tk-primary); padding-left: 10px; margin: 6px 0; color: var(--tk-muted); }
.tkc-rte-content ul, .tkc-rte-content ol { padding-left: 20px; }

/* ── 2-column row (supervisor + assignees) ───────────────── */
.tkc-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

/* ── Panels ───────────────────────────────────────────────── */
.tkc-panel {
    border: 1.5px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    overflow: visible; /* allow dropdown to escape panel bounds */
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.tkc-panel-supervisor { border-color: var(--tk-warning); }
.tkc-panel-assignees  { min-height:135px; }

.tkc-panel-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--tk-bg);
    border-bottom: 1px solid var(--tk-border);
    user-select: none;
}
.tkc-panel-supervisor .tkc-panel-label { background: var(--tk-warning-light); color: #92400e; }
.tkc-panel-assignees  .tkc-panel-label { background: var(--tk-primary-light); color: var(--tk-primary); }
.tkc-panel-crew .tkc-panel-label {
    background: #E0F2F1;
    color: #00796B;
    border-color: #a5f3fc;
    user-select: none;
}
.tkc-panel-crew {overflow: visible; min-height:135px; }
.tkc-panel-label i { font-size: 11px; }

/* ── Row: Assignees + Crew side by side ─────────────────── */
.tkc-row-assignees-crew {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.tkc-col-assignees { flex: 3; min-width: 0; }
.tkc-col-crew      { flex: 2; min-width: 0; position: relative; }

/* Crew panel body padding */
.tkc-panel-crew .tkc-crew-chip,
.tkc-panel-crew .tkc-usr-input-wrap { margin: 8px 10px; }
.tkc-panel-crew .tkc-crew-dropdown  { left: 10px; right: 10px; }

.tkc-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tk-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* ── User search input ────────────────────────────────────── */
.tkc-user-search-wrap { padding: 8px; position: relative; }
.tkc-assignee-search-row { display: flex; gap: 6px; padding: 8px; align-items: center; }

.tkc-usr-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tkc-usr-icon {
    position: absolute;
    left: 9px;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}
.tkc-usr-input {
    width: 100%;
    padding: 7px 28px 7px 28px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: all .18s ease;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.tkc-usr-input:hover { border-color: #94a3b8; }
.tkc-usr-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.tkc-usr-clear {
    position: absolute;
    right: 7px;
    background: none; border: none;
    color: #94a3b8; cursor: pointer; font-size: 12px;
    padding: 2px;
    line-height: 1;
    display: flex; align-items: center;
    border-radius: 50%;
    transition: all .15s;
}
.tkc-usr-clear:hover { color: var(--tk-danger); background: #fee2e2; }

/* Role pill toggle (replaces native select) */
.tkc-role-toggle {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.tkc-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid #cbd5e1;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.tkc-role-pill:hover {
    border-color: #3b82f6;
    color: #1d4ed8;
    background: #eff6ff;
}
.tkc-role-pill.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
.tkc-role-pill.active i { color: #fff; }

/* ── Dropdown ─────────────────────────────────────────────── */
/* Overlay dropdown (JS-positioned fixed, escapes all overflow clips) */
.tkc-usr-dropdown {
    border: 1.5px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(37,99,235,.15);
    animation: tkDropIn .15s ease-out;
}
.tkc-drop-overlay {
    position: fixed !important;
    z-index: 99999 !important;
    min-width: 260px;
}
/* Legacy fixed class kept for back-compat */
.tkc-usr-dropdown-fixed {
    position: fixed;
    z-index: 99999;
    border: 1.5px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(37,99,235,.15);
    min-width: 260px;
    animation: tkDropIn .15s ease-out;
}
@keyframes tkDropIn {
    from { opacity:0; transform: translateY(-6px) scale(.98); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.tkc-usr-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .12s ease;
    border-bottom: 1px solid #f1f5f9;
}
.tkc-usr-item:last-child { border-bottom: none; }
.tkc-usr-item:hover { background: #eff6ff; }
.tkc-usr-item:hover .tkc-usr-name { color: #1d4ed8; }

/* ── Custom category / select dropdown ───────────────────── */
/* ── Category dropdown backdrop (đóng khi click ngoài) ───── */
.tkc-cat-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: transparent;
    cursor: default;
}

.tkc-csel-wrap { position: relative; }
.tkc-csel-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: var(--tk-text);
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    text-align: left;
}
.tkc-csel-btn:hover  { border-color: #94a3b8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.tkc-csel-btn.open   { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.tkc-csel-btn .tkc-csel-arrow { font-size: 10px; color: #94a3b8; transition: transform .2s; flex-shrink: 0; }
.tkc-csel-btn.open .tkc-csel-arrow { transform: rotate(180deg); color: #3b82f6; }
.tkc-csel-placeholder { color: #94a3b8; }
.tkc-csel-dropdown {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1.5px solid #dbeafe;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(37,99,235,.13);
    overflow-y: auto;
    max-height: 260px;
    animation: tkDropIn .15s ease-out;
    min-width: 180px;
}
.tkc-csel-option {
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--tk-text);
    transition: background .12s;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tkc-csel-option:last-child { border-bottom: none; }
.tkc-csel-option:hover { background: #eff6ff; color: #1d4ed8; }
.tkc-csel-option.selected { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.tkc-csel-option .tkc-csel-check { font-size: 12px; color: #3b82f6; margin-left: auto; }

/* ── Custom datetime trigger button ──────────────────────── */
.tkc-dt-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: var(--tk-text);
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    text-align: left;
}
.tkc-dt-btn:hover { border-color: #94a3b8; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.tkc-dt-btn.has-value { border-color: #93c5fd; background: #eff6ff; }
.tkc-dt-btn .tkc-dt-icon { color: #64748b; font-size: 13px; flex-shrink: 0; }
.tkc-dt-btn .tkc-dt-value { flex: 1; }
.tkc-dt-btn .tkc-dt-clear {
    font-size: 11px; color: #94a3b8; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; transition: all .15s; line-height: 1;
    border: none; background: none;
}
.tkc-dt-btn .tkc-dt-clear:hover { background: #fee2e2; color: #ef4444; }

/* ── Date picker popup ────────────────────────────────────── */
.tkc-dp-popup {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border: 1.5px solid #dbeafe;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 16px rgba(37,99,235,.12);
    padding: 0;
    width: 280px;
    font-family: inherit;
    animation: tkDropIn .18s ease-out;
    overflow: hidden;
}
.tkc-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(135deg,#1e40af,#3b82f6);
    color: #fff;
}
.tkc-dp-month-label { font-size: 13px; font-weight: 700; letter-spacing: .3px; }
.tkc-dp-nav {
    background: rgba(255,255,255,.18);
    border: none;
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    padding: 0;
}
.tkc-dp-nav:hover { background: rgba(255,255,255,.35); }
.tkc-dp-cal {
    width: 100%;
    border-collapse: collapse;
    padding: 4px 8px;
    display: table;
}
.tkc-dp-cal th {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    padding: 6px 0 4px;
    letter-spacing: .5px;
}
.tkc-dp-day {
    text-align: center;
    padding: 5px 0;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    color: var(--tk-text);
    transition: all .12s;
    width: 36px;
}
.tkc-dp-day:hover:not(.other) { background: #dbeafe; color: #1d4ed8; }
.tkc-dp-day.other { color: #cbd5e1; cursor: default; }
.tkc-dp-day.today { font-weight: 700; color: #2563eb; }
.tkc-dp-day.selected { background: linear-gradient(135deg,#2563eb,#3b82f6) !important; color: #fff !important; border-radius: 8px; box-shadow: 0 2px 8px rgba(37,99,235,.35); }
.tkc-dp-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.tkc-dp-time-sel {
    padding: 4px 8px;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #1e40af;
    background: #eff6ff;
    cursor: pointer;
    outline: none;
    width: 56px;
    text-align: center;
}
.tkc-dp-time-sel:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.tkc-dp-time-colon { font-size: 16px; font-weight: 700; color: #64748b; }
.tkc-dp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #f1f5f9;
}
.tkc-dp-btn-ghost {
    padding: 5px 10px;
    border: 1.5px solid #cbd5e1;
    border-radius: 7px;
    background: transparent;
    font-size: 12px;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.tkc-dp-btn-ghost:hover { background: #f1f5f9; border-color: #94a3b8; color: #475569; }
.tkc-dp-btn-ok {
    padding: 5px 14px;
    border: none;
    border-radius: 7px;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.tkc-dp-btn-ok:hover { box-shadow: 0 4px 14px rgba(37,99,235,.45); transform: translateY(-1px); }



.tkc-usr-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#3b82f6,#1d4ed8);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59,130,246,.3);
}
.tkc-usr-avatar-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.tkc-usr-meta { flex: 1; min-width: 0; }
.tkc-usr-name { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--tk-text); }
.tkc-usr-full { font-size: 11px; font-weight: 400; color: #64748b; margin-left: 4px; }
.tkc-usr-dept {
    font-size: 11px; color: #64748b; margin-top: 2px;
    display: flex; align-items: center; gap: 3px;
    background: #f1f5f9; border-radius: 4px;
    padding: 1px 5px; display: inline-flex;
}
.tkc-usr-dept i { font-size: 9px; color: #94a3b8; }

.tkc-add-role-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.tkc-add-role-tag.role-executor { background: #eff6ff; color: var(--tk-primary); border: 1px solid var(--tk-primary); }
.tkc-add-role-tag.role-observer { background: #f0fdf4; color: #15803d; border: 1px solid #22c55e; }

/* ── Selected chips ───────────────────────────────────────── */
.tkc-selected-chip, .tkc-member-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin: 0 8px 8px;
    border-radius: var(--tk-radius-sm);
    border: 1px solid var(--tk-border);
    background: var(--tk-bg);
}
.tkc-member-chips { display: flex; flex-direction: column; gap: 0; }
.tkc-member-chip { margin: 0; border-radius: 0; border-bottom: 1px solid var(--tk-border); border-left: none; border-right: none; border-top: none; }
.tkc-member-chip:last-child { border-bottom: none; }
.tkc-member-chip:hover { background: var(--tk-primary-light); }

/* ── Role buttons inside assignee dropdown item ───────────── */
.tkc-usr-item-pick { cursor: default; gap: 8px; }
.tkc-item-role-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.tkc-item-role-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.tkc-item-role-btn.role-executor {
    background: #eff6ff; color: var(--tk-primary); border-color: #bfdbfe;
}
.tkc-item-role-btn.role-executor:hover {
    background: var(--tk-primary); color: #fff; box-shadow: 0 2px 6px rgba(59,130,246,.3);
}
.tkc-item-role-btn.role-observer {
    background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
}
.tkc-item-role-btn.role-observer:hover {
    background: #22c55e; color: #fff; box-shadow: 0 2px 6px rgba(34,197,94,.3);
}

/* ── Assignee search row (simplified, no role toggle) ─────── */
.tkc-assignee-search-row { display: flex; gap: 8px; padding: 8px 10px 4px; align-items: center; }
.tkc-assignee-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
}
.tkc-assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px 4px 5px;
    border-radius: 999px;
    border: 1.5px solid var(--tk-border);
    border:0px;
    background: var(--tk-bg);
    font-size: 12px;
    transition: box-shadow .15s, border-color .15s;
    min-width: 0;
}
.tkc-assignee-chip:hover { box-shadow: 0 2px 8px rgba(59,130,246,.15); border-color: var(--tk-primary); }
.tkc-assignee-chip.chip-executor { border-color: #bfdbfe; background: #eff6ff; }
.tkc-assignee-chip.chip-observer { border-color: #bbf7d0; background: #f0fdf4; }

.tkc-chip-sm-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.tkc-chip-sm-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--tk-primary); color: #fff;
    font-size: 10px; font-weight: 700;
}
.tkc-chip-sm-initials.avatar-observer { background: #22c55e; }

.tkc-chip-sm-body {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.tkc-chip-sm-name {
    font-size: 12px;
    font-weight: 600;
    color: #C2185B;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tkc-chip-sm-role {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    white-space: nowrap;
}
.tkc-chip-sm-role.role-executor { background: #dbeafe; color: var(--tk-primary); }
.tkc-chip-sm-role.role-observer  { background: #dcfce7; color: #15803d; }

/* ── Supervisor inline (compact 1 row) ───────────────────── */
.tkc-supervisor-inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.tkc-supervisor-input-wrap { border-radius: var(--tk-radius-sm); }

.tkc-sup-mini-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 5px;
    border-radius: 999px;
    border: 1.5px solid var(--tk-warning);
    background: var(--tk-warning-light);
    width: fit-content;
    max-width: 100%;
}

/* Chip thay thế input supervisor khi đã chọn — chiếm đúng chiều cao input */
.tkc-sup-chip-replace {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    border-radius: var(--tk-radius-sm);
    border: 1.5px solid var(--tk-warning);
    background: var(--tk-warning-light);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
    width: 100%;
    min-height: 34px;
}
.tkc-sup-chip-replace:hover {
    box-shadow: 0 2px 8px rgba(234,179,8,.25);
    border-color: #ca8a04;
}
.tkc-sup-mini-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.tkc-sup-mini-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--tk-warning); color: #fff;
    font-size: 10px; font-weight: 700;
}
.tkc-sup-mini-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.tkc-sup-mini-name {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.tkc-sup-mini-dept {
    font-size: 10px;
    color: #b45309;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.tkc-sup-mini-icon {
    font-size: 11px;
    color: #92400e;
    flex-shrink: 0;
    margin-left: 2px;
}

.tkc-chip-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--tk-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.tkc-chip-avatar.avatar-observer { background: #22c55e; }
.tkc-chip-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.tkc-chip-info { flex: 1; min-width: 0; }
.tkc-chip-name { font-size: 13px; font-weight: 600; display: block; line-height: 1.2; }
.tkc-chip-full { font-size: 11px; color: var(--tk-muted); }

.tkc-role-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tkc-role-tag.role-executor  { background: #eff6ff; color: var(--tk-primary); border: 1px solid var(--tk-primary); }
.tkc-role-tag.role-observer  { background: #f0fdf4; color: #15803d; border: 1px solid #22c55e; }
.tkc-role-tag.role-supervisor{ background: var(--tk-warning-light); color: #92400e; border: 1px solid var(--tk-warning); }

.tkc-chip-remove {
    background: none; border: none;
    color: var(--tk-muted); cursor: pointer; font-size: 12px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--tk-transition);
}
.tkc-chip-remove:hover { background: #fee2e2; color: var(--tk-danger); }

.tkc-empty-hint {
    padding: 12px;
    font-size: 12px;
    color: #9E9E9E;
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
    text-align: center;
    width: 100%;
    display: inline-block;
    letter-spacing: 1px;
    user-select:none;
}
.tkc-hint-text { font-size: 12px; color: var(--tk-muted); padding: 6px 10px 8px; display: flex; align-items: center; gap: 5px; }

/* ── Dropzone ─────────────────────────────────────────────── */
.tkc-dropzone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px dashed var(--tk-border);
    border-radius: var(--tk-radius-sm);
    cursor: pointer;
    transition: var(--tk-transition);
    background: var(--tk-bg);
    font-size: 13px;
    color: var(--tk-text-secondary);
}
.tkc-dropzone:hover { border-color: var(--tk-primary); background: var(--tk-primary-light); }
.tkc-dropzone span { line-height: 1.4; }

/* ── File list ────────────────────────────────────────────── */
.tkc-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tkc-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius-sm);
    background: var(--tk-surface);
    font-size: 12px;
}
.tkc-file-item:hover { border-color: var(--tk-primary); }
.tkc-file-pending { border-style: dashed; }
.tkc-file-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--tk-primary); text-decoration: none;
}
.tkc-file-size { color: var(--tk-muted); font-size: 11px; white-space: nowrap; }

/* ── Error bar ────────────────────────────────────────────── */
.tkc-error-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--tk-radius-sm);
    color: var(--tk-danger);
    font-size: 13px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
    .tkc-row4 { grid-template-columns: 1fr 1fr; }
    .tkc-title-cat-row { grid-template-columns: 1fr; }
    .tkc-row3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .tkc-row4 { grid-template-columns: 1fr; }
    .tkc-row3 { grid-template-columns: 1fr; }
    .tkc-title-cat-row { grid-template-columns: 1fr; }
    .tkc-row2 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   TASK COMMENT — SLIDE PANEL + CONTENT
   ═══════════════════════════════════════════════════════════════ */

/* ── FAB trigger button ─────────────────────────────────────── */
.tkd-cmt-fab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px 7px 12px;
    border-radius: 20px;
    border: 1.5px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.tkd-cmt-fab i { font-size: 15px; }
.tkd-cmt-fab:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 3px 10px rgba(37,99,235,.28);
}
.tkd-cmt-fab.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 3px 12px rgba(29,78,216,.32);
}
.tkd-cmt-fab-badge {
    position: absolute;
    top: -8px; right: -8px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ── Backdrop ───────────────────────────────────────────────── */
.tkd-cmt-panel-backdrop {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(15,23,42,.22);
    border-radius: inherit;
    animation: tkCmtFadeIn .2s ease;
}
@keyframes tkCmtFadeIn { from { opacity:0 } to { opacity:1 } }

/* ── Slide panel ────────────────────────────────────────────── */
.tkd-cmt-slide-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 860px;
    max-width: 96%;
 
    background: #fff;
    border-left: 1.5px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 30;
    box-shadow: -6px 0 32px rgba(15,23,42,.14);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
    .tkd-cmt-slide-panel.open {
        transform: translateX(0);
        margin: 10px;
    }

/* ── Panel header ───────────────────────────────────────────── */
.tkd-cmt-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1.5px solid #e2e8f0;
    background: linear-gradient(135deg,#f0f5ff 0%,#f8fafc 100%);
    flex-shrink: 0;
}
.tkd-cmt-panel-head > i { color: #3b82f6; font-size: 16px; }
.tkd-cmt-panel-close {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 7px;
    color: #94a3b8; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.tkd-cmt-panel-close:hover { background: #fee2e2; color: #ef4444; }

/* ── Drawer wrapper inside panel ───────────────────────────── */
.tkd-cmt-slide-panel .tkd-comment-drawer {
    flex: 1;
    overflow-y: auto;
    max-height: none;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f6f8fc;
    border-top: none;
}
.tkd-cmt-slide-panel .tkd-comment-drawer::-webkit-scrollbar { width: 5px; }
.tkd-cmt-slide-panel .tkd-comment-drawer::-webkit-scrollbar-track { background: transparent; }
.tkd-cmt-slide-panel .tkd-comment-drawer::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Compose box ────────────────────────────────────────────── */
.tkd-cmt-compose {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.tkd-cmt-compose-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg,#3b82f6,#6366f1);
    color: #fff;
    font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(59,130,246,.3);
}
.tkd-cmt-compose-body {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px;
}
.tkd-cmt-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.tkd-cmt-file-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1.5px dashed #cbd5e1;
    font-size: 12px; color: #64748b;
    cursor: pointer;
    background: #f8fafc;
    transition: border-color .15s, color .15s, background .15s;
}
.tkd-cmt-file-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

/* ── Pending files ──────────────────────────────────────────── */
.tkd-cmt-pending-files { display: flex; flex-wrap: wrap; gap: 5px; }
.tkd-cmt-pfile {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 9px;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11.5px; color: #475569;
    max-width: 230px;
}
.tkd-cmt-pfile > i { color: #3b82f6; flex-shrink:0; }
.tkd-cmt-pfile > span:first-of-type { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.tkd-cmt-pfile.marked-remove { opacity:.4; text-decoration:line-through; background:#fee2e2; }
.tkd-cmt-pfile.new-file { background:#eff6ff; border-color:#bfdbfe; }
.tkd-cmt-pfile-size { color:#94a3b8; font-size:10.5px; white-space:nowrap; }
.tkd-cmt-pfile-remove { background:none; border:none; cursor:pointer; color:#94a3b8; padding:0 2px; line-height:1; flex-shrink:0; }
.tkd-cmt-pfile-remove:hover { color:#ef4444; }

/* ── Empty state ────────────────────────────────────────────── */
.tkd-cmt-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 40px 20px;
    color: #94a3b8; font-size: 13px; text-align: center;
}
.tkd-cmt-empty > i { font-size: 38px; opacity: .4; color: #3b82f6; }

/* ── Comment item ───────────────────────────────────────────── */
.tkd-cmt-item {
    display: flex; gap: 10px; align-items: flex-start;
    animation: tkCmtIn .18s ease;
}
@keyframes tkCmtIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

.tkd-cmt-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#64748b,#94a3b8);
    color: #fff;
    font-weight: 700; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.tkd-cmt-item.cmt-mine .tkd-cmt-avatar {
    background: linear-gradient(135deg,#3b82f6,#6366f1);
    box-shadow: 0 1px 6px rgba(59,130,246,.3);
}

/* Bubble */
.tkd-cmt-bubble {
    flex: 1;
    background: #fff;
    border: 1.5px solid #e8edf4;
    border-radius: 4px 12px 12px 12px;
    padding: 10px 13px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    position: relative;
}
.tkd-cmt-item.cmt-mine .tkd-cmt-bubble {
    background: #eff6ff;
    border-color: #bfdbfe;
    border-radius: 12px 4px 12px 12px;
}
.tkd-cmt-bubble:hover { border-color: #93c5fd; }

/* Meta */
.tkd-cmt-meta {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap; margin-bottom: 5px;
}
.tkd-cmt-author { font-weight: 700; font-size: 12.5px; color: #1e293b; }
.tkd-cmt-fullname {
    font-size: 11px; color: #64748b;
    padding: 1px 6px; background: #f1f5f9; border-radius: 10px;
}
.tkd-cmt-time { font-size: 10.5px; color: #94a3b8; display: flex; align-items: center; gap: 3px; }
.tkd-cmt-edited { font-style:italic; font-size:10px; color:#b0bec5; background:#f8fafc; padding:1px 5px; border-radius:4px; }

/* Actions (visible on hover) */
.tkd-cmt-actions { margin-left:auto; display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.tkd-cmt-bubble:hover .tkd-cmt-actions { opacity:1; }
.tkd-cmt-action-btn {
    background:none; border:none; cursor:pointer;
    width:26px; height:26px; border-radius:6px;
    color:#94a3b8; font-size:12px;
    display:flex; align-items:center; justify-content:center;
    transition:background .12s, color .12s;
}
.tkd-cmt-action-btn:hover { background:#e0e7ff; color:#4f46e5; }
.tkd-cmt-delete-btn:hover { color:#ef4444; background:#fee2e2; }

/* Rich text content */
.tkd-cmt-content {
    font-size: 13px; line-height: 1.65; color: #334155;
    word-break: break-word;
}
.tkd-cmt-content p { margin: 0 0 3px; }
.tkd-cmt-content ul, .tkd-cmt-content ol { margin: 2px 0 2px 18px; padding: 0; }
.tkd-cmt-content blockquote {
    margin: 4px 0; padding: 4px 10px;
    border-left: 3px solid #3b82f6;
    background: #f0f5ff; border-radius: 4px;
    color: #475569; font-style: italic;
}
.tkd-cmt-content a { color: #3b82f6; text-decoration: underline; }

/* Attachment file chips */
.tkd-cmt-files { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.tkd-cmt-file-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 6px 4px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11.5px; color: #475569;
    max-width: 240px;
    transition: border-color .12s, background .12s;
}
.tkd-cmt-file-chip:hover { border-color: #93c5fd; background: #eff6ff; }
.tkd-cmt-file-chip > i { color: #3b82f6; flex-shrink: 0; }
.tkd-cmt-file-chip-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tkd-cmt-file-chip-size { color:#94a3b8; font-size:10.5px; white-space:nowrap; }

/* Edit wrap */
.tkd-cmt-edit-wrap {
    display: flex; flex-direction: column; gap: 8px;
    background: #f0f7ff;
    border-radius: 10px;
    padding: 10px;
    border: 1.5px solid #bfdbfe;
}
.tkd-cmt-edit-files { display:flex; flex-wrap:wrap; gap:5px; }
.tkd-cmt-edit-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px dashed #bfdbfe;
}

/* Responsive */
@media (max-width: 640px) {
    .tkd-cmt-slide-panel { width: 100%; border-radius: 0; }
    .tkd-cmt-fab span { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   DlgConfirm — Custom confirm dialog
   ══════════════════════════════════════════════════════════════ */
.dlgcf-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tkFadeIn .18s ease;
}
.dlgcf-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.1);
    width: min(440px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: tkSlideUp .2s cubic-bezier(.34,1.56,.64,1);
    overflow: hidden;
}
.dlgcf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 12px;
    font-size: 2.4rem;
    color: #f59e0b;
}
.dlgcf-content {
    padding: 0 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dlgcf-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.dlgcf-message {
    font-size: .9rem;
    color: #475569;
    line-height: 1.55;
}
.dlgcf-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    justify-content: flex-end;
}
.dlgcf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .15s;
}
.dlgcf-btn-cancel {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.dlgcf-btn-cancel:hover { background: #e2e8f0; color: #334155; }
.dlgcf-btn-confirm {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
}
.dlgcf-btn-confirm:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    box-shadow: 0 4px 12px rgba(220,38,38,.4);
}

/* ── Star Rating (Supervisor) ─────────────────────────────── */
.tkd-optional-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 500; padding: 1px 6px;
    border-radius: 20px; margin-left: 6px;
    background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd;
    text-transform: uppercase; letter-spacing: .4px;
}
.tkd-star-group {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 6px 0;
}
.tkd-star-btn {
    background: none; border: none; cursor: pointer;
    padding: 2px 3px; border-radius: 4px;
    font-size: 22px; line-height: 1;
    transition: transform .15s ease, color .15s ease;
    color: #cbd5e1;
}
.tkd-star-btn:hover, .tkd-star-btn.star-filled { color: #f59e0b; transform: scale(1.15); }
.tkd-star-btn.star-filled { color: #f59e0b; }
.tkd-star-btn.star-empty:hover { color: #fbbf24; }
.tkd-star-label {
    font-size: 13px; font-weight: 700; color: #92400e;
    background: #fef3c7; border: 1px solid #fde68a;
    padding: 2px 8px; border-radius: 12px; margin-left: 4px;
}
.tkd-star-clear {
    background: none; border: none; cursor: pointer;
    padding: 2px 5px; border-radius: 50%; color: #94a3b8;
    font-size: 12px; transition: background .15s;
}
.tkd-star-clear:hover { background: #fee2e2; color: #ef4444; }

/* Rating chip hiển thị trong assignee list */
.tkd-rating-chip {
    display: inline-flex; align-items: center; gap: 2px;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 12px; padding: 2px 8px;
    font-size: 11px; color: #b45309;
    margin-left: 4px;
}
.tkd-rating-chip i { font-size: 10px; color: #f59e0b; }
.tkd-rating-chip span { font-weight: 700; margin-left: 4px; color: #92400e; }

.tkd-inline-eval-header {
    font-size: 12px; font-weight: 700; color: #78350f;
    display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
}
.tkd-inline-eval-entry {
    padding: 6px 0 4px; border-top: 1px dashed #fde68a;
    display: flex; flex-direction: column; gap: 3px;
}
.tkd-inline-eval-entry:first-child { border-top: none; padding-top: 0; }
.tkd-inline-eval-executor-name {
    font-size: 12px; font-weight: 600; color: #374151;
    display: flex; align-items: center; gap: 4px;
}
.tkd-inline-eval-executor-name i { color: #6b7280; }
.tkd-member-row-closed { background: #fffbeb; border-radius: 8px; }
.tkd-inline-eval {
    margin-top: 6px; padding: 8px 10px;
    background: linear-gradient(135deg, #fffbeb, #fef9ee);
    border: 1px solid #fde68a; border-radius: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.tkd-inline-eval-stars {
    display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
}
.tkd-inline-eval-stars i { font-size: 14px; color: #f59e0b; }
.tkd-inline-eval-stars i.fa-regular { color: #d1d5db; }
.tkd-inline-eval-score {
    font-size: 12px; font-weight: 800; color: #92400e;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 8px; padding: 1px 7px; margin-left: 5px;
}
.tkd-inline-eval-label {
    font-size: 11px; font-weight: 600; color: #78350f; margin-left: 4px;
}
.tkd-inline-eval-remark {
    font-size: 12px; color: #374151; display: flex; gap: 5px; align-items: flex-start;
    line-height: 1.4;
}
.tkd-inline-eval-remark i { color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
.tkd-inline-eval-time {
    font-size: 11px; color: #92400e; display: flex; gap: 4px; align-items: center;
}
.tkd-inline-eval-time i { color: #f59e0b; }
.tkd-eval-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9ee 100%);
    border: 1px solid #fde68a; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px;
}
.tkd-eval-card:last-child { margin-bottom: 0; }
.tkd-eval-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.tkd-avatar-sm {
    width: 28px; height: 28px; min-width: 28px;
    font-size: 12px; line-height: 28px;
}
.tkd-eval-user { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tkd-eval-username { font-size: 13px; font-weight: 700; color: #1e293b; }
.tkd-eval-fullname { font-size: 11px; color: #64748b; }
.tkd-eval-time {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: #92400e;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 8px; padding: 2px 8px; white-space: nowrap;
}
.tkd-eval-stars {
    display: flex; align-items: center; gap: 3px; margin-bottom: 8px;
}
.tkd-eval-star { font-size: 16px; color: #f59e0b; }
.tkd-eval-star.fa-regular { color: #d1d5db; }
.tkd-eval-score {
    font-size: 13px; font-weight: 800; color: #92400e;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 10px; padding: 1px 8px; margin-left: 6px;
}
.tkd-eval-score-label {
    font-size: 12px; color: #78350f; font-weight: 600; margin-left: 4px;
}
.tkd-eval-remark {
    display: flex; gap: 6px; align-items: flex-start;
    font-size: 13px; color: #374151; line-height: 1.5;
    background: #fff; border: 1px solid #fde68a;
    border-radius: 8px; padding: 8px 10px; margin-top: 4px;
}
.tkd-eval-remark i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }



/* ═══════════════════════════════════════════════════
   LOG HISTORY POPUP  (.tklog-*)
   ═══════════════════════════════════════════════════ */
.tkd-log-btn { color: #6366f1; border-color: #c7d2fe; }
.tkd-log-btn:hover { background: #eef2ff; color: #4f46e5; }

.tklog-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 23, 42, 0.35);
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 12px;
}
.tklog-panel {
    width: 420px; max-width: 100%; height: calc(100vh - 24px);
    background: #ffffff; border-radius: 14px;
    box-shadow: 0 8px 32px rgba(30,41,59,.18), 0 1.5px 6px rgba(99,102,241,.08);
    display: flex; flex-direction: column; overflow: hidden;
    animation: tklog-slide-in .18s ease;
}
@keyframes tklog-slide-in { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
.tklog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px; border-bottom: 1.5px solid #e2e8f0;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-radius: 14px 14px 0 0;
}
.tklog-header-left { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:#fff; }
.tklog-header-left i { font-size:15px; color:#c7d2fe; }
.tklog-code { background:rgba(255,255,255,.2); color:#fff; border-radius:20px; padding:2px 10px; font-size:11.5px; font-weight:500; }
.tklog-header .tkd-close-btn { color:#e0e7ff; }
.tklog-header .tkd-close-btn:hover { background:rgba(255,255,255,.18); color:#fff; }
.tklog-body { flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c7d2fe #f8fafc; }
.tklog-summary-bar { display:flex; gap:16px; flex-wrap:wrap; padding:10px 16px; background:#f8fafc; border-bottom:1px solid #e2e8f0; font-size:12px; color:#64748b; }
.tklog-summary-bar i { color:#6366f1; margin-right:4px; }
.tklog-timeline { padding:12px 16px; display:flex; flex-direction:column; }
.tklog-item { display:flex; gap:12px; padding-bottom:16px; position:relative; }
.tklog-item:not(:last-child)::after { content:''; position:absolute; left:7px; top:18px; width:2px; bottom:0; background:#e2e8f0; }
.tklog-item-latest .tklog-dot { background:#6366f1; box-shadow:0 0 0 3px #c7d2fe; }
.tklog-dot { width:16px; height:16px; border-radius:50%; background:#94a3b8; flex-shrink:0; margin-top:2px; position:relative; z-index:1; }
.tklog-content { flex:1; min-width:0; }
.tklog-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.tklog-action { background:#ede9fe; color:#6d28d9; border-radius:20px; padding:2px 9px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.tklog-item-latest .tklog-action { background:#e0e7ff; color:#4338ca; }
.tklog-time { font-size:11.5px; color:#94a3b8; display:flex; align-items:center; gap:4px; }
.tklog-time i { color:#c7d2fe; }
.tklog-user { font-size:12.5px; color:#475569; display:flex; align-items:center; gap:5px; margin-bottom:3px; }
.tklog-user i { color:#6366f1; font-size:12px; }
.tklog-username { color:#94a3b8; font-size:11.5px; }
.tklog-message { font-size:12.5px; color:#334155; line-height:1.5; background:#f1f5f9; border-radius:8px; padding:6px 10px; margin-top:2px; word-break:break-word; }
.tklog-empty, .tklog-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#94a3b8; padding:60px 20px; font-size:13px; }
.tklog-empty i, .tklog-loading i { font-size:28px; color:#c7d2fe; }

/* ═══════════════════════════════════════════════════
   PRIORITY-THEMED MODAL BORDER  (.tkd-modal--p* / .tk-modal--p*)
   ═══════════════════════════════════════════════════ */
.tkd-modal--p1 { border: 2px solid #f43f5e; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #fda4af; }
.tkd-modal--p2 { border: 2px solid #f97316; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #fdba74; }
.tkd-modal--p3 { border: 2px solid #3b82f6; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #93c5fd; }
.tkd-modal--p4 { border: 2px solid #22c55e; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #86efac; }
/* Composer (tk-modal--p*) */
.tk-modal--p1 { border: 2px solid #f43f5e; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #fda4af; }
.tk-modal--p2 { border: 2px solid #f97316; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #fdba74; }
.tk-modal--p3 { border: 2px solid #3b82f6; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #93c5fd; }
.tk-modal--p4 { border: 2px solid #22c55e; box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 0 0 1px #86efac; }

/* ═══════════════════════════════════════════════════
   PRIORITY-THEMED SUBMIT / ACTION BUTTONS
   ═══════════════════════════════════════════════════ */
/* Nút Gửi báo cáo */
.tkd-submit-btn--p1 { background: #e11d48 !important; border-color: #be123c !important; box-shadow: 0 2px 6px rgba(225,29,72,.3) !important; }
.tkd-submit-btn--p1:hover { background: #be123c !important; }
.tkd-submit-btn--p2 { background: #ea580c !important; border-color: #c2410c !important; box-shadow: 0 2px 6px rgba(234,88,12,.3) !important; }
.tkd-submit-btn--p2:hover { background: #c2410c !important; }
.tkd-submit-btn--p3 { background: #2563eb !important; border-color: #1d4ed8 !important; box-shadow: 0 2px 6px rgba(37,99,235,.3) !important; }
.tkd-submit-btn--p3:hover { background: #1d4ed8 !important; }
.tkd-submit-btn--p4 { background: #16a34a !important; border-color: #15803d !important; box-shadow: 0 2px 6px rgba(22,163,74,.3) !important; }
.tkd-submit-btn--p4:hover { background: #15803d !important; }

/* Footer nút Tạo/Cập nhật trong Composer */
.tkc-footer--p1 .tk-btn-primary { background: linear-gradient(135deg,#f43f5e,#fb7185) !important; border-color: #f43f5e !important; box-shadow: 0 2px 8px rgba(244,63,94,.35) !important; }
.tkc-footer--p1 .tk-btn-primary:hover { background: linear-gradient(135deg,#e11d48,#f43f5e) !important; }
.tkc-footer--p2 .tk-btn-primary { background: #ea580c !important; border-color: #c2410c !important; box-shadow: 0 2px 6px rgba(234,88,12,.3) !important; }
.tkc-footer--p2 .tk-btn-primary:hover { background: #c2410c !important; }
.tkc-footer--p3 .tk-btn-primary { background: #2563eb !important; border-color: #1d4ed8 !important; box-shadow: 0 2px 6px rgba(37,99,235,.3) !important; }
.tkc-footer--p3 .tk-btn-primary:hover { background: #1d4ed8 !important; }
.tkc-footer--p4 .tk-btn-primary { background: #16a34a !important; border-color: #15803d !important; box-shadow: 0 2px 6px rgba(22,163,74,.3) !important; }
.tkc-footer--p4 .tk-btn-primary:hover { background: #15803d !important; }

/* Panel report border theo priority */
.tkd-panel-report--p1 { border-color: #f43f5e !important; box-shadow: 0 0 0 2px rgba(225,29,72,.1) !important; }
.tkd-panel-report--p1 .tkd-panel-header { background: #fff1f2 !important; color: #e11d48 !important; }
.tkd-panel-report--p2 { border-color: #f97316 !important; box-shadow: 0 0 0 2px rgba(234,88,12,.1) !important; }
.tkd-panel-report--p2 .tkd-panel-header { background: #fff7ed !important; color: #ea580c !important; }
.tkd-panel-report--p3 { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(37,99,235,.1) !important; }
.tkd-panel-report--p3 .tkd-panel-header { background: #eff6ff !important; color: #1d4ed8 !important; }
.tkd-panel-report--p4 { border-color: #22c55e !important; box-shadow: 0 0 0 2px rgba(22,163,74,.1) !important; }
.tkd-panel-report--p4 .tkd-panel-header { background: #f0fdf4 !important; color: #15803d !important; }
.tkd-modal-header--p1 { background: #e11d48; box-shadow: 0 2px 8px rgba(225,29,72,.3); border-bottom: 3px solid #be123c; }
.tkd-modal-header--p2 { background: #ea580c; box-shadow: 0 2px 8px rgba(234,88,12,.3); border-bottom: 3px solid #c2410c; }
.tkd-modal-header--p3 { background: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,.3); border-bottom: 3px solid #1d4ed8; }
.tkd-modal-header--p4 { background: #16a34a; box-shadow: 0 2px 8px rgba(22,163,74,.3); border-bottom: 3px solid #15803d; }
.tkc-header--p1 { background: #e11d48; box-shadow: 0 2px 8px rgba(225,29,72,.3); border-bottom: 3px solid #be123c; }
.tkc-header--p2 { background: #ea580c; box-shadow: 0 2px 8px rgba(234,88,12,.3); border-bottom: 3px solid #c2410c; }
.tkc-header--p3 { background: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,.3); border-bottom: 3px solid #1d4ed8; }
.tkc-header--p4 { background: #16a34a; box-shadow: 0 2px 8px rgba(22,163,74,.3); border-bottom: 3px solid #15803d; }