/* Taskify v2 design-system fonts (Inter + JetBrains Mono), used by the
   new shell chrome and the global search palette. Must precede all rules. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================================
   CSS VARIABLES & ROOT STYLES
   ============================================================================ */
:root {
    /* Bootstrap Color Variables */
    --bs-blue: #007bff;
    --bs-indigo: #6610f2;
    --bs-purple: #696cff;
    --bs-pink: #e83e8c;
    --bs-red: #ff3e1d;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffab00;
    --bs-green: #71dd37;
    --bs-teal: #20c997;
    --bs-cyan: #03c3ec;
    --bs-white: #fff;
    --bs-gray: rgba(67, 89, 113, 0.6);
    --bs-gray-dark: rgba(67, 89, 113, 0.8);
    --bs-gray-25: rgba(67, 89, 113, 0.025);
    --bs-gray-50: rgba(67, 89, 113, 0.05);

    /* Theme Colors */
    --bs-primary: #696cff;
    --bs-secondary: #8592a3;
    --bs-success: #71dd37;
    --bs-info: #03c3ec;
    --bs-warning: #ffab00;
    --bs-danger: #ff3e1d;
    --bs-light: #fcfdfd;
    --bs-dark: #233446;

    /* RGB Values */
    --bs-primary-rgb: 105, 108, 255;
    --bs-secondary-rgb: 133, 146, 163;
    --bs-success-rgb: 113, 221, 55;
    --bs-info-rgb: 3, 195, 236;
    --bs-warning-rgb: 255, 171, 0;
    --bs-danger-rgb: 255, 62, 29;
    --bs-light-rgb: 252, 253, 253;
    --bs-dark-rgb: 35, 52, 70;
    --bs-gray-rgb: 67, 89, 113;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 67, 89, 113;
    --bs-body-color-rgb: 105, 122, 141;
    --bs-body-bg-rgb: 245, 245, 249;

    /* Typography */
    --bs-font-sans-serif: "Plus Jakarta Sans", "Segoe UI", Roboto, sans-serif;
    --bs-font-monospace: "JetBrains Mono", "Fira Code", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-root-font-size: 16px;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.53;
    --bs-body-color: #697a8d;
    --bs-body-bg: #f5f5f9;

    /* Shadow Values */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */
.striked {
    text-decoration: line-through;
}

.asterisk {
    color: red;
    font-weight: bold;
}

.cursor-default {
    cursor: default;
}

.text-decoration-none {
    text-decoration: none;
}



/* Hide/Show Classes */
.tox-notification {
    display: none !important;
}

.tomselected {
    display: none !important;
}

.bx.bx-search {
    display: none;
}

@media screen and (min-width: 884px) {
    .bx.bx-search {
        display: inline-block;
    }
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */
@media (min-width: 768px) {

    .icon-only,
    .language-name {
        display: inline;
    }

    .hide-mobile {
        display: inline;
    }

    .show-mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    .icon-only {
        display: inline;
    }

    .language-name {
        display: none;
    }

    .demo-mode {
        display: none;
    }

    .nav-item .nav-mobile-hidden {
        display: none;
    }
}

@media (min-width: 769px) {
    .demo-mode-icon-only i {
        display: none;
    }
}

/* ============================================================================
   LAYOUT COMPONENTS
   ============================================================================ */
.installer-div {
    max-width: 1000px !important;
}

/* Menu Container */
@media (max-width: 768px) {
    .menu-container {
        max-height: calc(100vh - 50px) !important;
        overflow-y: auto !important;
    }
}


/* ============================================================================
   FLOATING ACTION BUTTONS & ICONS
   ============================================================================ */
.timer-img,
.chat-img,
.embed-icon {
    width: 54px !important;
    border-radius: 50px;
    cursor: pointer;
    position: fixed;
    bottom: 0.7rem;
    z-index: 1086;
    transition: transform 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.timer-img {
    width: 55px !important;
    right: 1.625rem;
}

.chat-img,
.embed-icon {
    padding: 10px;
    background-color: #ffffff;
}

.chat-img {
    right: 6.625rem;
}

.embed-icon {
    right: 11.625rem;
}

.timer-img:hover,
.chat-img:hover,
.embed-icon:hover {
    transform: translateY(-5px);
}

/* Chat Container */
.chat-iframe-container {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 10px;
    width: 350px;
    height: 500px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 999998;
}

.chat-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* ============================================================================
   STOPWATCH COMPONENT
   ============================================================================ */
.stopwatch {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 0.75rem;
}

.stopwatch_time {
    text-align: center;
    margin: 0;
    flex: 1;
    min-width: 0;
    max-width: 120px;
}

.stopwatch_time_input {
    padding: 1em 0.75em !important;
    text-align: center !important;
    border-radius: 5px !important;
    border-color: #6c757d !important;
    background: #6c757d !important;
    color: #ffffff !important;
    font-size: 3em !important;
    font-weight: bold;
    width: 100%;
    min-width: 0;
    line-height: 1.2;
    box-sizing: border-box;
}

.stopwatch_time_lable {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selectgroup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.selectgroup-item {
    margin: 0;
}

.selectgroup-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #e4e6fc;
    border-radius: 50%;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    transition: all 0.3s ease;
    font-size: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.selectgroup-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.selectgroup-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

#start[disabled],
#end[disabled],
#pause[disabled] {
    background: none !important;
    color: var(--bs-gray) !important;
}

#stopTimerModal {
    z-index: 1100;
}

/* Responsive styles for Time Tracker Modal */
@media (max-width: 768px) {
    #timerModal .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    .stopwatch {
        margin-bottom: 1.5rem;
        gap: 0.5rem;
    }

    .stopwatch_time {
        margin: 0 0.25rem;
        flex: 1;
        min-width: 0;
    }

    .stopwatch_time_input {
        font-size: 2.25em !important;
        padding: 0.875em 0.5em !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .stopwatch_time_lable {
        font-size: 0.75rem;
        margin-top: 0.5rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .selectgroup {
        gap: 0.75rem;
        justify-content: center;
    }

    .selectgroup-item {
        margin: 0;
    }

    .selectgroup-button {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
    }
}

@media (max-width: 576px) {
    #timerModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    #timerModal .modal-content {
        border-radius: 0.5rem;
    }

    #timerModal .modal-header {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }

    #timerModal .modal-title {
        font-size: 1rem;
        font-weight: 600;
    }

    #timerModal .modal-body {
        padding: 1.25rem 1rem;
    }

    #timerModal .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    #timerModal .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    .stopwatch {
        margin-bottom: 1.25rem;
        gap: 0.375rem;
        flex-wrap: nowrap;
    }

    .stopwatch_time {
        margin: 0 0.125rem;
        flex: 1;
        min-width: 0;
    }

    .stopwatch_time_input {
        font-size: 1.75em !important;
        padding: 0.75em 0.375em !important;
        width: 100%;
        min-width: 0;
        line-height: 1.2;
    }

    .stopwatch_time_lable {
        font-size: 0.6875rem;
        margin-top: 0.375rem;
        font-weight: 500;
        letter-spacing: 0.01em;
    }

    .selectgroup {
        gap: 0.5rem;
        margin-top: 1rem !important;
        justify-content: center;
    }

    .selectgroup-item {
        margin: 0;
    }

    .selectgroup-button {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    #timerModal .form-group {
        margin-top: 1.25rem !important;
    }

    #timerModal .form-group .label {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    #timerModal textarea.form-control {
        font-size: 0.875rem;
        padding: 0.625rem;
        min-height: 80px;
    }
}

@media (max-width: 375px) {
    .stopwatch_time_input {
        font-size: 1.5em !important;
        padding: 0.625em 0.25em !important;
    }

    .stopwatch_time_lable {
        font-size: 0.625rem;
    }

    .selectgroup-button {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
    }
}

/* ============================================================================
   INVOICE & DROPDOWN COMPONENTS
   ============================================================================ */
.invoice-detail-item {
    margin-bottom: 15px;
}

.invoice-detail-name {
    letter-spacing: 0.3px;
    color: #98a6ad;
    margin-bottom: 4px;
}

.invoice-detail-value {
    font-size: 18px;
    color: #34395e;
    font-weight: 700;
}

.dropdown-header-highlighted {
    font-size: 1.2rem;
    font-weight: bold;
    color: #718193;
    padding: 0.532rem 1.25rem !important;
    min-width: 358px;
}

.dropdown-item .bx {
    margin: auto;
}

/* Language Dropdown */
.language-dropdown {
    min-width: auto !important;
    width: auto !important;
}

#languageDropdown {
    max-height: 300px;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */
.country-code-input {
    max-width: 80px;
}

/* Column Widths */
.status-column {
    min-width: 250px;
}

.priority-column {
    min-width: 200px;
}

.fixed-width-select {
    width: 200px;
}

.ms-2 {
    margin-left: 0.5rem;
}

.update-users-clients {
    margin-left: 5px;
}

/* Clear Input Button */
.clear-input {
    position: absolute;
    right: 14px;
    top: 44%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    font-size: 20px;
}

/* ============================================================================
   SELECT2 CUSTOMIZATION - SNEAT STANDARD
   ============================================================================ */

/* Z-Index Management */
.select2-close-mask {
    z-index: 2099 !important;
}

.select2-dropdown {
    z-index: 3051 !important;
}

/* ============================================================================
   BASE SELECT2 CONTAINER
   ============================================================================ */
.select2-container {
    max-width: 100% !important;
}

/* ============================================================================
   SINGLE SELECT STYLING
   ============================================================================ */
.select2-container--default .select2-selection--single {
    height: calc(1.375em + 1.086rem + 2px) !important;
    padding: 0.543rem 0.9375rem !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
    color: #697a8d !important;
    background-color: #fff !important;
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Selection rendered text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.375 !important;
    color: #697a8d !important;
}

/* Placeholder text */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #a1acb8 !important;
}

/* Clear button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 1.3rem !important;
    color: #697a8d !important;
}

/* Arrow icon */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.375em + 1.086rem) !important;
    right: 0.9375rem !important;
    top: 1px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #697a8d transparent transparent transparent !important;
    border-width: 6px 4px 0 4px !important;
}

/* Open state arrow */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #697a8d transparent !important;
    border-width: 0 4px 6px 4px !important;
}

/* ============================================================================
   MULTIPLE SELECT STYLING
   ============================================================================ */
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.375em + 1.086rem + 2px) !important;
    padding: 0.3rem 0.9375rem !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
    color: #697a8d !important;
    background-color: #fff !important;
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Selected choice tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #696cff !important;
    border: 1px solid #696cff !important;
    color: #fff !important;
    padding: 0.15rem 0.5rem !important;
    margin: 0.15rem 0.3rem 0.15rem 0 !important;
    border-radius: 0.25rem !important;
    font-size: 0.8125rem !important;
}

/* Choice tag text */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

/* Remove button on choice tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 0.25rem !important;
    border: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
    opacity: 0.8;
}

/* Search field inside multiple select */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    margin: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0.15rem 0 !important;
    padding: 0 !important;
    height: calc(1.375em) !important;
    line-height: 1.375 !important;
    font-size: 0.9375rem !important;
    color: #697a8d !important;
}

/* Clear button for multiple select */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-right: 0.5rem !important;
    margin-top: 0.5rem !important;
    color: #697a8d !important;
}

/* ============================================================================
   FOCUS & HOVER STATES
   ============================================================================ */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #696cff !important;
    border-width: 2px !important;
    padding: calc(0.543rem - 1px) calc(0.9375rem - 1px) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4) !important;
    outline: 0 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #696cff !important;
    border-width: 2px !important;
    padding: calc(0.3rem - 1px) calc(0.9375rem - 1px) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4) !important;
    outline: 0 !important;
}

/* ============================================================================
   DISABLED STATE
   ============================================================================ */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #ebeef0 !important;
    cursor: not-allowed !important;
    border-color: #d9dee3 !important;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none !important;
}

/* ============================================================================
   DROPDOWN STYLING
   ============================================================================ */
.select2-dropdown {
    background-color: #fff !important;
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
    margin-top: 0.125rem !important;
}

/* Search field in dropdown */
.select2-search--dropdown {
    padding: 0.5rem !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    padding: 0.543rem 0.9375rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.375 !important;
    color: #697a8d !important;
    background-color: #fff !important;
    outline: 0 !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #696cff !important;
    border-width: 2px !important;
    padding: calc(0.543rem - 1px) calc(0.9375rem - 1px) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4) !important;
}

/* Results container */
.select2-results {
    display: block !important;
}

.select2-results__options {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dropdown options */
.select2-container--default .select2-results__option {
    padding: 0.532rem 1rem !important;
    font-size: 0.9375rem !important;
    color: #697a8d !important;
    background-color: transparent !important;
    cursor: pointer !important;
}

/* Selected option in dropdown */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(105, 108, 255, 0.08) !important;
    color: #696cff !important;
}

/* Highlighted/hovered option */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(105, 108, 255, 0.08) !important;
    color: #696cff !important;
}

/* Disabled option */
.select2-container--default .select2-results__option--disabled {
    color: #a1acb8 !important;
    cursor: not-allowed !important;
}

/* Group label */
.select2-container--default .select2-results__group {
    cursor: default !important;
    display: block !important;
    padding: 0.532rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #566a7f !important;
    text-transform: uppercase !important;
}

/* ============================================================================
   GLOBAL SEARCH SELECT2 (Custom Override)
   ============================================================================ */
#global-search+.select2-container--default .select2-selection--single {
    width: 300px !important;
}

#global-search+.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

@media (max-width: 768px) {
    #global-search+.select2-container--default .select2-selection--single {
        width: 100px !important;
    }
}

/* ============================================================================
   CUSTOM SELECT2 CLASSES
   ============================================================================ */

/* Custom search styling */
.custom-select2 .select2-search--dropdown {
    padding: 0.5rem !important;
}

.custom-select2 .select2-search--dropdown .select2-search__field {
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    padding: 0.543rem 0.9375rem !important;
    line-height: 1.375 !important;
}

/* Select Background Label Classes */
.select-bg-label-success .select2-selection--single,
.select-bg-label-success .select2-selection--multiple {
    color: #71dd37 !important;
    background-color: #e8fadf !important;
    border-color: #e8fadf !important;
}

.select-bg-label-success {
    color: #71dd37 !important;
    background-color: #e8fadf !important;
    border-color: #e8fadf !important;
}


.select-bg-label-primary .select2-selection--single,
.select-bg-label-primary .select2-selection--multiple {
    color: #696cff !important;
    background-color: #e7e7ff !important;
    border-color: #e7e7ff !important;
}

.select-bg-label-primary {
    color: #696cff !important;
    background-color: #e7e7ff !important;
    border-color: #e7e7ff !important;
}



.select-bg-label-secondary .select2-selection--single,
.select-bg-label-secondary .select2-selection--multiple {
    color: #8592a3 !important;
    background-color: #ebeef0 !important;
    border-color: #ebeef0 !important;
}

.select-bg-label-secondary {
    color: #8592a3 !important;
    background-color: #ebeef0 !important;
    border-color: #ebeef0 !important;
}




.select-bg-label-danger .select2-selection--single,
.select-bg-label-danger .select2-selection--multiple {
    color: #ff3e1d !important;
    background-color: #ffe0db !important;
    border-color: #ffe0db !important;
}

.select-bg-label-danger {
    color: #ff3e1d !important;
    background-color: #ffe0db !important;
    border-color: #ffe0db !important;
}

.select-bg-label-warning .select2-selection--single,
.select-bg-label-warning .select2-selection--multiple {
    color: #ffab00 !important;
    background-color: #fff2d6 !important;
    border-color: #fff2d6 !important;
}

.select-bg-label-warning {
    color: #ffab00 !important;
    background-color: #fff2d6 !important;
    border-color: #fff2d6 !important;
}

.select-bg-label-info .select2-selection--single,
.select-bg-label-info .select2-selection--multiple {
    color: #03c3ec !important;
    background-color: #d7f5fc !important;
    border-color: #d7f5fc !important;
}

.select-bg-label-info {
    color: #03c3ec !important;
    background-color: #d7f5fc !important;
    border-color: #d7f5fc !important;
}

.select-bg-label-dark .select2-selection--single,
.select-bg-label-dark .select2-selection--multiple {
    color: #233446 !important;
    background-color: #dcdfe1 !important;
    border-color: #dcdfe1 !important;
}

.select-bg-label-dark {
    color: #233446 !important;
    background-color: #dcdfe1 !important;
    border-color: #dcdfe1 !important;
}

/* ============================================================================
   FORM CONTROL FOCUS BEHAVIOR - SNEAT STANDARD
   ============================================================================ */
/* Ensure form controls match Sneat's 2px border focus behavior */
.form-control:not(.iti__tel-input):not(#phone):focus {
    border-width: 2px !important;
    padding-block: calc(0.543rem - 1px) !important;
    padding-inline: calc(0.9375rem - 1px) !important;
}

/* ============================================================================
   INPUT GROUP STYLING - SNEAT STANDARD
   ============================================================================ */
/* Input Group Text (prefix/suffix like $, @, etc.) */
.input-group-text {
    padding: 0.543rem 0.9375rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.375 !important;
    background-color: transparent !important;
    /* border: 1px solid #d9dee3 !important; */
    /* border-radius: 0.375rem !important; */
}

/* Form controls inside input groups */
.input-group .form-control:not(.iti__tel-input):not(#phone),
.input-group .form-select {
    padding-inline: calc(0.9375rem - 1px) !important;
}

/* Input group focus - keep 1px border (no 2px like standalone inputs) */
.input-group .form-control:not(.iti__tel-input):not(#phone):focus,
.input-group .form-select:focus {
    border-width: 1px !important;
    padding-block: calc(0.543rem - 1px) !important;
    padding-inline: calc(0.9375rem - 1px) !important;
}

/* ============================================================================
   NAV PILLS STYLING - SNEAT STANDARD
   ============================================================================ */
/* Nav Pills - Active, Hover and Base States */
.nav-pills .nav-link {
    padding: 0.5435rem 1.375rem !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
}

.nav-pills .nav-link.active {
    color: #fff !important;
    background-color: #696cff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4) !important;
}

.nav-pills .nav-link:not(.active):hover {
    background-color: rgba(105, 108, 255, 0.16) !important;
}

/* ============================================================================
   NAV TABS STYLING - SNEAT STANDARD
   ============================================================================ */
/* Nav Tabs - Active, Hover and Base States */
.nav-tabs .nav-link {
    padding: 0.5435rem 1.375rem !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    border: 0 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #696cff !important;
    background-color: transparent !important;
    box-shadow: 0 -2px 0 #696cff inset !important;
}

.nav-tabs .nav-link:not(.active):hover {
    color: #696cff !important;
}

/* ============================================================================
   TAB CONTENT SMOOTH TRANSITIONS
   ============================================================================ */
/* Tab Content Transitions - Smooth fade and slide */
.tab-content:not(.doc-example-content) {
    padding: 1.5rem;
}

.tab-content:not(.doc-example-content) .tab-pane {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.15s linear, transform 0.15s linear;
}

.tab-content:not(.doc-example-content) .tab-pane.active.show {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.2s ease-out 0.1s, transform 0.2s ease-out 0.1s;
}

/* ============================================================================
   NOTIFICATION & MODAL COMPONENTS
   ============================================================================ */
#unreadNotificationsCount {
    position: relative;
    left: -10px;
    top: -8px;
    width: auto !important;
}

.statisticsDiv {
    height: 550px;
    overflow: hidden;
    position: relative;
}

/* Modal Z-Index Management */
#confirmSaveColumnVisibility,
#edit_task_modal,
#quickViewOffcanvas {
    z-index: 1091;
}

#create_status_modal,
#create_priority_modal,
#create_tag_modal,
#create_contract_type_modal {
    z-index: 1092;
}

/* ============================================================================
   CARD & LAYOUT COMPONENTS
   ============================================================================ */
.signup-form {
    max-width: 500px !important;
}

.card-body-project-grid {
    padding: 0.8rem;
}

.card-body-task-draggable {
    padding: 0.8rem 0.2rem;
}

.avatar-nav-dropdown {
    cursor: default;
}

