/*==================================================
  Safe Hand OCR Sidebar
==================================================*/

:root{
    --sidebar-width:260px;
    --sidebar-bg:#111827;
    --sidebar-hover:#1E3A8A;
    --sidebar-active:#2563EB;
    --sidebar-text:#F8FAFC;
    --sidebar-muted:#CBD5E1;
    --overlay:rgba(0,0,0,.45);
}

/* Overlay */

/*====================================
SIDEBAR OVERLAY
====================================*/

#sidebarOverlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(2px);

    opacity:0;

    visibility:hidden;

    transition:.30s ease;

    z-index:998;

    pointer-events:none;

}

#sidebarOverlay.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/* Sidebar */

#appSidebar{
    position:fixed;

    left:-320px;

    top:0;

    width:320px;

    height:100vh;

    transition:left .3s ease;

    z-index:999;
}

#appSidebar.show{
    left: 0 !important;
}
/* Header */

/*====================================
SIDEBAR HEADER
====================================*/

.sidebar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

    min-height:70px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-logo{

    width:130px;

    height:auto;

    max-height:42px;

    object-fit:contain;

    display:block;

    flex-shrink:0;

}

#closeSidebar{

    width:34px;

    height:34px;

    border:none;

    background:transparent;

    color:#ffffff;

    font-size:18px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*====================================
PROFILE
====================================*/

.sidebar-profile{

    padding:24px 20px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.avatar{

    width:58px;

    height:58px;

    margin:0 auto 10px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid rgba(255,255,255,.18);

}

.avatar i{

    font-size:42px;

    color:#ffffff;

}

.profile-info h5{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:#ffffff;

    line-height:1.4;

    word-break:break-word;

}

.profile-info span{

    display:block;

    margin-top:6px;

    font-size:12px;

    color:rgba(255,255,255,.75);

    letter-spacing:.3px;

}

/* Menu */

.sidebar-menu{

    list-style:none;

    padding:15px 0;

    margin:0;

}

.sidebar-menu li{

    margin:4px 10px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 16px;

    color:var(--sidebar-text);

    text-decoration:none;

    border-radius:10px;

    transition:.2s;

}

.sidebar-menu a:hover{

    background:var(--sidebar-hover);

}

.sidebar-menu a.active{

    background:var(--sidebar-active);

}

.sidebar-menu i{

    width:22px;

    text-align:center;

    font-size:18px;

}

/*====================================
SIDEBAR MENU
====================================*/

.sidebar-menu{

    list-style:none;

    margin:20px 0;

    padding:0 14px;

}

.sidebar-menu li{

    margin-bottom:8px;

}

.sidebar-menu li>a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 16px;

    color:#ffffff;

    text-decoration:none;

    border-radius:12px;
    
     white-space:nowrap;

    transition:all .25s ease;

    font-size:13px;

    font-weight:500;
    
      overflow:hidden;

    text-overflow:ellipsis;

}

.sidebar-menu li a i{

    width:22px;

    text-align:center;

    font-size:16px;

}

.sidebar-menu li:hover a{

    background:rgba(255,255,255,.10);

    transform:translateX(4px);

}

.sidebar-menu li.active a{

    background:#ffffff;

    color:#0B4EA2;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.sidebar-menu li.active a i{

    color:#0B4EA2;

}
.logout-item{

    margin-top:25px;

    border-top:1px solid rgba(255,255,255,.10);

    padding-top:15px;

}

.logout-item a{

    color:#FFD5D5;

}

.logout-item:hover a i{

    color:#ffffff;

}

/* Scrollbar */

#appSidebar::-webkit-scrollbar{

    width:7px;

}

#appSidebar::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:30px;

}

/* Mobile */

@media(max-width:768px){

    #appSidebar{

        width:280px;

        left:-280px;

    }

}

/*==================================================
 Top Header
==================================================*/


.header-left{

    display:flex;

    align-items:center;

    gap:15px;

}

.menu-btn{

    width:42px;

    height:42px;

    border:none;

    background:#2563EB;

    color:#fff;

    border-radius:8px;

    cursor:pointer;

    font-size:18px;

}

.menu-btn:hover{

    background:#1D4ED8;

}

.header-logo{

      width:130px;

    height:auto;

    max-height:42px;

    object-fit:contain;

    display:block;

    flex-shrink:0;

}

.header-title h4{

    margin:0;

    font-size:18px;

    font-weight:600;

}

