/*

 Theme Name: Hello Elementor Child

 Template: hello-elementor

*/
:root {}



/* --------------------------------------------- */

/*  DARK MODE ICON LOGIC                         */

/* --------------------------------------------- */



.sidebar-wrapper .sun-icon { 

    display: none !important; 

}



body.dark-mode .sidebar-wrapper #dark-mode-toggle { 

    display: none !important;

}



body.dark-mode .sidebar-wrapper .sun-icon { 

    display: inline-block !important;

    visibility: visible !important;

    opacity: 1 !important;

    color: #FFD700 !important;

}



body.dark-mode .sidebar-wrapper .sidebar {

    background: #0b2540 !important;

}



body.dark-mode .sidebar-wrapper ~ .main-content {

    background: #0f172a !important;

}



/* --------------------------------------------- */

/*  DESKTOP SIDEBAR (1025px+)                    */

/* --------------------------------------------- */



@media (min-width: 1025px) {



    .sidebar-wrapper {

        position: fixed;

        left: 0;

        top: 0;

        height: 100vh;

        background: #044CA5;

        z-index: 50;

        width: 240px !important;

        min-width: 240px !important;

        max-width: 240px !important;

        transition: width 0.3s ease;

        display: flex;

        flex-direction: column;

        overflow: hidden;

    }



    .sidebar-wrapper .sidebar {

        width: 100%;

        transition: width 0.3s ease;

        max-height: 100vh;

        overflow-y: auto;

        overflow-x: hidden;

    }



    .sidebar-wrapper.collapsed,

    .sidebar-wrapper.hover-collapsed {

        width: 65px !important;

        min-width: 65px !important;

        max-width: 65px !important;

    }



    .sidebar-wrapper.collapsed .sidebar,

    .sidebar-wrapper.hover-collapsed .sidebar {

        overflow-y: visible;

    }



    .sidebar-wrapper .logo-full { display: block; }

    .sidebar-wrapper .logo-icon { display: none; }



    .sidebar-wrapper.collapsed .logo-full,

    .sidebar-wrapper.hover-collapsed .logo-full {

        display: none;

    }



    .sidebar-wrapper.collapsed .logo-icon,

    .sidebar-wrapper.hover-collapsed .logo-icon {

        display: block;

    }



    .sidebar-wrapper.collapsed .menu-text,

    .sidebar-wrapper.hover-collapsed .menu-text {

        display: none;

    }



    .sidebar-wrapper.collapsed .menu-item,

    .sidebar-wrapper.hover-collapsed .menu-item {

        justify-content: center;

    }



    .sidebar-wrapper .sidebar-toggle {

        width: 30px;

        height: 27px;

        background: #ffffff;

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 18px;

        font-weight: 600;

        color: #000;

        box-shadow: 0 2px 6px rgba(0,0,0,0.15);

        cursor: pointer;

        transition: background 0.2s ease, box-shadow 0.2s ease;

    }



    .sidebar-wrapper .sidebar-toggle:hover {

        background: #f2f2f2;

        box-shadow: 0 3px 8px rgba(0,0,0,0.2);

    }



    .sidebar-wrapper.collapsed .sidebar-toggle,

    .sidebar-wrapper.hover-collapsed .sidebar-toggle {

        display: none !important;

    }



    .sidebar-wrapper ~ .main-content {

        padding-left: 265px;

        transition: padding-left 0.3s ease;

        position: relative;

        z-index: 1;

    }



    .sidebar-wrapper.collapsed ~ .main-content,

    .sidebar-wrapper.hover-collapsed ~ .main-content {

        padding-left: 85px !important;

    }



    .close-sidebar {

        display: none !important;

    }

}



/* --------------------------------------------- */

/*  MENU ITEM STYLING (GLOBAL)                   */

/* --------------------------------------------- */



.sidebar-wrapper .menu-item {

    display: flex;

    padding: 10px;

    border-radius: 8px;

    color: #ffffff;

    transition: background 0.2s ease, color 0.2s ease;

}



.sidebar-wrapper .menu-item .left {

    display: flex;

    align-items: center;

    gap: 10px;

}



.sidebar-wrapper .menu-item i {

    font-size: 16px;

    color: #ffffff;

}



.sidebar-wrapper .menu-text {

    font-size: 14px;

    font-weight: 500;

    white-space: nowrap;

    color: #ffffff;

}