/* Scrollable Dropdown */
.scrollable-dropdown {
    max-height: 300px;
}

.fixed-header,
.fixed-footer {
    background: var(--bg-1, white) !important;
    position: sticky;
    z-index: 10;
}

.fixed-header {
    top: 0;
}

.fixed-footer {
    bottom: 0;
}

/* Permissions Container */
.permissions-container {
    display: flex;
    flex-wrap: wrap;
}

/* Kanban Board */
.kanban-container {
    overflow-x: scroll;
    overflow-y: hidden;
}

.kanban-column {
    background-color: none;
    min-width: 300px;
    max-width: 300px;
}

.kanban-tasks {
    height: 100%;
}

/* ============================================================================
   SIGNATURE & FORM ELEMENTS
   ============================================================================ */
#promisor_sign {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 1px solid #6c757d !important;
    touch-action: none;
    user-select: none;
}

@media (max-width: 767.98px) {
    #promisor_sign {
        width: calc(100% - 2rem);
        height: auto;
    }
}

/* International Telephone Input */
.iti {
    width: 100%;
    display: block;
}

.intl-tel-input {
    width: 100%;
    position: relative;
    display: block;
}

/* Ensure input-group works with iti */
.input-group .iti {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    position: relative;
}

/* Phone input field - maintain standard styling */
.iti input {
    width: 100% !important;
    padding-right: 0.9375rem !important;
    padding-top: 0.543rem !important;
    padding-bottom: 0.543rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.375 !important;
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
}

/* Focus state for phone input - keep 1px border */
.iti input:focus {
    border-width: 1px !important;
    border-color: #696cff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4) !important;
    padding-right: 0.9375rem !important;
    padding-top: 0.543rem !important;
    padding-bottom: 0.543rem !important;
    outline: none !important;
}

/* Country selector styling */
.iti__selected-country {
    padding: 0 0 0 8px !important;
}

/* Clear input button positioning for phone field */
.input-group .clear-input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 100;
    font-size: 20px;
    color: #697a8d;
}

/* ============================================================================
   MIND MAP COMPONENT
   ============================================================================ */
.mind-map-container {
    height: 800px;
}

@media (max-width: 1200px) {
    .mind-map-container {
        height: 600px;
    }
}

@media (max-width: 992px) {
    .mind-map-container {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .mind-map-container {
        height: 400px;
    }
}

jmnode {
    padding: 5px;
    border: 1px solid;
    cursor: pointer !important;
}

/* ============================================================================
   SORTABLE MENU
   ============================================================================ */
#sortable-menu,
.submenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sortable-menu>li,
.submenu>li {
    margin-bottom: 10px;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    transition: background-color 0.3s;
    position: relative;
}

#sortable-menu>li:hover,
.submenu>li:hover {
    background-color: #e9ecef;
}

#sortable-menu>li>.submenu {
    margin-top: 10px;
}

.submenu>li {
    padding-left: 20px;
    margin-bottom: 8px;
}

.handle {
    cursor: grab;
    padding-right: 10px;
    display: inline-block;
    color: #6c757d;
}

/* ============================================================================
   COMMENT SYSTEM
   ============================================================================ */
.comment-thread {
    margin: auto;
    padding: 0 30px;
    border: 1px solid transparent;
}



.comment {
    position: relative;
    margin: 20px auto;
}

.comment-heading {
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 14px;
    position: relative;
    padding-right: 20px;
    transition: all 0.3s ease-in-out;
}

.comment-heading::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6c757d;
    border-bottom: 2px solid #6c757d;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
}

details[open] .comment-heading::after {
    transform: translateY(-50%) rotate(-135deg);
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-info {
    color: rgba(0, 0, 0, 0.5);
}

.comment-author {
    color: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    text-decoration: none;
}

.comment-author:hover {
    text-decoration: underline;
}

.comment-body {
    padding: 0 20px;
    padding-left: 28px;
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

details[open] .comment-body {
    max-height: 100vh;
    padding: 20px;
}

.replies {
    margin-left: 28px;
}

.comment-border-link {
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    width: 12px;
    height: calc(100% - 50px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    background-color: rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
}

.comment-border-link:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

details.comment summary {
    position: relative;
    list-style: none;
    cursor: pointer;
}

details.comment summary::-webkit-details-marker {
    display: none;
}

details.comment:not([open]) .comment-heading {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.comment-body button {
    appearance: none;
    font-size: 14px;
    padding: 4px 8px;
    color: rgba(0, 0, 0, 0.85);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
}

.comment-body button:hover,
.comment-body button:focus,
.comment-body button:active {
    background-color: #ecf0f1;
}

.comment-form-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.comment-actions .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.comment-actions .btn i {
    font-size: 1.25rem;
    vertical-align: middle;
}

.attachment-preview-container {
    position: relative;
}

.attachment-preview {
    display: none;
    position: relative;
    bottom: 100%;
    left: 0;
    background-color: #fff;
    padding: 10px;
    z-index: 1000;
}

.attachment-preview img {
    max-width: 200px;
    max-height: 200px;
}

/* ============================================================================
   MENTION SYSTEM
   ============================================================================ */
.tribute-container {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 300px;
    max-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    z-index: 1200000;
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    margin-top: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    animation: fadeIn 0.2s ease-out;
}

.tribute-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tribute-container li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #333333;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.tribute-container li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.tribute-container li.highlight,
.tribute-container li:hover {
    background-color: #f0f7ff;
    color: #0066cc;
}

.tribute-container li span {
    font-weight: 600;
    color: #0066cc;
    margin-right: 5px;
}

.tribute-container li.highlight span,
.tribute-container li:hover span {
    color: #004999;
}

.tribute-container li.no-match {
    cursor: default;
    color: #999999;
    padding: 15px;
    text-align: center;
    font-style: italic;
}

.tribute-container .menu-highlighted {
    font-weight: 600;
    background-color: #e6f2ff;
}

.tribute-container::-webkit-scrollbar {
    width: 6px;
}

.tribute-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.tribute-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.tribute-container::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   TIMELINE COMPONENT
   ============================================================================ */
.timeline {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 1.5rem;
    list-style: none;
}

.timeline .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.timeline .timeline-header>*:first-child {
    margin-right: 0.5rem;
}

.timeline .timeline-end-indicator {
    position: absolute;
    bottom: -1.35rem;
    left: -0.65rem;
}

.timeline .timeline-end-indicator i {
    font-size: 1.5rem;
    color: #e4e6e8;
}

.timeline .timeline-item {
    position: relative;
    padding-left: 1.4rem;
}

.timeline .timeline-item .timeline-event {
    position: relative;
    width: 100%;
    min-height: 4rem;
    background-color: #fff;
    border-radius: 0.375rem;
    padding: 0.5rem 0 0.3375rem;
}

.timeline .timeline-item .timeline-event .timeline-event-time {
    position: absolute;
    top: 1.2rem;
    font-size: 0.8125rem;
    color: #a7acb2;
}

.timeline .timeline-item .timeline-indicator,
.timeline .timeline-item .timeline-indicator-advanced {
    position: absolute;
    left: -1rem;
    top: 0.64rem;
    z-index: 2;
    height: 2rem;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
}

.timeline .timeline-item .timeline-indicator {
    box-shadow: 0 0 0 10px #f5f5f9;
}

.timeline .timeline-item .timeline-indicator-advanced {
    background-color: #fff;
    top: 0;
}

.timeline .timeline-item .timeline-point {
    position: absolute;
    left: -0.38rem;
    top: 0;
    z-index: 2;
    display: block;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 50%;
    background-color: #696cff;
    box-shadow: 0 0 0 10px #fff;
}

.timeline .timeline-item.timeline-item-transparent .timeline-event {
    top: -0.9rem;
    background-color: transparent;
}

html:not([dir="rtl"]) .timeline .timeline-item.timeline-item-transparent .timeline-event {
    padding-left: 0;
}

.timeline .timeline-item.timeline-item-transparent .timeline-event.timeline-event-shadow {
    padding-left: 2rem;
}

.timeline.timeline-outline .timeline-item .timeline-point {
    outline: unset;
    background-color: #fff !important;
    border: 2px solid #696cff;
}

/* Timeline Center Layout */
.timeline.timeline-center .timeline-end-indicator {
    bottom: -1.4rem;
    left: 50%;
    margin-left: 0.55rem;
}

.timeline.timeline-center .timeline-item {
    width: 50%;
    clear: both;
}

.timeline.timeline-center .timeline-item.timeline-item-left,
.timeline.timeline-center .timeline-item:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right) {
    float: left;
    padding-left: 0;
    padding-right: 2.25rem;
    padding-bottom: 2.5rem;
    border-left: 0;
    border-right: 1px solid #e4e6e8;
}

.timeline.timeline-center .timeline-item.timeline-item-left .timeline-event .timeline-event-time,
.timeline.timeline-center .timeline-item:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right) .timeline-event .timeline-event-time {
    right: -10.2rem;
}

.timeline.timeline-center .timeline-item.timeline-item-left .timeline-point,
.timeline.timeline-center .timeline-item:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right) .timeline-point {
    left: 100%;
}

.timeline.timeline-center .timeline-item.timeline-item-right,
.timeline.timeline-center .timeline-item:nth-of-type(2n):not(.timeline-item-left):not(.timeline-item-right) {
    float: right;
    right: 1px;
    padding-left: 2.25rem;
    padding-bottom: 2.5rem;
    border-left: 1px solid #e4e6e8;
}

.timeline.timeline-center .timeline-item.timeline-item-right .timeline-event .timeline-event-time,
.timeline.timeline-center .timeline-item:nth-of-type(2n):not(.timeline-item-left):not(.timeline-item-right) .timeline-event .timeline-event-time {
    left: -10.2rem;
}

.timeline.timeline-center .timeline-item .timeline-point {
    left: 50%;
    margin-left: -0.6875rem;
}

.timeline.timeline-center .timeline-item .timeline-point-indicator {
    left: 50%;
    margin-left: -0.3125rem;
}

.timeline.timeline-center .timeline-item:after {
    content: "";
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    border-radius: 50%;
    inset-inline-start: -1rem;
    top: 0.64rem;
}

/* Timeline Non-Center Layout */
html:not([dir="rtl"]) .timeline:not(.timeline-center) {
    padding-left: 0.5rem;
}

html:not([dir="rtl"]) .timeline-item {
    border-left: 1px solid #e4e6e8;
}

/* Timeline Color Variants */
.timeline .timeline-point-secondary {
    background-color: #8592a3 !important;
    outline: 3px solid rgba(133, 146, 163, 0.12);
}

.timeline.timeline-outline .timeline-point-secondary {
    border: 2px solid #8592a3 !important;
}

.timeline .timeline-indicator-secondary {
    background-color: #8592a329;
}

.timeline .timeline-indicator-secondary i {
    color: #8592a3 !important;
}

.timeline .timeline-point-success {
    background-color: #71dd37 !important;
    outline: 3px solid rgba(113, 221, 55, 0.12);
}

.timeline.timeline-outline .timeline-point-success {
    border: 2px solid #71dd37 !important;
}

.timeline .timeline-indicator-success {
    background-color: #71dd3729;
}

.timeline .timeline-indicator-success i {
    color: #71dd37 !important;
}

.timeline .timeline-point-info {
    background-color: #03c3ec !important;
    outline: 3px solid rgba(3, 195, 236, 0.12);
}

.timeline.timeline-outline .timeline-point-info {
    border: 2px solid #03c3ec !important;
}

.timeline .timeline-indicator-info {
    background-color: #03c3ec29;
}

.timeline .timeline-indicator-info i {
    color: #03c3ec !important;
}

.timeline .timeline-point-warning {
    background-color: #ffab00 !important;
    outline: 3px solid rgba(255, 171, 0, 0.12);
}

.timeline.timeline-outline .timeline-point-warning {
    border: 2px solid #ffab00 !important;
}

.timeline .timeline-indicator-warning {
    background-color: #ffab0029;
}

.timeline .timeline-indicator-warning i {
    color: #ffab00 !important;
}

.timeline .timeline-point-danger {
    background-color: #ff3e1d !important;
    outline: 3px solid rgba(255, 62, 29, 0.12);
}

.timeline.timeline-outline .timeline-point-danger {
    border: 2px solid #ff3e1d !important;
}

.timeline .timeline-indicator-danger {
    background-color: #ff3e1d29;
}

.timeline .timeline-indicator-danger i {
    color: #ff3e1d !important;
}

.timeline .timeline-point-dark {
    background-color: #2b2c40 !important;
    outline: 3px solid rgba(43, 44, 64, 0.12);
}

.timeline.timeline-outline .timeline-point-dark {
    border: 2px solid #2b2c40 !important;
}

.timeline .timeline-indicator-dark {
    background-color: #2b2c4029;
}

.timeline .timeline-indicator-dark i {
    color: #2b2c40 !important;
}

.timeline .timeline-point-gray {
    background-color: #22303e80 !important;
    outline: 3px solid rgba(34, 48, 62, 0.12);
}

.timeline.timeline-outline .timeline-point-gray {
    border: 2px solid rgba(34, 48, 62, 0.5) !important;
}

.timeline .timeline-indicator-gray {
    background-color: #22303e29;
}

.timeline .timeline-indicator-gray i {
    color: #22303e80 !important;
}

/* Timeline Responsive */
@media (min-width: 768px) {

    .timeline.timeline-center .timeline-item.timeline-item-left .timeline-indicator,
    .timeline.timeline-center .timeline-item:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right) .timeline-indicator {
        left: calc(100% - 1rem);
    }

    .timeline.timeline-center .timeline-item.timeline-item-left:after,
    .timeline.timeline-center .timeline-item:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right):after {
        inset-inline-start: calc(100% - 1rem);
    }
}

@media (max-width: 767.98px) {
    .timeline.timeline-center .timeline-end-indicator {
        left: -2px;
    }

    .timeline.timeline-center .timeline-item {
        border-right: 0 !important;
        left: 1rem;
        float: left !important;
        width: 100%;
        padding-left: 3rem !important;
        padding-right: 1.5rem !important;
    }

    .timeline.timeline-center .timeline-item:not(:last-child) {
        border-left: 1px solid #e4e6e8 !important;
    }

    .timeline.timeline-center .timeline-item .timeline-event .timeline-event-time {
        top: -1.7rem;
        left: 0 !important;
        right: auto !important;
    }

    .timeline.timeline-center .timeline-item .timeline-point {
        left: -0.7rem !important;
        margin-left: 0 !important;
    }

    .timeline.timeline-center .timeline-item .timeline-point-indicator {
        left: 0 !important;
        margin-left: -0.3125rem !important;
    }
}

@media (max-width: 575.98px) {
    .timeline .timeline-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================
   CALENDAR & LEGEND COMPONENTS
   ============================================================================ */
#color-legend {
    margin-top: 15px;
    font-size: 14px;
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 6px;
    display: inline-block;
    box-shadow: var(--shadow-sm);
}

.legend-title {
    font-weight: bold;
    font-size: 15px;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.legend-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.calendar-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
}

.calendar-sidebar {
    width: 250px;
    flex-shrink: 0;
}

/* On mobile screens, offcanvas will naturally take over if Bootstrap offcanvas classes are used */
@media (max-width: 767.98px) {
    .calendar-sidebar {
        width: 320px;
        /* Offcanvas width */
        max-width: 100vw;
    }
}

.calendar-main {
    flex: 1;
    min-width: 0;
    overflow-x: auto;

}

.fc-event {
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 0.5rem;
}

.fc .fc-toolbar-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.fc .fc-button {
    background-color: #7367f0 !important;
    border-color: #7367f0 !important;
}

.fc .fc-button-active {
    background-color: #5e50ee !important;
}

.fc-event.status-color {
    border: none !important;
}

.mini-calendar {
    margin-bottom: 1.5rem;
}

.mini-calendar .form-control {
    cursor: pointer;
}

.filter-section {
    margin-bottom: 1.5rem;
}

.filter-section h6 {
    color: #5e5873;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.color-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.filter-counter {
    font-size: 0.75rem;
    background-color: #f8f9fa;
    color: #6e6b7b;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
}

.loading-filters {
    opacity: 0.6;
    pointer-events: none;
}

.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    height: 20px;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* /* .filter-section .form-check {
    margin-bottom: 0.5rem;
}

.filter-section .form-check-input:checked {
    background-color: #7367f0;
    border-color: #7367f0;
} */

.filter-section .form-check-label {
    font-size: 0.9rem;
    color: #6e6b7b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 768px) {
    .calendar-sidebar {
        width: 100%;
    }

    .calendar-wrapper {
        flex-direction: column;
    }
}

/* ============================================================================
   TODO ENHANCEMENT COMPONENTS
   ============================================================================ */
/* ============================================================================
   TODO ENHANCEMENT COMPONENTS
   ============================================================================ */
.todo-card {
    border-radius: var(--r-3);
    overflow: hidden;
    transition: border-color var(--t-1) var(--ease);
    border: 1px solid var(--line) !important;
    background-color: var(--bg-1) !important;
    box-shadow: none !important;
    height: 100%;
}

.todo-card-header {
    border-bottom: 1px solid var(--line) !important;
    padding: 20px !important;
    position: relative;
    background-color: var(--bg-1) !important;
}

.todo-card.todo-card-incomplete {
    border-top: 3px solid var(--signal) !important;
}

.todo-card.todo-card-complete {
    border-top: 3px solid var(--success) !important;
}

.todo-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-2);
    margin-right: 12px;
    background-color: rgba(105, 108, 255, 0.08) !important;
}

.todo-card-incomplete .todo-header-icon i {
    font-size: 20px;
    color: var(--signal) !important;
}

.todo-card-complete .todo-header-icon {
    background-color: rgba(40, 199, 111, 0.08) !important;
}

.todo-card-complete .todo-header-icon i {
    font-size: 20px;
    color: var(--success) !important;
}

.todo-counter {
    background-color: var(--bg-2) !important;
    color: var(--fg-1) !important;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--line);
}

.todo-card-body {
    padding: 20px !important;
}

.todo-list-container {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 5px;
}

.todo-list-container::-webkit-scrollbar {
    width: 4px;
}

.todo-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.todo-list-container::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}

.todo-item {
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--r-2);
    transition: all var(--t-1) var(--ease);
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    position: relative;
}

.todo-item:hover {
    border-color: var(--signal) !important;
}

.todo-item:last-child {
    margin-bottom: 0;
}

.todo-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line) !important;
    border-radius: 4px !important;
    margin-top: 0;
    cursor: pointer;
}

.todo-check-input:checked {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.todo-title {
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--fg-0);
    font-size: var(--fs-base);
}

.todo-item.todo-completed .todo-title {
    text-decoration: line-through;
    color: var(--fg-3);
}

.todo-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.todo-meta-item {
    display: flex;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--fg-3);
}

.todo-meta-item i {
    margin-right: 4px;
    font-size: 14px;
}

.todo-actions-container {
    opacity: 0.6;
    transition: opacity var(--t-1) var(--ease);
}

.todo-item:hover .todo-actions-container {
    opacity: 1;
}

.todo-drag-handle {
    cursor: grab;
    color: var(--fg-3);
    transition: color var(--t-1) var(--ease);
    display: flex;
    align-items: center;
}

.todo-drag-handle:hover {
    color: var(--fg-1);
}

.todo-drag-handle:active {
    cursor: grabbing;
}

.todo-progress {
    margin-bottom: 20px;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    padding: 16px !important;
}

.todo-progress .progress {
    height: 6px !important;
    border-radius: 3px !important;
    overflow: hidden;
    background-color: var(--line) !important;
}

.todo-progress .progress-bar {
    background-color: var(--signal) !important;
}

.todo-progress-label {
    font-size: var(--fs-sm);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    color: var(--fg-2);
}

.todo-progress-value {
    font-weight: 600;
    color: var(--fg-1);
}

@media (max-width: 768px) {
    .todo-item {
        padding: 10px 12px;
    }

    .todo-card-header,
    .todo-card-body {
        padding: 16px !important;
    }
}

/* ============================================================================
   MAPPING FIELDS & SORTABLE COMPONENTS
   ============================================================================ */
