/* ============================================================
   AFRINOVA CONNECT
   GLOBAL THEME
   Dashboard controls the theme.
   Theme applies to EVERY page.
   ============================================================ */


/* ============================================================
   DASHBOARD THEME SWITCH
   ONLY THIS CONTROL IS DASHBOARD-ONLY
   ============================================================ */

/* ============================================================
   GLOBAL DARK THEME
   ============================================================ */

html.afrinova-dark,
html.dark-mode,
body.afrinova-dark,
body.dark-mode {
    color-scheme: dark !important;
}

html.afrinova-dark body,
html.dark-mode body,
body.afrinova-dark,
body.dark-mode {
    background:
        #0b1220 !important;

    color:
        #e7eef8 !important;
}


/* Main containers */
html.afrinova-dark main,
html.dark-mode main,
html.afrinova-dark .main-content,
html.dark-mode .main-content,
html.afrinova-dark .content,
html.dark-mode .content {
    background:
        #0b1220 !important;

    color:
        #e7eef8 !important;
}


/* Cards */
html.afrinova-dark .card,
html.dark-mode .card,
html.afrinova-dark .dashboard-card,
html.dark-mode .dashboard-card,
html.afrinova-dark .stat-card,
html.dark-mode .stat-card,
html.afrinova-dark .metric-card,
html.dark-mode .metric-card,
html.afrinova-dark .feature-card,
html.dark-mode .feature-card,
html.afrinova-dark .report-card,
html.dark-mode .report-card,
html.afrinova-dark .panel,
html.dark-mode .panel,
html.afrinova-dark .table-card,
html.dark-mode .table-card,
html.afrinova-dark .table-container,
html.dark-mode .table-container,
html.afrinova-dark .summary-card,
html.dark-mode .summary-card,
html.afrinova-dark .info-card,
html.dark-mode .info-card,
html.afrinova-dark .package-card,
html.dark-mode .package-card,
html.afrinova-dark .voucher-card,
html.dark-mode .voucher-card,
html.afrinova-dark .router-card,
html.dark-mode .router-card,
html.afrinova-dark .pppoe-card,
html.dark-mode .pppoe-card,
html.afrinova-dark .form-card,
html.dark-mode .form-card,
html.afrinova-dark .form-section,
html.dark-mode .form-section,
html.afrinova-dark [class*="card"],
html.dark-mode [class*="card"] {
    background-color:
        #111c2d !important;

    color:
        #e7eef8 !important;

    border-color:
        rgba(148,163,184,.18) !important;
}


/* Tables */
html.afrinova-dark table,
html.dark-mode table {
    background-color:
        #111c2d !important;

    color:
        #e7eef8 !important;
}

html.afrinova-dark thead,
html.dark-mode thead {
    background-color:
        #18253a !important;
}

html.afrinova-dark th,
html.dark-mode th,
html.afrinova-dark td,
html.dark-mode td {
    color:
        #e7eef8 !important;

    border-color:
        rgba(148,163,184,.15) !important;
}


/* Inputs */
html.afrinova-dark input,
html.dark-mode input,
html.afrinova-dark select,
html.dark-mode select,
html.afrinova-dark textarea,
html.dark-mode textarea,
html.afrinova-dark .form-control,
html.dark-mode .form-control {
    background-color:
        #0b1525 !important;

    color:
        #e7eef8 !important;

    border-color:
        #35465d !important;
}

html.afrinova-dark input::placeholder,
html.dark-mode input::placeholder,
html.afrinova-dark textarea::placeholder,
html.dark-mode textarea::placeholder {
    color:
        #8191a7 !important;
}


/* Navigation */
html.afrinova-dark aside,
html.dark-mode aside,
html.afrinova-dark nav,
html.dark-mode nav,
html.afrinova-dark header,
html.dark-mode header,
html.afrinova-dark .sidebar,
html.dark-mode .sidebar,
html.afrinova-dark .navbar,
html.dark-mode .navbar,
html.afrinova-dark .topbar,
html.dark-mode .topbar {
    border-color:
        rgba(148,163,184,.15) !important;
}


/* Dropdowns */
html.afrinova-dark .dropdown-menu,
html.dark-mode .dropdown-menu,
html.afrinova-dark [role="menu"],
html.dark-mode [role="menu"] {
    background-color:
        #111c2d !important;

    color:
        #e7eef8 !important;

    border-color:
        #35465d !important;
}

html.afrinova-dark .dropdown-item,
html.dark-mode .dropdown-item {
    color:
        #e7eef8 !important;
}


/* Modals */
html.afrinova-dark .modal-content,
html.dark-mode .modal-content,
html.afrinova-dark .modal-dialog,
html.dark-mode .modal-dialog {
    background-color:
        #111c2d !important;

    color:
        #e7eef8 !important;

    border-color:
        #35465d !important;
}


/* Text */
html.afrinova-dark h1,
html.dark-mode h1,
html.afrinova-dark h2,
html.dark-mode h2,
html.afrinova-dark h3,
html.dark-mode h3,
html.afrinova-dark h4,
html.dark-mode h4,
html.afrinova-dark h5,
html.dark-mode h5,
html.afrinova-dark h6,
html.dark-mode h6 {
    color:
        #f1f5f9 !important;
}


/* ============================================================
   GLOBAL LIGHT THEME
   ============================================================ */

html.afrinova-light,
body.afrinova-light {
    color-scheme: light !important;
}

html.afrinova-light body,
body.afrinova-light {
    background-color:
        #f5f7fb !important;

    color:
        #1f2937 !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {


        top: 8px !important;
        right: 8px !important;

        width: 148px !important;
        height: 38px !important;
    }


        height: 32px !important;
        font-size: 12px !important;
    }
}