.sidebar-wrapper .menu-item:hover {

    background: #4D93E9;

    color: #ffffff;

}



.sidebar-wrapper .menu-item.active {

    background: #4D93E9;

    color: #ffffff;

}



/* --------------------------------------------- */

/*  COLLAPSED MODE                               */

/* --------------------------------------------- */



.sidebar-wrapper.collapsed .menu-item,

.sidebar-wrapper.hover-collapsed .menu-item {

    width: auto !important;

    padding: 8px !important;

    justify-content: center !important;

}



.sidebar-wrapper.collapsed .menu-item:hover,

.sidebar-wrapper.hover-collapsed .menu-item:hover {

    background: #4D93E9 !important;

    width: 40px !important;

    height: 40px !important;

    padding: 0 !important;

    border-radius: 8px;

}



.sidebar-wrapper.collapsed .menu-item.active,

.sidebar-wrapper.hover-collapsed .menu-item.active {

    background: #4D93E9 !important;

    width: 40px !important;

    height: 40px !important;

    padding: 0 !important;

    border-radius: 8px;

}



/* --------------------------------------------- */

/*  DARK MODE MENU ITEMS                         */

/* --------------------------------------------- */



body.dark-mode .sidebar-wrapper .menu-item {

    color: #e5e7eb;

}



body.dark-mode .sidebar-wrapper .menu-item i {

    color: #e5e7eb;

}



body.dark-mode .sidebar-wrapper .menu-item:hover,

body.dark-mode .sidebar-wrapper .menu-item.active {

    background: #1e293b;

    color: #60a5fa;

}



/* --------------------------------------------- */

/*  SUBMENU + ARROW                              */

/* --------------------------------------------- */



.sidebar-wrapper .patients-submenu,

.sidebar-wrapper .doctors-submenu,

.sidebar-wrapper .staff-submenu,

.sidebar-wrapper .appointments-submenu,

.sidebar-wrapper .departments-submenu,

.sidebar-wrapper .tools-submenu {

    display: none;

    padding-left: 28px;

    margin-top: 4px;

}



.sidebar-wrapper .submenu-item {

    padding: 10px 0;

    font-size: 13px;

    color: #d1d5db;

    cursor: pointer;

    transition: color 0.2s ease, padding-left 0.2s ease;

}



.sidebar-wrapper .submenu-item:hover,

.sidebar-wrapper .submenu-item:hover * {

    color: #66B3FF !important;

    padding-left: 6px;

}



.sidebar-wrapper .submenu-arrow {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 20px;

    min-width: 20px;

    font-size: 12px;

    color: #d1d5db;

    transition: transform 0.2s ease, color 0.2s ease;

}



.sidebar-wrapper .submenu-arrow.rotate {

    transform: rotate(90deg);

    color: #4D93E9;

}



/* --------------------------------------------- */

/*  HIDE SUBMENUS WHEN COLLAPSED                 */

/* --------------------------------------------- */



.sidebar-wrapper.collapsed .patients-submenu,

.sidebar-wrapper.hover-collapsed .patients-submenu,

.sidebar-wrapper.collapsed .doctors-submenu,

.sidebar-wrapper.hover-collapsed .doctors-submenu,

.sidebar-wrapper.collapsed .staff-submenu,

.sidebar-wrapper.hover-collapsed .staff-submenu,

.sidebar-wrapper.collapsed .appointments-submenu,

.sidebar-wrapper.hover-collapsed .appointments-submenu,

.sidebar-wrapper.collapsed .departments-submenu,

.sidebar-wrapper.hover-collapsed .departments-submenu,

.sidebar-wrapper.collapsed .tools-submenu,

.sidebar-wrapper.hover-collapsed .tools-submenu {

    display: none !important;

}



.sidebar-wrapper.collapsed .submenu-arrow,

.sidebar-wrapper.hover-collapsed .submenu-arrow {

    display: none !important;

}



/* --------------------------------------------- */

/*  PROFILE DROPDOWN                             */

/* --------------------------------------------- */



.profile-dropdown-wrapper {

    position: relative;

}



.profile-dropdown {

    position: absolute;

    top: 48px;

    right: 0;

    width: 190px;

    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 4px 18px rgba(0,0,0,0.08);

    padding: 8px 0;

    display: none;

    z-index: 9999;

}