#mapping-body .select2-container {
    display: block;
    position: relative;
    max-width: 100% !important;
}

#mapping-body .select2-container--default .select2-selection--single {
    height: calc(1.375em + 1.086rem + 2px) !important;
    padding: 0.543rem 0.9375rem !important;
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.375 !important;
    color: #697a8d !important;
    background-color: #fff !important;
    width: 100%;
}

#mapping-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.375 !important;
    padding-left: 0 !important;
    color: #697a8d !important;
}

#mapping-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.375em + 1.086rem) !important;
    right: 0.9375rem !important;
    top: 1px !important;
}

#mapping-body .select2-container--default .select2-dropdown {
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    background-color: #fff;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
    z-index: 1056;
    width: 100% !important;
    min-width: 200px;
}

#mapping-body .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d9dee3 !important;
    border-radius: 0.375rem !important;
    padding: 0.543rem 0.9375rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.375 !important;
    color: #697a8d !important;
    width: 100%;
}

#mapping-body .select2-container--default .select2-results__option {
    padding: 0.532rem 1rem !important;
    font-size: 0.9375rem !important;
    color: #697a8d !important;
}

#mapping-body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(105, 108, 255, 0.08) !important;
    color: #696cff !important;
}

#mapping-body table td {
    position: relative;
    vertical-align: middle;
}

#mapping-body table td .select2-container {
    min-width: 200px;
    margin: 0 !important;
}

.sortable-ghost {
    opacity: 0.7;
    background: #f7f7f7;
    border: 2px dashed #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.sortable-placeholder {
    background: #e9ecef;
    border: 2px dashed #007bff;
    height: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* ============================================================================
   LEAD FORMS & EMBED COMPONENTS
   ============================================================================ */
.preview-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.preview-embed-icon {
    width: 54px !important;
    border-radius: 50px;
    cursor: pointer;
    padding: 10px;
    background-color: #ffffff;
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-md);
}

.preview-embed-icon:hover {
    transform: translateY(-5px);
}

.preview-lead-form-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 400px;
    height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    z-index: 1051;
    overflow: hidden;
}

.preview-lead-form-container.active {
    display: flex;
}

.embed-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.375rem;
}

.modal-lg {
    max-width: 800px;
}

/* ============================================================================
   LEAD FORMS & EMBED COMPONENTS (CONTINUED)
   ============================================================================ */
.preview-lead-form-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    z-index: 1050;
}

.preview-lead-form-icon:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.lead-form-header {
    padding: 15px 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lead-form-header h5 {
    margin: 0;
    font-size: 16px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.lead-form-body {
    flex: 1;
    overflow: hidden;
}

.lead-form-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .embed-container {
        height: 400px;
    }

    .preview-lead-form-container {
        width: calc(100vw - 40px);
        height: 70vh;
        bottom: 90px;
        right: 20px;
        left: 20px;
    }

    .preview-lead-form-icon {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
}

/* ============================================================================
   TASKIFY ECOSYSTEM DRAWER
   ============================================================================ */
.taskify-fab {
    position: fixed;
    top: 50%;
    right: 20px;
    width: 56px;
    height: 56px;
    z-index: 1050;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-danger));
    border: none;
}

.taskify-product-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease-in-out;
}

.taskify-product-icon {
    font-size: 2.5rem;
}

.taskify-product-image {
    height: 140px;
    object-fit: cover;
}

@media (max-width: 576px) {
    #taskifyEcosystemDrawer {
        --bs-offcanvas-width: 100vw;
    }

    .taskify-fab {
        right: 15px;
        width: 48px;
        height: 48px;
    }

    .taskify-fab i {
        font-size: 1.2rem;
    }
}

/* ============================================================================
   OFFCANVAS STYLES
   ============================================================================ */
.offcanvas {
    width: 420px !important;
    z-index: 1088 !important;
}

.offcanvas-backdrop {
    z-index: 1087 !important;
}

@media (min-width: 768px) {
    .offcanvas-md {
        width: 500px !important;
    }
}

@media (min-width: 992px) {
    .offcanvas-lg {
        width: 600px !important;
    }
}

@media (min-width: 1200px) {
    .offcanvas-xl {
        width: 700px !important;
    }
}

@media (min-width: 1400px) {
    .offcanvas-xxl {
        width: 800px !important;
    }
}

/* Custom Width Utilities */
.offcanvas-w-400 {
    width: 400px !important;
}

.offcanvas-w-450 {
    width: 450px !important;
}

.offcanvas-w-500 {
    width: 500px !important;
}

.offcanvas-w-550 {
    width: 550px !important;
}

.offcanvas-w-600 {
    width: 600px !important;
}

.offcanvas-w-650 {
    width: 650px !important;
}

.offcanvas-w-700 {
    width: 700px !important;
}

.offcanvas-w-750 {
    width: 750px !important;
}

.offcanvas-w-800 {
    width: 800px !important;
}

.offcanvas-w-30 {
    width: 30% !important;
    min-width: 320px;
}

.offcanvas-w-35 {
    width: 35% !important;
    min-width: 350px;
}

.offcanvas-w-40 {
    width: 40% !important;
    min-width: 400px;
}

.offcanvas-w-45 {
    width: 45% !important;
    min-width: 450px;
}

.offcanvas-w-50 {
    width: 50% !important;
    min-width: 500px;
}

.offcanvas-responsive {
    width: 100% !important;
    max-width: 420px !important;
}

@media (min-width: 576px) {
    .offcanvas-responsive {
        width: 90% !important;
        max-width: 500px !important;
    }
}

@media (min-width: 768px) {
    .offcanvas-responsive {
        width: 600px !important;
        max-width: none !important;
    }
}

@media (min-width: 992px) {
    .offcanvas-responsive {
        width: 700px !important;
    }
}

@media (min-width: 1200px) {
    .offcanvas-responsive {
        width: 800px !important;
    }
}

.offcanvas-header {
    border-bottom: 1px solid var(--bs-gray);
    padding: 1.5rem;
}

.offcanvas-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #566a7f;
}

.offcanvas-body {
    padding: 1.5rem;
}

/* ============================================================================
   GLOBAL SEARCH MODAL
   ============================================================================ */
#globalSearchModal .modal-dialog {
    max-width: 800px;
    width: 90%;
}

#globalSearchModal .search-tabs {
    max-height: 50vh;
    overflow-y: auto;
}

#globalSearchModal .nav-pills {
    flex-wrap: wrap;
    gap: 5px;
}

#globalSearchModal .tab-content {
    overflow-y: auto;
    max-height: 350px;
}

#globalSearchModal .search-results #searchResultsList {
    max-height: 300px;
    overflow-y: auto;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
    body * {
        visibility: hidden;
    }

    #section-not-to-print,
    #section-not-to-print * {
        display: none;
    }

    #section-to-print,
    #section-to-print * {
        visibility: visible;
    }

    #section-to-print {
        position: absolute;
        left: 0;
        top: 0;
    }

    .row::before,
    .row::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* For Chrome, Edge, and Safari */
::-webkit-scrollbar {
    width: 8px;
    /* Reduced scrollbar width */
    height: 8px;
    /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Light track background */
    border-radius: 4px;
    /* Rounded edges */
}

::-webkit-scrollbar-thumb {
    background: #888;
    /* Scrollbar thumb color */
    border-radius: 4px;
    /* Rounded thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Darker color on hover */
}

/* For Firefox */
* {
    scrollbar-width: thin;
    /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1;
    /* Thumb and track colors */
}

/* ============================================================================
   LEAVE REPORTS CHARTS CONTAINER STYLES
   ============================================================================ */
.chart-container-pie {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container-bar {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container-line {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Chart cards styling */
#chartsModal .card {
    transition: transform 0.2s ease-in-out;
}

/* Responsive adjustments for charts modal and containers */
@media (max-width: 768px) {
    #chartsModal .modal-dialog {
        margin: 0;
    }

    .chart-container-pie {
        min-height: 240px;
    }

    .chart-container-bar {
        min-height: 300px;
    }

    .chart-container-line {
        min-height: 240px;
    }

    #chartsModal .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    #chartsModal .badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }

    #chartsModal h5 {
        font-size: 1rem;
    }

    #chartsModal .modal-header,
    #chartsModal .modal-body,
    #chartsModal .modal-footer {
        padding: 1rem;
    }

    #chartsModal .col-md-6 {
        margin-bottom: 1.5rem !important;
    }

    #chartsModal .border.rounded-3 {
        margin-bottom: 0;
    }
}

#chartsModal .card:hover {
    transform: translateY(-2px);
}

#chartsModal .card-header {
    background-color: rgba(67, 89, 113, 0.03);
}

/* Badge styling in chart headers */
.bg-label-primary {
    background-color: rgba(105, 108, 255, 0.1);
    color: #696cff;
}

.bg-label-warning {
    background-color: rgba(255, 171, 0, 0.1);
    color: #ffab00;
}

.bg-label-success {
    background-color: rgba(40, 199, 111, 0.16) !important;
    color: #28c76f !important;
}

.bg-label-danger {
    background-color: rgba(255, 62, 29, 0.1);
    color: #ff3e1d;
}

.bg-label-info {
    background-color: rgba(3, 195, 236, 0.1);
    color: #03c3ec;
}

.img-box-100 {
    width: 200px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.img-box-100 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* keeps aspect ratio, crops extra */
}

/* ============================================================================
   PAID LEAVE WORKFLOW MODAL STYLES
   ============================================================================ */
.paid-leave-layout {
    min-height: 500px;
}

/* Timeline Navigation */
.paid-leave-timeline {
    position: relative;
    border: none !important;
}

.paid-leave-timeline .list-group-item {
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    background-color: var(--bg-1);
    cursor: pointer;
    text-align: left;
}

.paid-leave-timeline .list-group-item:hover:not(.active):not(.disabled) {
    background-color: var(--bg-2);
    border-color: var(--line);
    transform: translateX(4px);
}

.paid-leave-timeline .list-group-item.active {
    background-color: oklch(from var(--signal) l c h / 0.12);
    border-color: var(--signal);
    box-shadow: var(--shadow-1);
}

.paid-leave-timeline .list-group-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.paid-leave-timeline .list-group-item h6 {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--fg-0);
}

.paid-leave-timeline .list-group-item.active h6 {
    color: var(--signal);
}

.paid-leave-timeline .list-group-item small {
    display: block;
    line-height: 1.4;
    color: var(--fg-2);
}

/* Timeline Index (Step Numbers) */
.timeline-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background-color: var(--bg-3);
    color: var(--fg-3);
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.paid-leave-timeline .list-group-item.active .timeline-index {
    background-color: var(--signal);
    color: var(--signal-fg, #fff);
    box-shadow: 0 2px 8px oklch(from var(--signal) l c h / 0.3);
}

/* Pro Tip Callout */
.paid-leave-callout {
    background-color: oklch(from var(--warn) l c h / 0.1);
    border: 1px solid oklch(from var(--warn) l c h / 0.25);
    border-radius: var(--r-2);
    padding: 1rem;
    margin-top: 1.5rem;
}

.paid-leave-callout h6 {
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: var(--warn);
}

.paid-leave-callout p {
    margin-bottom: 0.75rem;
    color: var(--fg-2);
}

.paid-leave-callout ul {
    margin-bottom: 0;
}

.paid-leave-callout ul li {
    margin-bottom: 0.25rem;
    color: var(--fg-2);
}

/* Step Content Wrapper */
.paid-leave-content-wrapper {
    min-height: 400px;
}

.paid-leave-step {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Icon */
.paid-leave-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    border-radius: var(--r-2);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.paid-leave-step-icon.text-primary,
#paidLeaveWorkflowModal .text-primary {
    color: var(--signal) !important;
}

#paidLeaveWorkflowModal .text-info {
    color: var(--info) !important;
}

.bg-soft-primary {
    background-color: oklch(from var(--signal) l c h / 0.12) !important;
}

/* Role Cards */
.paid-leave-role-card {
    background-color: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 1rem;
    height: 100%;
    transition: all 0.3s ease;
}

.paid-leave-role-card:hover {
    background-color: var(--bg-1);
    box-shadow: var(--shadow-1);
    transform: translateY(-2px);
}

.paid-leave-role-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.paid-leave-role-card ul {
    margin-bottom: 0;
}

.paid-leave-role-card ul li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: var(--fg-2);
}

.paid-leave-role-card ul li:last-child {
    margin-bottom: 0;
}

/* Navigation Buttons */
.paid-leave-prev,
.paid-leave-next,
.paid-leave-finish {
    transition: all 0.3s ease;
}

.paid-leave-prev:hover:not(:disabled),
.paid-leave-next:hover:not(:disabled),
.paid-leave-finish:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.paid-leave-prev:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .paid-leave-timeline {
        flex-direction: row !important;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .paid-leave-timeline .list-group-item {
        min-width: 200px;
        margin-bottom: 0.75rem;
        margin-right: 0.75rem;
    }

    .paid-leave-timeline .list-group-item:hover:not(.active):not(.disabled) {
        transform: translateY(-2px);
    }

    .paid-leave-layout {
        min-height: auto;
    }

    .paid-leave-content-wrapper {
        min-height: auto;
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .paid-leave-timeline .list-group-item {
        min-width: 180px;
        padding: 0.75rem;
    }

    .timeline-index {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .paid-leave-step-icon {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        font-size: 1.25rem;
    }

    .paid-leave-role-card {
        margin-bottom: 1rem;
    }
}

/* =====================================================================
   TASKIFY v2 "Graphite Studio" — App shell chrome (rail + context panel)
   Additive & scoped. Design source: "Taskify Revamp Kit/". All new
   classes are prefixed tk-* and structural overrides apply only under
   body.v2-shell, so non-chrome pages (login, print) are untouched.
   ===================================================================== */
:root {
    --signal: oklch(81.99% 0.11932 142.474);
    --signal-fg: oklch(0.18 0.02 130);
    --signal-glow: color-mix(in srgb, var(--signal) 35%, transparent);
    --ok: oklch(0.70 0.16 155);
    --warn: oklch(0.78 0.16 80);
    --err: oklch(0.65 0.22 25);
    --info: oklch(0.68 0.14 235);

    --bg-0: oklch(1 0 0);
    --bg-1: oklch(0.985 0.002 280);
    --bg-2: oklch(0.97 0.003 280);
    --bg-3: oklch(0.945 0.005 280);
    --line: oklch(0.92 0.005 280);
    --line-2: oklch(0.86 0.008 280);

    --fg-0: oklch(0.16 0.012 280);
    --fg-1: oklch(0.32 0.010 280);
    --fg-2: oklch(0.50 0.008 280);
    --fg-3: oklch(0.65 0.006 280);

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --r-2: 5px;
    --t-1: 100ms;
    --t-2: 160ms;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    --rail-w: 56px;
    --panel-w: 232px;

    --fs-base: 13px;
    --fs-xs: 10.5px;
    --fs-sm: 11.5px;
    --fs-md: 14px;
    --lh-base: 1.5;
    --lh-snug: 1.35;
    --tracking-snug: -0.01em;
    --tracking-wide: 0.06em;
    --tracking-tight: -0.02em;
    --r-3: 8px;
    --t-3: 240ms;
    --ctrl-h-sm: 24px;
    --ctrl-h-md: 32px;
    --ctrl-h-lg: 40px;
    --signal-soft: color-mix(in srgb, var(--signal) 12%, var(--bg-1));
    --shadow-1: 0 1px 1px oklch(0.16 0.01 280 / 0.04);
    --shadow-2: 0 2px 6px oklch(0.16 0.01 280 / 0.06), 0 1px 2px oklch(0.16 0.01 280 / 0.04);
    --shadow-3: 0 8px 24px oklch(0.16 0.01 280 / 0.10), 0 2px 6px oklch(0.16 0.01 280 / 0.05);
    --shadow-4: 0 24px 48px oklch(0.16 0.01 280 / 0.16), 0 8px 16px oklch(0.16 0.01 280 / 0.08);
    --shadow-focus: 0 0 0 2px var(--signal-glow);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
    --shadow-1: 0 1px 1px oklch(0 0 0 / 0.30);
    --shadow-2: 0 2px 6px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.20);
    --shadow-3: 0 8px 24px oklch(0 0 0 / 0.40), 0 2px 6px oklch(0 0 0 / 0.25);
    --shadow-4: 0 24px 48px oklch(0 0 0 / 0.55), 0 8px 16px oklch(0 0 0 / 0.30);
    --bg-0: oklch(0.135 0.008 280);
    --bg-1: oklch(0.165 0.010 280);
    --bg-2: oklch(0.195 0.012 280);
    --bg-3: oklch(0.225 0.014 280);
    --line: oklch(0.26 0.014 280);
    --line-2: oklch(0.34 0.018 280);
    --fg-0: oklch(0.97 0.005 280);
    --fg-1: oklch(0.78 0.008 280);
    --fg-2: oklch(0.58 0.010 280);
    --fg-3: oklch(0.42 0.012 280);
}

/* ---- Shell layout: rail + panel fixed at the left, page offset ---- */
body.v2-shell .tk-rail,
body.v2-shell .tk-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1040;
}

body.v2-shell .tk-rail {
    left: 0;
}

body.v2-shell .tk-panel {
    left: var(--rail-w);
}

body.v2-shell .layout-page {
    padding-left: calc(var(--rail-w) + var(--panel-w)) !important;
    transition: padding-left var(--t-2) var(--ease);
}

/* ---- RAIL (left icon sidebar) ---- */
.tk-rail {
    width: var(--rail-w);
    background: var(--bg-0);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
}

.tk-rail-brand {
    width: 34px;
    height: 34px;
    border-radius: var(--r-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--bg-2);
}

.tk-rail-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tk-rail-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2);
    color: var(--fg-2);
    isolation: isolate;
    transition: color var(--t-1);
    cursor: pointer;
}

.tk-rail-btn svg {
    position: relative;
    z-index: 2;
    transition: transform var(--t-2) var(--ease);
}

.tk-rail-btn:hover {
    color: var(--fg-0);
}

.tk-rail-btn:hover svg {
    transform: scale(1.08);
}

.tk-rail-btn:not([data-active="true"]):hover::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 8px;
    background: var(--bg-2);
    z-index: 0;
}

.tk-rail-btn[data-active="true"] {
    color: var(--fg-0);
}

.tk-rail-btn[data-active="true"]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
    box-shadow: inset 0 0 0 1px var(--line-2);
    z-index: 0;
}

.tk-rail-btn[data-active="true"]::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--signal);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--signal-glow);
    z-index: 0;
}

.tk-rail-badge {
    position: absolute;
    top: 1px;
    right: 1px;
}

.tk-rail-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tk-rail-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.tk-rail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- CONTEXT PANEL (per-module submenu) ---- */
.tk-panel {
    width: var(--panel-w);
    background: var(--bg-1);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.tk-panel-head {
    padding: 10px 12px 4px;
}

.tk-panel-search {
    padding: 6px 12px 8px;
    border-bottom: 1px solid var(--line);
}

.tk-panel-search input {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    font-size: var(--fs-base);
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    color: var(--fg-0);
}

.tk-panel-search input::placeholder {
    color: var(--fg-3);
}

.tk-panel-search input:hover {
    border-color: var(--line-2);
}

.tk-panel-search input:focus {
    outline: none;
    border-color: var(--fg-1);
}

.tk-panel-body {
    flex: 1;
    overflow: auto;
    padding: 6px 8px 16px;
}

.tk-panel-pane[hidden] {
    display: none;
}

.tk-panel-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--fg-0);
    letter-spacing: var(--tracking-snug);
    padding: 8px 8px 4px;
}

.tk-panel-group {
    padding: 2px 0 8px;
}

.tk-panel-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 8px 8px 4px;
    font-weight: 500;
}

.tk-panel-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    min-height: 28px;
    font-size: var(--fs-base);
    color: var(--fg-1);
    text-align: left;
    text-decoration: none;
    transition: background var(--t-1), color var(--t-1);
    cursor: pointer;
}

.tk-panel-item:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

.tk-panel-item[data-active="true"] {
    background: var(--bg-3);
    color: var(--fg-0);
    font-weight: 500;
}

