/* MONDAY.COM THEME OVERRIDES */

    /* Base Font & Body */
    body,
    .app-shell,
    .layout {
        font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        background-color: #f7f9fc !important;
    }

    h1,
    h2,
    h3,
    h4,
    .board-header h1,
    .dashboard-head h2 {
        font-family: 'Roboto', 'Inter', sans-serif !important;
        font-weight: 500 !important;
    }

    /* Sidebar Styling */
    .sidebar {
        background-color: #ffffff !important;
        /* Clear sidebar */
        border-right: 1px solid #e6e9ef !important;
        color: #323338 !important;
        padding: 16px 12px !important;
    }

    .workspace-block,
    .boards-head,
    .board-tree,
    .sidebar-footer .mini-stats .stat {
        background-color: transparent !important;
        border: none !important;
        color: #323338 !important;
        box-shadow: none !important;
    }

    .workspace-block .workspace-head h3,
    .boards-head h3 {
        color: #676879 !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.05em !important;
    }

    .workspace-item,
    .board-item,
    .nav-item,
    .sidebar button {
        color: #323338 !important;
        border: none !important;
        background-color: transparent !important;
        border-radius: 4px !important;
        padding: 8px 12px;
    }

    .board-item.active,
    .board-item:hover,
    .workspace-item.active,
    .workspace-item:hover,
    .nav-item.active,
    .nav-item:hover {
        background-color: #e6e9ef !important;
        color: #323338 !important;
    }

    .selector-btn,
    .sidebar-plus-btn {
        background-color: #f5f6f8 !important;
        border: 1px solid #c9cdd2 !important;
        color: #323338 !important;
        border-radius: 4px !important;
    }

    .sidebar .ghost:hover,
    .sidebar .workspace-header-menu-btn:hover {
        background-color: #e6e9ef !important;
        color: #323338 !important;
    }

    /* Sidebar Stat boxes */
    .mini-stats .stat {
        background-color: #f5f6f8 !important;
        border: 1px solid #e6e9ef !important;
        border-radius: 8px !important;
    }

    .mini-stats .stat b,
    .mini-stats .stat span {
        color: #323338 !important;
    }

    /* Topbar Styling */
    .topbar {
        background-color: #ffffff !important;
        border-bottom: 1px solid #e6e9ef !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        min-height: 56px !important;
    }

    .product-label {
        color: #323338 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        letter-spacing: 0 !important;
    }

    .icon-btn {
        border: none !important;
        background: transparent !important;
        color: #676879 !important;
    }

    .icon-btn:hover {
        background-color: #f5f6f8 !important;
        color: #323338 !important;
    }

    /* Content Area & Board Header */
    .content {
        background-color: #f7f9fc !important;
        overflow-x: visible !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .board-view,
    .home-view {
        background-color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        padding: 24px !important;
        width: 100% !important;
        overflow: visible !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .board-header {
        border-bottom: none !important;
        padding-bottom: 16px !important;
    }

    .board-toolbar {
        position: relative !important;
        z-index: 10 !important;
    }

    .toolbar-dropdown {
        z-index: 1000 !important;
    }

    .board-header h1 {
        font-size: 32px !important;
        color: #323338 !important;
        letter-spacing: normal !important;
        font-weight: 600 !important;
    }

    /* Monday Buttons */
    button,
    .btn {
        border-radius: 4px !important;
        font-weight: 400 !important;
    }

    #newItemBtn,
    #newWorkspaceBtn,
    #newBoardBtn,
    #newFolderBtn,
    #newColumnBtn,
    #workspacePlusBtn,
    button[type="submit"] {
        background-color: #0073ea !important;
        /* Monday Blue */
        border-color: #0073ea !important;
        color: white !important;
        border-radius: 4px !important;
        transition: background-color 0.1s;
    }

    #newItemBtn:hover,
    #newWorkspaceBtn:hover,
    #newBoardBtn:hover,
    #newFolderBtn:hover,
    #newColumnBtn:hover,
    #workspacePlusBtn:hover,
    button[type="submit"]:hover {
        background-color: #0060b9 !important;
    }

    button.ghost,
    .board-quick-filters button.ghost,
    .board-toolbar button {
        background-color: transparent !important;
        color: #323338 !important;
        border: 1px solid transparent !important;
    }

    button.ghost:hover,
    .board-quick-filters button.ghost:hover,
    .board-toolbar button:hover {
        background-color: #f5f6f8 !important;
    }

    /* Tabs */
    .view-tabs {
        border-bottom: 1px solid #e6e9ef !important;
        margin-bottom: 16px !important;
    }

    .view-tab {
        color: #676879 !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .view-tab.active {
        color: #0073ea !important;
        border-bottom: 2px solid #0073ea !important;
    }

    /* Table Design */
    .table-wrap {
        border: none !important;
        box-shadow: none !important;
        border-top: 1px solid #e6e9ef !important;
        border-radius: 0 !important;
    }

    .task-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
    }

    .task-table th,
    .task-table td {
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
    }

    .task-table th {
        background-color: #ffffff !important;
        border-bottom: 2px solid #e6e9ef !important;
        border-right: 1px solid #e6e9ef !important;
        border-left: 1px solid #e6e9ef !important;
        border-top: 1px solid #e6e9ef !important;
        color: #676879 !important;
        text-transform: capitalize !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        padding: 10px 12px !important;
    }

    .task-table th:focus-within,
    .task-table th:hover {
        z-index: 100 !important;
    }

    .task-table td {
        border-bottom: 1px solid #e6e9ef !important;
        border-right: 1px solid #e6e9ef !important;
        border-left: 1px solid #e6e9ef !important;
        padding: 0 !important;
        /* Remove padding to allow full cell color */
        font-size: 14px !important;
        color: #323338 !important;
    }

    /* Target internal table elements for padding */
    .task-table td>strong,
    .task-table td>input[type="text"]:not(.nav-cell) {
        padding: 10px 12px;
        display: block;
    }

    .task-table td.col-select,
    .task-table td.col-drag {
        padding: 0 !important;
        vertical-align: middle !important;
        width: 32px !important;
        background-color: transparent !important;
    }

    .drag-handle-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
    }

    .drag-handle {
        cursor: grab !important;
        color: #c4c4c4 !important;
        font-size: 16px !important;
        display: flex !important;
        padding: 4px !important;
        position: relative !important;
        z-index: 10 !important;
        user-select: none !important;
    }

    .drag-handle:hover {
        color: #323338 !important;
    }

    /* Group Title Rows */
    .group-title-row td {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        z-index: 40 !important;
        background-color: #ffffff !important;
        color: #579bfc !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border: none !important;
        border-bottom: 1px solid #e6e9ef !important;
        padding-top: 32px !important;
        padding-bottom: 12px !important;
        padding-left: 20px !important;
    }

    .group-title-btn {
        color: #579bfc !important;
        font-size: 18px !important;
        background: transparent !important;
        border: none !important;
        font-weight: 500 !important;
    }

    /* Left colored border for items in a group (Monday signature) */
    .task-row td:first-child {
        border-left: 6px solid #579bfc !important;
        box-sizing: border-box;
    }

    /* High Fidelity Status Cells */
    .status-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 4px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        cursor: pointer !important;
        text-align: center !important;
        position: relative !important;
        transition: filter 0.1s ease !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .status-cell:hover {
        filter: brightness(0.9);
    }

    .status-cell span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Shared Status Colors (Board & Picker) */
    .status-cell.done,
    .status-picker-item.done,
    .picker-color-dot.done,
    .status-cell.completed,
    .status-picker-item.completed,
    .picker-color-dot.completed,
    .status-cell.finished,
    .status-picker-item.finished,
    .picker-color-dot.finished {
        background-color: #00c875 !important;
    }

    .status-cell.working,
    .status-picker-item.working,
    .picker-color-dot.working,
    .status-cell.working-on-it,
    .status-picker-item.working-on-it,
    .picker-color-dot.working-on-it,
    .status-cell.in-progress,
    .status-picker-item.in-progress,
    .picker-color-dot.in-progress {
        background-color: #fdab3d !important;
    }

    .status-cell.stuck,
    .status-picker-item.stuck,
    .picker-color-dot.stuck,
    .status-cell.critical,
    .status-picker-item.critical,
    .picker-color-dot.critical,
    .status-cell.error,
    .status-picker-item.error,
    .picker-color-dot.error {
        background-color: #e2445c !important;
    }

    .status-cell.waiting,
    .status-picker-item.waiting,
    .picker-color-dot.waiting,
    .status-cell.on-hold,
    .status-picker-item.on-hold,
    .picker-color-dot.on-hold {
        background-color: #a25ddc !important;
    }

    .status-cell.not-started,
    .status-picker-item.not-started,
    .picker-color-dot.not-started,
    .status-cell.todo,
    .status-picker-item.todo,
    .picker-color-dot.todo,
    .status-cell.to-do,
    .status-picker-item.to-do,
    .picker-color-dot.to-do,
    .status-cell.empty,
    .status-picker-item.empty,
    .picker-color-dot.empty {
        background-color: #c4c4c4 !important;
    }

    .status-cell.planned,
    .status-picker-item.planned,
    .picker-color-dot.planned {
        background-color: #66ccff !important;
    }

    .status-cell.review,
    .status-picker-item.review,
    .picker-color-dot.review {
        background-color: #ffcb00 !important;
    }

    /* Status Picker UI */
    .status-picker {
        position: fixed;
        z-index: 10000;
        width: 240px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-sizing: border-box !important;
        animation: fadeIn 0.1s ease-out;
    }

    * {
        box-sizing: border-box;
    }

    /* Ensure universal box-sizing inside pickers */

    .status-picker-item {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 13px;
        border-radius: 4px;
        cursor: pointer;
        transition: filter 0.1s;
    }

    .status-picker-item:hover {
        filter: brightness(0.9);
    }

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

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

    /* Extra Picker Styles */
    .picker-divider {
        height: 1px;
        background: #e6e9ef;
        margin: 4px -8px;
    }

    .picker-action-btn,
    .picker-ai-btn {
        padding: 8px;
        font-size: 13px;
        color: #323338;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 4px;
    }

    .picker-action-btn:hover,
    .picker-ai-btn:hover {
        background: #f5f6f8;
    }

    .picker-edit-header {
        font-size: 12px;
        font-weight: 600;
        color: #676879;
        padding-bottom: 8px;
        text-transform: uppercase;
        text-align: center;
    }

    .picker-options-list {
        max-height: 250px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 4px 8px;
        margin: 0 -8px;
        /* Offset to allow scrollbar to not clip content */
    }

    .picker-edit-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 0;
        width: 100%;
    }

    .picker-color-dot {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .picker-edit-input {
        flex: 1;
        height: 32px;
        border: 1px solid #c3c6cd;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 13px;
        outline: none;
        background: white;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
        /* Added subtle depth */
    }

    .picker-edit-input:focus {
        border-color: #0073ea;
        box-shadow: 0 0 0 2px rgba(0, 115, 234, 0.2);
    }

    .picker-add-btn {
        width: 100%;
        background: transparent;
        border: 1px dashed #c3c6cd;
        border-radius: 4px;
        padding: 6px;
        font-size: 13px;
        color: #676879;
        margin-top: 8px;
        cursor: pointer;
    }

    .picker-add-btn:hover {
        background: #f5f6f8;
    }

    .ai-sparkle {
        font-size: 14px;
    }

    /* Group Summary Row */
    .group-summary-row td {
        border-top: 1px solid #e6e9ef !important;
        font-size: 13px;
        font-weight: 500;
    }

    .summary-bar-container {
        width: 100%;
        height: 18px;
        display: flex;
        overflow: hidden;
        border-radius: 2px;
    }

    .summary-bar-item {
        height: 100%;
    }

    .summary-total {
        text-align: center;
        color: #323338;
    }

    .add-item-ghost-input::placeholder {
        color: #b0b0b0;
    }

    .group-title-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .group-title-btn {
        font-size: 18px !important;
        font-weight: 700 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .indicator-bar {
        width: 6px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    /* Clear all nested styles and appearance */
    .status-cell>select,
    .status-cell>span,
    .status-cell>.priority {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        /* Padding applied inside select/span */
        border: none !important;
        background: transparent !important;
        color: #ffffff !important;
        font-weight: 500 !important;
        text-align: center !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        outline: none !important;
        box-sizing: border-box;
        text-transform: capitalize !important;
        border-radius: 0 !important;
    }

    /* The actual colors */
    .status-cell.todo {
        background-color: #c4c4c4 !important;
    }

    .status-cell.in_progress {
        background-color: #fdab3d !important;
    }

    .status-cell.done {
        background-color: #00c875 !important;
    }

    /* Status hover effect slightly darkens */
    .status-cell:hover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.08);
        pointer-events: none;
    }

    /* Priorities similar full-fill logic */
    .priority.high {
        background-color: #e2445c !important;
        color: white !important;
    }

    .priority.medium {
        background-color: #a25ddc !important;
        color: white !important;
    }

    /* Purple for medium */
    .priority.low {
        background-color: #579bfc !important;
        color: white !important;
    }

    /* Inputs inside tables */
    .task-table .inline-cell-input {
        border: 1px solid transparent !important;
        background: transparent !important;
        width: 100% !important;
        height: 100% !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        transition: all 0.1s !important;
        margin: 0 !important;
    }

    .task-table .inline-cell-input:hover,
    .task-table .inline-cell-input:focus {
        border: 1px solid #0073ea !important;
        background: #ffffff !important;
        border-radius: 4px !important;
    }

    /* Inline Add Item (Ghost bottom row) */
    .add-item-inline-row td {
        border-bottom: none !important;
        border-right: none !important;
        padding: 6px 12px !important;
    }

    .inline-add-item-input {
        border: 1px solid transparent !important;
        background: transparent !important;
        color: #a4a9b4 !important;
        padding: 8px 10px !important;
        width: 100% !important;
        border-radius: 4px !important;
    }

    .inline-add-item-input:focus,
    .inline-add-item-input:hover {
        border: 1px solid #0073ea !important;
        background: #ffffff !important;
        color: #323338 !important;
    }

    /* Modals */
    .modal {
        z-index: 9999 !important;
    }

    .toolbar-dropdown {
        z-index: 9999 !important;
    }

    .add-column-cell {
        border-right: none !important;
    }

    .task-table tr.row-menu-open {
        position: relative !important;
        z-index: 9999 !important;
    }

    .task-table th.menu-open.menu-open,
    .task-table thead th.menu-open.menu-open,
    .task-table .group-header-row th.menu-open.menu-open {
        z-index: 9999 !important;
    }

    /* NEW Add Column Dropdown (Monday-style) */
    .add-column-dropdown {
        position: fixed;
        background: #ffffff;
        border: 1px solid #dbe3f2;
        border-radius: 8px;
        box-shadow: 0 10px 60px rgba(0, 0, 0, 0.25);
        width: 320px;
        z-index: 20000 !important;
        padding: 16px 0;
        font-family: 'Inter', sans-serif;
        color: #323338;
        max-height: 80vh;
        overflow-y: auto;
    }

    .add-column-dropdown::-webkit-scrollbar {
        width: 8px;
    }

    .add-column-dropdown::-webkit-scrollbar-thumb {
        background-color: #dbe3f2;
        border-radius: 10px;
    }

    .add-column-dropdown::-webkit-scrollbar-track {
        background: transparent;
    }

    .add-column-dropdown.hidden {
        display: none;
    }

    .add-column-search-wrap {
        padding: 0 16px 12px 16px;
        border-bottom: 1px solid #f0f3f9;
        margin-bottom: 8px;
    }

    .add-column-search {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #c3c6d4;
        border-radius: 4px;
        font-size: 14px;
        outline: none;
    }

    .add-column-search:focus {
        border-color: #0073ea;
    }

    .add-column-section {
        padding: 8px 16px;
    }

    .add-column-section-title {
        font-size: 12px;
        font-weight: 500;
        color: #676879;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .add-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .add-column-item {
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.1s;
        user-select: none;
        border: none;
        background: transparent;
        text-align: left;
        width: 100%;
    }

    .add-column-item:hover {
        background: #f0f3f9;
    }

    .add-column-icon {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        color: white;
        font-size: 14px;
    }

    .add-column-label {
        font-size: 14px;
        font-weight: 400;
    }

    .add-column-footer {
        padding: 12px 16px 0 16px;
        border-top: 1px solid #f0f3f9;
        margin-top: 8px;
        text-align: center;
    }

    .add-column-footer button {
        background: transparent;
        border: none;
        color: #676879;
        font-size: 13px;
        cursor: pointer;
    }

    .add-column-footer button:hover {
        text-decoration: underline;
    }

    /* Icon Colors from Screen-shot */
    .icon-status {
        background-color: #00ca72;
    }

    .icon-text {
        background-color: #ffcc00;
    }

    .icon-people {
        background-color: #00a9ff;
    }

    .icon-dropdown {
        background-color: #00ca72;
    }

    .icon-date {
        background-color: #a25ddc;
    }

    .icon-numbers {
        background-color: #ffcc00;
    }

    .icon-files {
        background-color: #ff642e;
    }

    .icon-formula {
        background-color: #00d1d1;
    }

    .icon-checkbox {
        background-color: #ffcc00;
    }

    .icon-link {
        background-color: #ff642e;
    }

    .icon-timeline {
        background-color: #a25ddc;
    }

    .icon-longtext {
        background-color: #ffcc00;
    }

    .board-header {
        position: relative;
        z-index: 100;
    }

    .modal-card {
        border-radius: 8px !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
        border: none !important;
    }

    .modal-head h3 {
        font-size: 20px !important;
        color: #323338 !important;
        font-weight: 500 !important;
    }

    /* Dashboard KPI changes */
    .kpi-card {
        border: 1px solid #e6e9ef !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
        border-radius: 8px !important;
    }

    .kpi-card b {
        color: #323338 !important;
        font-weight: 500 !important;
    }

    /* Stickiness for columns */
    .table-wrap {
        overflow-x: auto !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .task-table {
        min-width: 100% !important;
        width: max-content !important;
    }

    /* Specific sticky style for selection and item columns only */
    .task-table .col-select,
    .task-table .th-item,
    .task-table .col-item {
        position: -webkit-sticky !important;
        position: sticky !important;
        background-color: #ffffff !important;
        z-index: 50 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .task-table .col-select {
        left: 0 !important;
        width: 48px !important;
        min-width: 48px !important;
        border-right: 1px solid #e6e9ef !important;
    }

    .task-table .th-item,
    .task-table .col-item {
        left: 48px !important;
        /* EXACTLY width of col-select */
        border-right: 1px solid #e6e9ef !important;
        min-width: 350px !important;
    }

    /* Ensure intersection header stickiness */
    .task-table thead th.col-select,
    .task-table thead th.th-item,
    .task-table .group-header-row th.col-select,
    .task-table .group-header-row th.th-item {
        top: 0 !important;
        z-index: 100 !important;
    }

    /* Generic top-header stickiness */
    .task-table thead th,
    .task-table .group-header-row th {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        background-color: #ffffff !important;
    }

    /* Clear z-index for ALL other cells effectively to zero (styles.css conflict) */
    .task-table td:not(.col-select):not(.col-item) {
        position: relative !important;
        /* keeps some items layered correctly but doesn't stick */
        z-index: 1 !important;
        left: auto !important;
    }

    .task-row td {
        background-color: #ffffff !important;
    }

    .col-select,
    .task-table td.col-select,
    .task-table th.col-select {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        box-sizing: border-box !important;
    }

    /* Fixed Sidebar Sections */
    .sidebar {
        grid-template-rows: auto 1fr auto !important;
    }

    .workspace-block {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f6f7fb !important;
        padding-bottom: 8px;
    }

    .workspace-picker-row {
        border: 1px solid #c4c7d5 !important;
        border-radius: 6px;
        padding: 2px;
        background: #ffffff;
    }

    /* Workspace Item Drag and Drop */
    .dragging-workspace-item {
        opacity: 0.5;
        background: #eef2ff !important;
    }

    .drag-over-workspace-item {
        border-top: 2px solid #0073ea !important;
        background: rgba(0, 115, 234, 0.05) !important;
    }

    /* Workspace Nav Items & Meatballs Menu */
    .workspace-nav-item .workspace-nav-item-menu {
        opacity: 0;
        pointer-events: none;
        padding: 4px;
        border-radius: 4px;
        color: var(--text-color);
    }

    .workspace-nav-item:hover .workspace-nav-item-menu {
        opacity: 1;
        pointer-events: auto;
    }

    .workspace-nav-item-menu:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .meatballs-dropdown {
        background: white;
        border-radius: 8px;
        border: 1px solid #d0d4e4;
        min-width: 260px;
        padding: 8px 0;
        box-shadow: 0 4px 17px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
    }

    .meatballs-dropdown button.dropdown-item {
        width: calc(100% - 16px);
        margin: 1px 8px;
        text-align: left;
        border: none;
        background: transparent;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        color: #323338;
        border-radius: 4px;
        font-family: 'Figtree', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .meatballs-dropdown button.dropdown-item i {
        color: #676879;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
    }

    .meatballs-dropdown button.dropdown-item:hover {
        background: #f5f6f8;
    }

    .meatballs-dropdown .dropdown-divider {
        height: 1px;
        background: #d0d4e4;
        margin: 6px 0;
        width: 100%;
    }

    /* File Column Styles */
    .file-cell-content {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        height: 100%;
        padding: 0 8px;
        min-height: 38px;
    }

    .file-cell-add {
        color: #c4c4c4;
        font-size: 18px;
        display: none;
    }

    .task-row:hover .file-cell-add {
        display: inline-block;
    }

    .file-stack {
        display: flex;
        position: relative;
        align-items: center;
        margin-right: 4px;
    }

    .file-stack-item {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid white;
        background: #f1f3f5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .file-stack-item:first-child {
        margin-left: 0;
    }

    .file-stack-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .file-stack-item i {
        font-size: 12px;
        color: #676879;
    }

    .file-count-badge {
        color: #676879;
        font-size: 11px;
    }

    /* Files Modal/Gallery */
    .files-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
        padding: 16px;
    }

    .file-card {
        border: 1px solid #e6e9ef;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: white;
        transition: transform 0.2s;
        display: flex;
        flex-direction: column;
    }

    .file-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .file-preview-box {
        height: 100px;
        background: #f6f7fb;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .file-preview-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .file-preview-box i {
        font-size: 40px;
        color: #c4c4c4;
    }

    .file-info {
        padding: 8px;
        font-size: 12px;
        flex-grow: 1;
    }

    .file-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .file-meta {
        color: #676879;
        display: flex;
        justify-content: space-between;
    }

    .file-actions {
        display: flex;
        justify-content: space-around;
        padding: 8px;
        border-top: 1px solid #f6f7fb;
        background: #fafbfc;
    }

    .file-action-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        color: #676879;
        font-size: 14px;
        padding: 4px;
        transition: color 0.1s;
    }

    .file-action-btn:hover {
        color: #0073ea;
    }

    .file-action-btn.danger:hover {
        color: #e2445c;
    }

    /* Toast Notifications */
    #toastContainer {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none;
    }

    .toast {
        min-width: 280px;
        max-width: 400px;
        padding: 12px 16px;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        animation: toast-slide-in 0.3s ease-out forwards;
        pointer-events: auto;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .toast.success {
        background-color: #00c875;
    }

    .toast.error {
        background-color: #e2445c;
    }

    .toast.info {
        background-color: #0073ea;
    }

    .toast-close {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        padding: 0;
        margin-left: 12px;
        font-size: 16px;
    }

    @keyframes toast-slide-in {
        from {
            transform: translateX(110%);
            opacity: 0;
        }

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

    @keyframes toast-fade-out {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(20px);
        }
    }

    /* Frozen Columns & Sticky Headers */
    .task-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* 1. Base Select checkbox column */
    .col-select.sticky-col,
    .col-select {
        position: sticky;
        left: 0;
        z-index: 10;
        background-color: white;
        min-width: 38px;
        width: 38px;
        border-right: 1px solid #e6e9ef;
    }

    /* 2. Drag handle column */
    .col-drag.sticky-col,
    .col-drag {
        position: sticky;
        left: 38px;
        /* Width of Select column */
        z-index: 10;
        background-color: white;
        min-width: 34px;
        width: 34px;
        border-right: none;
    }

    /* 3. The Item Name column */
    .sticky-item-col {
        position: sticky !important;
        left: 72px !important;
        /* select (38) + drag (34) */
        z-index: 9 !important;
        background-color: white !important;
        border-right: 1px solid #e6e9ef !important;
    }

    /* Fix for header sticky state styling */
    th.sticky-item-col,
    th.col-select,
    th.col-drag {
        z-index: 101 !important;
        /* Must be above data cells and below floating menus */
        background-color: #f5f6f8 !important;
        /* Header background color */
    }

    /* Group Headers sticky behavior */
    .group-title-row {
        position: sticky;
        top: 0;
        /* Optional: vertical sticky if needed, but horizontal freeze is requested */
    }

    .group-title-content {
        position: sticky;
        left: 10px;
        display: inline-flex;
        align-items: center;
        z-index: 12;
        background-color: white;
        padding: 4px 12px;
        border-radius: 4px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
        white-space: nowrap;
    }

    /* Maintain hover highlights for frozen cells */
    .task-row:hover .col-select,
    .task-row:hover .col-drag,
    .task-row:hover .sticky-item-col {
        background-color: #f0f4f9 !important;
    }

    /* Selected task highlights for frozen cells */
    .task-row.task-selected .col-select,
    .task-row.task-selected .col-drag,
    .task-row.task-selected .sticky-item-col {
        background-color: #e5f4ff !important;
    }

    /* FILE PREVIEW & HOVER ENHANCEMENTS */
    .hover-preview-card {
        position: fixed;
        z-index: 30000;
        background: white;
        border-radius: 8px;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
        width: 260px;
        overflow: hidden;
        pointer-events: none;
        border: 1px solid #e6e9ef;
        display: flex;
        flex-direction: column;
        animation: previewFadeIn 0.15s ease-out;
    }

    @keyframes previewFadeIn {
        from {
            opacity: 0;
            transform: translateY(5px) scale(0.98);
        }

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

    .hover-preview-media {
        width: 100%;
        height: 160px;
        background: #f6f7fb;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .hover-preview-media img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

    .hover-preview-media i {
        font-size: 64px;
        color: #c4c4c4;
    }

    .hover-preview-info {
        padding: 12px;
        border-top: 1px solid #f0f3f9;
    }

    .hover-preview-name {
        font-size: 13px;
        font-weight: 600;
        color: #323338;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }

    .hover-preview-meta {
        font-size: 11px;
        color: #676879;
        display: flex;
        gap: 8px;
    }

    .file-icon-btn {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        background: transparent;
        color: #676879;
        border: none;
        position: relative;
    }

    .file-icon-btn:hover {
        background: #f0f3f9;
        color: #0073ea;
        transform: scale(1.1);
    }

    .file-icon-btn i {
        font-size: 18px;
    }

    /* Specific File Type Colors for Icons */
    .bi-file-earmark-image {
        color: #00ca72;
    }

    .bi-file-earmark-pdf {
        color: #e2445c;
    }

    .bi-file-earmark-word {
        color: #0073ea;
    }

    .bi-file-earmark-excel {
        color: #00c875;
    }

    .bi-file-earmark-ppt {
        color: #ff642e;
    }

    .bi-file-earmark-zip {
        color: #f59e0b;
    }

    .bi-file-earmark-text {
        color: #676879;
    }

    #filePreviewContent img {
        max-width: 100%;
        max-height: 100%;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        background: white;
    }

    .fullscreen-preview-iframe {
        width: 100%;
        height: 100%;
        border: none;
        background: white;
        border-radius: 4px;
    }

    .preview-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        transition: all 0.2s;
        z-index: 10;
    }

    .preview-nav-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-50%) scale(1.1);
    }

    .preview-nav-btn.prev {
        left: 20px;
    }

    .preview-nav-btn.next {
        right: 20px;
    }

    .preview-nav-btn:disabled {
        opacity: 0.1;
        cursor: not-allowed;
    }

    .file-preview-box {
        cursor: pointer;
    }

    .file-info {
        cursor: pointer;
    }

    /* Drag and Drop Fixes */
    .task-row.dragging {
        opacity: 0.6 !important;
        pointer-events: none !important;
        background-color: #f5f6f8 !important;
    }

    .board-field-header-cell.field-dragging {
        opacity: 0.7 !important;
        pointer-events: none !important;
        background-color: #f5f6f8 !important;
        z-index: 10000 !important;
    }

    .field-header-drag-handle {
        position: relative !important;
        z-index: 20 !important;
        cursor: grab !important;
    }

    body.drag-reordering {
        cursor: grabbing !important;
        user-select: none !important;
    }

    .drop-target-before td {
        box-shadow: inset 0 2px 0 #0073ea !important;
    }

    .drop-target-after td {
        box-shadow: inset 0 -2px 0 #0073ea !important;
    }

    .drop-left {
        border-left: 2px solid #0073ea !important;
    }

    .drop-right {
        border-right: 2px solid #0073ea !important;
    }
    .toolbar-dropdown {
        z-index: 10000 !important;
    }

    /* Status Color Palette */
    .color-palette {
        position: absolute;
        z-index: 20000;
        background: #ffffff;
        border: 1px solid #e1e4e8;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        padding: 12px;
        display: grid;
        grid-template-columns: repeat(6, 24px);
        gap: 8px;
    }

    .color-tile {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.1s;
        border: 1px solid rgba(0,0,0,0.05);
    }

    .color-tile:hover {
        transform: scale(1.2);
    }

    .picker-options-list {
        max-height: 300px;
        overflow-y: auto;
        padding: 4px 0;
    }

    .picker-edit-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        transition: background 0.1s;
    }

    .picker-edit-row:hover {
        background: #f5f6f8;
    }

    .picker-color-dot {
        width: 20px;
        height: 200px; /* Overridden by inline style height */
        width: 20px !important;
        height: 20px !important;
        border-radius: 3px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .picker-edit-input {
        flex: 1;
        border: 1px solid transparent;
        background: transparent;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
        color: #323338;
    }

    .picker-edit-input:focus {
        border-color: #0073ea;
        background: #ffffff;
        outline: none;
    }

    .picker-add-btn {
        width: calc(100% - 24px);
        margin: 12px;
        padding: 8px;
        background: #f0f3f9;
        border: 1px dashed #c4c4c4;
        border-radius: 4px;
        color: #676879;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .picker-add-btn:hover {
        background: #e1e4e8;
        color: #323338;
    }

    .status-picker-item {
        font-weight: 500 !important;
        padding: 8px 12px !important;
        text-align: center;
        color: #ffffff;
        cursor: pointer;
    }

    .status-picker-item:hover {
        filter: brightness(0.9);
    }
    /* File Management UI Enhancements */
    .files-manager {
        padding: 16px;
        background: #fff;
    }

    .files-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
        margin-top: 20px;
    }

    .file-card {
        border: 1px solid #e6e9ef;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        background: #fff;
        display: flex;
        flex-direction: column;
    }

    .file-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .file-preview-box {
        height: 100px;
        background: #f5f6f8;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
    }

    .file-preview-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .file-preview-box i {
        font-size: 42px;
        color: #0073ea;
    }

    .file-info {
        padding: 10px;
        cursor: pointer;
        flex-grow: 1;
    }

    .file-name {
        font-size: 13px;
        font-weight: 500;
        color: #323338;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }

    .file-meta {
        font-size: 11px;
        color: #676879;
        display: flex;
        justify-content: space-between;
    }

    .file-actions {
        display: flex;
        border-top: 1px solid #e6e9ef;
        background: #fafbfc;
    }

    .file-action-btn {
        flex: 1;
        background: transparent !important;
        border: none !important;
        color: #676879 !important;
        padding: 8px 0 !important;
        font-size: 14px !important;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .file-action-btn:hover {
        background: #e6e9ef !important;
        color: #323338 !important;
    }

    .file-action-btn.danger:hover {
        background: #fff0f0 !important;
        color: #e2445c !important;
    }

    /* File Cell Icons and Badges */
    .file-cell-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 36px;
        cursor: pointer;
    }

    .file-cell-add {
        color: #c4c4c4;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .file-cell-content:hover .file-cell-add {
        opacity: 1;
    }

    .file-icon-btn {
        background: transparent !important;
        border: none !important;
        color: #0073ea !important;
        padding: 2px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px !important;
        cursor: pointer;
        transition: transform 0.1s;
    }

    .file-icon-btn:hover {
        transform: scale(1.15);
    }

    .file-icon-btn.more-count {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #676879 !important;
        background: #f1f5f9 !important;
        border-radius: 4px !important;
        padding: 2px 4px !important;
        min-width: 24px;
    }

    /* Toast Notifications Customization */
    #toast-container {
        z-index: 30000 !important;
    }

    /* Trash / Archive Styles */
    .trash-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* ==========================================================================
   EXCEL IMPORT WIZARD
   ========================================================================== */
    .import-wizard-content {
        width: 90%;
        max-width: 1000px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .import-progress-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 40px;
        position: relative;
        background: #f6f7fb;
        border-bottom: 1px solid #e6e9ef;
    }

    .import-progress-bar::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 2px;
        background: #cbd0d9;
        z-index: 1;
    }

    .import-step-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #cbd0d9;
        z-index: 2;
        position: relative;
        transition: all 0.2s ease;
    }

    .import-step-dot.active {
        border-color: #0073ea;
        background: #0073ea;
        box-shadow: 0 0 0 4px rgba(0, 115, 234, 0.2);
    }

    .import-step-dot.completed {
        border-color: #00c875;
        background: #00c875;
    }

    .import-dropzone {
        border: 2px dashed #cbd0d9;
        border-radius: 8px;
        padding: 60px 20px;
        text-align: center;
        background: #fff;
        transition: border-color 0.2s;
        cursor: pointer;
    }

    .import-dropzone:hover, .import-dropzone.drag-over {
        border-color: #0073ea;
        background: #f0f7ff;
    }

    .import-dropzone i {
        font-size: 64px;
        color: #0073ea;
        display: block;
        margin-bottom: 15px;
    }

    .import-dropzone p {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .import-dropzone span {
        display: block;
        margin: 10px 0;
        color: #676879;
    }

    .step-instr {
        font-size: 16px;
        color: #323338;
        margin-bottom: 20px;
    }

    .import-preview-table-wrap {
        overflow: auto;
        max-height: 50vh;
        border: 1px solid #e6e9ef;
        border-radius: 4px;
        background: #fff;
    }

    .import-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .import-table th, .import-table td {
        padding: 12px;
        border: 1px solid #e6e9ef;
        font-size: 13px;
        white-space: nowrap;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .import-table tr:hover {
        background: #f6f7fb;
        cursor: pointer;
    }

    /* Step 1: Header Selection */
    .import-table tr.selected-header {
        background: #e5f4ff !important;
    }

    .import-table tr.selected-header td {
        border-top: 2px solid #0073ea;
        border-bottom: 2px solid #0073ea;
        font-weight: bold;
        color: #0073ea;
    }

    /* Step 2: Name column selection */
    .import-table th.selected-col,
    .import-table td.selected-col {
        background: #e5f4ff !important;
        border-left: 1px solid #0073ea;
        border-right: 1px solid #0073ea;
    }

    .import-table th.selected-col {
        color: #0073ea;
        font-weight: bold;
    }

    /* Step 3: Mapping */
    .import-mapping-select {
        width: 100%;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid #cbd0d9;
        font-size: 12px;
    }

    .import-mapping-select:focus {
        border-color: #0073ea;
        outline: none;
    }

    .import-wizard-footer {
        padding: 20px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        background: #f6f7fb;
        border-top: 1px solid #e6e9ef;
    }

    .trash-badge.deleted {
        background-color: #fff0f0 !important;
        color: #e2445c !important;
        border: 1px solid #ffdada !important;
    }

    .trash-badge.archived {
        background-color: #f1f6ff !important;
        color: #0073ea !important;
        border: 1px solid #d3e1f4 !important;
    }

    .trash-location {
        font-size: 12px;
        color: #676879;
    }

    .trash-location i {
        margin-right: 4px;
        color: #c3c6cd;
    }

    #trashView .task-table td {
        padding: 12px 16px !important;
        vertical-align: middle !important;
    }

    #navTrashBtn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        transition: all 0.2s;
        border-radius: 4px !important;
        padding: 8px 12px !important;
        margin-bottom: 8px;
    }

    #navTrashBtn:hover {
        background-color: #f5f6f8 !important;
    }

    #navTrashBtn.active {
        color: #0073ea !important;
        background-color: #eef4ff !important;
        font-weight: 600;
    }