.profile-dropdown .profile-item {

    display: block;

    padding: 10px 16px;

    font-size: 14px;

    color: #333;

    text-decoration: none;

    transition: 0.2s ease;

}



.profile-dropdown .profile-item:hover {

    background: #f5f7fa;

}



.profile-dropdown .logout {

    color: #d63638;

}



.profile-dropdown .profile-divider {

    height: 1px;

    background: #e5e7eb;

    margin: 6px 0;

}



body.dark-mode .profile-dropdown {

    background: #1e293b;

    box-shadow: 0 4px 18px rgba(0,0,0,0.4);

}



body.dark-mode .profile-dropdown .profile-item {

    color: #e5e7eb;

}



body.dark-mode .profile-dropdown .profile-item:hover {

    background: #334155;

}



body.dark-mode .profile-dropdown .logout {

    color: #f87171;

}



.profile-dropdown {

    opacity: 0;

    transform: translateY(5px);

    transition: opacity 0.18s ease, transform 0.18s ease;

}



.profile-dropdown.show {

    opacity: 1;

    transform: translateY(0);

}
.patient-form-section {
    background: #ffffff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    margin-top: 16px;
}

	.section-title {
    color: #044CA5;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}



/* --------------------------------------------- */

/*  TABLET PORTRAIT (768px – 1024px)             */

/* --------------------------------------------- */



@media (max-width: 1024px) and (min-width: 768px) {



    .sidebar-wrapper .logo-full {

        display: block !important;

    }



    .sidebar-wrapper .logo-icon {

        display: none !important;

    }



    .sidebar-wrapper {

        position: fixed;

        left: -260px;

        top: 0;

        width: 240px !important;

        height: 100vh;

        background: #044CA5;

        z-index: 9999;

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        display: flex;

        flex-direction: column;

    }



    .sidebar-wrapper.open {

        transform: translateX(0);

        left: 0;

    }



    .sidebar-wrapper .sidebar-toggle {

        display: none !important;

    }



    .close-sidebar {

        display: none !important;

    }



    .sidebar-wrapper.open .close-sidebar {

        display: flex !important;

        align-items: center;

        justify-content: center;

        width: 32px;

        height: 32px;

        background: #ffffff;

        border-radius: 5px;

        font-size: 20px;

        font-weight: 600;

        color: #000;

        cursor: pointer !important;

        pointer-events: auto !important;

        margin-left: auto !important;

        margin-right: 12px !important;

        margin-top: 12px;

        z-index: 99999;

    }



    /* ⭐ TABLET SIDEBAR SCROLL */

    .sidebar-wrapper .sidebar {

        overflow-y: auto !important;

        overflow-x: hidden !important;

        scroll-behavior: smooth !important;

    }



    .sidebar-wrapper ~ .main-content {

        padding-left: 0 !important;

    }



    .header-hamburger {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 48px !important;

        height: 48px !important;

        font-size: 36px !important;

        line-height: 48px !important;

        cursor: pointer;

        color: #044CA5;

        margin-left: 3px !important;

        padding: 0 !important;

        position: relative !important;

        z-index: 999999 !important;

    }



    .header-logo {

        display: flex !important;

        align-items: center;

        font-size: 18px;

        font-weight: 600;

        color: #044CA5;

        margin-right: 20px;

    }

}



/* ⭐ FIX TABLET HAMBURGER CLICK */

.header-container,

.header-wrapper,

.main-header {

    pointer-events: auto !important;

}



.header-hamburger {

    pointer-events: auto !important;

    cursor: pointer !important;

}



/* --------------------------------------------- */

/*  MOBILE VIEW (max-width: 767px)               */

/* --------------------------------------------- */



@media (max-width: 767px) {



    .sidebar-wrapper {

        position: fixed;

        top: 0;

        left: 0;

        width: 240px !important;

        height: 100vh;

        background: #044CA5;

        z-index: 9999;

        transform: translateX(-100%) !important;

        transition: transform 0.3s ease;

        display: flex;

        flex-direction: column;

        padding-top: 15px !important;

    }



    .sidebar-wrapper.open {

        transform: translateX(0) !important;

    }



    .sidebar-toggle {

        display: none !important;

    }



    .close-sidebar {

        display: none !important;

    }



    .sidebar-top {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 0 !important;

        width: 100% !important;

    }



    .sidebar-top .logo-full {

        display: block !important;

        width: auto !important;

        margin: 0 !important;

    }



    .sidebar-top .logo-icon {

        display: none !important;

    }



    .sidebar-wrapper.open .close-sidebar {

        position: relative !important;

        top: 0 !important;

        right: 0 !important;

        width: 32px !important;

        height: 32px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        background: #ffffff !important;

        border-radius: 8px !important;

        font-size: 20px !important;

        font-weight: 600 !important;

        color: #000 !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        margin-left: auto !important;

        z-index: 999999 !important;

    }

    



    .header-hamburger { 

        display: flex !important; 

        align-items: center !important; 

        justify-content: center !important; 

        width: 48px !important; 

        height: 48px !important; 

        font-size: 36px !important;

        line-height: 48px !important;

        cursor: pointer; 

        color: #044CA5; 

        margin-left: 3px !important; 

        padding: 0 !important; 

        position: relative !important; 

        z-index: 999999 !important;

        pointer-events: auto !important;

    }



    .header-logo {

        pointer-events: auto !important;

        z-index: 999999 !important;

    }



    .header-container,

    .header-wrapper,

    .main-header {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 10px !important;

        gap: 10px !important;

        position: relative !important;

        z-index: 999999 !important;

        pointer-events: auto !important;

    }



    /* ⭐ MOBILE MENU LIST FIX — ONLY MOBILE */

    .sidebar-wrapper .menu-item {

        padding: 9px 15px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

    }



    .sidebar-wrapper .menu-item i {

        font-size: 17px !important;

        width: 18px !important;

        text-align: center !important;

    }



    .sidebar-wrapper .menu-text {

        font-size: 13.5px !important;

        font-weight: 500 !important;

        line-height: 1 !important;

    }



    .sidebar-wrapper .patients-submenu,

    .sidebar-wrapper .doctors-submenu,

    .sidebar-wrapper .staff-submenu,

    .sidebar-wrapper .appointments-submenu,

    .sidebar-wrapper .departments-submenu,

    .sidebar-wrapper .tools-submenu {

        padding-left: 32px !important;

        margin-top: 4px !important;

    }



    .sidebar-wrapper .submenu-item {

        padding: 7px 0 !important;

        font-size: 13px !important;

    }



    .sidebar-wrapper .menu-item.active {

        background: #4D93E9 !important;

        color: #ffffff !important;

    }



    .sidebar-wrapper .submenu-item.active {

        color: #66B3FF !important;

        font-weight: 500 !important;

    }

    /* ⭐ ENABLE MOBILE SIDEBAR SCROLL */

.sidebar-wrapper {

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important; /* smooth iPhone scroll */

}





    /* ⭐ FIX ARROW ALIGNMENT — ONLY ITEMS WITH ARROWS */

    .sidebar-wrapper .menu-item:has(.submenu-arrow) {

        justify-content: space-between !important;

    }



    /* Items WITHOUT arrows stay normal */

    .sidebar-wrapper .menu-item:not(:has(.submenu-arrow)) {

        justify-content: flex-start !important;

    }



    /* Left side stays grouped */

    .sidebar-wrapper .menu-item .left {

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        flex: 1 !important;

    }



    /* Arrow stays centered */

    .sidebar-wrapper .submenu-arrow {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        height: 100% !important;

    }



    /* ⭐ First child of header-container (your hamburger + logo side) */
    .header-container > div:nth-child(1) {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }

    /* ⭐ Second child of header-container (your fullscreen, dark mode, profile icons) */
    .header-container > div:nth-child(2) {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
@media (max-width: 767px) {

    /* ⭐ Target the container that holds the hamburger */
    .header-container div:has(.header-hamburger) {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }

    /* ⭐ Target the container that holds the right-side icons */
    .header-container div:has(.full-screen-icon, .moon-icon, .sun-icon, .notification-wrap, .avatar) {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
}

/* ⭐ FIX HEADER CHILDREN WITH NO CLASSES (MOBILE + TABLET) */
@media (max-width: 1024px) {

    /* LEFT SIDE (hamburger + logo) */
    .header-container > div:nth-child(1) {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }

    /* RIGHT SIDE (fullscreen, dark mode, notification, avatar) */
    .header-container > div:nth-child(2) {
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }
}