.tk-panel-item>span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-panel-item i.bx {
    font-size: 16px;
    color: var(--fg-2);
    flex: 0 0 auto;
}

.tk-panel-item:hover i.bx,
.tk-panel-item[data-active="true"] i.bx {
    color: var(--fg-0);
}

.tk-panel-item .badge {
    flex: 0 0 auto;
}

/* Workspace switcher inside the panel head */
.tk-ws {
    width: 100%;
}

.tk-ws>.btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-0) !important;
    font-size: var(--fs-base) !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: var(--r-2) !important;
    transition: all var(--t-1) var(--ease);
}

.tk-ws>.btn::after {
    margin-left: auto;
    font-size: 15px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
}

.tk-ws>.btn:hover,
.tk-ws>.btn.show {
    background: var(--bg-2) !important;
    border-color: var(--line-2) !important;
    color: var(--fg-0) !important;
}

/* Responsive: collapse the context panel below xl, rail stays */
@media (max-width: 1199.98px) {
    body.v2-shell .tk-panel {
        transform: translateX(-100%);
        transition: transform var(--t-2) var(--ease);
    }

    body.v2-shell .layout-page {
        padding-left: var(--rail-w) !important;
    }

    body.v2-shell.tk-panel-open .tk-panel {
        transform: none;
    }
}

/* =====================================================================
   TASKIFY v2 — Command bar (top header / cbar). Restyles the navbar
   while preserving every control (search, notifications, language, user).
   ===================================================================== */
.tk-cbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    background: var(--bg-0);
    border-bottom: 1px solid var(--line);
}

.tk-cbar-burger {
    display: none;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--fg-2);
    border-radius: var(--r-2);
    cursor: pointer;
}

.tk-cbar-burger:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

.tk-cbar-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--fg-2);
    min-width: 0;
}
.tk-cbar-ws {
    background: var(--signal);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 5px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.tk-cbar-sep {
    color: var(--fg-3);
    flex: 0 0 auto;
}

.tk-cbar-crumb-title {
    color: var(--fg-0);
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* search trigger (opens #globalSearchModal via #global-search) */
.tk-cbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 320px;
    height: 30px;
    padding: 0 10px;
    margin-left: auto;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    color: var(--fg-3);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--t-1);
}

.tk-cbar-search:hover {
    border-color: var(--line-2);
    color: var(--fg-2);
}

.tk-cbar-search-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    flex: 0 0 auto;
}

/* action icon buttons */
.tk-cbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.tk-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--fg-2);
    transition: .2s ease;
}

.tk-icon-btn:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

/* notification badge */
.badge-notifications {
    position: absolute;
    top: 3px;
    right: 3px;
}

/* Premium Notifications Dropdown Styling Override */
.dropdown-menu {
    border: 1px solid var(--line) !important;
    background-color: var(--bg-1) !important;
    box-shadow: var(--shadow-3) !important;
    border-radius: var(--r-3) !important;
}

.fixed-header {
    border-bottom: 1px solid var(--line) !important;
}

.fixed-footer {
    border-top: 1px solid var(--line) !important;
}

.fixed-header span {
    color: var(--fg-1) !important;
    font-weight: 700;
}

.fixed-footer a {
    color: var(--signal) !important;
}

.fixed-footer a:hover {
    filter: brightness(1.1);
}

.update-notification-status {
    color: var(--fg-1) !important;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}

.update-notification-status:hover {
    background-color: var(--bg-2) !important;
    color: var(--fg-0) !important;
}

.update-notification-status .text-muted {
    color: var(--fg-3) !important;
}

.update-notification-status:hover .text-muted {
    color: var(--fg-2) !important;
}

.update-notification-status i.bx-bell {
    color: var(--signal) !important;
    background: oklch(from var(--signal) l c h / 0.12) !important;
    padding: 6px;
    border-radius: var(--r-2);
}


/* language switcher name */
.tk-cbar .tk-lang-name {
    font-size: 12px;
    color: var(--fg-1);
}

/* user pill */
.tk-cbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border-radius: 999px;
    color: var(--fg-1);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-1);
}

.tk-cbar-user:hover {
    background: var(--bg-2);
}

.tk-cbar-user img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.tk-cbar-username {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg-0);
}

/* theme toggle: show exactly one icon (the state you can switch TO) */
.tk-ico-moon,
.tk-ico-sun {
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.tk-ico-moon {
    display: inline-flex;
}

/* light mode → show moon */
.tk-ico-sun {
    display: none;
}

[data-theme="dark"] .tk-ico-moon {
    display: none;
}

/* dark mode → show sun */
[data-theme="dark"] .tk-ico-sun {
    display: inline-flex;
}

/* In dark mode, let Bootstrap dropdown menus follow our surfaces */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-1);
    border-color: var(--line);
    color: var(--fg-1);
}

[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--fg-1);
}

[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--line);
}

@media (max-width: 1199.98px) {
    body.v2-shell .tk-cbar-burger {
        display: inline-flex;
    }
}

@media (max-width: 640px) {

    .tk-cbar-search-text,
    .tk-kbd {
        display: none;
    }

    .tk-cbar-search {
        flex: 0 0 32px;
        width: 32px;
        padding: 0;
        justify-content: center;
        margin-left: auto;
    }

    .tk-cbar-crumb-title,
    .tk-cbar-username,
    .tk-lang-name {
        display: none;
    }
}

/* =====================================================================
   TASKIFY v2 — Mobile / responsive shell behaviour
   < 1200px: context panel becomes a slide-over above the content, with a
   dismissible scrim. The rail stays as a fixed quick-nav strip.
   ===================================================================== */
@media (max-width: 1199.98px) {

    /* Slide-over panel sits above the rail and content */
    body.v2-shell .tk-panel {
        top: 0;
        bottom: 0;
        z-index: 1045;
        box-shadow: var(--shadow-3, 0 8px 24px rgba(0, 0, 0, .18));
    }

    /* Dismissible scrim behind the open panel (click anywhere to close) */
    body.v2-shell.tk-panel-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1042;
        background: oklch(0 0 0 / 0.42);
        animation: tk-fade-in var(--t-2) var(--ease);
    }
}

@keyframes tk-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Tablet / small desktop: tighten the command bar spacing and hide sidebar by default */
@media (max-width: 1199.98px) {
    .tk-cbar {
        gap: 8px;
        padding: 0 12px;
    }

    .tk-cbar-actions {
        gap: 0;
    }

    body.v2-shell .tk-rail {
        transform: translateX(-100%);
        transition: transform var(--t-2) var(--ease);
        z-index: 1050;
    }

    body.v2-shell .tk-panel {
        transform: translateX(calc(-100% - var(--rail-w)));
        transition: transform var(--t-2) var(--ease);
        z-index: 1049;
    }

    body.v2-shell .layout-page {
        padding-left: 0 !important;
    }

    html.layout-menu-expanded body.v2-shell .tk-rail {
        transform: translateX(0);
    }

    html.layout-menu-expanded body.v2-shell .tk-panel {
        transform: translateX(0);
    }

    html.layout-menu-expanded body.v2-shell .layout-overlay {
        display: block;
        z-index: 1040;
    }
}

/* Phones: drop the breadcrumb separator, keep just the workspace chip */
@media (max-width: 480px) {
    .tk-cbar {
        padding: 0 10px;
    }

    .tk-cbar-sep {
        display: none;
    }

    .tk-cbar-divider {
        display: none;
    }

    /* Full-bleed slide-over panel for very narrow screens */
    body.v2-shell .tk-panel {
        width: min(86vw, 320px);
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

    body.v2-shell .tk-panel,
    body.v2-shell .layout-page,
    .tk-rail-btn,
    .tk-rail-btn svg {
        transition: none !important;
    }

    body.v2-shell.tk-panel-open::before {
        animation: none;
    }
}

/* =====================================================================
   TASKIFY v2 — Global search modal (#globalSearchModal) restyled to the
   command-palette design system. Scoped to the modal id only, so no other
   modal is touched and every JS hook/id/class is preserved.
   ===================================================================== */
#globalSearchModal .modal-dialog {
    max-width: 600px;
    margin: 8vh auto auto;
}

#globalSearchModal .modal-content {
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-3, 8px);
    box-shadow: var(--shadow-4, 0 24px 48px rgba(0, 0, 0, .28));
    overflow: hidden;
    max-height: 78vh;
}

/* Kit typography (Inter) for the search palette + shell chrome, so labels
   read in the toolkit font instead of the app's default. Mono accents keep
   their JetBrains Mono via --font-mono. */
#globalSearchModal,
.tk-rail,
.tk-panel,
.tk-cbar,
.tk-pal {
    font-family: var(--font-sans);
}

#globalSearchModal .tk-pal-label,
#globalSearchModal .tk-search-input {
    font-family: var(--font-sans);
}

/* Palette-style search row (icon · borderless input · ESC · close) */
#globalSearchModal .tk-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}

#globalSearchModal .tk-search-row-icon {
    color: var(--fg-3);
    flex: 0 0 auto;
}

#globalSearchModal .tk-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    font-size: 15px;
    color: var(--fg-0);
    padding: 3px 0;
}

#globalSearchModal .tk-search-input::placeholder {
    color: var(--fg-3);
}

#globalSearchModal .tk-search-row .tk-kbd {
    flex: 0 0 auto;
}

#globalSearchModal .tk-search-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-2);
    color: var(--fg-3);
    cursor: pointer;
    transition: background var(--t-1), color var(--t-1);
}

#globalSearchModal .tk-search-close:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

/* Tabs (nav-pills) → clean segmented control. Forced over Sneat's
   !important primary styles so the active pill uses the design accent. */
#globalSearchModal .search-tabs .nav-pills {
    background: var(--bg-2) !important;
    border-radius: var(--r-2);
    gap: 2px;
    padding: 3px !important;
}

#globalSearchModal .search-tabs .nav-link {
    color: var(--fg-2) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: background var(--t-1), color var(--t-1);
}

#globalSearchModal .search-tabs .nav-link:hover {
    color: var(--fg-0) !important;
    background: var(--bg-0) !important;
}

#globalSearchModal .search-tabs .nav-link.active {
    color: var(--signal-fg) !important;
    background: var(--signal) !important;
}

#globalSearchModal .search-tabs .nav-link .badge {
    background: var(--bg-3) !important;
    color: var(--fg-2) !important;
    font-family: var(--font-mono);
    font-weight: 600;
}

#globalSearchModal .search-tabs .nav-link.active .badge {
    background: oklch(0 0 0 / 0.18) !important;
    color: var(--signal-fg) !important;
}

#globalSearchModal .search-tabs .border-bottom {
    border-color: var(--line) !important;
}

/* Section headings */
#globalSearchModal h6 {
    color: var(--fg-3) !important;
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wide);
}

#globalSearchModal .popular-section i.bx-star {
    color: var(--warn) !important;
}

/* Quick-access buttons → neutral design-system surfaces */
#globalSearchModal .popular-section .btn {
    background: var(--bg-0) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-1) !important;
    border-radius: var(--r-2) !important;
    transition: background var(--t-1), border-color var(--t-1);
}

#globalSearchModal .popular-section .btn:hover {
    background: var(--bg-2) !important;
    border-color: var(--line-2) !important;
    color: var(--fg-0) !important;
}

/* Recent searches chips (rendered by navbar.js as .recent-search) */
#globalSearchModal .recent-search {
    background: var(--bg-2) !important;
    color: var(--fg-1) !important;
    border: 1px solid var(--line) !important;
    cursor: pointer;
}

#globalSearchModal .recent-search:hover {
    background: var(--bg-3) !important;
    color: var(--fg-0) !important;
}

/* Results list */
#globalSearchModal #searchResultsList {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    background: var(--bg-0);
}

#globalSearchModal .search-category-header {
    background: var(--bg-2) !important;
    border-bottom: 1px solid var(--line) !important;
}

#globalSearchModal .search-category-header small {
    color: var(--fg-2) !important;
}

#globalSearchModal .search-category-header .badge {
    background: var(--signal) !important;
    color: var(--signal-fg) !important;
}

#globalSearchModal .search-result-item {
    padding: 8px 12px !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--fg-1) !important;
    transition: background var(--t-1);
}

#globalSearchModal .search-result-item:last-child {
    border-bottom: 0 !important;
}

#globalSearchModal .search-result-item:hover,
#globalSearchModal .search-result-item.active {
    background: var(--bg-2) !important;
}

#globalSearchModal .search-result-item .result-title {
    color: var(--fg-0) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

#globalSearchModal .search-result-item .result-icon {
    width: 30px;
    height: 30px;
    /* Override Bootstrap bg-* colorClass utilities so icons read as token tiles */
    background: var(--bg-2) !important;
    color: var(--fg-1) !important;
    border-radius: var(--r-2) !important;
    flex: 0 0 auto;
}

#globalSearchModal .search-result-item .result-icon i {
    color: var(--fg-1) !important;
    font-size: 16px;
}

#globalSearchModal .search-result-item .bx-chevron-right {
    color: var(--fg-3) !important;
    font-size: 18px;
}

/* Loading + no-results states themed to the design system */
#globalSearchModal #searchResultsList .spinner-border {
    color: var(--signal) !important;
}

#globalSearchModal #searchResultsList h6 {
    color: var(--fg-1) !important;
}

#globalSearchModal #searchResultsList p,
#globalSearchModal #searchResultsList .text-muted {
    color: var(--fg-3) !important;
}

#globalSearchModal #searchResultsList .no-results .bg-light {
    background: var(--bg-2) !important;
}

#globalSearchModal #searchResultsList .no-results .bg-light i {
    color: var(--fg-3) !important;
}

/* Clear button */
#globalSearchModal .search-results .btn-outline-secondary {
    border-color: var(--line) !important;
    color: var(--fg-2) !important;
}

#globalSearchModal .search-results .btn-outline-secondary:hover {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
}

/* ---- Command palette: all menus as navigable items ---- */
#globalSearchModal .tk-pal {
    padding: 6px;
    max-height: 52vh;
    overflow: auto;
}

#globalSearchModal .tk-pal-group {
    padding: 2px 0 6px;
}

#globalSearchModal .tk-pal-section {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 8px 10px 4px;
    font-weight: 500;
}

/* Override Bootstrap table-hover to avoid blue backgrounds */
body.v2-shell .table-hover>tbody>tr:hover>* {
    background: var(--bg-2) !important;
    color: inherit !important;
    box-shadow: none !important;
}

#globalSearchModal .tk-pal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--r-2);
    color: var(--fg-1) !important;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-1), color var(--t-1);
}

#globalSearchModal .tk-pal-item:hover,
#globalSearchModal .tk-pal-item[data-active="true"] {
    background: var(--bg-2);
    color: var(--fg-0) !important;
}

#globalSearchModal .tk-pal-ico {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border-radius: var(--r-2);
    color: var(--fg-2);
    transition: background var(--t-1), color var(--t-1);
}

#globalSearchModal .tk-pal-item:hover .tk-pal-ico,
#globalSearchModal .tk-pal-item[data-active="true"] .tk-pal-ico {
    background: var(--bg-3);
    color: var(--fg-0);
}

#globalSearchModal .tk-pal-ico i {
    font-size: 16px;
}

#globalSearchModal .tk-pal-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#globalSearchModal .tk-pal-meta {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--fg-3);
    font-family: var(--font-mono);
    text-transform: capitalize;
}

#globalSearchModal .tk-pal-empty {
    padding: 24px;
    text-align: center;
    color: var(--fg-3);
    font-size: 12.5px;
}

/* The command palette replaces the old quick-access / recent grid as the default view */
#globalSearchModal #popularSection {
    display: none !important;
}

/* =====================================================================
   TASKIFY v2 — Dashboard: welcome card (Graphite hero). Sizes/colors
   mirror the kit tokens exactly (card r-2, eyebrow fs-xs, title fs-3xl).
   ===================================================================== */
.tk-welcome {
    position: relative;
    overflow: hidden;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 22px 24px;
    margin: 24px 0 16px;
    font-family: var(--font-sans);
}

.tk-welcome::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -3%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--signal-glow), transparent 66%);
    pointer-events: none;
    z-index: 0;
}

.tk-welcome-main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.tk-welcome-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-3);
}

.tk-welcome-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fg-0);
    margin: 6px 0 0;
}

.tk-welcome-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-1);
    margin: 8px 0 0;
}

.tk-welcome-stat {
    color: var(--fg-0);
    font-weight: 700;
}

.tk-welcome-stat.tk-stat-warn {
    color: var(--warn);
}

.tk-welcome-dot {
    color: var(--fg-3);
    margin: 0 4px;
}

@media (max-width: 575.98px) {
    .tk-welcome {
        padding: 18px;
    }

    .tk-welcome-title {
        font-size: 22px;
    }
}

/* =====================================================================
   TASKIFY v2 — Dashboard: KPI metric-strip (pixel-matched to
   core-design.html). Joined cells, mono values, no icons. The .count
   hook + #id are kept so dashboard.js fills live values.
   ===================================================================== */
.tk-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    margin: 0 0 24px;
    font-family: var(--font-sans);
}

@media (max-width: 1100px) {
    .tk-metric-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .tk-metric-strip {
        grid-template-columns: 1fr;
    }
}

.tk-metric {
    background: var(--bg-1);
    padding: 12px 14px;
    min-width: 0;
    display: block;
    text-decoration: none;
    transition: background var(--t-1);
}

.tk-metric:hover {
    background: var(--bg-2);
}

.tk-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tk-metric-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tk-metric-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg-0);
    line-height: 1.15;
}

/* Trend badge (top-right of each cell): arrow glyph + signed delta.
   Color is driven by the .is-up / .is-down / .is-flat modifier from JS. */
.tk-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex: none;
    color: var(--fg-2);
    line-height: 1;
}

.tk-metric-trend:empty {
    display: none;
}

.tk-metric-trend .tk-trend-arrow {
    font-size: 11px;
    line-height: 1;
}

.tk-metric-trend.is-up {
    color: var(--ok, #22c55e);
}

.tk-metric-trend.is-down {
    color: var(--err, #ef4444);
}

.tk-metric-trend.is-flat {
    color: var(--fg-3, var(--fg-2));
}

/* Sparkline: tiny inline-SVG trend line under the value. Matches the kit
   <x-data.sparkline> default — a neutral ink line, no fill, no end dot. */
.tk-metric-spark {
    margin-top: 8px;
    height: 28px;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

.tk-metric-spark:empty {
    display: none;
}

.tk-metric-spark svg {
    display: block;
    width: 100%;
    height: 28px;
    overflow: visible;
}

.tk-metric-spark .tk-spark-line {
    fill: none;
    stroke: var(--fg-0);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* =====================================================================
   Taskify v2 — Dashboard hero area chart (Income vs Expense)
   Mirrors the kit <x-cards.card> shell + <x-data.area-chart> styling.
   Rendered by initHeroAreaChart() in custom.js from the existing AJAX.
   ===================================================================== */
body.v2-shell .tk-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    margin: 0 0 24px;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
}

body.v2-shell .tk-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--line);
}

body.v2-shell .tk-card-head-main {
    min-width: 0;
}

body.v2-shell .tk-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: 4px;
    font-weight: 500;
}

body.v2-shell .tk-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg-0);
    margin: 0;
    letter-spacing: var(--tracking-snug);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.v2-shell .tk-card-title-sub {
    font-weight: 400;
    color: var(--fg-2);
    font-size: 12px;
}

body.v2-shell .tk-card-body {
    padding: 14px;
    flex: 1 1 auto;
}

/* Legend */
.tk-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.tk-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tk-legend::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--fg-2);
    flex: none;
}

.tk-legend--income::before {
    background: var(--signal);
}

.tk-legend--expense::before {
    background: var(--fg-2);
}

/* Area chart canvas — design-system palette: lime signal accent (income) +
   neutral graphite (expense), matching the standalone Studio look. */
.tk-area-chart {
    position: relative;
    width: 100%;
    min-height: 240px;
}

.tk-area-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
}

/* When the income card stretches to match the right column, let the chart
   fill the extra height instead of leaving a gap below it. */
body.v2-shell .tk-hero-card .tk-card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.v2-shell .tk-hero-card .tk-area-chart {
    flex: 1 1 auto;
}

