/* MENU CSS Starts */

html {
  font-size: 14px;
}
body { 
	padding-top: 56px; 
	margin: 0;
	background-color: transparent;
}

#totrec { font-size: 0.857rem; font-weight: 700;}
label {padding: 5px;}

/* Base navbar */
.erp-navbar {
  height: 56px;
  background: var(--bs-body-bg);
  border-bottom: 1px solid #e0e0e0;
  font-size: 1rem;


	 /* The frosted blur effect */
	  backdrop-filter: blur(5px);
	  -webkit-backdrop-filter: blur(5px);
	  
	  /* Semi-transparent background */
	  back1ground: rgba(255, 255, 255, 0.15);
	  
	  /* Visual depth and edges */
	  border: 1px solid rgba(255, 255, 255, 0.3);
	  box-shadow: 0 8px 12px 0 rgba(31, 38, 135, 0.37);

}

/* Center search (desktop only) */
.na1vbar-search-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Search styling */
.erp-search {
  position: relative;
  width: 320px;
}

.erp-search i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
}

.erp-search input {
  padding-left: 38px;
  border-radius: 24px;
  background: #f1f3f4;
  border: none;
}

/* User initials avatar */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bs-gray-700);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode */
[data-bs-theme="dark"] .erp-search input {
  background: #1e1e1e;
}

/* Mobile adjustments */
@media (max-width: 991px) {
  .erp-search {
    width: 100%;
  }

  .navbar-nav .nav-link {
    padding: 10px 0;
  }

  .profile-menu {
    width: 100%;
    max-width: 100%;
  }

 .erp-navbar .navbar-collapse {
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 0.857rem 0;
  }
}

/* ---- FIX 2: Issue 2: Dropdown opening is not smooth ---- */

@media (min-width: 992px) {

  .navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 160ms ease;
    pointer-events: none;

	border-radius: 10px;

	 /* The frosted blur effect */
	  backdrop-filter: blur(5px);
	  -webkit-backdrop-filter: blur(5px);
	  
	  /* Semi-transparent background */
	  back1ground: rgba(255, 255, 255, 0.15);
	  
	  /* Visual depth and edges */
	  border: 1px solid rgba(255, 255, 255, 0.3);
	  box-shadow: 0 8px 12px 0 rgba(31, 38, 135, 0.37);

  }

  .navbar .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .navbar.fixed-bottom .dropdown-menu {
    bottom: 100%;
    top: auto;
    margin-botto1m: 0.5rem;
  }

}

/* ---- FIX 1: Profile Dropdown going out of screen ---- */

/* Safety clamp for profile menu */
.profile-menu {
  mi1n-width: 220px;
  right: 0 !important;
  left: auto !important;
}



/* ---- FIX 3: Consistent font sizes ---- */
.erp-navbar .nav-link {
  font-size: 1rem;
  font-weight: 500;
  tex1t-decoration: none;
}

.erp-navbar .dropdown-item,
.dropdown-item,
.erp-navbar .dropdown-item-text {
  font-size: 1rem;
  	padding: 10px;
  fo1nt-weight: 500;
  te1xt-decoration: none;
}

/* MENU CSS Ends */

/* Listing CSS Starts */

/* Table wrapper */
.erp-table-wrapper {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.857rem;

  /* IMPORTANT */
  /* max-height: calc(100vh - 180px); */
  overflow: auto;
}

/* Table */
.erp-table {
  margin-bottom: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.erp-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;

  background: var(--bs-tertiary-bg);
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Row hover */
.erp-table tbody tr:hover {
  background: rgba(26, 115, 232, 0.04);
}

/* Action buttons */
.erp-table .btn {
  --bs-btn-padding-y: 2px;
  --bs-btn-padding-x: 8px;
}

/* Dark mode */
[data-bs-theme="dark"] .erp-table-wrapper {
  background: #1e1e1e;
}

[data-bs-theme="dark"] .erp-table thead th {
  background: #2a2a2a;
}

.erp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}


.erp-table thead th, .erp-table tbody td {
  color: var(--bs-dropdown-link-hover-color);
  font-size: 0.857rem;
}

.erp-table thead th a, .erp-table tbody td a {
  text-decoration: none;
  color: var(--bs-dropdown-link-hover-color);
  font-size: 0.857rem;
}


.erp-table thead th a:hover, .erp-table tbody td a:hover {
  text-decoration: underline;
}

/* Base form control */
.erp-form .form-control,
.erp-form .form-select {
  font-size: 0.857rem;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  padding: 6px 10px;
  height: 36px;
}

/* Focus (Google style) */
.erp-form .form-control:focus,
.erp-form .form-select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px #1a73e8;
}

/* Labels */
.erp-form label {
  font-size: 0.857rem;
  font-weight: 500;
  color: #5f6368;
  margin-bottom: 4px;
}

/* Readonly / disabled */
.erp-form .form-control:disabled,
.erp-form .form-select:disabled {
  background: #f1f3f4;
  opacity: 1;
}

/* Inline help text */
.erp-form .form-text {
  font-size: 11px;
  color: #6c757d;
}

/* Checkbox & radio */
.erp-form .form-check-input {
  width: 16px;
  height: 16px;
}

.erp-form .form-check-input:checked {
  background-color: #1a73e8;
  border-color: #1a73e8;
}

/* Textarea */
.erp-form textarea.form-control {
  height: auto;
  min-height: 72px;
}

/* Content-sized form controls */
.erp-form .form-control,
.erp-form .form-select {
  width: auto;
  min-width: unset;
  display: inline-block;
  white-space: nowrap;
  border-width: 2px;
}