.header-title small{

    color:#6B7280;

}


.user-box{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:500;

}

.user-box i{

    font-size:28px;

    color:#2563EB;

}
.page-wrapper{

    margin-top:75px;

    padding:20px;

    transition:.3s;

}
/*=========================================
 Main Content
=========================================*/

#mainContent{

    margin-top:70px;

    padding:20px;

    transition:.30s ease;

    min-height:calc(100vh - 165px);

    box-sizing:border-box;

}

/* Desktop */
/*
@media(min-width:992px){

    #appSidebar.show + #mainContent{

        margin-left:260px;

    }

}
*/
@media(min-width:992px){


}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#fff;

    padding:13px 18px;

    margin:5px 10px;

    border-radius:12px;

    transition:.25s;

    font-size:15px;

    font-weight:500;

}

.sidebar-menu a i{

    width:24px;

    text-align:center;

    font-size:18px;

    opacity:.85;

}

.sidebar-menu a:hover{

    background:#1E40AF;

    transform:translateX(5px);

}

.sidebar-menu a.active{

    background:#2563EB;

    box-shadow:0 8px 20px rgba(37,99,235,.25);

}

.sidebar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-header img{

    max-height:48px;

}


.avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#2563EB;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

}

/*==================================================
 Header
==================================================*/

/*==================================================
   DESKTOP LAYOUT
==================================================*/
.top-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    width:auto;

    height:70px;

    background:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 22px;

    box-shadow:0 2px 12px rgba(0,0,0,.08);

    z-index:900;

    transition:left .30s ease;

}

/* Sidebar CLOSED = Full Width */

.main-content{

    margin-left:0;

    transition:margin-left .30s ease;

}

/* Sidebar OPEN */

body.sidebar-open .top-header{

    left:320px;

}


body.sidebar-open .main-content{

    margin-left:320px;

}

.header-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.logo-box{

    display:flex;

    align-items:center;

    gap:12px;

}


.logo-box h4{

    margin:0;

    font-size:18px;

    font-weight:600;

}

.logo-box small{

     font-weight: bold;
    
        display:block;

    margin-top:4px;

    font-size:18px;

    font-weight:600;

    color:#000000;

    letter-spacing:.3px;

}

.logo-box h3{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#FF5722;      /* Royal Blue */

    line-height:1.1;

    letter-spacing:.5px;

}



.menu-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#2563EB;

    color:#fff;

    cursor:pointer;

    transition:.25s;

}

.menu-btn:hover{

    background:#1D4ED8;

}

.user-box{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.user-box i{

    font-size:30px;

    color:#2563EB;

}

.page-info{

    margin-left:20px;

}

.page-info h5{

    margin:0;

    font-size:18px;

    font-weight:600;

}

.page-info span{

    font-size:12px;

    color:#9CA3AF;

}

.notification{

    position:relative;

    cursor:pointer;

    font-size:22px;

    color:#374151;

}

.notify-count{

    position:absolute;

    top:-6px;

    right:-6px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:red;

    color:#fff;

    font-size:10px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.user-box{

    position:relative;

    cursor:pointer;

}

.user-dropdown{

    display:none;

    position:absolute;

    right:0;

    top:45px;

    background:#fff;

    min-width:220px;

    border-radius:12px;

    box-shadow:0 10px 35px rgba(0,0,0,.15);

    overflow:hidden;

    z-index:1000;

}

.user-box{

    position:relative;

    cursor:pointer;

}

.user-box::after{

    content:"";

    position:absolute;

    top:100%;

    right:0;

    width:220px;

    height:12px;

    background:transparent;

}

.user-dropdown a{

    display:block;

    padding:14px 18px;

    color:#374151;

    text-decoration:none;

}

.user-dropdown a:hover{

    background:#F3F4F6;

}

.user-box:hover .user-dropdown{

    display:block;

}

#mainContent{

    animation:fadePage .35s;

}

@keyframes fadePage{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.card{

    border:none;

    border-radius:16px;

    box-shadow:0 6px 25px rgba(0,0,0,.08);

}

.card-header{

    background:#0d6efd;

    font-weight:bold;
    
    color:#ffffff;

    border-bottom:1px solid #3f51b5;

}

.btn-primary{

    border-radius:10px;

    padding:10px 22px;

    font-weight:600;

}

.btn-success{

    border-radius:10px;

}

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#94A3B8;

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:#F8FAFC;

}

/*==================================================
  SIDEBAR ACCORDION
==================================================*/

.has-submenu{
    margin-bottom:8px;
}

.has-submenu>a{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:13px 16px;

    color:#fff;
    text-decoration:none;

    border-radius:12px;

    transition:.25s;

}

.has-submenu>a:hover{

    background:rgba(255,255,255,.08);

}

.has-submenu>a span{

    flex:1;

    margin-left:12px;

}

.submenu-arrow{

    transition:.30s;

    font-size:13px;

}

.has-submenu.open .submenu-arrow{

    transform:rotate(180deg);

}

/*==================================================
  SUB MENU
==================================================*/

.submenu{

    display:none;

    list-style:none;

    margin:6px 0 10px;

    padding:0;

}

.has-submenu.open>.submenu{

    display:block;

}

.submenu li{

    margin:3px 0;

}

.submenu li a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:9px 18px 9px 34px;

    font-size:14px;

    color:#fee500;

    font-weight:500;

    border-radius:8px;

    background:transparent;

    transition:.20s;

}