.tk-area-grid line {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.tk-area-axis text {
    fill: var(--fg-3);
    font-size: 10px;
    font-family: var(--font-mono);
}

.tk-area-line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tk-area-line--income {
    stroke: var(--signal);
    stroke-width: 2;
}

.tk-area-line--expense {
    stroke: var(--fg-2);
    stroke-width: 1.6;
}

.tk-area-dot {
    stroke-width: 1.5;
}

.tk-area-dot--income {
    fill: var(--bg-0);
    stroke: var(--signal);
}

.tk-area-dot--expense {
    fill: var(--bg-0);
    stroke: var(--fg-2);
}

.tk-area-cursor {
    stroke: var(--line-2, var(--line));
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0;
}

.tk-area-chart.is-hover .tk-area-cursor {
    opacity: 1;
}

/* Gradient stops are themed via CSS so dark mode tokens apply automatically. */
.tk-grad--income .tk-g0 {
    stop-color: var(--signal);
    stop-opacity: 0.28;
}

.tk-grad--income .tk-g1 {
    stop-color: var(--signal);
    stop-opacity: 0;
}

.tk-grad--expense .tk-g0 {
    stop-color: var(--fg-2);
    stop-opacity: 0.12;
}

.tk-grad--expense .tk-g1 {
    stop-color: var(--fg-2);
    stop-opacity: 0;
}

.tk-area-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    color: var(--fg-3);
    font-size: 12.5px;
    font-family: var(--font-sans);
}

/* Singleton chart tooltip (kit .chart-tt) */
.tk-chart-tt {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    background: var(--fg-0);
    color: var(--bg-0);
    border-radius: 5px;
    padding: 7px 9px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-3, 0 6px 20px rgba(0, 0, 0, .20));
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));
    transition: opacity 120ms var(--ease, ease);
}

.tk-chart-tt.is-on {
    opacity: 1;
}

.tk-chart-tt-date {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.65;
    margin-bottom: 3px;
}

.tk-chart-tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tk-chart-tt-row+.tk-chart-tt-row {
    margin-top: 2px;
}

.tk-chart-tt-sw {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: none;
}

.tk-chart-tt-val {
    font-weight: 600;
    margin-left: auto;
    padding-left: 14px;
}

/* =====================================================================
   Taskify v2 — Overview distribution donut (kit <x-data.donut>)
   4-col card beside the area chart; projects/tasks/todos. Rendered by
   initOverviewDonut() from the existing /dashboard/data AJAX.
   ===================================================================== */
.tk-donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
    min-height: 132px;
}

.tk-donut {
    flex: none;
    line-height: 0;
}

.tk-donut svg {
    display: block;
}

.tk-donut .donut-segment {
    transition: opacity 120ms var(--ease, ease);
    cursor: pointer;
}

.tk-donut .donut-segment.is-faded {
    opacity: 0.35;
}

.tk-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tk-donut-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--fg-1);
    font-family: var(--font-sans);
}

.tk-donut-legend-row .tk-ld {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.tk-donut-legend-row .tk-ll {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-donut-legend-row .tk-lv {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--fg-0);
}

@media (max-width: 420px) {
    .tk-donut-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .tk-donut {
        align-self: center;
    }
}

/* Segmented control (kit .seg) — Income | Expense | Both selector */
body.v2-shell .tk-seg {
    display: inline-flex;
    flex: none;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 2px;
    gap: 2px;
}

body.v2-shell .tk-seg-btn {
    height: 24px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--fg-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background var(--t-1, 100ms), color var(--t-1, 100ms);
}

body.v2-shell .tk-seg-btn:hover {
    color: var(--fg-0);
}

body.v2-shell .tk-seg-btn.on {
    background: var(--bg-0);
    color: var(--fg-0);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, 0.08));
}

body.v2-shell .tk-seg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

/* Header "view more" link in kit card heads */
body.v2-shell .tk-card-link {
    flex: none;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-1, 100ms);
}

body.v2-shell .tk-card-link:hover {
    color: var(--signal);
}

/* Donut empty state */
.tk-donut-empty {
    color: var(--fg-3);
    font-size: 12px;
    font-family: var(--font-sans);
}

/* =====================================================================
   Taskify v2 — Recent Activity feed (left column, kit list)
   ===================================================================== */
.tk-act-list {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tk-act-list::-webkit-scrollbar {
    display: none;
}

.tk-act-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.tk-act-row:first-child {
    border-top: 0;
}

.tk-act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
    background: var(--fg-3);
}

.tk-act-dot.is-created {
    background: var(--ok);
}

.tk-act-dot.is-updated {
    background: var(--info);
}

.tk-act-dot.is-deleted {
    background: var(--err);
}

.tk-act-dot.is-status {
    background: var(--warn);
}

.tk-act-main {
    min-width: 0;
    flex: 1;
}

.tk-act-msg {
    font-size: 12.5px;
    color: var(--fg-1);
    line-height: 1.45;
}

.tk-act-time {
    font-size: 10.5px;
    color: var(--fg-3);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.tk-act-empty {
    color: var(--fg-3);
    font-size: 12.5px;
    text-align: center;
    padding: 16px 0;
}



/* Equal-height dashboard columns: each column is a flex column whose last
   card grows to absorb slack, so the left and right bottoms line up. The
   explicit gap guarantees spacing even if the Bootstrap gap utility is absent. */
body.v2-shell .tk-dash-grid>[class*="col-"].d-flex.flex-column {
    gap: 24px;
}

body.v2-shell .tk-dash-grid .tk-card {
    margin-bottom: 0;
}

/* Whole content surface follows the tokens (light + dark) */
body.v2-shell,
body.v2-shell .layout-wrapper,
body.v2-shell .layout-container,
body.v2-shell .layout-page,
body.v2-shell .content-wrapper {
    background-color: var(--bg-0) !important;
}

body.v2-shell .content-wrapper .container-fluid,
body.v2-shell .content-wrapper .container-xxl,
body.v2-shell .content-wrapper .container-p-y {
    background-color: transparent !important;
}



/* =====================================================================
   Taskify v2 — Filter bar above the table (selects · days · filter btn)
   Scoped to .tk-filter-bar so only the redesigned filters are affected.
   ===================================================================== */
body.v2-shell .tk-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

body.v2-shell .tk-filter-bar>[class*="col-"] {
    margin-bottom: 0 !important;
    padding: 0;
    flex: 1 1 200px;
    min-width: 160px;
}

body.v2-shell .tk-filter-bar>[class*="col-"]:last-child {
    flex: 0 0 auto;
    min-width: 0;
}

body.v2-shell .tk-filter-bar .form-control {
    height: var(--ctrl-h-md);
    padding: 0 10px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    color: var(--fg-0);
    border-radius: var(--r-2);
    font-size: var(--fs-base);
    box-shadow: none;
}

body.v2-shell .tk-filter-bar .form-control::placeholder {
    color: var(--fg-3);
}

body.v2-shell .tk-filter-bar .form-control:hover {
    border-color: var(--line-2);
}

body.v2-shell .tk-filter-bar .form-control:focus {
    border-color: var(--fg-1);
    box-shadow: none;
    outline: none;
}

body.v2-shell .tk-filter-bar .input-group-merge {
    border-radius: var(--r-2);
}

body.v2-shell .tk-filter-bar .btn-primary {
    height: var(--ctrl-h-md);
    min-width: var(--ctrl-h-md);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--signal) !important;
    border: 1px solid var(--signal) !important;
    color: var(--signal-fg) !important;
    border-radius: var(--r-2);
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 500;
}

body.v2-shell .tk-filter-bar .btn-primary:hover {
    filter: brightness(1.04);
}

/* Auto-filter replaces the explicit Filter button — hide it on the dashboard cards. */
body.v2-shell #upcoming_days_birthday_filter,
body.v2-shell #upcoming_days_wa_filter,
body.v2-shell #upcoming_days_mol_filter {
    display: none !important;
}

/* =====================================================================
   Taskify v2 — Select2 to the design system (themes every Select2).
   Selection box matches the kit input; dropdown matches the kit menu.
   ===================================================================== */
/* selection box = kit .tag-strip / .input (min-height ctrl-h-md, signal focus) */
body.v2-shell .select2-container--default .select2-selection--single,
body.v2-shell .select2-container--default .select2-selection--multiple {
    box-sizing: border-box !important;
    min-height: var(--ctrl-h-md) !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2);
    color: var(--fg-0) !important;
    font-size: var(--fs-base);
}

body.v2-shell .select2-container--default .select2-selection--single {
    height: var(--ctrl-h-md) !important;
}

body.v2-shell .select2-container--default .select2-selection--multiple {
    padding: 2px 4px !important;
}

body.v2-shell .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: normal;
    color: var(--fg-0) !important;
    padding-left: 10px;
}

body.v2-shell .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.v2-shell .select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    margin: 0 !important;
}

body.v2-shell .select2-container--default .select2-selection--single .select2-selection__clear {
    order: 2;
    margin-left: auto;
    margin-right: 12px;
    float: none;
    display: flex;
    align-items: center;
    height: 100%;
}

body.v2-shell .select2-container--default .select2-selection__placeholder,
body.v2-shell .select2-container--default .select2-search__field::placeholder {
    color: var(--fg-3);
}

body.v2-shell .select2-container--default .select2-selection--single:hover,
body.v2-shell .select2-container--default .select2-selection--multiple:hover {
    border-color: var(--line-2) !important;
}

body.v2-shell .select2-container--default.select2-container--focus .select2-selection--single,
body.v2-shell .select2-container--default.select2-container--focus .select2-selection--multiple,
body.v2-shell .select2-container--default.select2-container--open .select2-selection--single,
body.v2-shell .select2-container--default.select2-container--open .select2-selection--multiple,
body.v2-shell .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--fg-1);
    box-shadow: none;
    outline: none;
}

/* tokens = kit .tag-token (bg-3, no border, 22px, × after) */
body.v2-shell .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-3);
    border: 0;
    color: var(--fg-0);
    border-radius: 3px;
    font-size: 11px;
    height: 22px;
    line-height: 1;
    padding: 0 6px;
    margin: 2px 4px 2px 0;
}

body.v2-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order: 2;
    color: var(--fg-3);
    font-size: 14px;
    line-height: 1;
    margin: 0;
    border: 0;
    background: transparent;
    float: none;
}

body.v2-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--err);
    background: transparent;
}

body.v2-shell .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--fg-0);
    font-size: var(--fs-base);
    margin-top: 0;
    height: 22px;
}

/* dropdown = kit .dropdown-menu; options = kit .dropdown-item */
body.v2-shell .select2-dropdown,
.select2-container--open .select2-dropdown {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2);
    box-shadow: var(--shadow-3) !important;
    color: var(--fg-1) !important;
    padding: 4px;
}

body.v2-shell .select2-search--dropdown .select2-search__field,
.select2-container--open .select2-search--dropdown .select2-search__field {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2);
    color: var(--fg-0) !important;
    font-size: var(--fs-base);
    padding: 0 8px;
    height: var(--ctrl-h-sm);
}

body.v2-shell .select2-results__option,
.select2-container--open .select2-results__option {
    color: var(--fg-1);
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 4px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--bg-3) !important;
    color: var(--fg-0) !important;
}

/* =====================================================================
   Taskify v2 — Tabs (Bootstrap .nav-tabs -> kit .tabs, signal underline)
   ===================================================================== */
body.v2-shell .nav-tabs {
    border-bottom: 1px solid var(--line);
    gap: 4px;
    border-radius: 0;
}

body.v2-shell .nav-tabs .nav-link {
    position: relative;
    margin: 0;
    padding: 8px 12px !important;
    font-size: var(--fs-base);
    color: var(--fg-2);
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

body.v2-shell .nav-tabs .nav-link:hover {
    color: var(--fg-0);
}

body.v2-shell .nav-tabs .nav-link.active {
    color: var(--fg-0) !important;
    font-weight: 500;
    background: transparent !important;
    box-shadow: none !important;
    /* kill the Sneat blue inset underline; keep only the ::after signal line */
}

body.v2-shell .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    background: var(--signal);
    border-radius: 1px;
}

body.v2-shell .nav-tabs.rounded-pill {
    border-radius: 0;
}

/* =====================================================================
   Taskify v2 — Alert (Bootstrap .alert -> kit .alert, token tints)
   ===================================================================== */
body.v2-shell .alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-2);
    font-size: var(--fs-base);
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg-1);
}

body.v2-shell .alert .btn-close {
    color: var(--fg-3);
}

body.v2-shell .alert-primary,
body.v2-shell .alert-info {
    background: oklch(from var(--info) l c h / 0.08);
    border-color: oklch(from var(--info) l c h / 0.25);
    color: var(--fg-1);
}

body.v2-shell .alert-success {
    background: oklch(from var(--ok) l c h / 0.08);
    border-color: oklch(from var(--ok) l c h / 0.25);
    color: var(--fg-1);
}

body.v2-shell .alert-warning {
    background: oklch(from var(--warn) l c h / 0.10);
    border-color: oklch(from var(--warn) l c h / 0.30);
    color: var(--fg-1);
}

body.v2-shell .alert-danger {
    background: oklch(from var(--err) l c h / 0.08);
    border-color: oklch(from var(--err) l c h / 0.25);
    color: var(--fg-1);
}

/* =====================================================================
   Taskify v2 — Breadcrumb (Bootstrap .breadcrumb -> kit)
   ===================================================================== */
body.v2-shell .breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    background: transparent;
    padding: 0;
    margin: 0;
}

body.v2-shell .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

body.v2-shell .breadcrumb-item a {
    color: var(--fg-2);
    text-decoration: none;
}

body.v2-shell .breadcrumb-item a:hover {
    color: var(--fg-0);
}

body.v2-shell .breadcrumb-item.active {
    color: var(--fg-0);
    font-weight: 500;
}

body.v2-shell .breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
}

body.v2-shell .breadcrumb-item+.breadcrumb-item::before {
    color: var(--fg-3);
    padding-right: 6px;
}

/* =====================================================================
   Taskify v2 — Spinner (kit) — available for loaders/empty states
   ===================================================================== */
body.v2-shell .tk-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line-2);
    border-top-color: var(--signal);
    border-radius: 50%;
    animation: tk-spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes tk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =====================================================================
   Taskify v2 — Tom Select Dark Mode & UI Fixes
   ===================================================================== */
body.v2-shell .ts-wrapper.form-select,
body.v2-shell .ts-wrapper.form-control {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}

body.v2-shell .ts-wrapper .ts-control {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 6px !important;
    padding-right: 30px !important;
    /* space for arrow */
    min-height: var(--ctrl-h-md) !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-0) !important;
    border-radius: var(--r-2) !important;
    transition: border-color var(--t-1) var(--ease) !important;
}

body.v2-shell .ts-wrapper:hover .ts-control {
    border-color: var(--line-2) !important;
}

body.v2-shell .ts-wrapper.focus .ts-control,
body.v2-shell .ts-wrapper.input-active .ts-control {
    border-color: var(--fg-1) !important;
    box-shadow: none !important;
    outline: none !important;
}

body.v2-shell .ts-control>.item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: var(--bg-3) !important;
    color: var(--fg-0) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    height: 22px !important;
    line-height: 1 !important;
    padding: 0 6px !important;
    margin: 0 !important;
    border: 0 !important;
}

body.v2-shell .ts-control>.item .remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 1 !important;
    color: var(--fg-3) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    border: 0 !important;
    margin-left: 4px !important;
    padding: 0 !important;
}

body.v2-shell .ts-control>.item .remove:hover {
    color: var(--err) !important;
    background: transparent !important;
}

body.v2-shell .ts-dropdown {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    box-shadow: var(--shadow-3) !important;
    color: var(--fg-1) !important;
    padding: 4px !important;
    margin-top: 4px !important;
}

body.v2-shell .ts-dropdown .option {
    padding: 7px 10px !important;
    color: var(--fg-1) !important;
    border-radius: 4px !important;
}

body.v2-shell .ts-dropdown .option.active,
body.v2-shell .ts-dropdown .option:hover,
body.v2-shell .ts-dropdown .active {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
}

body.v2-shell .ts-control input {
    color: var(--fg-0) !important;
    font-size: var(--fs-base) !important;
}

body.v2-shell .ts-control input::placeholder {
    color: var(--fg-3) !important;
}

/* =====================================================================
   Taskify v2 — Global Form Controls / Inputs & Focus Rings
   ===================================================================== */
body.v2-shell .form-control:not(#phone),
body.v2-shell .form-select {
    box-sizing: border-box !important;
    height: var(--ctrl-h-md) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    line-height: 30px !important;
    /* matches ctrl-h-md (32px) - borders (2px) */
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-0) !important;
    border-radius: var(--r-2) !important;
    font-size: var(--fs-base) !important;
    box-shadow: none !important;
    transition: border-color var(--t-1) var(--ease) !important;
}

body.v2-shell #phone {
    box-sizing: border-box !important;
    height: var(--ctrl-h-md) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 10px !important;
    line-height: 30px !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-0) !important;
    border-radius: var(--r-2) !important;
    font-size: var(--fs-base) !important;
    box-shadow: none !important;
    transition: border-color var(--t-1) var(--ease) !important;
}

body.v2-shell textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: var(--lh-base) !important;
}

body.v2-shell .form-control::placeholder,
body.v2-shell .form-select::placeholder,
body.v2-shell input::placeholder,
body.v2-shell select::placeholder {
    color: var(--fg-3) !important;
    opacity: 1 !important;
}

body.v2-shell .form-control:hover,
body.v2-shell .form-select:hover {
    border-color: var(--line-2) !important;
}

body.v2-shell .form-control:focus,
body.v2-shell .form-select:focus {
    border-color: var(--fg-1) !important;
    box-shadow: none !important;
    outline: none !important;
}

body.v2-shell .form-control[type="file"] {
    line-height: 30px !important;
}

body.v2-shell .form-control[type="file"]::file-selector-button {
    background-color: var(--bg-2) !important;
    border: 0 !important;
    border-inline-end: 1px solid var(--line) !important;
    margin-inline-start: -10px !important;
    margin-inline-end: 10px !important;
    height: 100% !important;
    color: var(--fg-1) !important;
    transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease) !important;
}

body.v2-shell .form-control[type="file"]:hover::file-selector-button {
    background-color: var(--bg-3) !important;
    color: var(--fg-0) !important;
}

body.v2-shell input[type="number"] {
    line-height: normal !important;
    box-sizing: border-box !important;
}

/* Strip borders/backgrounds on input groups so the child form-control handles everything */
body.v2-shell .input-group,
body.v2-shell .input-group-merge {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

body.v2-shell .input-group .form-control:not(#phone),
body.v2-shell .input-group .form-select {
    padding-block: 0 !important;
    padding-inline: 10px !important;
    border-width: 1px !important;
}

body.v2-shell .input-group #phone {
    padding-block: 0 !important;
    padding-right: 10px !important;
    border-width: 1px !important;
}

body.v2-shell .input-group-text {
    box-sizing: border-box !important;
    height: var(--ctrl-h-md) !important;
    padding: 0 12px !important;
    line-height: normal !important;
    font-size: var(--fs-base) !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2);
}

body.v2-shell .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

body.v2-shell .input-group> :not(:last-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* =====================================================================
   Taskify v2 — Tabs (Design System Native)
   ===================================================================== */
body.v2-shell .tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
}

body.v2-shell .tab {
    position: relative;
    padding: 8px 12px !important;
    font-size: var(--fs-base);
    color: var(--fg-2);
    transition: color var(--t-1);
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    outline: none !important;
    box-shadow: none !important;
}

body.v2-shell .tab i {
    font-size: 15px !important;
}

body.v2-shell .tab:hover {
    color: var(--fg-0);
}

body.v2-shell .tab[data-active="true"],
body.v2-shell .tab.active {
    color: var(--fg-0) !important;
    font-weight: 500;
}

body.v2-shell .tab[data-active="true"]::after,
body.v2-shell .tab.active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    background: var(--signal) !important;
    border-radius: 1px;
}

