/* =========================================================
   Ummah IT Solutions - brand theme for Worksuite portal
   Same branding as ummahitsolutions.com
   Fonts:   Poppins (headings), Roboto (body)
   Colours: #FF4500 (brand orange), #171718 (brand dark)

   Upload to: public_html/PORTAL/public/css/custom-css/theme-custom.css
   Worksuite loads this file automatically (dashboard + login pages).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --ummah-orange: #FF4500;
    --ummah-orange-hover: #E03D00;
    --ummah-orange-light: #FF6932;
    --ummah-dark: #171718;
    --ummah-tint: #FFF6F2;
}

/* ---------- Fonts ---------- */
body,
input, select, textarea, button,
.form-control, .btn, .dropdown-menu, .table,
.bootstrap-select .dropdown-toggle {
    font-family: 'Roboto', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title, .modal-title,
.heading-h1, .heading-h2, .heading-h3, .heading-h4, .heading-h5 {
    font-family: 'Poppins', sans-serif !important;
}

/* ---------- Primary colour: blue -> brand orange ---------- */
.text-primary,
.text-blue,
a.text-primary:hover {
    color: var(--ummah-orange) !important;
}

.bg-primary,
.bg-blue,
.badge-primary,
.badge-info {
    background-color: var(--ummah-orange) !important;
    color: #fff !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ummah-orange) !important;
    border-color: var(--ummah-orange) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ummah-orange-hover) !important;
    border-color: var(--ummah-orange-hover) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--ummah-orange) !important;
    border-color: var(--ummah-orange) !important;
}
.btn-outline-primary:hover {
    background-color: var(--ummah-orange) !important;
    color: #fff !important;
}

/* Form focus, checkboxes, switches */
.form-control:focus,
.bootstrap-select .dropdown-toggle:focus {
    border-color: var(--ummah-orange) !important;
    box-shadow: 0 0 0 0.15rem rgba(255, 69, 0, 0.2) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ummah-orange) !important;
    border-color: var(--ummah-orange) !important;
}

/* Pagination & progress */
.page-item.active .page-link {
    background-color: var(--ummah-orange) !important;
    border-color: var(--ummah-orange) !important;
}
.progress-bar {
    background-color: var(--ummah-orange);
}

/* Dropdown / select highlighted item */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ummah-orange) !important;
    color: #fff !important;
}

/* ---------- Sidebar: Worksuite navy (#171f29) -> website black (#171718) ----------
   Light mode: <aside class="sidebar-dark">
   Dark mode:  <aside> with .bg-dark on the brand box, menu and toggler box */
aside.sidebar-dark .main-sidebar,
aside.sidebar-dark .sidebar-brand-box,
aside.sidebar-dark .sidebar-menu,
aside.sidebar-dark .sidebarTogglerBox,
body.dark-theme aside .main-sidebar,
body.dark-theme aside .sidebar-brand-box,
body.dark-theme aside .sidebar-menu,
body.dark-theme aside .sidebarTogglerBox {
    background-color: var(--ummah-dark) !important;
}

/* Menu items take the sidebar colour (no navy blocks) */
aside.sidebar-dark .sidebar-menu li,
aside.sidebar-dark .sidebar-menu a,
body.dark-theme aside .sidebar-menu li,
body.dark-theme aside .sidebar-menu a {
    background-color: transparent !important;
}

/* Divider lines: navy-grey (#273039) -> neutral grey */
aside.sidebar-dark .main-sidebar *,
aside.sidebar-dark .sidebarTogglerBox,
body.dark-theme aside .main-sidebar *,
body.dark-theme aside .sidebarTogglerBox {
    border-color: #2A2A2C !important;
}

/* Hover + active menu item: soft black with orange edge */
aside.sidebar-dark .sidebar-menu li a:hover,
aside.sidebar-dark .sidebar-menu li a.active,
aside.sidebar-dark .sidebar-menu li.active > a,
body.dark-theme aside .sidebar-menu li a:hover,
body.dark-theme aside .sidebar-menu li a.active,
body.dark-theme aside .sidebar-menu li.active > a {
    background-color: #222224 !important;
}
aside .sidebar-menu li a.active,
aside .sidebar-menu li.active > a {
    box-shadow: inset 3px 0 0 var(--ummah-orange);
}

/* "Mobile App" button at the bottom: blue -> orange */
.sidebarTogglerBox .mobile-app-btn {
    background-color: rgba(255, 69, 0, 0.18) !important;
}
.sidebarTogglerBox .mobile-app-btn:hover {
    background-color: var(--ummah-orange) !important;
}

/* ---------- Text selection ---------- */
::selection {
    background: var(--ummah-orange);
    color: #fff;
}