/* ======================================================================================
   APOLLO KATEGORI KANBAN & TASK BOARD (apollo-kanban.css)
   Description: Kanban Columns, Cards, Priority Tags, Module Tab Pills & Drag-and-Drop Containers
   ====================================================================================== */

/* 1. KANBAN BOARD WRAPPER */
.apollo-kanban-board,
.kanban-board,
.project-kanban-board {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto !important;
    padding: 8px 4px 18px 4px !important;
    align-items: flex-start !important;
    scrollbar-width: thin !important;
}

/* 2. KANBAN COLUMNS */
.apollo-kanban-column,
.kanban-col,
.project-kanban-col {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    width: 290px !important;
    min-width: 270px !important;
    flex-shrink: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* 3. KANBAN COLUMN HEADERS */
.apollo-kanban-column-header,
.kanban-col-header,
.project-kanban-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 4px !important;
}

.kanban-cards-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: 80px !important;
}

/* 4. KANBAN CARDS */
.apollo-kanban-card,
.kanban-card,
.project-kanban-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    cursor: pointer !important;
    color: #1e293b !important;
}

.apollo-kanban-card:hover,
.kanban-card:hover,
.project-kanban-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* 5. KANBAN TAGS & BADGES */
.apollo-kanban-tag,
.kanban-tag {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
}
.apollo-kanban-tag.urgent, .kanban-tag.urgent { background: #fee2e2 !important; color: #dc2626 !important; }
.apollo-kanban-tag.medium, .kanban-tag.medium { background: #fef3c7 !important; color: #d97706 !important; }
.apollo-kanban-tag.normal, .kanban-tag.normal { background: #e0e7ff !important; color: #4338ca !important; }

/* 6. MODULE TAB PILLS & NAVIGATION TABS */
.crm-tab-pills,
.apollo-tab-pills,
.nav-pills.apollo-nav-pills {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f1f5f9 !important;
    padding: 5px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    flex-wrap: wrap !important;
}

.crm-tab-pill,
.apollo-tab-pill,
.apollo-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 14px !important;
    border-radius: 7px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
}

.crm-tab-pill:hover,
.apollo-tab-pill:hover,
.apollo-tab-btn:hover {
    color: #1e293b !important;
    background: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
}

.crm-tab-pill.active,
.apollo-tab-pill.active,
.apollo-tab-btn.active {
    background: #ffffff !important;
    color: #2563eb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    font-weight: 700 !important;
}

/* Standard Nav Tabs Styling */
.nav-tabs {
    border-bottom: 2px solid #e2e8f0 !important;
    gap: 4px !important;
}

.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
}

.nav-tabs .nav-link:hover {
    color: #1e293b !important;
    border-bottom-color: #cbd5e1 !important;
}

.nav-tabs .nav-link.active {
    color: #2563eb !important;
    border-bottom: 2px solid #2563eb !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* 7. DARK MODE KANBAN & TABS OVERRIDES */
html.dark-mode .apollo-kanban-column,
body.dark-mode .apollo-kanban-column,
html.dark-mode .kanban-col,
body.dark-mode .kanban-col,
html.dark-mode .project-kanban-col,
body.dark-mode .project-kanban-col {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .apollo-kanban-column-header,
body.dark-mode .apollo-kanban-column-header,
html.dark-mode .kanban-col-header,
body.dark-mode .kanban-col-header,
html.dark-mode .project-kanban-header,
body.dark-mode .project-kanban-header {
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .apollo-kanban-card,
body.dark-mode .apollo-kanban-card,
html.dark-mode .kanban-card,
body.dark-mode .kanban-card,
html.dark-mode .project-kanban-item,
body.dark-mode .project-kanban-item {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .crm-tab-pills,
body.dark-mode .crm-tab-pills,
html.dark-mode .apollo-tab-pills,
body.dark-mode .apollo-tab-pills {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .crm-tab-pill,
body.dark-mode .crm-tab-pill,
html.dark-mode .apollo-tab-pill,
body.dark-mode .apollo-tab-pill,
html.dark-mode .apollo-tab-btn,
body.dark-mode .apollo-tab-btn {
    color: #94a3b8 !important;
}

html.dark-mode .crm-tab-pill:hover,
body.dark-mode .crm-tab-pill:hover,
html.dark-mode .apollo-tab-pill:hover,
body.dark-mode .apollo-tab-pill:hover {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .crm-tab-pill.active,
body.dark-mode .crm-tab-pill.active,
html.dark-mode .apollo-tab-pill.active,
body.dark-mode .apollo-tab-pill.active,
html.dark-mode .apollo-tab-btn.active,
body.dark-mode .apollo-tab-btn.active {
    background: #1e293b !important;
    color: #60a5fa !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .nav-tabs {
    border-bottom-color: #334155 !important;
}

html.dark-mode .nav-tabs .nav-link {
    color: #94a3b8 !important;
}

html.dark-mode .nav-tabs .nav-link:hover {
    color: #f1f5f9 !important;
    border-bottom-color: #475569 !important;
}

html.dark-mode .nav-tabs .nav-link.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}