/* =====================================================================
   Taskify v2 — Badge (Bootstrap .badge -> design-system .badge)
   One source, applied app-wide so every badge matches the toolkit:
   18px tall, 3px radius, 10.5px/600. primary = signal solid;
   success/warning/danger/info = soft token tints; secondary = neutral.
   Maps both Bootstrap solids (.bg-*) and Sneat softs (.bg-label-*).
   ===================================================================== */
body.v2-shell .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 18px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--bg-3);
    color: var(--fg-1);
}

/* count/pill badges keep their pill radius (e.g. notification counters) */
body.v2-shell .badge.rounded-pill {
    border-radius: 50rem;
}


body.v2-shell .badge.bg-primary,
body.v2-shell .badge.text-bg-primary {
    background: var(--signal) !important;
    color: #fff !important;
}



/* success / ok (soft) */
body.v2-shell .badge.bg-success,
body.v2-shell .badge.text-bg-success,
body.v2-shell .badge.bg-label-success,
body.v2-shell .badge.badge-ok {
    background: rgba(136, 241, 182, 0.12) !important;
    color: #447c5f !important;
}

/* warning / warn (soft) */
body.v2-shell .badge.bg-warning,
body.v2-shell .badge.text-bg-warning,
body.v2-shell .badge.bg-label-warning,
body.v2-shell .badge.badge-warn {
    background: oklch(from var(--warn) l c h / 0.18) !important;
    color: var(--warn) !important;
}

/* danger / err (soft) */
body.v2-shell .badge.bg-danger,
body.v2-shell .badge.text-bg-danger,
body.v2-shell .badge.bg-label-danger,
body.v2-shell .badge.badge-err {
    background: oklch(from var(--err) l c h / 0.18) !important;
    color: var(--err) !important;
}

/* info (soft) */
body.v2-shell .badge.bg-info,
body.v2-shell .badge.text-bg-info,
body.v2-shell .badge.bg-label-info,
body.v2-shell .badge.badge-info {
    background: oklch(from var(--info) l c h / 0.18) !important;
    color: var(--info) !important;
}

/* primary (solid/soft) */
body.v2-shell .badge.badge-primary {
    background: var(--signal) !important;
    color: var(--signal-fg) !important;
}

/* Design System - Chips, Tags, Status Pills, KBD, and Dots */
body.v2-shell .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 3px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    font-size: 11px;
    color: var(--fg-1);
    font-weight: 500;
}

body.v2-shell .chip-on {
    background: var(--signal-soft) !important;
    color: var(--signal-fg) !important;
    border-color: transparent !important;
}

[data-theme="dark"] body.v2-shell .chip-on {
    color: var(--signal) !important;
}

body.v2-shell .tag {
    font-size: 10px;
    color: var(--fg-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 500;
}

body.v2-shell .status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 3px;
    background: var(--bg-2);
    color: var(--fg-1);
}

body.v2-shell .status-progress {
    color: var(--signal-fg);
    background: var(--signal-soft);
}

[data-theme="dark"] body.v2-shell .status-progress {
    color: var(--signal);
    background: oklch(from var(--signal) l c h / 0.12);
}

body.v2-shell .status-review {
    color: var(--warn);
    background: oklch(from var(--warn) l c h / 0.15);
}

body.v2-shell .status-done {
    color: var(--ok);
    background: oklch(from var(--ok) l c h / 0.15);
}

body.v2-shell .status-blocked {
    color: var(--err);
    background: oklch(from var(--err) l c h / 0.15);
}

body.v2-shell .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fg-3);
    flex-shrink: 0;
}

body.v2-shell .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 3px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line);
    font-size: 10.5px;
    color: var(--fg-2);
}

body.v2-shell .dot-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--err);
    border: 1.5px solid var(--bg-0);
}

/* secondary / dark / light / white -> neutral kit badge */
body.v2-shell .badge.bg-secondary,
body.v2-shell .badge.text-bg-secondary,
body.v2-shell .badge.bg-label-secondary,
body.v2-shell .badge.bg-dark,
body.v2-shell .badge.bg-label-dark,
body.v2-shell .badge.bg-light,
body.v2-shell .badge.bg-white,
body.v2-shell .badge.bg-label-light {
    background: var(--bg-3) !important;
    color: var(--fg-1) !important;
}

/* badge with an icon inside keeps it sized to the text */
body.v2-shell .badge i,
body.v2-shell .badge .bx {
    font-size: 12px;
    line-height: 1;
}

/* =====================================================================
   Taskify v2 — Buttons (Bootstrap .btn -> design-system .btn)
   One source, applied app-wide. Compact kit sizing + token variants.
   ===================================================================== */
body.v2-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ctrl-h-md);
    padding: 0 14px;
    border-radius: var(--r-2);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease),
        border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), filter var(--t-1);
}

body.v2-shell .btn-sm,
body.v2-shell .btn-xs {
    height: var(--ctrl-h-sm);
    padding: 0 10px;
    font-size: var(--fs-sm);
    gap: 5px;
}

body.v2-shell .btn-lg {
    height: var(--ctrl-h-lg);
    padding: 0 18px;
    font-size: var(--fs-md);
    gap: 7px;
}

body.v2-shell .btn i,
body.v2-shell .btn .bx {
    font-size: 1.15em;
    line-height: 1;
}

body.v2-shell .btn:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

body.v2-shell .btn:disabled,
body.v2-shell .btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

body.v2-shell .btn.rounded-pill {
    border-radius: 50rem;
}

/* solid variants (primary = signal) */
body.v2-shell .btn-primary {
    background: var(--signal) !important;
    color: var(--signal-fg) !important;
    border-color: var(--signal) !important;
    box-shadow: var(--shadow-1), inset 0 1px 0 oklch(1 0 0 / 0.18);
}

body.v2-shell .btn-primary:hover {
    filter: brightness(1.05);
    color: var(--signal-fg) !important;
}

body.v2-shell .btn-success {
    background: var(--ok) !important;
    color: var(--signal-fg) !important;
    border-color: var(--ok) !important;
}

body.v2-shell .btn-danger {
    background: var(--err) !important;
    color: #fff !important;
    border-color: var(--err) !important;
}

body.v2-shell .btn-info {
    background: var(--info) !important;
    color: #fff !important;
    border-color: var(--info) !important;
}

body.v2-shell .btn-warning {
    background: var(--warn) !important;
    color: var(--signal-fg) !important;
    border-color: var(--warn) !important;
}

body.v2-shell .btn-success:hover,
body.v2-shell .btn-danger:hover,
body.v2-shell .btn-info:hover,
body.v2-shell .btn-warning:hover {
    filter: brightness(1.06);
}

/* secondary / neutral */
body.v2-shell .btn-secondary,
body.v2-shell .btn-light,
body.v2-shell .btn-default {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

body.v2-shell .btn-secondary:hover,
body.v2-shell .btn-light:hover,
body.v2-shell .btn-default:hover {
    background: var(--bg-3) !important;
    color: var(--fg-0) !important;
}

body.v2-shell .btn-dark {
    background: var(--fg-0) !important;
    color: var(--bg-0) !important;
    border-color: var(--fg-0) !important;
}

/* outline variants (kit .btn-outline) */
body.v2-shell [class*="btn-outline-"] {
    background: transparent !important;
    color: var(--fg-0) !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: none !important;
}

body.v2-shell [class*="btn-outline-"]:hover {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
}

body.v2-shell .btn-outline-primary {
    color: var(--fg-0) !important;
}

body.v2-shell .btn-outline-primary:hover {
    background: var(--signal-soft) !important;
    border-color: var(--signal) !important;
}

body.v2-shell .btn-outline-danger {
    color: var(--err) !important;
    border-color: oklch(from var(--err) l c h / 0.40) !important;
}

body.v2-shell .btn-outline-danger:hover {
    background: oklch(from var(--err) l c h / 0.10) !important;
    color: var(--err) !important;
}

body.v2-shell .btn-outline-success {
    color: var(--ok) !important;
    border-color: oklch(from var(--ok) l c h / 0.40) !important;
}

body.v2-shell .btn-outline-success:hover {
    background: oklch(from var(--ok) l c h / 0.12) !important;
    color: var(--ok) !important;
}

/* soft "label" buttons (Sneat .btn-label-*) -> kit soft tints */
body.v2-shell .btn-label-primary {
    background: var(--signal-soft) !important;
    color: var(--signal-fg) !important;
    border-color: transparent !important;
}

body.v2-shell .btn-label-success {
    background: oklch(from var(--ok) l c h / 0.16) !important;
    color: var(--ok) !important;
    border-color: transparent !important;
}

body.v2-shell .btn-label-danger {
    background: oklch(from var(--err) l c h / 0.16) !important;
    color: var(--err) !important;
    border-color: transparent !important;
}

body.v2-shell .btn-label-warning {
    background: oklch(from var(--warn) l c h / 0.16) !important;
    color: var(--warn) !important;
    border-color: transparent !important;
}

body.v2-shell .btn-label-info {
    background: oklch(from var(--info) l c h / 0.16) !important;
    color: var(--info) !important;
    border-color: transparent !important;
}

/* ghost / link */
body.v2-shell .btn-link {
    color: var(--fg-1) !important;
    text-decoration: none;
}

body.v2-shell .btn-link:hover {
    color: var(--signal) !important;
    background: transparent !important;
}

/* =====================================================================
   Taskify v2 — Modal (Bootstrap .modal -> design-system modal)
   ===================================================================== */
body.v2-shell .modal-content {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-4);
    color: var(--fg-1);
    overflow: hidden;
}

body.v2-shell .modal-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    background: transparent;
}

body.v2-shell .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-0);
    letter-spacing: var(--tracking-snug);
}

body.v2-shell .modal-body {
    padding: 16px 18px;
    color: var(--fg-1);
    font-size: var(--fs-base);
}

body.v2-shell .modal-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
    gap: 8px;
    margin: 0;
}

body.v2-shell .modal-footer>* {
    margin: 0;
}

body.v2-shell .modal-backdrop {
    background-color: #000;
}

body.v2-shell .modal-backdrop.show {
    opacity: 0.40;
}

body.v2-shell .modal .btn-close,
body.v2-shell .offcanvas .btn-close {
    opacity: 0.7;
}

body.v2-shell .modal .btn-close:hover,
body.v2-shell .offcanvas .btn-close:hover {
    opacity: 1;
}

/* dark-mode close icon is handled by Bootstrap 5.3 via data-bs-theme="dark" */

/* =====================================================================
   Taskify v2 — Offcanvas / drawer (Bootstrap .offcanvas -> design system)
   ===================================================================== */
body.v2-shell .offcanvas {
    background: var(--bg-1);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    color: var(--fg-1);
}

body.v2-shell .offcanvas-start {
    border-left: 0;
    border-right: 1px solid var(--line);
}

body.v2-shell .offcanvas-top {
    border-left: 0;
    border-bottom: 1px solid var(--line);
}

body.v2-shell .offcanvas-bottom {
    border-left: 0;
    border-top: 1px solid var(--line);
}

body.v2-shell .offcanvas-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    gap: 10px;
}

body.v2-shell .offcanvas-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--fg-0);
}

body.v2-shell .offcanvas-body {
    padding: 16px;
    color: var(--fg-1);
    font-size: var(--fs-base);
}

body.v2-shell .offcanvas-footer,
body.v2-shell .offcanvas .offcanvas-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.v2-shell .offcanvas-backdrop {
    background-color: #000;
}

body.v2-shell .offcanvas-backdrop.show {
    opacity: 0.40;
}

/* =====================================================================
   Taskify v2 — Kanban board (design-system .kanban / .kcol / .tcard).
   Restyles the existing board markup; drag-and-drop (dragula) hooks are
   untouched. Horizontal-scrolling columns, kit cards, drag states.
   ===================================================================== */
body.v2-shell .tk-kanban {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    /* The whole board is one scroll area (vertical for tall columns +
       horizontal for many columns). Each column grows to its content but
       has its own clip boundary (overflow:hidden below) which fixes the
       "covered" paint bug. Scrollbars are hidden. */
    overflow: auto;
    max-height: calc(100vh - 160px);
    padding: 2px 2px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* column = kit .kcol — grows to its content, clips to its own rounded box
   (the clip boundary stops the cards painting over each other on scroll) */
body.v2-shell .tk-kanban .kcol {
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    margin: 0;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
}

body.v2-shell .tk-kanban .kcol-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

body.v2-shell .tk-kanban .kcol-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--fg-3);
}

body.v2-shell .tk-kanban .kcol-dot-success {
    background: var(--ok);
}

body.v2-shell .tk-kanban .kcol-dot-danger {
    background: var(--err);
}

body.v2-shell .tk-kanban .kcol-dot-warning {
    background: var(--warn);
}

body.v2-shell .tk-kanban .kcol-dot-info {
    background: var(--info);
}

body.v2-shell .tk-kanban .kcol-dot-primary {
    background: var(--signal);
}

body.v2-shell .tk-kanban .kcol-dot-secondary,
body.v2-shell .tk-kanban .kcol-dot-dark {
    background: var(--fg-3);
}

body.v2-shell .tk-kanban .kcol-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--fg-0);
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.v2-shell .tk-kanban .kcol-count {
    font-size: 10.5px;
    color: var(--fg-3);
    background: var(--bg-2);
    padding: 1px 7px;
    border-radius: 99px;
    font-weight: 600;
    flex: none;
    font-family: var(--font-mono);
}

/* droppable body = kit .kcol-body (keeps id + data-status for dragula).
   Grows to its content; the board (above) provides the scroll. */
body.v2-shell .tk-kanban .kanban-tasks {
    padding: 8px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow: visible;
    min-height: 64px;
}

/* task card = kit .tcard (pixel-perfect) */
body.v2-shell .tcard {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: grab;
    font-family: var(--font-sans);
    transition: border-color var(--t-1), box-shadow var(--t-1);
}

body.v2-shell .tcard:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
}

body.v2-shell .tcard:active {
    cursor: grabbing;
}

body.v2-shell .tcard .mono {
    font-family: var(--font-mono);
}

/* meta: code + actions */
body.v2-shell .tcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.v2-shell .tcard-code {
    font-size: 10.5px;
    color: var(--fg-3);
    font-weight: 600;
    text-decoration: none;
}

body.v2-shell .tcard-code:hover {
    color: var(--fg-1);
}

body.v2-shell .tcard-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

body.v2-shell .tcard-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--fg-3);
    text-decoration: none;
    transition: background var(--t-1), color var(--t-1);
}

body.v2-shell .tcard-ic:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

body.v2-shell .tcard-ic i {
    font-size: 15px;
    line-height: 1;
}

body.v2-shell .tcard-ic .tcard-star-on {
    color: var(--warn);
}

body.v2-shell .tcard-ic .tcard-pin-on {
    color: var(--ok);
}

/* Suppress legacy Boxicons font injection when custom.js dynamically adds bx-star/bxs-star to the link */
body.v2-shell .tcard-ic.bx-star::before,
body.v2-shell .tcard-ic.bxs-star::before,
body.v2-shell .tcard-ic.bx-pin::before,
body.v2-shell .tcard-ic.bxs-pin::before {
    content: none !important;
}

/* Style the new design system SVG icons based on the data attributes updated by custom.js */
body.v2-shell .tcard-ic[data-favorite="1"] svg {
    fill: var(--warn);
    color: var(--warn);
}

body.v2-shell .tcard-ic[data-pinned="1"] svg {
    fill: var(--signal);
    color: var(--signal);
}


/* title */
body.v2-shell .tcard-title {
    font-size: var(--fs-base);
    color: var(--fg-0);
    margin: 0;
    font-weight: 600;
    line-height: var(--lh-snug);
}

body.v2-shell .tcard-title a {
    color: var(--fg-0);
    text-decoration: none;
}

body.v2-shell .tcard-title a:hover {
    color: var(--signal);
}

/* tags (kit .tag) */
body.v2-shell .tcard-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

body.v2-shell .tk-kanban .tag,
body.v2-shell .tcard .tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--fg-2);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}

body.v2-shell .tcard .tag:hover {
    border-color: var(--line-2);
    color: var(--fg-0);
}

body.v2-shell .tcard .tag-priority {
    font-weight: 600;
    background: transparent;
    border-color: var(--line);
}

body.v2-shell .tcard .tag-note i {
    font-size: 12px;
    color: var(--info);
}

/* footer: avatars + stats */
body.v2-shell .tcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.v2-shell .tk-av-stack {
    display: inline-flex;
    align-items: center;
}

body.v2-shell .tk-av-stack .av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    border: 1.5px solid var(--bg-1);
    background: var(--bg-3);
    color: var(--fg-2);
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    flex: none;
}

body.v2-shell .tk-av-stack .av:first-child {
    margin-left: 0;
}

body.v2-shell .tk-av-stack .av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent;
    font-size: 0;
}

body.v2-shell .tk-av-stack .av-more {
    background: var(--bg-2);
    color: var(--fg-2);
}

body.v2-shell .tk-av-stack .av-add {
    background: var(--bg-2);
    color: var(--fg-2);
    border-style: dashed;
}

body.v2-shell .tk-av-stack .av-add:hover {
    color: var(--signal);
    border-color: var(--signal);
}

body.v2-shell .tk-av-stack .av-add i {
    font-size: 13px;
}

body.v2-shell .tcard-stats {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* drag states (dragula): faded source + floating mirror + drop target ring */
.gu-transit {
    opacity: 0.35 !important;
}

body.v2-shell .gu-mirror,
.gu-mirror.tcard,
.gu-mirror.card {
    margin: 0 !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--signal) !important;
    border-radius: var(--r-2) !important;
    box-shadow: var(--shadow-3) !important;
    opacity: 0.97 !important;
    list-style: none;
    padding: 10px;
}

body.v2-shell .tk-kanban .kanban-tasks.gu-over,
body.v2-shell .tk-kanban .kanban-tasks.drag-over {
    box-shadow: inset 0 0 0 2px var(--signal);
    border-radius: var(--r-2);
}

/* Hide the board scrollbars — the board still scrolls (wheel / trackpad /
   drag), just with no visible scroller. */
body.v2-shell .tk-kanban,
body.v2-shell .tk-kanban .kanban-tasks {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.v2-shell .tk-kanban::-webkit-scrollbar,
body.v2-shell .tk-kanban .kanban-tasks::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* =====================================================================
   Taskify v2 — Filter rows (list pages: tasks, contracts, …)
   Labels + aligned controls + date-filter inputs, design system.
   ===================================================================== */
body.v2-shell .tk-filter-panel {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 16px;
    font-family: var(--font-sans);
}

body.v2-shell .tk-filter-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--fg-1);
}

body.v2-shell .tk-filter-row>[class*="col-"] {
    margin-bottom: 0;
}

/* =====================================================================
   Taskify v2 — Tom Select polish: dropdown caret + selected option
   ===================================================================== */
body.v2-shell .ts-wrapper {
    position: relative;
}

body.v2-shell .ts-wrapper.single .ts-control,
body.v2-shell .ts-wrapper.form-select .ts-control,
body.v2-shell .ts-wrapper.form-control .ts-control {
    cursor: pointer;
}

body.v2-shell .ts-wrapper.multi .ts-control {
    cursor: text;
}

body.v2-shell .ts-dropdown .option.selected {
    background: var(--bg-3);
    color: var(--fg-0);
}

body.v2-shell .ts-dropdown .no-results,
body.v2-shell .ts-dropdown .optgroup-header {
    color: var(--fg-3);
    font-size: var(--fs-sm);
    padding: 7px 10px;
}

body.v2-shell .ts-wrapper.disabled .ts-control {
    background: var(--bg-2);
    opacity: 0.7;
}

body.v2-shell .ts-control .clear-button {
    color: var(--fg-3);
}

body.v2-shell .ts-control .clear-button:hover {
    color: var(--err);
}


/* =====================================================================
   Taskify v2 — List-view wrapper (card class removed): nco ard chrome,
   the bootstrap-table provides its own card. Plus a dark-aware fallback
   for any remaining Sneat .card so list pages read correctly in dark.
   ===================================================================== */
body.v2-shell .tk-list-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.v2-shell .tk-list-wrap>.card-body {
    padding: 0;
    background: transparent;
}