.submenu li a:hover{

    background:#FF9800;

    color:#fff;

}

.submenu li a i{

    width:18px;

    text-align:center;

    font-size:13px;

}
/*==================================================
  SUBMENU ACTIVE
==================================================*/

.submenu li.active a{

    background:#2563EB;

    color:#ffffff;

    font-weight:600;

}

.submenu li.active a i{

    color:#ffffff;

}

.submenu li a{

    position:relative;

}



/*==================================================
  ACCORDION ANIMATION
==================================================*/

.submenu{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .35s ease,
        opacity .25s ease;

}

.has-submenu.open>.submenu{

    max-height:1000px;

    opacity:1;

}

/*==================================================
  COMPACT SIDEBAR
==================================================*/

.sidebar-menu{

    padding:12px;

}

.sidebar-menu>li{

    margin-bottom:5px;

}

.sidebar-menu>li>a{

    min-height:46px;

}

#appSidebar{

    overflow-y:auto;

    overflow-x:hidden;
    
     width:320px;

}

/*==================================================
  SCROLLBAR
==================================================*/

#appSidebar::-webkit-scrollbar{

    width:6px;

}

#appSidebar::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:20px;

}

#appSidebar::-webkit-scrollbar-thumb:hover{

    background:#475569;

}

/*==================================================
  ACTIVE MENU INDICATOR
==================================================*/

.sidebar-menu > li{
    position:relative;
}

.sidebar-menu > li.active::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    bottom:8px;

    width:4px;

    border-radius:0 6px 6px 0;

    background:#3B82F6;

}

.sidebar-menu > li > a{

    transition:.25s ease;

}

.sidebar-menu > li > a:hover{

    background:rgba(255,255,255,.08);

    transform:translateX(3px);

}

.sidebar-menu > li > a{

    transition:.25s ease;

}

.sidebar-menu > li > a:hover{

    background:rgba(255,255,255,.08);

    transform:translateX(3px);

}

.sidebar-menu i{

    width:22px;

    text-align:center;

    flex-shrink:0;

}

.submenu i{

    width:18px;

}

.sidebar-header{

    padding:16px 18px;

}

.sidebar-logo{

    width:120px;

    max-height:38px;

}

.sidebar-header{

    padding:16px 18px;

}

.sidebar-logo{

    width:120px;

    max-height:38px;

}

.profile-info span{

    font-size:12px;

}

/*==================================================
   FINAL SIDEBAR / CONTENT LAYOUT
==================================================*/

/* Sidebar CLOSED */

.top-header{

    left:0;

}

.main-content{

    margin-left:0;

}


/* Sidebar OPEN */

body.sidebar-open .top-header{

    left:320px;

}

body.sidebar-open .main-content{

    margin-left:320px;

}
/*==================================================
   FINAL SIDEBAR PROFILE
==================================================*/

/* Profile Avatar */

.sidebar-profile .avatar{

    width:58px;

    height:58px;

    margin:0 auto 10px !important;

    flex-shrink:0;

}


/* Profile Name */

.sidebar-profile .profile-info h5{

    margin:0 !important;

    font-size:16px;

    line-height:1.4;

    color:#ffffff;

}


/* Profile Role */

.sidebar-profile .profile-info span{

    display:block;

    margin-top:4px;

    font-size:12px;

    color:#CBD5E1;

}

