/* Company Settings - Data Lookups Tab Styling */
/* Ensures proper visibility in both light and dark themes */

/* Custom color classes for appointment type badges */
.bg-purple {
    background-color: #6f42c1 !important;
    color: white !important;
}

.bg-pink {
    background-color: #d63384 !important;
    color: white !important;
}

.bg-cyan {
    background-color: #0dcaf0 !important;
    color: #000 !important;
}

.bg-teal {
    background-color: #20c997 !important;
    color: white !important;
}

.bg-indigo {
    background-color: #6610f2 !important;
    color: white !important;
}

.bg-lime {
    background-color: #84cc16 !important;
    color: #000 !important;
}

.bg-brown {
    background-color: #795548 !important;
    color: white !important;
}

.bg-gray {
    background-color: #6c757d !important;
    color: white !important;
}

.bg-orange {
    background-color: #fd7e14 !important;
    color: white !important;
}

.bg-yellow {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.bg-green {
    background-color: #198754 !important;
    color: white !important;
}

.bg-blue {
    background-color: #0d6efd !important;
    color: white !important;
}

.bg-red {
    background-color: #dc3545 !important;
    color: white !important;
}

/* ── Main settings tabs ─────────────────────────────────────────────────── */
#settingsTabs .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

#settingsTabs .nav-link:hover:not(.active) {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color);
}

#settingsTabs .nav-link.active {
    color: var(--bs-primary);
    font-weight: 700;
    background-color: var(--bs-body-bg);
    border-bottom: 3px solid var(--bs-primary);
}

/* ── Dark mode fix for main settings tabs: UA button styling bleeds through
   without an explicit background-color, producing white buttons with faint text. */
[data-bs-theme="dark"] #settingsTabs .nav-link {
    background-color: transparent;
}

[data-bs-theme="dark"] #settingsTabs .nav-link:hover:not(.active) {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] #settingsTabs .nav-link.active {
    background-color: var(--bs-body-bg);
}

/* ── PDF Templates inner tabs (card-header-tabs) ────────────────────────── */
#pdfTemplateTabs .nav-link {
    color: var(--bs-secondary-color);
    font-weight: 500;
    background-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#pdfTemplateTabs .nav-link:hover:not(.active) {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

#pdfTemplateTabs .nav-link.active {
    color: #fff !important;
    font-weight: 700;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) var(--bs-primary) var(--bs-card-bg, var(--bs-body-bg));
}

/* ── Sub-tab navigation pills */
#lookupSubTabs .nav-link {
    color: var(--bs-body-color);
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
    margin-right: 0.5rem;
    transition: all 0.2s ease;
}

#lookupSubTabs .nav-link:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-primary);
}

#lookupSubTabs .nav-link.active {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary);
}

/* ── Dark mode explicit overrides for sub-tabs and PDF template tabs
   Bootstrap's nav-link uses `background: 0 0` (position only, not color) on
   <button> elements, which lets system button appearance bleed through in dark
   mode on some browsers. Force every state explicitly. */
[data-bs-theme="dark"] #lookupSubTabs .nav-link {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #lookupSubTabs .nav-link:hover:not(.active) {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] #lookupSubTabs .nav-link.active {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

[data-bs-theme="dark"] #pdfTemplateTabs .nav-link {
    color: var(--bs-secondary-color);
    background-color: transparent;
}

[data-bs-theme="dark"] #pdfTemplateTabs .nav-link:hover:not(.active) {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] #pdfTemplateTabs .nav-link.active {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd #0d6efd var(--bs-body-bg) !important;
}

/* Lookup tables */
.lookup-table-wrapper {
    background-color: var(--bs-body-bg);
}

.lookup-table thead {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.lookup-table tbody tr:hover {
    background-color: var(--bs-tertiary-bg);
}

/* System-defined badge */
.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

/* Color badge previews in table */
.color-badge-preview {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Grip handle for drag-and-drop (future feature) */
.bi-grip-vertical {
    color: var(--bs-secondary);
    cursor: grab;
}

.bi-grip-vertical:hover {
    color: var(--bs-primary);
}

/* Action buttons */
.btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Loading spinner */
.lookup-loading {
    color: var(--bs-secondary);
}

/* Empty state */
.lookup-empty-state {
    color: var(--bs-secondary);
    padding: 3rem 1rem;
}

/* Usage count */
.usage-count {
    color: var(--bs-secondary);
    font-size: 0.875rem;
}

/* Icon styling */
.lookup-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sortable.js drag-and-drop states */
.sortable-ghost {
    opacity: 0.4;
    background-color: var(--bs-primary-bg-subtle) !important;
}

.sortable-drag {
    opacity: 1;
    cursor: grabbing !important;
}

.sortable-chosen {
    background-color: var(--bs-secondary-bg);
}

/* Make grip handle more visible on hover */
.bi-grip-vertical {
    transition: color 0.2s ease;
}

tr:hover .bi-grip-vertical {
    color: var(--bs-primary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #lookupSubTabs .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .lookup-table {
        font-size: 0.875rem;
    }
}
