/* When toggle-btn click, it works */
#sidebar.expand{
	width: 0%;
	padding: 0;
}

.active-page{
	color: red !important;
}

.margin-top-15 {
	margin-top: 0px;
}

.text-align-right {
	text-align: right;
}

.div-table {
	margin-top: 1.5px; background-color:  #fff; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}

.f9 {
	font-size: 9px !important;
}

.f10 {
	font-size: 10px !important;
}

.f11 {
	font-size: 11px !important;
}

.f12 {
	font-size: 12px !important;
}

.f13 {
	font-size: 13px !important;
}

.f14 {
	font-size: 14px !important;
}

.f15 {
	font-size: 15px !important;
}

.f16 {
	font-size: 16px !important;
}

.txtField {
	height: 29px;
	font-size: 12px;
	background-color: #fff;
}

/* Mobile devices */
@media only screen and (max-width: 767px) {
	.margin-top-15 {
		margin-top: 15px;
	}
	.main-content{
		width: 100vw; /* To make horizontal scroll */
		padding-top :60px !important;
	}
	.iswrap{
		flex-wrap: nowrap; /* To prevent bootstrap row to enter next line, if col-12 */
		padding-left: 0px;
	}
	.nav-sub{
		position: fixed;
	    width: 100vw;
	    top: 100;
	    left: 100;
	    z-index: 1000;
	}
	.search-content{
		padding: 0px 0px 5px 0px !important;
	}
	.search-content h5{
		padding-left: 0px;
	}
	
	.nav-link span{
		display: none; 	/* Navbar - Hide text (noti,lan, profile)  */
	}
	
	/* Bootstrap dropdown class - prevent to enter next line */
	.dropdown-menu{ 
		position: absolute !important;
		left: -140px !important;
	}
}

/* Tablets, iPads, and larger mobile devices */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.main-content{
		width: 100%;
	}
	.iswrap{
		flex-wrap: wrap;
	}
	
}

/* Desktops and larger devices */
@media only screen and (min-width: 1024px) {
	.main-content{
		width: 100%;
	}
	.iswrap{
		flex-wrap: wrap;
	}
	.search-content{
		background-color: #fff;
		border: 1px solid #eaeaea; 
		border-radius: 5px;
	}
}