/*==================================================
  MAIN HEADER - MOBILE RESPONSIVE
  Safe Hand Insurance
==================================================*/

/*------------------------------------------
  HEADER BASE
------------------------------------------*/

.top-header {
    width: 100%;
    max-width: 100%;
    height: 65px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    overflow: hidden;
}


/*------------------------------------------
  LEFT SIDE
------------------------------------------*/

.header-left {
    display: flex;
    align-items: center;

    min-width: 0;
    flex: 1 1 auto;

    gap: 12px;
}


/*------------------------------------------
  MENU BUTTON
------------------------------------------*/

.menu-btn {
    width: 42px;
    height: 42px;

    min-width: 42px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
}


/*------------------------------------------
  LOGO AREA
------------------------------------------*/

.logo-box {
    display: flex;
    align-items: center;

    min-width: 0;
    max-width: 100%;
}


/*------------------------------------------
  LOGO
------------------------------------------*/

.header-logo {
    width: 85px;
    height: auto;
    max-height: 42px;

    object-fit: contain;
    display: block;

    flex-shrink: 0;
}


/*------------------------------------------
  COMPANY TITLE
------------------------------------------*/

.logo-text {
    min-width: 0;
    overflow: hidden;
}

.logo-text h3 {
    margin: 0;

    font-size: 18px;
    line-height: 22px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-text small {
    display: block;

    font-size: 13px;
    line-height: 18px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*------------------------------------------
  RIGHT SIDE
------------------------------------------*/

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 14px;

    flex-shrink: 0;
}


/*------------------------------------------
  LIVE CLOCK
------------------------------------------*/

#liveClock {
    white-space: nowrap;
}


/*------------------------------------------
  NOTIFICATION
------------------------------------------*/

.notification {
    position: relative;

    width: 34px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.notification .fa-bell {
    font-size: 20px;
}

.notify-count {
    position: absolute;

    top: 1px;
    right: 0;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ef0000;
    color: #fff;

    border-radius: 50%;

    font-size: 10px;
    line-height: 17px;
    font-weight: 600;
}


/*------------------------------------------
  USER BOX
------------------------------------------*/

.user-box {
    position: relative;

    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    white-space: nowrap;
}

.user-box > i:first-child {
    font-size: 30px;
    color: #2563EB;
}

.user-box > span {
    max-width: 150px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-box > i:last-child {
    font-size: 14px;
}


/*==================================================
  TABLET
==================================================*/

@media (max-width: 991.98px) {

    .top-header {
        height: 65px;
        padding: 0 12px;
    }

    .header-left {
        gap: 8px;
    }

    .header-logo {
        width: 65px;
        max-height: 40px;
    }

    .logo-text h3 {
        font-size: 16px;
        line-height: 20px;
    }

    .logo-text small {
        font-size: 11px;
        line-height: 16px;
    }

    .header-right {
        gap: 8px;
    }

    #liveClock {
        display: none;
    }

    .user-box > span,
    .user-box > i:last-child {
        display: none;
    }

    .user-box > i:first-child {
        font-size: 30px;
    }
}


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

@media (max-width: 767.98px) {

    .top-header {
        height: 65px;
        padding: 0 10px;

        overflow: hidden;
    }


    /* LEFT */

    .header-left {
        gap: 7px;

        min-width: 0;
        max-width: calc(100% - 88px);
    }


    /* MENU */

    .menu-btn {
        width: 40px;
        height: 40px;

        min-width: 40px;

        border-radius: 8px;
        font-size: 17px;
    }


    /* LOGO */

    .logo-box {
        min-width: 0;
        max-width: calc(100% - 47px);
    }

    .header-logo {
        width: 52px;
        max-width: 52px;
        height: auto;
        max-height: 38px;
    }


    /* TITLE */

    .logo-text {
        min-width: 0;
        max-width: 100%;
    }

    .logo-text h3 {
        font-size: 14px;
        line-height: 18px;

        max-width: 100%;
    }

    .logo-text small {
        font-size: 10px;
        line-height: 14px;

        max-width: 100%;
    }


    /* RIGHT */

    .header-right {
        gap: 6px;

        width: auto;
        min-width: 76px;
    }

    #liveClock {
        display: none;
    }


    /* NOTIFICATION */

    .notification {
        width: 30px;
        height: 38px;
    }

    .notification .fa-bell {
        font-size: 18px;
    }

    .notify-count {
        top: 1px;
        right: -1px;

        min-width: 15px;
        height: 15px;

        font-size: 9px;
        line-height: 15px;
    }


    /* USER ICON */

    .user-box {
        gap: 0;
    }

    .user-box > span,
    .user-box > i:last-child {
        display: none;
    }

    .user-box > i:first-child {
        font-size: 30px;
    }

}


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