.erp-form input[type="text"],
.erp-form input[type="number"],
.erp-form input[type="date"],
.erp-form .form-select {
  min-width: 160px;
}

.erp-form input.small {
  min-width: 100px;
}

.erp-form input.large {
  min-width: 260px;
}

/* Dark mode */
[data-bs-theme="dark"] .erp-form .form-control,
[data-bs-theme="dark"] .erp-form .form-select {
  background: #1f1f1f;
  border-color: #2a2a2a;
}

[data-bs-theme="dark"] .erp-form label {
  color: #9aa0a6;
}



/* Rounded ERP buttons */
.erp-btn {
  font-size: 1rem;
  padding: 6px 16px;
  border-radius: 999px; /* pill */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Primary */
.erp-btn-primary {
  background: var(--bs-gray-700);
  color: #fff;
  border: none;
}

.erp-btn-primary:hover {
  background: var(--bs-gray-600); <!-- #1558c0 -->
}

/* Secondary */
.erp-btn-outline {
  margin: 2px;
  border-radius: 50%;
  background: var(--bs-gray-200);
  border: 2px solid var(--bs-border-color);
  color: var(--bs-body-color);
  font-weight: 700;
}

.erp-btn-secondary {
  background: transparent;
  border: 1px solid var(--bs-border-color);
  font-size: 1rem;
  padding: 6px 1rem;
  border-radius: 8px;
}


/* Breadcrumb container */
.erp-breadcrumb {
  font-size: 0.857rem;
  color: var(--bs-dropdown-link-hover-color);
}

/* Breadcrumb list */
.erp-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

/* Links */
.erp-breadcrumb .breadcrumb-item a {
  color: #1a73e8;
  color: var(--bs-dropdown-link-hover-color);
  text-decoration: none;
  font-weight: 700;
}

.erp-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}

/* Separator */
.erp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #9aa0a6;
}

/* Active item */
.erp-breadcrumb .breadcrumb-item.active {
  color: #5f6368;
}

/* Dark mode */
[data-bs-theme="dark"] .erp-breadcrumb .breadcrumb-item a {
  color: #8ab4f8;
}

[data-bs-theme="dark"] .erp-breadcrumb .breadcrumb-item.active {
  color: #9aa0a6;
}

/* Pagination container */

/* Links */
.page-link {
  color: #1a73e8;
  color: var(--bs-dropdown-link-hover-color);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.857rem;
}

.page-link:hover {
  text-decoration: underline;
}

/* Separator */
.page-item + .page-item::before {
  color: #9aa0a6;
}

.active>.page-link, .page-link.active{
	background-color: #5f6368;
}
/* Dark mode */
[data-bs-theme="dark"] .pagination .page-item a {
  color: #8ab4f8;
}

[data-bs-theme="dark"] .pagination .page-item.active {
  color: #9aa0a6;
}

/* Listing CSS Ends */

.tal {width: 75px;background-color: white !important; border: solid 0px black; text-align: left; padding: 0px; margin: 0px; font-weight: 700; height: 10px;}

.ta { width: 90vw; max-width: 100%; height: 100px !important;}
label { font-size: 12px; font-weight: 500;}


.opt { padding: 50px; width: 20px; margin: 50px;}


/* === Base form control === */
.form-control, .form-select, textarea {
	w1idth: 240px;
	border-width: 2px;
}

.form-control,
.form-select,
textarea {
  line-height: 1.4;
  padding: 6px 8px;
}
.form-select{
width: auto;
}
/* === Width utilities (desktop) === */
.field-xs { width: 80px; }    /* qty, small codes */
.field-sm { width: 120px; }   /* qty, age, short numbers */
.field-md { width: 200px; }   /* phone, date */
.field-lg { width: 300px; }   /* name, email */
.field-xl { width: 420px; }   /* address line */
.field-xxl {
  width: 540px;
  max-width: 600px;           /* hard UX limit */
}

/* Index Page CSS START */

.sidebar .nav-link {
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.sidebar .nav-link:hover {
  background-color: rgba(0,0,0,0.05);
}

.sidebar .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

.sidebar .collapse .nav-link {
  padding-left: 1.25rem;
  font-size: 14px;
  color: #000;
  font-weight: 400;
}

.sidebar .collapse .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}

.sidebar {
  height: calc(100vh - 56px); /* Bootstrap navbar height */
  overflow-y: auto;              /* vertical scrollbar */
  overflow-x: hidden;
  position: sticky;
  top: 56px;
}

/* Chrome, Edge, Safari */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 4px;
}

/* Firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.3) transparent;
}

/* Dark mode polish */
[data-bs-theme="dark"] .sidebar {
  background: #1e1e1e;
  border-color: #2a2a2a;
}
[data-bs-theme="dark"] .sidebar .nav-link{
  color: #fff;
}

	.top-toast {
	  animation: slideDown 0.4s ease;
	}

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

/* Index Page CSS ENDS */


/* Footer Page CSS STARTS */

.fc {
	text-align: center;
	font-weight: bold;
	backgro1und-color: <? echo $maincolor; ?>;
	color: #fff;
	padding: 25px 10px;
	display: block;
}
.fc a {
	color: #fff;
}

/* Footer Page CSS ENDS */

.alert {
	border-radius: 10px;

 /* The frosted blur effect */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  
  /* Semi-transparent background */
  back1ground: rgba(255, 255, 255, 0.15);
  
  /* Visual depth and edges */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 12px 0 rgba(31, 38, 135, 0.37);
  
  /* Aesthetics */
  padd1ing: 40px;
  col1or: white;
}

#alertContainer {
	margin-top:10px; 
	z-index:1055; 
	max-width:600px;
	min-width: 25%;
}