/* ------------------------ Layout Background ------------------------ */
.main-container {
  width: 100%;                 /* w-full */
  padding: 16px;               /* p-4 */
  background-color: #ffffff;   /* bg-white */
  border-radius: 8px;          /* rounded-lg */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow */
  width: auto;
  min-height: 100%;
}

/* Responsive (md breakpoint ≈ 768px) */
@media (max-width: 767px) {
  .main-container {
    max-width: 100%;
  }
}

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

.header-container {
  display: flex;                      /* flex */
  justify-content: space-between;     /* justify-between */
  align-items: center;                /* items-center */
  padding: 16px 24px;                 /* py-4 px-6 */
  border-bottom: 1px solid #e5e7eb;   /* border-b */
}

.header-title {
  font-size: 18px;                    /* text-lg */
  font-weight: 600;                   /* font-semibold */
  color: #1f2937;                     /* text-gray-800 */
  margin: 0;
}

/* ------------------------ TABLE START ------------------------ */
/* Container */
.table-container {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px; /* rounded-2xl */
  border: 1px solid #f3f4f6; /* gray-100 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
}

/* Table */
.college-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px; /* text-sm */
}

/* Header */
.college-table thead {
  background-color: #d1fae5; /* green-100 */
  color: #374151; /* gray-700 */
}

.college-table th {
  padding: 12px 16px; /* py-3 px-4 */
  text-align: left;
  font-weight: 600;
}

/* Body */
.college-table td {
  padding: 12px 16px;
}

/* Row Divider */
.college-table tbody tr {
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
  transition: background-color 0.3s ease;
}

/* Hover Effect */
.college-table tbody tr:hover {
  background-color: #eff6ff; /* blue-50 */
}


/* ------------------------ FONT CSS START ------------------------ */
/* Serial Number Styling */
.serial-no {
  font-weight: 600;
  color: #4f46e5; /* indigo-600 */
}


/* ------------------------ POSITION CSS START ------------------------ */
/* Center Text */
.text-center {
  text-align: center !important;
}