@media (max-width: 480px) {

    .top-header {
        height: 60px;
        padding: 0 7px;
    }

    .header-left {
        gap: 5px;
        max-width: calc(100% - 72px);
    }

    .menu-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;

        font-size: 16px;
    }

    .header-logo {
        width: 43px;
        max-width: 43px;
        max-height: 34px;
    }

    .logo-box {
        max-width: calc(100% - 43px);
    }

    .logo-text h3 {
        font-size: 12px;
        line-height: 15px;
    }

    .logo-text small {
        font-size: 9px;
        line-height: 12px;
    }

    .header-right {
        min-width: 65px;
        gap: 3px;
    }

    .notification {
        width: 28px;
    }

    .notification .fa-bell {
        font-size: 17px;
    }

    .user-box > i:first-child {
        font-size: 27px;
    }

}


/*==================================================
  VERY SMALL MOBILE
==================================================*/

@media (max-width: 360px) {

    .top-header {
        padding: 0 5px;
    }

    .header-left {
        max-width: calc(100% - 65px);
    }

    .header-logo {
        width: 38px;
        max-width: 38px;
    }

    .logo-text h3 {
        font-size: 11px;
        line-height: 14px;
    }

    .logo-text small {
        display: none;
    }

    .header-right {
        min-width: 60px;
    }

    .user-box > i:first-child {
        font-size: 25px;
    }

}

/*==================================================
  HEADER CLOCK + USER - FINAL COLOR
==================================================*/

.top-header #liveClock {
    color: #334155 !important;
    background: transparent !important;
    text-decoration: none !important;
}

.top-header .user-box {
    color: #334155 !important;
    background: transparent !important;
}

.top-header .user-box span {
    color: #334155 !important;
    background: transparent !important;
    text-decoration: none !important;
}

.top-header .user-box > i {
    color: #2563EB !important;
    background: transparent !important;
}


/* Notification */

.top-header .notification {
    color: #334155 !important;
    background: transparent !important;
}

.top-header .notification .fa-bell {
    color: #334155 !important;
}


/* Notification count */

.top-header .notify-count {
    background: #ef0000 !important;
    color: #ffffff !important;
}


/* Remove accidental text selection look */

.top-header #liveClock::selection,
.top-header .user-box::selection,
.top-header .user-box span::selection {
    background: transparent;
    color: inherit;
}

/* =========================================================
   SAFE HAND HEADER - MOBILE ONLY
   Desktop original design remains unchanged
   ========================================================= */