.sidebar {
	    height: 100vh;
	    background-color: #fff;
	    overflow-y: auto;
	    border-right: 1px solid #EDEDEF;
	}

	/* Logo */
	.sidebar-header .logo {
	    width: 65px;
	    border-radius: 10px;
	}

	.sidebar-header .sidebar-title {
	    font-size: 18px;
	    font-weight: bold;
	}

	/* Menu */
	.sidebar-menu {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    font-size: 14px;
	}

	.sidebar-menu .menu-section {
	    display: block;
	    font-size: 14px;
	    color: #6c757d;
	    padding-left: 10px;
	    margin-bottom: 5px;
	}

	.sidebar-menu .nav-link {
	    display: flex;
	    align-items: center;
	    padding: 5px 17.5px 5px 5px;
	    color: #495057;
	    text-decoration: none;
	    border-radius: 8px;
	    margin: 2px 7.5px;
	    transition: 0.2s all;
	}

	.sidebar-menu .nav-link:hover {
	    background-color: #f0f4ff;
	    color: #1447E5;
	}

	.sidebar-menu .nav-link.active {
		color: #1976D2;
	     /* background-color: #e0ebff;*/
	     /* color: #1976D2;*/
	     /* border-right: 2px solid #1976D2;*/
	}

	.sidebar-menu .nav-link i.active {
      background-color: #1976D2; /* Pale grey */
      border-radius: 50%;         /* Makes it a circle */
      padding: 10px;              /* Space inside the circle */
      width: 26px;                /* Fixed width */
      height: 26px;               /* Fixed height */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;            /* Adjust icon size */
      color: #fff;                /* Icon color */
      margin-right: 10px;         /* Space between icon and text */
	}

	.sidebar-menu .nav-link i {
	    width: 20px;
	    text-align: center;
	}

	/* Optional spacing between sections */
	.sidebar-menu .nav-item + .nav-item {
	    margin-top: 1rem;
	}

  #loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .spinner {
    border: 2px solid #f3f3f3;
    border-top: 8px solid #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .pre-ellipsis {
	/* keep formatting + wrap lines */
	  white-space: pre-wrap;
	  overflow-wrap: anywhere;
	  word-break: break-word;

	  /* limit to 5 lines */
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  line-clamp: 5;

	  /* no scrollbars */
	  overflow: hidden;
  }
  
  .dashboard {
    font-size: 13px;
  }

  .dashboard-title {
    font-size: 22px;
    font-weight: 600;
  }

  .dashboard-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  }

  .kpi-label {
    color: #6b7280;
    font-size: 13px;
  }

  .kpi-value {
    font-size: 22px;
    font-weight: 600;
  }

  .kpi-change {
    font-size: 13px;
    margin-top: 6px;
  }

  .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
  }

  .chart-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  }

  .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
  }

  .chart-title {
      font-size: 22px;
      font-weight: 700;
      color: #0F172A;
  }

  .chart-subtitle {
      font-size: 14px;
      color: #64748B;
  }

  .chart-wrapper {
      height: 245px;
  }
  .quick-action {
    padding: 14px;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .quick-action:hover {
    background: #f9fafb;
    transform: translateY(-2px);
  }
  
  .sidebar-menu .nav-link .menu-icon {
      background-color: #f2f6fc; /* Pale grey */
      border-radius: 50%;         /* Makes it a circle */
      padding: 10px;              /* Space inside the circle */
      width: 26px;                /* Fixed width */
      height: 26px;               /* Fixed height */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;            /* Adjust icon size */
      color: #333;                /* Icon color */
      margin-right: 10px;         /* Space between icon and text */
  }
  
  
  #pagination .page-link {
      color: black;
  }

  #pagination .page-item.active .page-link {
      background-color: black;
      border-color: black;
      color: white; /* text on active page */
  }
  
  .modern-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    font-size: 13px;
    font-weight: 500;
    animation: fadeIn 0.4s ease-in-out;
    position: relative;
   	width: 100%;
    transition: all 0.3s ease-in-out;
  }

  .modern-alert i {
    margin-right: 10px;
    font-size: 16px;
  }

  .modern-alert .btn-close {
    background: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: inherit;
  }

  .modern-alert.success {
    background-color: #e6f4ea;
    color: #2f7a4f;
  }

  .modern-alert.primary {
    background-color: #e8f0fe;
    color: #1967d2;
  }

  .modern-alert.warning {
    background-color: #fff4e5;
    color: #9a6b00;
  }

  .modern-alert.danger {
    background-color: #fdecea;
    color: #c62828;
  }

  /* Fade-in animation */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .submenu {
      display: none;
      padding-left: 30px;
  }

  .submenu .nav-link {
      font-size: 13px;
      padding: 6px 0;
  }

  .sidebar-toggle {
      cursor: pointer;
  }

  .sidebar-toggle .toggle-icon {
      transition: transform 0.3s ease;
  }

  .sidebar-toggle.active .toggle-icon {
      transform: rotate(180deg);
  }
  
  .submenu-box {
      display: none;
      background: #f7fbff;
      border-radius: 8.5px;
      margin: 6px 10px;
      padding: 10px;
	  border: 1px solid #edeff2;
  }

  .submenu-title {
      font-size: 12px;
      margin-bottom: 8px;
      padding-bottom: 5px;
  }

  .submenu-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .submenu-link {
      display: block;
      padding: 6px 0px;
      font-size: 13px;
      border-radius: 6px;
      color: #333;
      text-decoration: none;
  }

  .submenu-link:hover {
      background-color: #f1f3f5;
      color: #000;
  }
  
  /* ========== SIDEBAR ========== */
  .sidebar {
      background: linear-gradient(180deg, #ffffff, #f8f9fb);
      border-right: 1px solid #eef0f4;
      min-height: 100vh;
  }

  .sidebar-menu .nav-link {
      border-radius: 10px;
      padding: 10px 15px 10px 10px;
      margin: 2px 8px;
      color: #495057;
      transition: all 0.25s ease;
  }

  .sidebar-menu .nav-link:hover {
      background: #f1f3f5;
      transform: translateX(2px);
  }

  /* icons */
  .menu-icon {
      font-size: 15px;
      color: #6c757d;
  }

  /* toggle icon */
  .toggle-icon {
      font-size: 11px;
      color: #adb5bd;
      transition: transform 0.3s ease;
  }

  .sidebar-toggle.active .toggle-icon {
      transform: rotate(180deg);
  }

  /* ========== SUBMENU BOX ========== */
  .submenu-box {
      display: none;
      background: #ffffff;
      border-radius: 14px;
      margin: 6px 12px 12px 12px;
      padding: 12px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.08);
      animation: submenuIn 0.25s ease;
  }

  @keyframes submenuIn {
      from {
          opacity: 0;
          transform: translateY(-6px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .submenu-list .nav-link {
      font-size: 13px;
      border-radius: 8px;
      padding: 6px 10px;
  }

  .submenu-list .nav-link:hover {
      background: #f8f9fa;
      color: #000;
  }

  /* submenu title */
  .submenu-list span.nav-link {
      padding-left: 6px;
      cursor: default;
  }

  /* ========== CONTENT AREA ========== */
  #content {
      animation: contentFade 0.25s ease;
  }

  @keyframes contentFade {
      from {
          opacity: 0;
          transform: translateY(5px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* ========== NAVBAR ========== */
  .navbar {
      backdrop-filter: blur(6px);
  }

  .navbar .nav-link {
      border-radius: 10px;
      padding: 6px 10px;
  }

  .navbar .nav-link:hover {
      background: #f1f3f5;
  }

  /* ========== LOADING OVERLAY ========== */
  #loadingOverlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
  }

  .spinner {
      width: 35px;
      height: 35px;
      border: 3px solid #dee2e6;
      border-top: 3px solid #212529;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
  }

  @keyframes spin {
      to { transform: rotate(360deg); }
  }
  
  .sidebar,
  .sidebar * {
      cursor: default;
  }

  /* Main menu clickable items */
  .sidebar .nav-link,
  .sidebar-toggle,
  .submenu-list a {
      cursor: pointer !important;
  }

  /* Prevent text selection cursor */
  .sidebar .nav-link span {
      cursor: pointer;
  }
  
  /* Notification Bell */
  .notification-item {
      position: relative;
  }

  .notification-bell {
      position: relative;
      width: 36px;
      height: 36px;
      background: #f2f6fc;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .notification-bell i {
      font-size: 15px;
      color: #6c757d;
  }

  /* Badge */
  .notification-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: #ffb703;
      color: #000;
      font-size: 11px;
      font-weight: 600;
      border-radius: 999px;
      display: none;
      align-items: center;
      justify-content: center;
  }

  .notification-link {
      white-space: nowrap;
  }

  .notification-text {
      margin-left: 6px;
      font-size: 14px;
      line-height: 1;
  }
  
  .dropdown-menu {
      left: -200;
  }


  /* Dropdown */
  .notification-dropdown {
      width: 260px;
      padding: 0;
      border-radius: 14px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
      overflow: hidden;
      position: relative;
      transform: translateX(-45%); 
  }

  .notification-dropdown .dropdown-header {
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      background: #f9fafb;
      border-bottom: 1px solid #eee;
  }

  .notification-dropdown .dropdown-item {
      padding: 10px 16px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .notification-dropdown .dropdown-item i {
      color: #6c757d;
  }

  .notification-dropdown .dropdown-item:hover {
      background: #f1f3f5;
  }

  .notification-dropdown .dropdown-footer {
      text-align: center;
      padding: 10px;
      border-top: 1px solid #eee;
  }

  .notification-dropdown .dropdown-footer a {
      font-size: 12px;
      font-weight: 600;
      color: #0d6efd;
      text-decoration: none;
  }

  /* Pulse animation when new notification */
  @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(255,183,3,.6); }
      70% { box-shadow: 0 0 0 8px rgba(255,183,3,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,183,3,0); }
  }

  .notification-bell.pulse {
      animation: pulse 1.5s infinite;
  }
  
  .other-bell {
        position: relative;
        width: 36px;
        height: 36px;
        background: #f2f6fc;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .other-bell i {
        font-size: 15px;
        color: #6c757d;
    }
	
	.notification-dropdown1 {
	      width: 260px;
	      padding: 0;
	      border-radius: 14px;
	      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
	      overflow: hidden;
	      position: relative;
	      transform: translateX(-49%); 
	  }

	  .notification-dropdown1 .dropdown-header {
	      padding: 12px 16px;
	      font-size: 13px;
	      font-weight: 600;
	      background: #f9fafb;
	      border-bottom: 1px solid #eee;
	  }

	  .notification-dropdown1 .dropdown-item {
	      padding: 10px 16px;
	      font-size: 13px;
	      display: flex;
	      align-items: center;
	      gap: 10px;
	  }

	  .notification-dropdown1 .dropdown-item i {
	      color: #6c757d;
	  }

	  .notification-dropdown1 .dropdown-item:hover {
	      background: #f1f3f5;
	  }

	  .notification-dropdown1 .dropdown-footer {
	      text-align: center;
	      padding: 10px;
	      border-top: 1px solid #eee;
	  }

	  .notification-dropdown1 .dropdown-footer a {
	      font-size: 12px;
	      font-weight: 600;
	      color: #0d6efd;
	      text-decoration: none;
	  }
	  
	  .notification-dropdown2 {
	        width: 260px;
	        padding: 0;
	        border-radius: 14px;
	        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
	        overflow: hidden;
	        position: relative;
	        transform: translateX(-58%); 
	    }

	    .notification-dropdown2 .dropdown-header {
	        padding: 12px 16px;
	        font-size: 13px;
	        font-weight: 600;
	        background: #f9fafb;
	        border-bottom: 1px solid #eee;
	    }

	    .notification-dropdown2 .dropdown-item {
	        padding: 10px 16px;
	        font-size: 13px;
	        display: flex;
	        align-items: center;
	        gap: 10px;
	    }

	    .notification-dropdown2 .dropdown-item i {
	        color: #6c757d;
	    }

	    .notification-dropdown2 .dropdown-item:hover {
	        background: #f1f3f5;
	    }

	    .notification-dropdown2 .dropdown-footer {
	        text-align: center;
	        padding: 10px;
	        border-top: 1px solid #eee;
	    }

	    .notification-dropdown2 .dropdown-footer a {
	        font-size: 12px;
	        font-weight: 600;
	        color: #0d6efd;
	        text-decoration: none;
	    }

		.sidebar-footer {
		    font-size: 13px;
		    color: #6c757d;
		}

		.menu-btn {
		    background: linear-gradient(135deg, #2F7BC6, #1f5fa3);
		    color: #fff;
		    border: none;
		    border-radius: 7.5px;
		    padding: 8px 14px;
		    font-size: 15px;
		    font-weight: 600;
		    box-shadow: 0 2px 6px rgba(47, 123, 198, 0.15);
		    transition: all 0.25s ease;
		}

		.menu-btn i {
		    font-size: 18px;
		}

		.menu-btn:hover {
		    transform: translateY(-1px);
		    box-shadow: 0 6px 16px rgba(47, 123, 198, 0.45);
		}

		.menu-btn:active {
		    transform: scale(0.96);
		}