/* Sneat .card -> design tokens (dark-aware) for non-redesigned pages.
   Skips intentionally-coloured cards (.card.bg-*) and the v2 .tk-card. */
body.v2-shell .card:not([class*="bg-"]) {
    background-color: var(--bg-1);
    border: 1px solid var(--line);
    color: var(--fg-1);
    box-shadow: none;
}

body.v2-shell .card>.card-header,
body.v2-shell .card>.card-footer {
    background-color: transparent;
    border-color: var(--line);
    color: var(--fg-0);
}

body.v2-shell .card>.card-body {
    color: var(--fg-1);
}

body.v2-shell .card .card-title {
    color: var(--fg-0);
}

/* Tom Select Dark Mode Fixes */
[data-theme='dark'] .ts-control,
[data-theme='dark'] .ts-control input {
    background: var(--bg-1, #2b2c40) !important;
    color: var(--fg-1, #a1b0cb) !important;
    border-color: var(--border-color, #444564) !important;
}

[data-theme='dark'] .ts-control>.item {
    background: var(--bg-3, #32344d) !important;
    color: #fff !important;
}

[data-theme='dark'] .ts-control>.item .remove {
    color: var(--fg-1, #a1b0cb) !important;
}

[data-theme='dark'] .ts-dropdown,
[data-theme='dark'] .ts-dropdown .option {
    background: var(--bg-1, #2b2c40) !important;
    color: var(--fg-1, #a1b0cb) !important;
    border-color: var(--border-color, #444564) !important;
}

[data-theme='dark'] .ts-dropdown .active {
    background: var(--bg-2, #32344d) !important;
    color: #fff !important;
}

/* TinyMCE Dark Mode overrides */
[data-theme='dark'] .tox-tinymce {
    border: 1px solid var(--border-color, #444564) !important;
}

[data-theme='dark'] .tox .tox-toolbar,
[data-theme='dark'] .tox .tox-toolbar__primary,
[data-theme='dark'] .tox .tox-toolbar__overflow,
[data-theme='dark'] .tox .tox-menubar {
    background: var(--bg-1, #2b2c40) !important;
    border-color: var(--border-color, #444564) !important;
}

[data-theme='dark'] .tox .tox-tbtn {
    color: var(--fg-1, #a1b0cb) !important;
}

[data-theme='dark'] .tox .tox-tbtn:hover {
    background: var(--bg-2, #32344d) !important;
}

[data-theme='dark'] .tox .tox-statusbar {
    background: var(--bg-1, #2b2c40) !important;
    color: var(--fg-1, #a1b0cb) !important;
    border-top: 1px solid var(--border-color, #444564) !important;
}

[data-theme='dark'] .tox .tox-edit-area__iframe {
    background: var(--bg-1, #2b2c40) !important;
}

[data-theme='dark'] .tox .tox-menu,
[data-theme='dark'] .tox .tox-collection--list .tox-collection__item {
    background: var(--bg-1, #2b2c40) !important;
    color: var(--fg-1, #a1b0cb) !important;
    border-color: var(--border-color, #444564) !important;
}

[data-theme='dark'] .tox .tox-collection--list .tox-collection__item--active {
    background: var(--bg-2, #32344d) !important;
    color: #fff !important;
}

/* Kanban Footer Dark Mode Fix */
[data-theme='dark'] .kanban-footer {
    background: transparent !important;
}

[data-theme='dark'] .create-project-btn {
    background: var(--bg-2, #32344d) !important;
    color: var(--fg-1, #a1b0cb) !important;
    border: 1px dashed var(--border-color, #444564) !important;
}

[data-theme='dark'] .create-project-btn:hover {
    background: rgba(105, 108, 255, 0.1) !important;
    color: #696cff !important;
    border-color: #696cff !important;
}

/* Fix button alignment */
.create-project-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px;
}

/* =====================================================================
   Taskify v2 — Project grid cards (design system). Restyle only — all
   data, status/priority controls, avatars and actions are preserved.
   ===================================================================== */
body.v2-shell .tk-project-grid>[class*="col-"] {
    margin-bottom: 0;
}

body.v2-shell .tk-project-card.card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: none;
    margin: 0;
    transition: border-color var(--t-1), box-shadow var(--t-1);
}

body.v2-shell .tk-project-card.card:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
}

body.v2-shell .tk-project-card .card-body-project-grid {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* normalise utility margins so the flex gap controls vertical rhythm */
body.v2-shell .tk-project-card .card-body-project-grid>div,
body.v2-shell .tk-project-card .card-body-project-grid>span,
body.v2-shell .tk-project-card .card-body-project-grid>p {
    margin: 0 !important;
}

/* title + action icons */
body.v2-shell .tk-project-card .card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: var(--lh-snug);
}

body.v2-shell .tk-project-card .card-title a {
    color: var(--fg-0);
    text-decoration: none;
}

body.v2-shell .tk-project-card .card-title a:hover {
    color: var(--signal);
}

body.v2-shell .tk-project-card .card-title+div {
    gap: 6px;
}

body.v2-shell .tk-project-card .card-title+div a {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
}

body.v2-shell .tk-project-card .card-body i.bx {
    font-size: 16px;
    line-height: 1;
}

/* budget chip sits left, not stretched */
body.v2-shell .tk-project-card .card-body-project-grid>.badge {
    align-self: flex-start;
}

/* field labels above the status / priority selects */
body.v2-shell .tk-project-card .form-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    font-weight: 600;
    margin-bottom: 4px;
}

body.v2-shell .tk-project-card .form-select-sm {
    height: var(--ctrl-h-sm);
    font-size: var(--fs-sm);
}

/* tasks count row */
body.v2-shell .tk-project-card .card-text {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    font-weight: 600;
    margin-bottom: 6px;
}

body.v2-shell .tk-project-card .card-body-project-grid>.d-flex.justify-content-between>span {
    font-size: var(--fs-base);
    color: var(--fg-1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.v2-shell .tk-project-card .card-body-project-grid>.d-flex.justify-content-between b {
    color: var(--fg-0);
}

/* user / client avatars -> clean overlapping kit stack. Broken/missing
   photos are clipped to a circle with a neutral placeholder, so the alt
   text can never spill out (the messy case in the report). */
body.v2-shell .tk-project-card .users-list {
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    row-gap: 4px;
}

body.v2-shell .tk-project-card .avatar,
body.v2-shell .tk-project-card .avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-3);
    flex: none;
    position: relative;
    margin: 0;
}

body.v2-shell .tk-project-card .avatar-group .avatar {
    margin-left: -6px;
    border: 1.5px solid var(--bg-1);
}

body.v2-shell .tk-project-card .avatar-group .avatar:first-child {
    margin-left: 0;
}

body.v2-shell .tk-project-card .avatar>a {
    display: block;
    width: 100%;
    height: 100%;
}

body.v2-shell .tk-project-card .avatar img,
body.v2-shell .tk-project-card .avatar .rounded-circle {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
    color: transparent;
    font-size: 0;
    border: 0;
    vertical-align: top;
}

body.v2-shell .tk-project-card .users-list .btn-icon {
    width: 28px;
    height: 28px;
    margin-left: 6px;
    border-radius: 50% !important;
    flex: none;
}

body.v2-shell .tk-project-card .users-list .badge {
    margin-left: 4px;
    align-self: center;
}

/* start / end dates */
body.v2-shell .tk-project-card .card-body-project-grid>.row:last-child {
    font-size: 11.5px;
    color: var(--fg-2);
    margin: 0;
}

body.v2-shell .tk-project-card .card-body-project-grid>.row:last-child i.bx {
    font-size: 14px;
    margin-right: 3px;
}

/* Laravel paginator -> kit pagination style removed in favor of unified .tk-pagination */

/* =====================================================================
   Taskify v2 — Design-system icons (<x-tk-icon>) used in the project card
   (and reusable elsewhere). Thin-stroke SVGs that inherit currentColor.
   ===================================================================== */
body.v2-shell .tk-ic {
    display: inline-block;
    vertical-align: -0.18em;
    flex: none;
}

body.v2-shell .tk-ic-danger {
    color: var(--err) !important;
}

body.v2-shell .tk-ic-ok {
    color: var(--ok);
}

body.v2-shell .tk-ic-err {
    color: var(--err);
}

body.v2-shell .tk-ic-muted {
    color: var(--fg-3);
}

/* dropdown menu item icons */
body.v2-shell .dropdown-item>.tk-ic {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -0.2em;
    color: var(--fg-2);
}

/* project card: header action icon buttons (quick-view/fav/pin/msg/map/more) */
body.v2-shell .tk-project-card .card-title+div {
    gap: 2px;
}

body.v2-shell .tk-project-card .tk-ic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    color: var(--fg-3);
    text-decoration: none;
    transition: background var(--t-1), color var(--t-1);
}

body.v2-shell .tk-project-card .tk-ic-btn:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

body.v2-shell .tk-project-card .tk-ic-btn .tk-ic {
    width: 17px;
    height: 17px;
}

/* favorite + pin filled states (driven by data-favorite / data-pinned) */
body.v2-shell .tk-project-card .tk-ic-fav:hover {
    color: var(--warn);
}

body.v2-shell .tk-project-card .tk-ic-fav[data-favorite="1"] {
    color: var(--warn);
}

body.v2-shell .tk-project-card .tk-ic-fav[data-favorite="1"] .tk-ic {
    fill: currentColor;
}

body.v2-shell .tk-project-card .tk-ic-pin:hover {
    color: var(--ok);
}

body.v2-shell .tk-project-card .tk-ic-pin[data-pinned="1"] {
    color: var(--ok);
}

body.v2-shell .tk-project-card .tk-ic-pin[data-pinned="1"] .tk-ic {
    fill: currentColor;
}

/* tasks-count + date icons sized to their text */
body.v2-shell .tk-project-card .card-body-project-grid>.d-flex.justify-content-between>span .tk-ic {
    width: 16px;
    height: 16px;
    color: var(--fg-2);
}

body.v2-shell .tk-project-card .card-body-project-grid>.row:last-child .tk-ic {
    width: 13px;
    height: 13px;
    vertical-align: -0.15em;
}

body.v2-shell .tk-project-card .users-list .btn-icon .tk-ic {
    width: 13px;
    height: 13px;
}

/* =====================================================================
   Taskify v2 — Kanban .tcard design-system icons (projects + tasks cards)
   ===================================================================== */
body.v2-shell .tcard .tcard-ic .tk-ic {
    width: 15px;
    height: 15px;
}

body.v2-shell .tcard .tcard-stats .tk-ic {
    width: 15px;
    height: 15px;
}

body.v2-shell .tcard .tcard-tags .tag .tk-ic {
    width: 12px;
    height: 12px;
    vertical-align: -0.12em;
}

body.v2-shell .tcard .av-add .tk-ic {
    width: 13px;
    height: 13px;
}

/* favorite + pin filled states (data-favorite / data-pinned drive the fill) */
body.v2-shell .tcard .favorite-icon:hover {
    color: var(--warn);
}

body.v2-shell .tcard .favorite-icon[data-favorite="1"] {
    color: var(--warn);
}

body.v2-shell .tcard .favorite-icon[data-favorite="1"] .tk-ic {
    fill: currentColor;
}

body.v2-shell .tcard .pinned-icon:hover {
    color: var(--ok);
}

body.v2-shell .tcard .pinned-icon[data-pinned="1"] {
    color: var(--ok);
}

body.v2-shell .tcard .pinned-icon[data-pinned="1"] .tk-ic {
    fill: currentColor;
}

/* create-project / add-status buttons in columns */
body.v2-shell .tk-kanban .create-project-btn .tk-ic,
body.v2-shell .tk-kanban .kcol-head .btn .tk-ic {
    width: 14px;
    height: 14px;
}

/* =====================================================================
   Taskify v2 — Projects kanban card foot: kit single-row layout —
   Users + Clients avatar groups on the left, action stats on the right
   (matches core-design.html .tcard-foot align-items:center +
   .tcard-stats margin-left:auto). Broken avatars already clip to a
   neutral circle via .tk-av-stack; the blade adds an onerror fallback.
   ===================================================================== */
body.v2-shell .tcard .tk-pfoot {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

body.v2-shell .tcard .tk-pfoot-people {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    min-width: 0;
}

body.v2-shell .tcard .tk-pgroup {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

body.v2-shell .tcard .tk-pgroup-lbl {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    font-weight: 600;
    font-family: var(--font-mono);
}

body.v2-shell .tcard .tk-pfoot .tcard-stats {
    margin-left: auto;
    gap: 2px;
    align-self: flex-end;
    flex: none;
}

/* =====================================================================
   Taskify v2 — Dropdown menu (Bootstrap .dropdown-menu) -> design system.
   Also fixes cards that nest items as <a><li.dropdown-item> — those <a>
   wrappers are inline, so force the menu's direct children to stack
   vertically (was rendering the items in a horizontal row).
   ===================================================================== */
body.v2-shell .dropdown-menu {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-3);
    padding: 4px;
    min-width: 184px;
    font-family: var(--font-sans);
    color: var(--fg-1);
}

/* stack the menu's direct children vertically (covers <a>, <li>, <button>) */
body.v2-shell .dropdown-menu>a,
body.v2-shell .dropdown-menu>li,
body.v2-shell .dropdown-menu>button {
    display: block;
    width: 100%;
    text-decoration: none;
}

body.v2-shell .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--fg-1);
    text-align: left;
    width: 100%;
    white-space: nowrap;
    background: transparent;
    border: 0;
    transition: background var(--t-1), color var(--t-1);
}

body.v2-shell .dropdown-item:hover,
body.v2-shell .dropdown-item:focus,
body.v2-shell .dropdown-menu>a:hover .dropdown-item {
    background: var(--bg-2);
    color: var(--fg-0);
}

body.v2-shell .dropdown-item.active,
body.v2-shell .dropdown-item:active {
    background: var(--bg-3);
    color: var(--fg-0);
}

body.v2-shell .dropdown-item i {
    font-size: 15px;
    line-height: 1;
    flex: none;
}

body.v2-shell .dropdown-item>.tk-ic {
    width: 15px;
    height: 15px;
    margin: 0;
    color: var(--fg-2);
}

body.v2-shell .dropdown-item .tk-ic-danger {
    color: var(--err);
}

body.v2-shell .dropdown-divider {
    border-color: var(--line);
    margin: 4px 2px;
}

body.v2-shell .dropdown-header {
    color: var(--fg-3);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px 4px;
    font-family: var(--font-mono);
}

/* ============================================================
   DOCKED PROJECT DETAIL PANEL  (always-open right column holding
   the project info + module tabs; replaces the offcanvas+button)
   ============================================================ */
/* .tk-detail-dock = the .tk-dock component (from tk-design-system.css) PLUS the
   panel-specific size + sticky positioning. The surface / scroll / head / title
   styling lives in the helper (.tk-dock / .tk-dock-head / .tk-dock-body). */
body.v2-shell .tk-detail-dock {
    flex: 0 0 560px;
    width: 560px;
    align-self: stretch;
    position: sticky;
    top: 12px;
    height: calc(100vh - 96px);
}

@media (max-width: 1199.98px) {
    body.v2-shell .tk-detail-dock {
        width: 100%;
        flex-basis: auto;
        position: static;
        height: auto;
        max-height: none;
    }
}

body.v2-shell .tk-dock-title .tk-ic {
    color: var(--fg-3);
}

/* collapsed: hide the panel; the board flexes to full width */
body.v2-shell .tk-workspace.tk-detail-collapsed .tk-detail-dock {
    display: none;
}

/* toggle button: highlighted while the panel is open */
body.v2-shell .tk-detail-toggle.active {
    background: var(--bg-2) !important;
    border-color: var(--line) !important;
    color: var(--fg-0) !important;
}



/* ============================================================
   PROJECT BOARD  — header + toolbar + task inspector drawer
   (Taskify Revamp Kit: pages/projects/index.blade.php)
   ============================================================ */
/* ---- header ---- */
body.v2-shell .tk-proj-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

body.v2-shell .tk-proj-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    text-transform: uppercase;
    font-weight: 600;
}

body.v2-shell .tk-proj-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--fg-0);
    margin: 6px 0 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.v2-shell .tk-proj-ic {
    line-height: 0;
    font-size: 17px;
}

body.v2-shell .tk-proj-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 9px;
    color: var(--fg-2);
    font-size: 12.5px;
    align-items: center;
}

body.v2-shell .tk-proj-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.v2-shell .tk-proj-meta .tk-ic {
    color: var(--fg-3);
}

body.v2-shell .tk-proj-headside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.v2-shell .tk-proj-headside .tk-av-stack {
    margin-right: 4px;
}

/* ---- toolbar + segmented ---- */
body.v2-shell .tk-board-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.v2-shell .tk-seg {
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 2px;
    gap: 2px;
}

body.v2-shell .tk-seg-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: calc(var(--r-2) - 2px);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-2);
    text-decoration: none;
    transition: background var(--t-1), color var(--t-1);
}

body.v2-shell .tk-seg-item .tk-ic {
    color: currentColor;
}

body.v2-shell .tk-seg-item:hover {
    color: var(--fg-0);
}

body.v2-shell .tk-seg-item.active {
    background: var(--bg-0);
    color: var(--fg-0);
    box-shadow: var(--shadow-1);
}

body.v2-shell .tk-board-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 0 10px;
    height: 32px;
    max-width: 280px;
    flex: 0 1 280px;
}

body.v2-shell .tk-board-search .tk-ic {
    color: var(--fg-3);
    flex: none;
}

body.v2-shell .tk-board-search input {
    border: 0;
    background: transparent;
    outline: none;
    color: var(--fg-0);
    font-size: 12.5px;
    width: 100%;
}

body.v2-shell .tk-toolbar-spacer {
    flex: 1;
}

body.v2-shell .tcard.tk-hide {
    display: none !important;
}

/* ============================================================
   TASK INSPECTOR DRAWER
   ============================================================ */
body.v2-shell .offcanvas.tk-inspector {
    width: 440px;
    max-width: 96vw;
    background: var(--bg-1);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
}

body.v2-shell .tk-inspector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    flex: none;
}

body.v2-shell .tk-inspector-head-l {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.v2-shell .tk-insp-code {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fg-1);
}

body.v2-shell .tk-inspector-head-r {
    display: flex;
    align-items: center;
    gap: 2px;
}

body.v2-shell .tk-ic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-1);
    color: var(--fg-2);
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background var(--t-1), color var(--t-1);
}

body.v2-shell .tk-ic-btn:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}

body.v2-shell .tk-inspector-body {
    padding: 18px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

body.v2-shell .tk-insp-empty {
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--fg-3);
    text-align: center;
}

body.v2-shell .tk-insp-empty .tk-ic {
    color: var(--fg-3);
    opacity: 0.6;
}

body.v2-shell .tk-insp-empty p {
    margin: 0;
    font-size: 12.5px;
}

body.v2-shell .tk-insp-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--fg-0);
    margin: 0 0 14px;
    line-height: 1.35;
}

body.v2-shell .tk-insp-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--fg-1);
}

body.v2-shell .tk-insp-status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
}

body.v2-shell .tk-insp-grid {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 9px 16px;
    align-items: center;
    font-size: 12.5px;
}

body.v2-shell .tk-insp-grid .tk-insp-lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-3);
    font-weight: 600;
}

body.v2-shell .tk-insp-grid .tk-insp-val {
    color: var(--fg-1);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.v2-shell .tk-insp-val .mono {
    font-size: 12px;
}

body.v2-shell .tk-insp-divider {
    border: none;
    height: 1px;
    background: var(--line);
    margin: 18px 0;
}

body.v2-shell .tk-insp-sechead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

body.v2-shell .tk-insp-sechead strong {
    font-size: 12px;
    color: var(--fg-0);
}

body.v2-shell .tk-insp-sechead .tk-insp-count {
    font-size: 11px;
    color: var(--fg-3);
}

body.v2-shell .tk-insp-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-3);
    overflow: hidden;
    margin-bottom: 12px;
}

body.v2-shell .tk-insp-progress>span {
    display: block;
    height: 100%;
    background: var(--signal);
    border-radius: 999px;
    transition: width var(--t-2);
}

body.v2-shell .tk-subtask-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.v2-shell .tk-subtask {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: var(--r-1);
    font-size: 13px;
    color: var(--fg-1);
    transition: background var(--t-1);
}

body.v2-shell .tk-subtask:hover {
    background: var(--bg-2);
}

body.v2-shell .tk-subtask input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: none;
    cursor: pointer;
    accent-color: var(--signal);
}

