/* روابط التذييل */
.footer-link {
  color: #d1ecff;
  text-decoration: none;
  display: block;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ffd86f;
  text-decoration: underline;
}

/* === Chat Layout === */
.lesson-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.lesson-desc {
    margin-bottom: 8px;
    color: #555;
}

.lesson-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* تمييز العنصر الحالي */


.highlight-lesson {
    background-color: #d9edf7 !important;
    border: 2px solid #31708f !important;
}
.highlight-chapter {
    border-left: 5px solid #5bc0de !important;
}


/* تحسين ألوان الحالات */
.label-default {
    background-color: #999;
}
.label-warning {
    background-color: #f0ad4e;
}
.label-success {
    background-color: #5cb85c;
}


.radio {
    margin-right: 10px;
}
/* === Chat Layout === */
.course-chat-section {
        background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;

}

.course-chat-section .chat-input-container{
    margin: 10px;
}

.chat-section {
    margin-top: 20px;
    
}



.chat-sidebar,
.chat-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    height: 400px;
    overflow-y: auto;
}

.chat-thread-header {
    margin-bottom: 10px;
}

.chat-thread-header h5 {
    margin: 0;
    display: inline-block;
}

.chat-thread-header .btn {
    float: left;
}

#threadList {
    max-height: 340px;
    overflow-y: auto;
}

#chatMessages {
    max-height: 340px;
    overflow-y: auto;
    padding: 10px;
}

/* Message Bubbles */
.chat-message {
    max-width: 75%;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 8px;
    word-wrap: break-word;
    display: inline-block;
    clear: both;
}

.chat-message.me {
    background-color: #007bff;
    color: #fff;
    float: right;
    border-bottom-right-radius: 0;
}

.chat-message.other {
    background-color: #6DD60E;
    color: white;
    float: left;
    border-bottom-left-radius: 0;
}

.chat-message-meta {
    font-size: 11px;
    margin-bottom: 10px;
}

.chat-message-meta.me {
    text-align: right;
    color: #777;
    clear: both;
}

.chat-message-meta.other {
    text-align: left;
    color: #777;
    clear: both;
}

/* Typing Indicator */
#typingStatus {
    min-height: 20px;
}

/* Send Form */
#sendForm .input-group {
    display: table;
    width: 100%;
}

#sendForm .form-control {
    height: 43px;
    padding: 8px 12px;
    border-radius: 4px;
}

#sendForm .input-group-addon {
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 12px;
    vertical-align: middle;
}

#sendForm .btn-primary {
    height: 43px;
    padding: 0 20px;
    white-space: nowrap;
    border-radius: 4px;
}

/* Responsive Fixes */
@media (max-width: 767px) {
    .chat-sidebar,
    .chat-box {
        height: auto;
        max-height: none;
        margin-bottom: 15px;
    }

    #chatMessages,
    #threadList {
        max-height: 250px;
    }

    #sendForm .input-group {
        display: block;
        width: 100%;
    }

    #sendForm .form-control,
    #sendForm .input-group-addon,
    #sendForm .btn-primary {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }

    #sendForm .input-group-addon {
        text-align: center;
    }
}





.ate-header-top-area{
    background: #123E7C !important; /* Highlight active submenu item */
    right: 100px;
}

/* Main Primary Button */
.btn-primary, .panel-primary .panel-heading{
    background: #123E7C !important;
    color: white !important;
    border-color: #0f3264;
}

/* Hover for Primary */
.btn-primary:hover,
.btn-primary:focus {
    background: #0f3264 !important;
    color: #fff !important;
    border-color: #0d2b56;
}

/* Orange Button */
.btn-orange {
    background: #FFB606 !important;
    color: black !important;
    border-color: #e6a500;
}

/* Hover for Orange */
.btn-orange:hover,
.btn-orange:focus {
    background: #e6a500 !important;
    color: #000 !important;
    border-color: #cc9400;
}

.badge{
      background: #FFB606 !important;  
}

.product-status-wrap .input-group .form-control {
    height: 38px !important;
}

.product-status-wrap .input-group-btn > .btn {
    height: 38px !important;
}

.product-status-wrap .input-group .form-control,
.product-status-wrap .input-group-btn .btn {
    height: 38px !important;
    box-sizing: border-box;
}