/* ------------------------ BUTTON CSS START ------------------------ */
/* Buttons */
.btn {
  padding: 12px 12px; 
  border-radius: 8px;
  border: none;
  color: #ffffff;
  cursor: pointer !important;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

/* Container (flex space-x-3) */
.button-group {
  display: flex;
  gap: 12px; /* space-x-3 = 0.75rem = 12px */
}

/* Optional click effect */
.btn:active {
  transform: scale(0.97);
}

.head-btn {
  font-weight: 600;              /* font-semibold */
  padding: 8px 20px;             /* py-2 px-5 */
  border: none;
  border-radius: 8px;            /* rounded-lg */
  cursor: pointer;
  transition: all 0.3s ease;     /* duration-300 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon */
.head-btn-icon {
  width: 16px;   /* w-4 */
  height: 16px;  /* h-4 */
  color: #ffffff;
}

.alink-btn {
  display: inline-flex;        /* inline-flex */
  align-items: center;         /* items-center */
  padding: 7px 13px;           /* py-1.5 px-3 */
  font-size: 14px;             /* text-sm */
  color: #ffffff;              /* text-white */
  border-radius: 10px;          /* rounded (default Tailwind = 4px) */
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.alink-btn:hover {
  opacity: 0.9;                /* hover:opacity-90 */
}

/* ------------------------ BUTTON COLOR CSS START ------------------------ */
/* View Button */
.btn-view {
  background-color: #0ea5e9; /* sky-500 */
}
.btn-view:hover {
  background-color: #0284c7; /* sky-600 */
}

/* Primary Button */
.btn-primary {
  background-color: #2563eb; /* blue-600 */
}
.btn-primary:hover {
  background-color: #1d4ed8; /* blue-700 */
}

/* Delete Button */
.btn-delete {
  background-color: #dc2626; /* red-600 */
}
.btn-delete:hover {
  background-color: #b91c1c; /* red-700 */
}

/* Sky Button (bg-sky-600) */
.btn-process {
  background-color: #0284c7; /* sky-600 */
}

.btn-process:hover {
  background-color: #0369a1; /* sky-700 */
}

/* Green Button (bg-green-600) */
.btn-success {
  background-color: #16a34a; /* green-600 */
  color: #ffffff;
}

.btn-success:hover {
  background-color: #15803d; /* green-700 */
}

/* Gradient Button */
.btn-gradient {
  background: linear-gradient(to right, #6366f1, #9333ea); /* indigo-500 → purple-600 */
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15); 
}

/* Hover Gradient */
.btn-gradient:hover {
  background: linear-gradient(to right, #4f46e5, #7e22ce); /* indigo-600 → purple-700 */
  box-shadow: 0 8px 12px rgba(0,0,0,0.2); /* hover:shadow-lg */
}

.btn-color1 {
  background-color: #3b82f6;
  color: #ffffff;
}

.btn-color1:hover {
  background-color: #2563eb;
}

/* ------------------------ PROFILE CSS START ------------------------ */
/* ===== HEADER ===== */
.pro-main-header {
  background-color: #4f46e5; /* primary-profile-clr equivalent */
  color: #ffffff;
  padding: 12px 0; /* py-3 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
  position: sticky;
  top: 0;
  z-index: 50;
}

.pro-header-container {
  margin: 0 auto;
  padding: 0 24px; /* px-6 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pro-header-left {
  display: flex;
  align-items: center;
  gap: 12px; /* gap-3 */
}

.pro-header-title {
  font-size: 24px; /* text-2xl */
  font-weight: 600; /* font-semibold */
  letter-spacing: 0.5px; /* tracking-wide */
  display: flex;
  justify-content: space-between;
}

/* ===== MENU BUTTON ===== */
.pro-menu-btn {
  padding: 8px; /* p-2 */
  background-color: #4f46e5; /* indigo-600 */
  border: none;
  border-radius: 6px; /* rounded-md */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pro-menu-btn:hover {
  background-color: #6366f1; /* indigo-500 */
}

.pro-icon {
  width: 20px; /* w-5 */
  height: 20px; /* h-5 */
  color: white;
}

/* ===== LAYOUT ===== */
.pro-layout {
  display: flex;
}

/* ===== SIDEBAR ===== */
.pro-sidebar {
  width: 256px; /* w-64 */
  background-color: #eef2ff; /* indigo-50 */
  border-right: 1px solid #e5e7eb; /* gray-200 */
  min-height: 100vh;
  padding: 16px; /* p-4 */
  transition: all 0.3s ease; /* duration-300 */
  overflow: hidden;
}

/* Collapsed Sidebar */
.pro-sidebar.collapsed {
  width: 90px;               /* same as w-20 approx */
}

/* Hide text when collapsed */
.pro-sidebar.collapsed .pro-sidebar-text {
  display: none;             /* replaces hidden */
}

.pro-sidebar-title {
  font-size: 18px; /* text-lg */
  font-weight: 600;
  color: #4338ca; /* indigo-700 */
  margin-bottom: 16px; /* mb-4 */
}

.pro-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px; /* space-y-2 */
  color: #374151; /* gray-700 */
}

/* ===== MAIN CONTENT ===== */
.pro-main-content {
  flex: 1;
  padding: 32px; /* p-8 */
  transition: all 0.3s ease;
}

/* Base submenu style */
.pro-submenu-link {
  display: flex;                 /* flex */
  align-items: center;           /* items-center */
  gap: 8px;                      /* gap-2 */
  padding: 8px 12px;             /* px-3 py-2 */
  border-radius: 6px;            /* rounded-md */
  text-decoration: none;
  font-weight: 500;              /* font-medium */
  color: #4338ca;                /* text-indigo-700 */
  transition: background-color 0.3s ease;
}

/* Hover effect (for non-active items) */
.pro-submenu-link:hover {
  background-color: #e0e7ff;     /* hover:bg-indigo-100 */
}

/* Active (first menu item) */
.pro-submenu-link.active {
  background-color: #e0e7ff;     /* bg-indigo-100 */
  color: #4338ca;                /* text-indigo-700 */
}

/* Icon */
.pro-submenu-icon {
  width: 20px;                   /* w-5 */
  height: 20px;                  /* h-5 */
  color: #4f46e5;                /* text-indigo-600 */
}

/* Sidebar text */
.pro-sidebar-text {
  
  white-space: normal;      
  word-break: break-word;   
  display: inline-block;    
 
}

/* ------------------------ FORM TABLE CSS START ------------------------ */

/* ===== Card Container ===== */
.formtbl-card {
  background-color: #ffffff;                 /* bg-white */
  border-radius: 12px;                       /* rounded-xl */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);   /* shadow-md */
  padding: 24px;                             /* p-6 */
  margin-bottom: 24px;                       /* mb-6 */
}

/* ===== Header Section ===== */
.formtbl-header {
  display: flex;                             /* flex */
  justify-content: space-between;            /* justify-between */
  align-items: center;                       /* items-center */
  margin-bottom: 16px;                       /* mb-4 */
}

.formtbl-title {
  font-size: 24px;                           /* text-2xl */
  font-weight: 600;                          /* font-semibold */
  color: #1f2937;                            /* text-gray-800 */
}

/* ===== Table Styling ===== */
.formtbl-info {
  width: 100%;                               /* w-full */
  border-top: 1px solid #e5e7eb;              /* border-gray-200 */
  border-collapse: collapse;
}

.formtbl-info tr {
  border-bottom: 1px solid #f3f4f6;           /* divide-gray-100 */
}

.formtbl-info td {
  padding: 12px 0;                           /* py-3 */
}

/* Left Label Column */
.formlabel-cell {
  font-weight: 600;                          /* font-semibold */
  color: #374151;                            /* text-gray-700 */
  width: 33.33%;                             /* w-1/3 */
}

/* Right Value Column */
.formvalue-cell {
  color: #4b5563;                            /* text-gray-600 */
}

/* Optional: Align icon nicely */
.show-formval {
  display: flex;
  align-items: center;
  gap: 6px;
}



/*------------------------ SINGLE EDIT CSS ------------------------*/
/* ===== Edit Icon ===== */
.formedit-icon {
  color: #2563eb;                            /* text-blue-600 */
  font-size: 16px;                           /* text-base */
  padding: 4px;                              /* p-1 */
  cursor: pointer;
  transition: color 0.3s ease;
}

.formedit-icon:hover {
  color: #1e40af;                            /* hover:text-blue-800 */
}

/* ===== Form Container Box ===== */
.edit-form-box {
  display: flex;                     /* flex */
  align-items: center;               /* items-center */
  gap: 12px;                         /* gap-3 */
  background-color: #ffffff;         /* bg-white */
  padding: 12px;                     /* p-3 */
  border-radius: 6px;                /* rounded-md */
  border: 1px solid #e5e7eb;         /* border-gray-200 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* shadow-sm */
}

/* ===== Date Input Styling ===== */
.edit-date-input {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

/* ===== Text Input Styling ===== */
.edit-text-input {
  width: 100%;                         /* w-full */
  padding: 8px 4px;                    /* py-2 px-1 */
  border-radius: 6px;                  /* rounded-md */
  border: 1px solid #d1d5db;            /* border-gray-300 */
  color: #374151;                      /* text-gray-700 */
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;            /* transition-all */
}

/* ===== Green Check Button ===== */
.edit-btn {
  background-color: #22c55e;         /* bg-green-500 */
  color: #ffffff;
  border: none;
  border-radius: 50%;                /* rounded-full */
  padding: 11px 12px;                 /* px-3 py-2 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* shadow-md */
  cursor: pointer;
  transition: all 0.2s ease;         /* duration-200 */
  font-size: 14px;
}

/* Hover Effect */
.edit-btn:hover {
  background-color: #16a34a;         /* hover:bg-green-600 */
}

/* Optional Active Click Effect */
.edit-btn:active {
  transform: scale(0.95);
}

/*------------------------ POPUP MODAL CSS ------------------------*/

/* Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow-y: auto;     /* 🔥 IMPORTANT */
  padding: 20px;        /* Prevent touching edges */
}

/* Modal Box */
.modal-box {
  background-color: #ffffff;
  width: 500px;
  max-height: 90vh;      /* 🔥 Limit height */
  overflow-y: auto;      /* 🔥 Enable internal scroll */
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Close Button */
.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Title */
.modal-title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
}

/* Form spacing */
.modal-form .form-group {
  margin-bottom: 16px;
}

.modal-form label {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 5px;
}

/* Inputs */
.modal-form input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.modal-form input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Buttons Section */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
}