body.v2-shell .tk-subtask .tk-subtask-title {
    flex: 1;
    min-width: 0;
}

body.v2-shell .tk-subtask.is-done .tk-subtask-title {
    text-decoration: line-through;
    color: var(--fg-3);
}

body.v2-shell .tk-subtask .av {
    width: 20px;
    height: 20px;
}

body.v2-shell .tk-insp-emptyline {
    font-size: 12.5px;
    color: var(--fg-3);
    padding: 4px 2px;
}

body.v2-shell .tk-insp-activity {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.v2-shell .tk-insp-activity details.comment,
body.v2-shell .tk-insp-activity .comment {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

body.v2-shell .tk-insp-activity .comment summary {
    list-style: none;
}

body.v2-shell .tk-insp-activity .comment summary::-webkit-details-marker {
    display: none;
}

body.v2-shell .tk-insp-activity .btn-primary,
body.v2-shell .tk-insp-activity [data-bs-target="#task_commentModal"] {
    display: none !important;
}

body.v2-shell .tk-insp-activity .comment-body {
    font-size: 12.5px;
    color: var(--fg-1);
}

body.v2-shell .tk-insp-activity .comment-info,
body.v2-shell .tk-insp-activity .comment-heading {
    font-size: 12px;
    color: var(--fg-2);
}

body.v2-shell .tk-inspector-foot {
    border-top: 1px solid var(--line);
    padding: 10px 12px;
    flex: none;
}

body.v2-shell .tk-insp-commentbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 4px 6px 4px 10px;
}

body.v2-shell .tk-insp-commentbar-ic {
    color: var(--fg-3);
    flex: none;
}

body.v2-shell .tk-insp-commentbar input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--fg-0);
    font-size: 12.5px;
}

body.v2-shell .tk-insp-commentbar .btn {
    flex: none;
}

body.v2-shell .tk-insp-skel {
    height: 12px;
    border-radius: 6px;
    background: var(--bg-3);
    margin-bottom: 10px;
    opacity: 0.7;
    animation: tkSkel 1.1s ease-in-out infinite;
}

@keyframes tkSkel {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.85;
    }
}

/* ============================================================
   DOCKED INSPECTOR LAYOUT  (board/list left + inspector right)
   ============================================================ */
body.v2-shell .tk-workspace {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

body.v2-shell .tk-workspace-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.v2-shell .tk-inspector-dock {
    flex: 0 0 400px;
    width: 400px;
    align-self: stretch;
    position: sticky;
    top: 12px;
    height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

@media (max-width: 1199.98px) {
    body.v2-shell .tk-workspace {
        flex-direction: column;
    }

    body.v2-shell .tk-inspector-dock {
        width: 100%;
        flex-basis: auto;
        position: static;
        height: auto;
        max-height: 70vh;
    }
}

body.v2-shell .tk-inspector-dock .tk-inspector-head {
    flex: none;
}

body.v2-shell .tk-inspector-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

/* selected card / row highlight */
body.v2-shell .tcard.tk-card-active {
    box-shadow: 0 0 0 2px var(--signal);
}

body.v2-shell table tbody tr.tk-row-active>td {
    background: oklch(from var(--signal) l c h / 0.10);
}

/* inspector tabs */
body.v2-shell .tk-insp-tabs {
    display: flex;
    gap: 2px;
    margin: 16px 0 14px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

body.v2-shell .tk-insp-tabs::-webkit-scrollbar {
    display: none;
}

body.v2-shell .tk-insp-tab {
    border: 0;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-2);
    padding: 7px 10px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: color var(--t-1), border-color var(--t-1);
}

body.v2-shell .tk-insp-tab:hover {
    color: var(--fg-0);
}

body.v2-shell .tk-insp-tab.active {
    color: var(--fg-0);
    border-bottom-color: var(--signal);
}

body.v2-shell .tk-insp-pane {
    display: none;
}

body.v2-shell .tk-insp-pane.active {
    display: block;
}

/* media grid (renders the server-built `file` HTML: image thumb or link) */
body.v2-shell .tk-insp-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

body.v2-shell .tk-insp-media {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    overflow: hidden;
    background: var(--bg-2);
}

body.v2-shell .tk-insp-media>a {
    display: block;
    line-height: 0;
    text-decoration: none;
}

body.v2-shell .tk-insp-media img {
    width: 100% !important;
    height: 72px;
    object-fit: cover;
    display: block;
}

body.v2-shell .tk-insp-media>a:not(:has(img)) {
    line-height: 1.3;
    min-height: 56px;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--signal);
    word-break: break-word;
}

body.v2-shell .tk-insp-media-name {
    font-size: 10.5px;
    color: var(--fg-2);
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* task status timeline inside the dock */
body.v2-shell .tk-insp-timeline {
    font-size: 12.5px;
}

body.v2-shell .tk-insp-timeline .card {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* ============================================================
   BOOTSTRAP-TABLE — global subtle borders.
   Kills the heavy/dark thead divider and the bottom line; leaves
   only design-system hairline row separators (--line). Applies to
   every data-toggle="table" across the app.
   ============================================================ */
body.v2-shell .bootstrap-table table,
body.v2-shell table[data-toggle="table"] {
    --bs-table-border-color: var(--line);
    border: 0 !important;
}

body.v2-shell .bootstrap-table table>tbody>tr>td,
body.v2-shell table[data-toggle="table"]>tbody>tr>td {
    border-color: var(--line) !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    /* hairline bottom only — no heavy/double borders */
}

body.v2-shell .bootstrap-table table>tbody>tr:last-child>td,
body.v2-shell table[data-toggle="table"]>tbody>tr:last-child>td {
    border-bottom: 1px solid var(--line) !important;
}

/* the plugin's container/body box borders that draw the dark top + bottom lines */
body.v2-shell .fixed-table-container,
body.v2-shell .fixed-table-body,
body.v2-shell .fixed-table-header {
    border: 0 !important;
}

body.v2-shell .fixed-table-pagination {
    border-top: 0 !important;
}

/* keep the header strip clean and completely transparent */
body.v2-shell .bootstrap-table table>thead>tr>th,
body.v2-shell table[data-toggle="table"]>thead>tr>th {
    background: transparent !important;
}

/* ============================================================
   USER AVATARS — consistent rendering everywhere (grid / list /
   kanban / comments / headers / dropdowns). Pairs with the global
   no-image fallback registered in layout.blade.php so a profile
   image is ALWAYS either the real photo or the no-user image.
   ============================================================ */
body.v2-shell .avatar img,
body.v2-shell .avatar-group img,
body.v2-shell .users-list img,
body.v2-shell .av img,
body.v2-shell .tk-av-stack img,
body.v2-shell .comment-avatar img,
body.v2-shell img.rounded-circle {
    object-fit: cover !important;
    /* crop, never stretch */
    background: var(--bg-3);
    /* placeholder tint while loading */
    color: transparent;
    /* never show spilled alt text on a broken image */
    font-size: 0;
}

/* make sure the round containers actually clip the image */
body.v2-shell .avatar,
body.v2-shell .av,
body.v2-shell .comment-avatar,
body.v2-shell .tk-av-stack .av {
    overflow: hidden;
}

/* initial-letter fallback (server-rendered OR JS-injected) renders as a
   centered circle in ANY avatar container — keeps grid / list / kanban /
   panel identical when there's no photo */
body.v2-shell .avatar>.avatar-initial,
body.v2-shell .av>.avatar-initial,
body.v2-shell .tk-av-stack .avatar-initial,
body.v2-shell .comment-avatar>.avatar-initial {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 50%;
}

/* Ensure that images within .av and .avatar components NEVER exceed their container sizes */
body.v2-shell .tk-av-stack .av,
body.v2-shell .avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

body.v2-shell .tk-av-stack .av.av-add {
    background: var(--bg-2);
    border: 1px dashed var(--line);
    color: var(--fg-2);
}

body.v2-shell .tk-av-stack .av img,
body.v2-shell .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

/* ============================================================================
   TOM SELECT DESIGN SYSTEM OVERRIDES
   ============================================================================ */
body.v2-shell .ts-dropdown {
    background-color: var(--bg-1);
    border: 1px solid var(--line);
    color: var(--fg-0);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
}

body.v2-shell .ts-dropdown .option {
    color: var(--fg-1);
}

body.v2-shell .ts-dropdown .option:hover,
body.v2-shell .ts-dropdown .active {
    background-color: var(--bg-2);
    color: var(--fg-0);
}

body.v2-shell .ts-wrapper.form-select,
body.v2-shell .ts-wrapper.form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
}

body.v2-shell .ts-control.form-select,
body.v2-shell .ts-control.form-control {
    background-image: none !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: auto !important;
    border: 1px solid var(--line) !important;
    background-color: var(--bg-1) !important;
}

body.v2-shell .ts-control {
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-0) !important;
    border-radius: var(--r-2) !important;
    padding: 8px 12px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body.v2-shell .ts-control input {
    color: var(--fg-0) !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* 
body.v2-shell .ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
} */

body.v2-shell .ts-control .item {
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg-1) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 13px !important;
}

body.v2-shell .ts-control .item .remove {
    border-left: 1px solid var(--line) !important;
    margin-left: 6px !important;
    color: var(--fg-2) !important;
}

body.v2-shell .ts-control .item .remove:hover {
    background: rgba(255, 0, 0, 0.1) !important;
    color: var(--bs-danger) !important;
}

/* ============================================================
   SEGMENTED CONTROL (from design system)
   ============================================================ */
.seg {
    display: inline-flex;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 2px;
    gap: 2px;
}

.seg-btn {
    height: 24px;
    padding: 0 10px;
    border-radius: 3px;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background var(--t-1), color var(--t-1);
}

.seg-btn:hover {
    color: var(--fg-0);
}

.seg-btn.on {
    background: var(--bg-0);
    color: var(--fg-0);
    box-shadow: var(--shadow-1);
}

/* ============================================================
   CALENDAR REVAMP & SCHEDULE ROW OVERRIDES
   ============================================================ */

/* ---- SCHEDULE ROW ---- */
.sched-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--bs-border-color);
    position: relative;
    transition: background var(--t-1, 0.2s ease);
    background: var(--bs-card-bg);
}

.sched-row:first-child {
    border-top: 0;
}

.sched-row:hover {
    background: var(--bs-body-bg);
}

.sched-row[data-soon="true"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--bs-primary);
    border-radius: 0 2px 2px 0;
}

.sched-time {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.sched-t {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-heading-color);
}

.sched-d {
    font-size: 10px;
    color: var(--bs-secondary-color);
}

.sched-content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sched-name {
    font-size: 12.5px;
    color: var(--bs-body-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}

.sched-row[data-soon="true"] .sched-name {
    color: var(--bs-heading-color);
}

.sched-soon {
    font-size: 10px;
    color: var(--bs-primary);
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    white-space: nowrap;
}

/* ---- FullCalendar Design System Skin ---- */
body.v2-shell .calendar-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    body.v2-shell .calendar-wrapper {
        flex-direction: column;
    }
}

body.v2-shell .calendar-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    box-shadow: var(--shadow-1) !important;
    height: auto;
}

@media (max-width: 991.98px) {
    body.v2-shell .calendar-sidebar {
        width: 100%;
    }
}

body.v2-shell .calendar-main {
    flex-grow: 1;
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    box-shadow: var(--shadow-1) !important;
    padding: 20px !important;
}

/* Sidebar Custom Switches / Checkboxes & Headers */
body.v2-shell .calendar-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--line) !important;
}

body.v2-shell .calendar-sidebar h5,
body.v2-shell .calendar-sidebar h6 {
    color: var(--fg-0) !important;
    font-weight: 600;
}

body.v2-shell .calendar-sidebar .form-check-input {
    border-color: var(--line) !important;
    background-color: var(--bg-2) !important;
}

body.v2-shell .calendar-sidebar .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

body.v2-shell .calendar-sidebar .form-check-label {
    color: var(--fg-1) !important;
    font-size: 13.5px;
    font-weight: 500;
}

body.v2-shell .calendar-sidebar .filter-section.mt-auto {
    border-top: 1px solid var(--line) !important;
}

body.v2-shell .calendar-sidebar .small.text-muted {
    font-size: 13px !important;
    color: var(--fg-2) !important;
}

body.v2-shell .calendar-sidebar [id^="total-"],
body.v2-shell .calendar-sidebar [id^="visible-"],
body.v2-shell .calendar-sidebar [id^="filtered-"] {
    font-family: var(--bs-font-monospace) !important;
    color: var(--fg-0) !important;
    font-weight: 600;
}

/* FullCalendar Component Overrides */
body.v2-shell .fc-theme-standard td,
body.v2-shell .fc-theme-standard th {
    border-color: var(--line) !important;
}

body.v2-shell .fc-theme-standard .fc-scrollgrid {
    border-color: var(--line) !important;
}

/* Day, Week, Month Button Group */
body.v2-shell .fc-button-group {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

body.v2-shell .fc-button-primary {
    background-color: var(--bg-0) !important;
    border: none !important;
    color: var(--fg-1) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    padding: 6px 14px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    transition: background-color var(--t-1), color var(--t-1) !important;
}

body.v2-shell .fc-button-primary:hover {
    background-color: var(--bg-2) !important;
    color: var(--fg-0) !important;
}

body.v2-shell .fc-button-primary:not(:disabled).fc-button-active,
body.v2-shell .fc-button-primary:not(:disabled):active {
    background-color: var(--fg-0) !important;
    color: var(--bg-0) !important;
    box-shadow: none !important;
}

body.v2-shell .fc-toolbar-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--fg-0) !important;
}

/* SUN, MON, TUE Header Bar */
body.v2-shell .fc .fc-col-header-cell {
    background-color: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    padding: 8px 0 !important;
}

body.v2-shell .fc .fc-col-header-cell-cushion {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--fg-2) !important;
    text-decoration: none !important;
}

/* Day Numbers at Top-Left */
body.v2-shell .fc .fc-daygrid-day-number {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--fg-2) !important;
    text-decoration: none !important;
    margin: 6px 8px !important;
    display: inline-block;
}

body.v2-shell .fc-theme-standard .fc-list-day-cushion {
    background-color: var(--bg-2) !important;
}

body.v2-shell .fc .fc-list-event:hover td {
    background-color: var(--bg-2) !important;
}

/* Today Cell Highlight */
body.v2-shell .fc-day-today {
    background-color: var(--signal-glow) !important;
}

html[data-theme="dark"] body.v2-shell .fc-day-today {
    background-color: var(--signal-glow) !important;
}

body.v2-shell .fc-day-today .fc-daygrid-day-number {
    color: var(--bs-success) !important;
    font-weight: 700 !important;
}

/* Other Month Days Shaded Background */
body.v2-shell .fc-day-other {
    background-color: var(--bg-2) !important;
    opacity: 0.75;
}

html[data-theme="dark"] body.v2-shell .fc-day-other {
    background-color: var(--bg-0) !important;
    opacity: 0.4;
}

/* Event Capsule Badge Layout - Left Accent Lines */
body.v2-shell .fc-event {
    border: 1px solid var(--line) !important;
    background-color: var(--bg-0) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

body.v2-shell .fc-event:hover {
    background-color: var(--bg-2) !important;
    transform: translateY(-0.5px);
}

html[data-theme="dark"] body.v2-shell .fc-event:hover {
    background-color: var(--bg-3) !important;
}

body.v2-shell .fc-event-main {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

body.v2-shell .fc-event-title,
body.v2-shell .fc-event-time,
body.v2-shell .fc-event a,
body.v2-shell .fc-event span {
    color: var(--fg-0) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


body.v2-shell .fc-event.bg-light-primary {
    border-left: 3px solid var(--bs-primary) !important;
    background-color: var(--bg-0) !important;
}

body.v2-shell .fc-event.bg-light-secondary {
    border-left: 3px solid var(--bs-secondary) !important;
    background-color: var(--bg-0) !important;
}

body.v2-shell .fc-event.bg-light-success {
    border-left: 3px solid var(--bs-success) !important;
    background-color: var(--bg-0) !important;
}

body.v2-shell .fc-event.bg-light-danger {
    border-left: 3px solid var(--bs-danger) !important;
    background-color: var(--bg-0) !important;
}

body.v2-shell .fc-event.bg-light-warning {
    border-left: 3px solid var(--bs-warning) !important;
    background-color: var(--bg-0) !important;
}

body.v2-shell .fc-event.bg-light-info {
    border-left: 3px solid var(--bs-info) !important;
    background-color: var(--bg-0) !important;
}

/* Injecting sched-row into list view */
.fc-list-event td {
    padding: 0 !important;
    border: none !important;
}

.fc-list-event .fc-list-event-dot,
.fc-list-event .fc-list-event-time,
.fc-list-event .fc-list-event-title {
    display: none !important;
}

.fc-list-event .custom-sched-wrapper {
    display: block !important;
    width: 100%;
}

/* ============================================================================
   BULK UPLOAD - DROPZONE THEME OVERRIDES
   Fixes Dropzone.js hardcoded white background & borders for dark mode
   ============================================================================ */

/* Base dropzone - override the hardcoded white background */
body.v2-shell .dropzone,
body.v2-shell .bulk-upload-dropzone {
    background-color: var(--bg-1) !important;
    border: 2px dashed var(--line-2) !important;
    border-radius: var(--r-2) !important;
    min-height: 180px !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

/* Hover & drag-over state */
body.v2-shell .dropzone:hover,
body.v2-shell .bulk-upload-dropzone:hover,
body.v2-shell .dropzone.dz-drag-hover,
body.v2-shell .bulk-upload-dropzone.dz-drag-hover {
    background-color: var(--bg-2) !important;
    border-color: var(--bs-primary) !important;
}

/* Message text inside dropzone */
body.v2-shell .dropzone .dz-message,
body.v2-shell .dropzone .dz-message span,
body.v2-shell .dropzone .dz-message .dz-button {
    color: var(--fg-1) !important;
}

/* File preview items inside dropzone */
body.v2-shell .dropzone .dz-preview.dz-image-preview {
    background: var(--bg-2) !important;
}

body.v2-shell .dropzone .dz-preview .dz-details {
    color: var(--fg-0) !important;
}

body.v2-shell .dropzone .dz-preview .dz-details .dz-filename span,
body.v2-shell .dropzone .dz-preview .dz-details .dz-size span {
    background-color: var(--bg-3) !important;
    color: var(--fg-0) !important;
}

/* Upload progress bar */
body.v2-shell .dropzone .dz-preview .dz-progress {
    background: var(--bg-3) !important;
}

body.v2-shell .dropzone .dz-preview .dz-progress .dz-upload {
    background: var(--bs-primary) !important;
}

/* Dark mode specific - stronger override for dark bg */
html[data-theme="dark"] body.v2-shell .dropzone,
html[data-theme="dark"] body.v2-shell .bulk-upload-dropzone {
    background-color: var(--bg-1) !important;
    border-color: var(--line-2) !important;
}

html[data-theme="dark"] body.v2-shell .dropzone:hover,
html[data-theme="dark"] body.v2-shell .bulk-upload-dropzone:hover,
html[data-theme="dark"] body.v2-shell .dropzone.dz-drag-hover {
    background-color: var(--bg-2) !important;
    border-color: var(--bs-primary) !important;
}

/* border-dashed utility class */
body.v2-shell .border-dashed {
    border: 2px dashed var(--line-2) !important;
    border-radius: var(--r-2) !important;
}

/* ============================================================================
   FILTER FIELD HOVER - subtle gray background on hover
   ============================================================================ */
body.v2-shell .form-select:hover,
body.v2-shell .form-control:hover,
body.v2-shell .ts-control:hover {
    background-color: var(--bg-2) !important;
    transition: background-color 0.15s ease;
}