/**
 * Dark mode — custom tab nav (patient, doctor, staff).
 * Active: light green + gold underline. Inactive hover: green text only (no underline).
 */

html[data-theme="dark"] .custom-tabs {
    border-bottom-color: var(--dm-border, #3a3a3f) !important;
}

html[data-theme="dark"] .custom-tabs > li > a {
    color: var(--dm-text-secondary, #a1a1aa) !important;
    background: transparent !important;
}

html[data-theme="dark"] .custom-tabs > li:not(.active) > a:hover,
html[data-theme="dark"] .custom-tabs > li:not(.active) > a:focus-visible {
    color: var(--dm-primary, #1a6b3c) !important;
}

html[data-theme="dark"] .custom-tabs > li:not(.active) > a:hover::after,
html[data-theme="dark"] .custom-tabs > li:not(.active) > a:focus-visible::after {
    content: none !important;
    display: none !important;
}

html[data-theme="dark"] .custom-tabs > li.active > a,
html[data-theme="dark"] .custom-tabs > li.active > a:hover,
html[data-theme="dark"] .custom-tabs > li.active > a:focus,
html[data-theme="dark"] .custom-tabs > li.active > a:active,
html[data-theme="dark"] .custom-tabs > li.active > a:focus-visible {
    color: #4ade80 !important;
    background: transparent !important;
}

html[data-theme="dark"] .custom-tabs > li.active > a::after {
    background: var(--tab-accent, #F0C040) !important;
}

/* Staff / admin hubs — beat panel light-mode #tabId .custom-tabs>li.active>a !important rules */
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li.active > a,
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li.active > a:hover,
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li.active > a:focus,
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li.active > a:active,
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li.active > a:focus-visible {
    color: #4ade80 !important;
}

html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li.active > a::after {
    background: var(--tab-accent, #F0C040) !important;
}

html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li:not(.active) > a:hover,
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li:not(.active) > a:focus-visible {
    color: var(--dm-primary, #1a6b3c) !important;
}

html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li:not(.active) > a:hover::after,
html[data-theme="dark"] :is(
    #ordersHubTab,
    #prescriptionVerificationTab,
    #financeOrdersHubTab,
    #warehouseOrdersHubTab,
    #logisticsOrdersHubTab,
    #contactInboxTab,
    #reportsTab,
    #salesTab,
    #commissionsRebatesTab,
    #doctorRegistrationsTab,
    #doctorListTab,
    #clinicsTab,
    #adminLogsTab,
    #featureUsageTab,
    #sessionsTab
) .custom-tabs > li:not(.active) > a:focus-visible::after {
    content: none !important;
    display: none !important;
}