@media (max-width: 400px) {
    .notif-dropdown {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}


/* 🔧 Mobile Notifications Dropdown */
@media (max-width: 576px) {
    .notif-dropdown-mobile, .user-dropdown {
        position: fixed !important;
        top: 55px !important; /* adjust based on header height */
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        min-width: unset !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 6px;
        z-index: 1050;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        background: white !important;
    }

    .ate-header-top-area{
        right: 0px !important;
    }
}

/* 🖥️ Default (PC) Notifications Dropdown */
.notif-dropdown-mobile {
    width: 320px;
    padding: 0;
    text-align: right;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    position: absolute;
    right: -200px;
    background: white !important;

}



/* Notification badge position */
.notif-badge {
    position: absolute;
    top: 0;
    right: -5px;
    font-size: 10px;
}


/* Dropdown sections */
.notif-header {
    background: #f9f9f9;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    width: 100%;
}

.notif-body {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
}

.notif-footer {
    border-top: 1px solid #eee;
    background: #fafafa;
    width: 100%;
}

.notif-link {
    color: #337ab7;
}


/* User dropdown */
.user-dropdown {
    min-width: 200px;
    text-align: right;
    right: 0;
    left: auto;
    position: absolute;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 6px;
    z-index: 1050;
    background: white !important;
}

.user-dropdown .dropdown-item {
    padding: 8px 10px;
    border-radius: 4px;
    transition: 0.3s;
}



.dropdown-menu a:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}

/* Style main menu items */
.left-sidebar-menu-pro ul#menu1 > li.menu-item {
    margin-bottom: 15px;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* Optional: hover effect for top-level items */
.left-sidebar-menu-pro ul#menu1 > li.menu-item > a {
    padding: 10px 20px;
    display: block;
    font-weight: bold;
    color: #333;
    transition: 0.3s;
}

.left-sidebar-menu-pro ul#menu1 > li.menu-item > a:hover {
    background-color: #f5f5f5;
    color: #0073aa;
}

/* Style submenu list */
.left-sidebar-menu-pro .submenu-angle {
    padding-right: 25px;
    margin-top: 8px;
}

/* Style submenu items */
.left-sidebar-menu-pro .submenu-angle li a {
    padding: 8px 10px;
    display: block;
    border-radius: 4px;
    transition: background 0.2s;
    font-size: 13px;
    color: #555;
}

.left-sidebar-menu-pro .submenu-angle li a:hover {
    background-color: #e8f0ff;
    color: #000;
}


.main-content{
padding:100px 10px;
}

.metismenu .menu-item.active > a {
    color: #000000 !important;
    background-color: #b0c4de !important;
}



.metismenu .menu-item.active .submenu-angle {
    display: block !important; /* Ensure submenu is visible */
}

.metismenu .submenu-angle li a.active {
    color: #123E7C !important; /* Highlight active submenu item */
    font-weight: bold;
}

.submenu-angle.show {
    display: block !important; /* Ensure submenu stays open */
}

.badge-tabby { background-color: #3BFFBF; color: black; }
.badge-tamara { background-color: #F7BC51; color: black; }
.badge-success { background-color: #5cb85c; color: white; }
.badge-warning { background-color: #f0ad4e; color: white; }
.badge-danger { background-color: #d9534f; color: white; }
.badge-info { background-color: #5bc0de; color: white; }
.badge-secondary { background-color: #777; color: white; }



/* Sidebar container */
.left-sidebar-pro {
    width: 260px;
    background: #ffffff;
    border-right: 1px solid #ddd;
}

/* Scrollable menu container */
.custom-scroll {
    max-height: calc(100vh - 60px); /* Adjust height dynamically */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

/* Ensure scrollbar is always visible */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.custom-scroll:hover::-webkit-scrollbar-thumb {
    background: #555;
}

/* Prevent overflow hiding */
.left-sidebar-menu-pro {
    flex-grow: 1;
}


/* Style for the active menu item */
.metismenu li a.active {
    color: #fff !important;
    font-weight: bold;
}

/* Ensure submenu stays open */
.metismenu li.active > .submenu-angle {
    display: block !important;
}

/* Highlight parent menu items */
.metismenu li.active > a {
    color: #123E7C  !important;
    font-weight: bold;
}

/* Ensure dropdown stays expanded */
.metismenu li.active .submenu-angle {
    display: block !important;
}