@media (max-width: 767.98px) {

    /*------------------------------------------
      HEADER
    ------------------------------------------*/

    .top-header {
        width: 100%;
        max-width: 100%;

        height: 60px;

        padding: 0 8px !important;

        display: flex;
        align-items: center;
        justify-content: space-between;

        overflow: hidden !important;

        box-sizing: border-box;
    }


    /*------------------------------------------
      LEFT SIDE
    ------------------------------------------*/

    .header-left {
        display: flex;
        align-items: center;

        min-width: 0;

        flex: 1 1 auto;

        gap: 7px;

        overflow: hidden;
    }


    /*------------------------------------------
      MENU BUTTON
    ------------------------------------------*/

    .menu-btn {
        width: 40px;
        height: 40px;

        min-width: 40px;

        flex-shrink: 0;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    /*------------------------------------------
      LOGO
    ------------------------------------------*/

    .header-logo {
        width: 48px !important;
        max-width: 48px !important;

        height: auto;

        max-height: 38px;

        object-fit: contain;

        flex-shrink: 0;
    }


    /*------------------------------------------
      COMPANY NAME
    ------------------------------------------*/

    .logo-text {
        min-width: 0;

        max-width: calc(100vw - 155px);

        overflow: hidden;
    }


    .logo-text h3 {
        margin: 0 !important;

        font-size: 14px !important;

        line-height: 17px !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .logo-text small {
        display: block;

        font-size: 10px !important;

        line-height: 13px !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /*------------------------------------------
      RIGHT SIDE
    ------------------------------------------*/

    .header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 5px;

        flex-shrink: 0;

        min-width: 65px;

        white-space: nowrap;
    }


    /*------------------------------------------
      CLOCK
    ------------------------------------------*/

    #liveClock {
        display: none !important;
    }


    /*------------------------------------------
      NOTIFICATION
    ------------------------------------------*/

    .notification {
        width: 30px;
        height: 38px;

        flex-shrink: 0;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    .notification .fa-bell {
        font-size: 18px;
    }


    /* Notification Count */

    .notify-count {
        top: 1px !important;
        right: -1px !important;

        min-width: 15px;
        height: 15px;

        padding: 0 3px;

        font-size: 9px;

        line-height: 15px;
    }


    /*------------------------------------------
      USER
    ------------------------------------------*/

    .user-box {
        display: flex;
        align-items: center;

        gap: 0;

        flex-shrink: 0;

        white-space: nowrap;
    }


    /* User name mobile par hide */

    .user-box > span {
        display: none !important;
    }


    /* Dropdown arrow hide */

    .user-box > i:last-child {
        display: none !important;
    }


    /* User icon */

    .user-box > i:first-child {
        font-size: 29px;

        color: #2563EB !important;

        background: transparent !important;
    }

.sidebar-profile-image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #ffffff;
    box-sizing: border-box;
}

    /*------------------------------------------
      HEADER COLORS
    ------------------------------------------*/

    #liveClock {
        color: #334155 !important;

        background: transparent !important;
    }

    .user-box {
        color: #334155 !important;

        background: transparent !important;
    }

    .notification {
        color: #334155 !important;

        background: transparent !important;
    }

    .notification .fa-bell {
        color: #334155 !important;
    }

    .notify-count {
        background: #ef0000 !important;

        color: #ffffff !important;
    }
}


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

@media (max-width: 480px) {

    .top-header {
        height: 58px;

        padding-left: 6px !important;
        padding-right: 6px !important;
    }


    .header-left {
        gap: 5px;

        max-width: calc(100vw - 68px);
    }


    .menu-btn {
        width: 38px;
        height: 38px;

        min-width: 38px;
    }


    .header-logo {
        width: 42px !important;
        max-width: 42px !important;

        max-height: 34px;
    }


    .logo-text {
        max-width: calc(100vw - 125px);
    }


    .logo-text h3 {
        font-size: 12px !important;

        line-height: 15px !important;
    }


    .logo-text small {
        font-size: 9px !important;

        line-height: 12px !important;
    }


    .header-right {
        min-width: 60px;

        gap: 3px;
    }


    .notification {
        width: 27px;
    }


    .notification .fa-bell {
        font-size: 17px;
    }


    .user-box > i:first-child {
        font-size: 27px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .top-header {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }


    .header-logo {
        width: 38px !important;
        max-width: 38px !important;
    }


    .logo-text h3 {
        font-size: 11px !important;

        line-height: 14px !important;
    }


    .logo-text small {
        display: none !important;
    }


    .header-right {
        min-width: 56px;
    }


    .user-box > i:first-child {
        font-size: 25px;
    }
}

/* =========================================================
   SAFE HAND - FINAL RESPONSIVE SIDEBAR RULES
   This section is intentionally the LAST section.
   ========================================================= */

/* Desktop */
@media (min-width: 992px) {
    body.sidebar-open .top-header {
        left: 320px !important;
    }

    body.sidebar-open .main-content,
    body.sidebar-open #mainContent {
        margin-left: 320px !important;
    }
}

/* Tablet + Mobile: sidebar overlays; page never shifts */
@media (max-width: 991.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .top-header,
    body.sidebar-open .top-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .main-content,
    #mainContent,
    body.sidebar-open .main-content,
    body.sidebar-open #mainContent {
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #appSidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        right: auto !important;
        width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transition: left .30s ease !important;
    }

    #appSidebar.show {
        left: 0 !important;
    }

    #sidebarOverlay {
        z-index: 9998 !important;
    }
}

@media (max-width: 480px) {
    .top-header,
    body.sidebar-open .top-header {
        left: 0 !important;
        width: 100% !important;
    }

    .main-content,
    #mainContent,
    body.sidebar-open .main-content,
    body.sidebar-open #mainContent {
        margin-left: 0 !important;
        width: 100% !important;
    }
}