/* Container background */
.custom-tab-style {
  background-color: #f1f1f1;
  border-radius: 6px;
  padding: 5px;
}

/* Default tab appearance */
.custom-tab-style .nav-link {
  color: #495057;
  background-color: #e9ecef;
  margin-right: 5px;
  border: 1px solid #dee2e6;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Hover effect */
.custom-tab-style .nav-link:hover {
  background-color: #d4e3f5;
  color: #007bff;
}

/* Active tab appearance */
.custom-tab-style .nav-link.active {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  font-weight: 600;
}

.select2-container.readonly-select .select2-selection--single {
    background-color: #e9ecef;
    pointer-events: none; 
}

.readonly-radio {
    pointer-events: none;
}
.masked {
  -webkit-text-security: disc;
  text-security: disc;
}

/* =========================================
   FIXED NAVBARS + Z-INDEX STRUCTURE
========================================= */

/* First Top Navbar */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3000 !important;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Second Navbar */
.second-navbar {
    position: fixed;
    top: 100px; /* depends on first navbar height */
    left: 0;
    right: 0;
    width: 100%;
    background: #030380 !important;
    z-index: 2500 !important;
}



/* =========================================
   DROPDOWN FIXES
========================================= */

/* Base Dropdown */
.dropdown-menu,
.dropdown-menu.show {
    background-color: #020248 !important;
    border: none !important;
    margin-top: 0 !important;
    min-width: 240px;
    z-index: 5000 !important;
}

/* Dropdown item text */
.dropdown-item {
    color: #fff !important;
    padding: 8px 15px !important;
}

.dropdown-item:hover {
    background-color: #0056b3 !important;
    color: #fff !important;
}

/* Hover dropdown (for desktop) */
.nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* Multilevel submenu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
}


/* =========================================
   PROFILE DROPDOWN FIX (OVERFLOW ISSUE)
========================================= */

.icon-dropdown {
    position: relative;
    display: inline-block;
    overflow: visible !important; /* make sure parent doesn't hide it */
    z-index: 1000;                /* higher than navbar */
}

.icon-dropdown-menu {
    display: none;
    position: fixed;
    top: 60px;   /* adjust based on navbar height */
    right: 20px; /* adjust horizontal alignment */
    background-color: #020248;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 2000;
}


.icon-dropdown:hover .icon-dropdown-menu {
    display: block;
}

.icon-dropdown-menu .dropdown-item {
    color: #fff;
}

.icon-dropdown-menu .dropdown-item:hover {
    background-color: #0056b3;
}

/* =========================================
   TOP NAVBAR TITLE / LOGO STYLING
========================================= */

.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-title {
    font-weight: bold;
    line-height: 1.3;
    font-size: 16px;
    text-align: center;
}

.logo-height {
    height: 75px;
}

/* Divider between logos */
.logo-divider {
    width: 1px;
    height: 50px;
    background-color: #030380;
}


/* =========================================
   RESPONSIVE DESIGN
========================================= */

/* Large tablets / small laptop */
@media (min-width: 991px) and (max-width: 1024px) {
    .nav-link {
        padding-right: 0 !important;
    }
    .navbar-expand-lg {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-title {
        font-size: 12px !important;
    }
    .tamil-name {
        font-size: 1.2rem !important;
    }
    .font-size-12 {
        font-size: 12px !important;
    }
}

/* Laptop */
@media (min-width: 1025px) {
    .lap-hide {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .logo-height {
        height: 48px !important;
    }
    .tamil-name {
        font-size: 1.2rem !important;
    }
    .navbar-title {
        font-size: 12px !important;
    }
    .font-size-12 {
        font-size: 12px !important;
    }

    /* Collapse menu scrollable */
    .navbar-collapse.collapse.show > ul {
        height: 450px;
        overflow-y: auto;
    }
}


/* =========================================
   OTHER UI ELEMENTS
========================================= */

.alert-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-color: #ff3b3b;
    border-radius: 50%;
    animation: blink 1s infinite;
}

.small-box {
    border-radius: 1.25rem !important;
}

.small-box a {
    border-bottom-left-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
}

/* Blink Animation */
@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

.content-wrapper{
    margin-top: 159px;
}

.content-header{
    margin-top: 159px;
}

.main-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.top-menu {
    width:100%;
    margin-top:100px;
    background: #020248;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.navbar-nav .nav-link.active {
    background-color: #0056b3 !important;
    color: #fff !important;
    border-radius: 5px;
}

.alink {
  color: #1f2d3d!important;
}

.custom-badge {
    font-size: 14px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;     
}
.custom-badge i {
    margin-right: 5px;
}