/* ------------------------ 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;
}

#root_college_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_college_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

/* 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;
}

/*------------------------ Card CSS ------------------------*/
/*
body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    padding: 20px;
}
    */

.section {
    margin-bottom: 40px;
}

.section h3 {
    margin-bottom: 15px;
    font-weight: bold;
}

.card-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.card {
    display: flex;
    width: 320px;
    background: #fff;
    border: 2px solid #d46adf;
    padding: 15px;
    border-radius: 6px;
    position: relative;
}

.photo {
    width: 90px;
    height: 110px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-right: 15px;
}

.details h4 {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

.details p {
    margin: 4px 0;
    font-size: 13px;
}

.rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 28px;
    margin-top: 8px;
}

.green {
    background: #6bbf8a;
}

.blue {
    background: #4bb6c1;
}

.gray {
    background: #6c7a89;
}

/* ------------------------ Student Groups Page (sg-*) ------------------------ */
.sg-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.sg-page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
  .sg-page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sg-page-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sg-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sg-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sg-add-btn-wrap {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .sg-add-btn-wrap {
    justify-content: flex-end;
  }
}

.sg-no-record {
  text-align: center;
  padding: 40px 16px;
  color: #6b7280;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
}

.sg-no-record h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #92400e;
}

.sg-modal-hidden {
  display: none !important;
}

.sg-modal-box {
  width: 100%;
  max-width: 520px;
}

.sg-modal-textarea {
  width: 100%;
  min-height: 90px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition: all 0.2s ease;
}

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

.sg-show-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sg-hide-list {
  display: none;
}

.sg-edit-icon {
  cursor: pointer;
  margin-left: 8px;
  color: #0284c7;
}

.sg-edit-icon:hover {
  color: #0369a1;
}

.sg-inline-edit-form {
  margin: 0;
}

.sg-inline-edit-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sg-inline-edit-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}

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

/* ------------------------ View Student Group Member (vsgm-*) ------------------------ */
.vsgm-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.vsgm-page-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #e8eaf2;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
}

.vsgm-header-top {
  display: flex;
  align-items: center;
  min-width: 0;
}

.vsgm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
  word-break: break-word;
}

.vsgm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vsgm-toolbar-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vsgm-toolbar-group:empty {
  display: none;
}

@media (max-width: 639px) {
  .vsgm-toolbar .btn,
  .vsgm-toolbar .alink-btn {
    font-size: 13px;
    padding: 7px 11px;
  }
}

.vsgm-slot-hidden {
  display: none !important;
}

.vsgm-roles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .vsgm-roles-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.vsgm-role-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-align: left;
  min-height: 96px;
}

.vsgm-role-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.vsgm-role-body {
  min-width: 0;
  flex: 1;
}

.vsgm-avatar,
.vsgm-row-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
  background: #f3f4f6;
}

.vsgm-row-avatar {
  width: 40px;
  height: 40px;
}

.vsgm-role-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
  line-height: 1.35;
  word-break: break-word;
}

.vsgm-role-name b {
  font-weight: 600;
}

.vsgm-role-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.vsgm-role-btn {
  padding: 6px 12px !important;
  font-size: 13px !important;
}

.vsgm-table-wrap {
  margin-bottom: 16px;
}

.vsgm-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.vsgm-modal-hidden {
  display: none !important;
}

.vsgm-modal-lg {
  width: 100%;
  max-width: 640px;
}

.vsgm-modal-xl {
  width: 100%;
  max-width: 920px;
}

.vsgm-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .vsgm-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.vsgm-form-row {
  margin-bottom: 12px;
}

.vsgm-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.vsgm-search-row input {
  flex: 1;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}

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

.vsgm-textarea,
.modal-form select,
.modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
}

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

.vsgm-note {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 10px;
}

.vsgm-char-left {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.vsgm-now-wrap {
  display: flex;
  align-items: flex-end;
}

.vsgm-now-wrap input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
}

.vsgm-now-wrap label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.vsgm-no-record {
  text-align: center;
  padding: 24px 16px;
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  margin: 12px 0;
}

.vsgm-no-record.hidden {
  display: none !important;
}

.vsgm-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #05053d;
}

.vsgm-inactive-name {
  background-color: #fee2e2;
  color: #991b1b;
}

/* ------------------------ Add Student (as-*) ------------------------ */
.as-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.as-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.as-section-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: #05053d;
}

.as-modal-section-title {
  margin: 18px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 600;
  color: #05053d;
}

.as-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.as-search-row input {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}

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

.as-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.as-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
}

@media (min-width: 768px) {
  .as-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.as-form-item label,
.as-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.as-form-item input[type="text"],
.as-form-item select,
.as-form-control input[type="text"],
.as-form-control select,
.as-modal-form input[type="text"],
.as-modal-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.as-gender-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}

.as-gender-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
  cursor: pointer;
}

.as-gender-group input[type="radio"] {
  width: auto;
  margin: 0;
}

.as-gender-error {
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
}

.as-form-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.as-list-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.as-app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .as-app-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .as-app-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.as-app-card {
  background: linear-gradient(to top right, #070f2d, #3a3c54);
  border: 1px solid #545a6a;
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
}

.as-app-card-no {
  color: #488aec;
  font-size: 13px;
  font-weight: 600;
}

.as-app-card-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 8px 0;
  word-break: break-word;
}

.as-app-card-desc {
  color: #9799a7;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 12px;
}

.as-app-card-actions {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.as-app-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #111827;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(11, 22, 37, 0.12);
}

.as-app-card-btn:hover {
  opacity: 0.92;
}

.as-modal-hidden {
  display: none !important;
}

.as-modal-xl {
  width: 100%;
  max-width: 960px;
}

.as-modal-md {
  width: 100%;
  max-width: 520px;
}

.as-modal-form .as-form-grid {
  margin-bottom: 4px;
}

.as-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
}

.as-class-form .as-form-item {
  margin-bottom: 12px;
}

/* ------------------------ Search Student By Name (ssbn-*) ------------------------ */
.ssbn-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.ssbn-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ssbn-search-form {
  margin-bottom: 20px;
}

.ssbn-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.ssbn-search-row input {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}

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

.ssbn-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ssbn-ay-block {
  border: 1px solid #eef0f5;
  border-radius: 12px;
  padding: 14px;
  background: #fafbff;
}

.ssbn-ay-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

.ssbn-student-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}

.ssbn-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e7eb;
  background: #f3f4f6;
  flex-shrink: 0;
}

.ssbn-student-meta {
  min-width: 0;
}

.ssbn-student-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  word-break: break-word;
}

.ssbn-student-name a {
  color: #2563eb;
  text-decoration: none;
}

.ssbn-student-name a:hover {
  text-decoration: underline;
}

.ssbn-student-sub {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}

.ssbn-no-record {
  text-align: center;
  padding: 28px 16px;
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

/* ------------------------ Photo Upload For All Student (pufas-*) ------------------------ */
.pufas-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

.pufas-page-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pufas-page-subtitle {
  margin: 0 0 20px;
  font-size: 14px;
  color: #6b7280;
}

.pufas-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .pufas-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pufas-form-item label,
.pufas-upload-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.pufas-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.pufas-upload-block {
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 16px;
  background: #fafbff;
}

.pufas-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.pufas-file-input {
  flex: 1;
  min-width: 200px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.pufas-hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: #6b7280;
}

#studentPhotosFormId label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

#studentPhotosFormId input.error,
#studentPhotosFormId select.error {
  border: 1px solid orange;
}

/* ------------------------ Add Student From Excel (asfe-*) ------------------------ */
#root_add_student_from_excel .asfe-page-full {
  max-width: none;
  width: 100%;
}

#root_add_student_from_excel .asfe-page-card {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#root_add_student_from_excel .asfe-modal-sm {
  width: 100%;
  max-width: 420px;
}

#root_add_student_from_excel .asfe-alert-text {
  text-align: center;
  font-size: 15px;
  color: #374151;
  margin: 8px 0 4px;
  line-height: 1.5;
}

#root_add_student_from_excel .asfe-confirm-actions {
  justify-content: flex-end;
  gap: 10px;
}

#root_add_student_from_excel .asfe-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.asfe-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.asfe-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.asfe-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .asfe-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.asfe-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.asfe-form-item select,
.asfe-file-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.asfe-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.asfe-table-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.asfe-no-record {
  text-align: center;
  padding: 24px 16px;
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  margin: 12px 0;
}

.asfe-cell-error {
  background-color: #fecaca !important;
  border-radius: 4px;
  padding: 2px 4px;
}

.asfe-page-card .showInfo.style {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
  padding: 2px 4px;
  word-break: break-word;
}

.asfe-page-card .hideInfo {
  display: none;
}

.asfe-page-card .editIcon {
  cursor: pointer;
  color: #2563eb;
  margin-left: 4px;
}

.asfe-page-card .editIcon:hover {
  color: #1d4ed8;
}

.asfe-inline-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.asfe-inline-edit .recValue,
.asfe-inline-edit .inpBorder,
.asfe-inline-edit input[type="text"] {
  min-width: 120px;
  max-width: 180px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
}

.asfe-inline-edit input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.asfe-modal-hidden {
  display: none !important;
}

.asfe-modal-md {
  width: 100%;
  max-width: 720px;
}

.asfe-modal-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #374151;
}

.asfe-modal-stats label {
  font-weight: 600;
  margin-right: 6px;
}

.asfe-xlsx-tools {
  display: none;
}

.asfe-hidden-form {
  display: none;
}

/* ------------------------ Student Modification (stmod-*) ------------------------ */
.stmod-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.stmod-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.stmod-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stmod-template-link {
  display: inline-flex;
}

.stmod-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .stmod-filters {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.stmod-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .stmod-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.stmod-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.stmod-form-item select,
.stmod-form-item input[type="text"],
.stmod-form-item textarea,
.stmod-file-input,
.stmod-search-row input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.stmod-form-item select:focus,
.stmod-form-item input[type="text"]:focus,
.stmod-form-item textarea:focus,
.stmod-file-input:focus,
.stmod-search-row input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.stmod-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stmod-toolbar {
  display: inline-flex;
  align-items: center;
}

.stmod-table-wrap {
  margin-bottom: 14px;
}

.stmod-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.stmod-no-record {
  text-align: center;
  padding: 24px 16px;
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  margin: 12px 0;
}

.stmod-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: inherit;
}

.stmod-selected-wrap {
  margin-top: 16px;
}

.stmod-section-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  margin: 0 0 14px;
}

.stmod-move-form {
  margin-top: 16px;
}

.stmod-confirm-move,
.stmod-back-wrap,
.stmod-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.stmod-modal-hidden {
  display: none !important;
}

.stmod-modal-md {
  width: 100%;
  max-width: 640px;
}

.stmod-modal-lg {
  width: 100%;
  max-width: 900px;
}

.stmod-help-text {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 14px;
  line-height: 1.5;
}

.stmod-days-row .stmod-days-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stmod-days-row .stmod-days-input input {
  max-width: 120px;
}

.stmod-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.stmod-note {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 10px;
}

.stmod-char-left {
  font-size: 13px;
  color: #4b5563;
  margin-top: 6px;
  text-align: right;
}

.stmod-now-wrap {
  display: flex;
  align-items: flex-end;
  padding-bottom: 8px;
}

.stmod-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.stmod-search-row input[type="text"] {
  flex: 1;
  min-width: 180px;
}

.stmod-icon-btn {
  min-width: 42px;
  padding-left: 12px;
  padding-right: 12px;
}

.stmod-gender-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-height: 38px;
}

.stmod-gender-error {
  color: #dc2626;
  font-size: 12px;
}

.stmod-pwd-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
  font-size: 14px;
  word-break: break-all;
}

.stmod-pwd-row label {
  font-weight: 600;
  color: #374151;
}

.stmod-xlsx-tools,
.stmod-hidden {
  display: none;
}

/* ------------------------ Check Unfilled Student Data (cusd-*) ------------------------ */
.cusd-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.cusd-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cusd-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: end;
}

@media (min-width: 768px) {
  .cusd-filters {
    grid-template-columns: 1fr 1fr auto;
  }
}

.cusd-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.cusd-form-item select,
.cusd-form-item input[type="text"],
.cusd-form-item input[type="file"],
.cusd-modal-form select,
.cusd-modal-form input[type="text"],
.cusd-modal-form input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.cusd-form-item select:focus,
.cusd-form-item input[type="text"]:focus,
.cusd-modal-form select:focus,
.cusd-modal-form input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.cusd-form-actions {
  display: flex;
  align-items: flex-end;
}

.cusd-report-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .cusd-report-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.cusd-class-title {
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
  margin: 16px 0 10px;
}

.cusd-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .cusd-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cusd-pin-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cusd-pin-row input {
  flex: 1;
}

.cusd-modal-hidden {
  display: none !important;
}

.cusd-modal-md {
  width: 100%;
  max-width: 560px;
}

.cusd-modal-lg {
  width: 100%;
  max-width: 900px;
}

.cusd-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cusd-help-text {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 0;
}

.cusd-cam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cusd-cam-panel {
  margin-top: 12px;
}

.cusd-cam-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .cusd-cam-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cusd-photo-block {
  margin-bottom: 14px;
}

.cusd-inline-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.cusd-inline-edit .cusd-inline-input,
.cusd-inline-edit .recValue,
.cusd-inline-edit .inpBorder,
.cusd-inline-edit .name_in_logal,
.cusd-inline-edit select {
  min-width: 120px;
  max-width: 180px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
}

.cusd-inline-edit .cusd-inline-input:focus,
.cusd-inline-edit input:focus,
.cusd-inline-edit select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.cusd-hidden {
  display: none !important;
}

.cusd-page-card .showStudent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.cusd-page-card .hideStudent {
  display: none;
}

.cusd-page-card .seditIcon,
.cusd-page-card .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

.cusd-page-card .curPointer {
  cursor: pointer;
}

.cusd-stud-photo,
#root_check_unfilled_student_data img.single-img,
#root_check_unfilled_student_data img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

/* ------------------------ Upload Student From Excel (usfe-*) ------------------------ */
.usfe-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.usfe-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.usfe-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .usfe-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.usfe-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.usfe-form-item select,
.usfe-file-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.usfe-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.usfe-hidden-form,
.usfe-hidden,
.usfe-drop {
  display: none;
}

.usfe-modal-hidden {
  display: none !important;
}

.usfe-modal-lg {
  width: 100%;
  max-width: 900px;
}

.usfe-modal-summary {
  margin-bottom: 14px;
  font-size: 14px;
  color: #374151;
}

.usfe-modal-summary p {
  margin: 0 0 6px;
}

.usfe-modal-summary label,
.usfe-modal-label {
  font-weight: 600;
  margin-right: 6px;
}

.usfe-modal-label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
}

.usfe-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.usfe-modal-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.usfe-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  gap: 10px;
}

/* ------------------------ Search Ex Staff (ses-*) ------------------------ */
.ses-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.ses-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ses-search-form {
  margin-bottom: 18px;
}

.ses-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ses-search-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.ses-results {
  margin-top: 8px;
}

.ses-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.ses-staff-photo,
#root_search_exist_staff img.single-img,
#root_search_exist_staff img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

#root_search_exist_staff #searchTable a {
  color: #2563eb;
  font-weight: 600;
}

#root_search_exist_staff #searchTable a:hover {
  text-decoration: underline;
}

/* ------------------------ Search Ex Student (sest-*) ------------------------ */
.sest-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.sest-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sest-search-form {
  margin-bottom: 18px;
}

.sest-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sest-search-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.sest-results {
  margin-top: 8px;
}

.sest-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.sest-student-photo,
#root_search_exist_student img.single-img,
#root_search_exist_student img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

.sest-money-icon {
  color: #16a34a;
  cursor: pointer;
  font-size: 18px;
}

.sest-money-icon:hover {
  color: #15803d;
}

#root_search_exist_student #searchTable a {
  color: #2563eb;
  font-weight: 600;
}

#root_search_exist_student #searchTable a:hover {
  text-decoration: underline;
}

/* ------------------------ Student Report hub (srpt-*) ------------------------ */
.srpt-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.srpt-page-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.srpt-page-subtitle {
  margin: 0 0 18px;
  font-size: 14px;
  color: #6b7280;
}

.srpt-btn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .srpt-btn-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .srpt-btn-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.srpt-report-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  min-height: 48px;
  padding: 10px 14px;
}

.srpt-page-card .btn-warning {
  background-color: #d97706;
  color: #ffffff;
}

.srpt-page-card .btn-warning:hover {
  background-color: #b45309;
  color: #ffffff;
}




/* ------------------------ College Staffs (cstf-*) ------------------------ */
.cstf-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.cstf-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cstf-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
  max-width: 320px;
}

.cstf-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .cstf-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cstf-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.cstf-form-item input[type="text"],
.cstf-form-item input[type="file"],
.cstf-form-item select,
.cstf-form-item textarea,
.cstf-modal-form input[type="text"],
.cstf-modal-form select,
.cstf-modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.cstf-pin-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cstf-pin-row input {
  flex: 1;
}

.cstf-modal-hidden {
  display: none !important;
}

.cstf-modal-md {
  width: 100%;
  max-width: 560px;
}

.cstf-modal-lg {
  width: 100%;
  max-width: 900px;
}

.cstf-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cstf-wizard-step {
  margin-bottom: 8px;
}

.cstf-help-text {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 0;
}

.cstf-table-wrap {
  margin-top: 8px;
}

.cstf-staff-photo,
#root_college_staffs img.single-img,
#root_college_staffs img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

#root_college_staffs .noVal {
  color: rgb(92, 111, 128);
}

#root_college_staffs .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_college_staffs .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_college_staffs .seditIcon,
#root_college_staffs .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_college_staffs .curPointer {
  cursor: pointer;
}

#root_college_staffs .showInfo {
  display: inline;
}

#root_college_staffs .hideInfo {
  display: none;
}

/* ------------------------ Change Course (chc-*) ------------------------ */
.chc-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.chc-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.chc-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chc-ay-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chc-ay-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.chc-ay-wrap select,
.chc-search-row input,
.chc-modal-form select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.chc-ay-wrap select {
  min-width: 160px;
}

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

.chc-search-form {
  margin-bottom: 18px;
}

.chc-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chc-search-row input {
  flex: 1 1 220px;
}

.chc-results {
  margin-top: 8px;
}

.chc-student-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .chc-student-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .chc-student-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.chc-student-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  min-height: 120px;
}

.chc-student-photo-wrap {
  flex: 0 0 auto;
}

.chc-student-photo,
#root_change_course img.srchImgCls,
#root_change_course img.imgdefault {
  width: 72px;
  height: 88px;
  max-width: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.chc-student-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.chc-student-name {
  font-size: 14px;
  color: #05053d;
  margin-bottom: 4px;
}

.chc-student-sub {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 2px;
}

.chc-student-actions {
  margin-top: 8px;
}

.chc-move-icon,
#root_change_course .moveIcon {
  cursor: pointer;
  font-size: 15px;
  color: #16a34a;
  font-style: normal;
}

.chc-move-icon:hover,
#root_change_course .moveIcon:hover {
  color: #15803d;
}

.chc-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.chc-modal-hidden {
  display: none !important;
}

.chc-modal-md {
  width: 100%;
  max-width: 560px;
}

.chc-modal-form .form-group {
  margin-bottom: 14px;
}

.chc-modal-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.chc-modal-form select {
  width: 100%;
}

.chc-info-row .chc-info-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 6px 0;
}

.chc-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

#root_change_course .btn-danger,
#editStudentId .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_change_course .btn-danger:hover,
#editStudentId .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_change_course .dots {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------ User Management (umgmt-*) ------------------------ */
.umgmt-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.umgmt-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.umgmt-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.umgmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.umgmt-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.umgmt-search-row input[type="text"] {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.umgmt-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .umgmt-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.umgmt-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.umgmt-form-item input[type="text"],
.umgmt-form-item input[type="file"],
.umgmt-form-item select,
.umgmt-file-input,
.umgmt-modal-form input[type="text"],
.umgmt-modal-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.umgmt-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-height: 38px;
}

.umgmt-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  margin-bottom: 0;
}

.umgmt-field-error {
  color: #dc2626;
  font-size: 12px;
  width: 100%;
}

.umgmt-modal-hidden {
  display: none !important;
}

.umgmt-modal-sm {
  width: 100%;
  max-width: 420px;
}

.umgmt-modal-md {
  width: 100%;
  max-width: 560px;
}

.umgmt-modal-lg {
  width: 100%;
  max-width: 900px;
}

.umgmt-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.umgmt-alert-message {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
  margin-bottom: 8px;
  text-align: center;
}

.umgmt-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.umgmt-old-wrap {
  margin-top: 0;
}

.umgmt-user-photo,
#root_user_management img.umgmt-user-photo,
#root_user_management img.single-img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

.umgmt-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  overflow: visible;
  min-width: 0;
}

.umgmt-role-name {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.umgmt-role-action {
  flex: 0 0 auto;
  text-align: right;
}

/* Compact delete control ? do not rely on Bootstrap btn-xs */
#root_user_management .umgmt-role-action .btn,
#root_user_management .umgmt-role-action .btn-xs {
  padding: 6px 10px;
  min-width: 36px;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#root_user_management #Tids th:last-child,
#root_user_management #Tids td:last-child,
#root_user_management #oldTids th:last-child,
#root_user_management #oldTids td:last-child {
  min-width: 200px;
  padding-right: 20px;
}

#root_user_management .umgmt-page-card {
  overflow: visible;
}

#root_user_management .college-table {
  min-width: 960px;
  table-layout: auto;
}

.umgmt-user-cell {
  vertical-align: top;
  min-width: 220px;
}

.umgmt-user-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.umgmt-user-meta {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.umgmt-user-line {
  margin-top: 2px;
  line-height: 1.4;
}

.umgmt-icon-btn {
  flex: 0 0 auto;
  padding: 6px 10px !important;
  min-width: 36px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.umgmt-sync-head {
  text-align: center;
  white-space: nowrap;
  min-width: 110px;
}

.umgmt-sync-cell {
  text-align: center;
  vertical-align: middle;
  min-width: 110px;
}

.umgmt-sync-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

.umgmt-roles-cell {
  vertical-align: top;
  min-width: 200px;
}

.umgmt-add-role {
  margin-top: 8px;
}

.umgmt-add-role-btn {
  padding: 6px 12px !important;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.umgmt-no-record {
  margin-top: 12px;
  text-align: center;
  color: #b91c1c;
}

.umgmt-whatsapp-msg {
  font-size: 14px;
  color: #374151;
  margin: 8px 0 4px;
  line-height: 1.5;
}

.umgmt-hidden,
.umgmt-drop {
  display: none;
}

#root_user_management label.error,
#add_user label.error,
#add_staff_group label.error,
#searchStaff label.error,
#addStaffForm label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_user_management input.error,
#add_user input.error,
#add_staff_group input.error,
#searchStaff input.error,
#addStaffForm input.error,
#addStaffForm select.error {
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: none;
}

#root_user_management .aCenter {
  text-align: center;
}

#root_user_management .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_user_management .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* ------------------------ Change Section (csec-*) ------------------------ */
.csec-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.csec-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.csec-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .csec-filters {
    grid-template-columns: 1fr 1fr;
    max-width: 640px;
  }
}

.csec-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.csec-form-item select,
.csec-form-item input[type="text"],
.csec-order-row select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.csec-form-item select:focus,
.csec-form-item input[type="text"]:focus,
.csec-order-row select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.csec-section {
  margin-top: 18px;
}

.csec-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.csec-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

.csec-section-title-center {
  text-align: center;
  margin-bottom: 12px;
}

.csec-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.csec-order-row select {
  min-width: 160px;
  width: auto;
}

.csec-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.csec-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.csec-move-form {
  margin-top: 16px;
}

.csec-student-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.csec-stud-photo,
#root_change_section img.csec-stud-photo,
#root_change_section img.staff_img_cls {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}

.csec-student-meta {
  min-width: 0;
}

.csec-stud-name {
  font-weight: 600;
  color: #111827;
}

.csec-stud-sub {
  font-size: 13px;
  color: #4b5563;
}

.csec-stud-sub label {
  font-weight: 600;
  margin-right: 4px;
}

#root_change_section label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_change_section input.error,
#root_change_section select.error {
  border: 1px solid orange;
}


/* ------------------------ Class Students (cstd-*) ------------------------ */
.cstd-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.cstd-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cstd-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: end;
}

@media (min-width: 768px) {
  .cstd-filters {
    grid-template-columns: 1fr 1fr 1fr auto;
  }
}

.cstd-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.cstd-form-item select,
.cstd-form-item input[type="text"],
.cstd-form-item input[type="file"],
.cstd-modal-form select,
.cstd-modal-form input[type="text"],
.cstd-modal-form input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.cstd-form-item select:focus,
.cstd-form-item input[type="text"]:focus,
.cstd-modal-form select:focus,
.cstd-modal-form input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.cstd-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .cstd-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cstd-span-2 {
  grid-column: 1 / -1;
}

.cstd-pin-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.cstd-pin-row input {
  flex: 1 1 160px;
}

.cstd-grow {
  flex: 1 1 220px;
}

.cstd-search-row {
  margin-bottom: 14px;
}

.cstd-subhead {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #05053d;
  margin: 8px 0 12px;
}

.cstd-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 6px;
}

.cstd-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  margin-bottom: 0;
}

.cstd-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.cstd-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.cstd-staff-results {
  margin-top: 12px;
  overflow-x: auto;
}

.cstd-modal-hidden {
  display: none !important;
}

.cstd-modal-md {
  width: 100%;
  max-width: 560px;
}

.cstd-modal-lg {
  width: 100%;
  max-width: 900px;
}

.cstd-modal-xl {
  width: 100%;
  max-width: 1100px;
}

.cstd-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.cstd-modal-form .cstd-form-item {
  margin-bottom: 4px;
}

.cstd-help-text {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 0;
}

#root_class_students .thed {
  width: 150px;
  min-width: 100px;
  max-width: 180px;
}

#root_class_students .inpBorder {
  border: 2px solid #61EF63;
}

#root_class_students .curPointer {
  cursor: pointer;
}

#root_class_students .noVal {
  color: rgb(92, 111, 128);
}

#root_class_students .seditIcon,
#root_class_students .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_class_students .mobileIconClass {
  width: 25px;
  height: 20px;
  padding: 3px 6px 1px;
}

#root_class_students .widthClass {
  width: 110%;
}

#root_class_students .showStudent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

#root_class_students .hideStudent {
  display: none;
}

#root_class_students .Class_studnet_Css_Imag {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

#root_class_students .btn-danger,
#root_class_students .modal-overlay .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_class_students .btn-danger:hover,
#root_class_students .modal-overlay .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_class_students label.error,
#addStudentMobileFormId label.error,
#addStudentEmailFormId label.error,
#addStudentLandLineFormId label.error,
#addStudentAddressFormId label.error,
#editStudAddressFormId label.error,
#addFatherInfoFormId label.error,
#addMotherInfoFormId label.error,
#addGuardianInfoFormId label.error,
#addNewStudentFormId label.error,
#searchStudent label.error,
#uploadStudPhotosFormId label.error,
#root_class_students .personVal label.error,
#root_class_students .subcasteForm label.error,
#root_class_students .fatherInfoVal label.error,
#root_class_students .motherInfoVal label.error,
#root_class_students .guardianInfoVal label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_class_students input.error,
#root_class_students select.error,
#addStudentMobileFormId input.error,
#addStudentEmailFormId input.error,
#addStudentLandLineFormId input.error,
#addStudentAddressFormId input.error,
#editStudAddressFormId input.error,
#addFatherInfoFormId input.error,
#addMotherInfoFormId input.error,
#addGuardianInfoFormId input.error,
#addNewStudentFormId input.error,
#addNewStudentFormId select.error,
#searchStudent input.error,
#uploadStudPhotosFormId input.error,
#root_class_students .personVal select.error,
#root_class_students .subcasteForm input.error {
  border: 1px solid orange;
}

#root_class_students .aCenter {
  text-align: center;
}

#root_class_students .alert-box {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
}

/* ------------------------ Ex Class Info (eci-*) ------------------------ */
.eci-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.eci-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eci-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  .eci-filters {
    grid-template-columns: 1fr 1fr;
  }
}

.eci-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.eci-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.eci-results {
  margin-top: 8px;
}

.eci-course-title,
#root_ex_class_info .exClsInfo_class_name {
  margin: 16px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

.eci-table-wrap {
  margin-bottom: 14px;
}

.eci-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

#root_ex_class_info .courseListWidthCls {
  width: 75%;
}

/* ------------------------ Mark Update Timing (mut-*) ------------------------ */
.mut-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.mut-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.mut-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mut-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.mut-modal-hidden {
  display: none !important;
}

.mut-modal-md {
  width: 100%;
  max-width: 520px;
}

.mut-form-item {
  margin-bottom: 14px;
}

.mut-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.mut-form-item select,
.mut-form-item input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.mut-form-item select:focus,
.mut-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.mut-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#root_mark_update_timing label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_mark_update_timing input.error,
#root_mark_update_timing select.error {
  border: 1px solid orange;
}

#root_mark_update_timing .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_mark_update_timing .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* ------------------------ Data Collection Template (dct-*) ------------------------ */
.dct-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.dct-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dct-col-sno {
  width: 70px;
}

.dct-col-download {
  width: 150px;
}

.dct-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.dct-download-btn:hover {
  text-decoration: none;
  color: #ffffff;
}

.dct-no-record {
  margin-top: 16px;
  text-align: center;
  color: #dc2626;
}

.dct-no-record h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#root_data_collection_template .aCenter {
  text-align: center;
}



/* ------------------------ Monthly Loss of Pay Report (mlop-*) ------------------------ */
.mlop-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.mlop-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mlop-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.mlop-month-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mlop-month-label {
  display: inline-block;
  min-width: 160px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
  padding: 8px 14px;
  background: #f3f4f6;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.mlop-nav-btn {
  white-space: nowrap;
}

.mlop-table-wrap {
  margin-top: 8px;
}

.mlop-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.mlop-staff-photo,
#root_monthly_loss_of_pay_report img.single-img,
#root_monthly_loss_of_pay_report img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

#root_monthly_loss_of_pay_report .aCenter {
  text-align: center;
}

@media (max-width: 640px) {
  .mlop-nav {
    flex-direction: column;
  }

  .mlop-month-label {
    min-width: 0;
    width: 100%;
  }
}

/* ------------------------ Home Page Images (hpi-*) ------------------------ */
.hpi-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.hpi-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hpi-upload-form {
  margin-bottom: 20px;
}

.hpi-file-input,
#root_home_page_images #display_form_table input[type="text"],
#root_home_page_images #display_form_table input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

#root_home_page_images #display_form_table input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.hpi-help {
  margin: 2px 0;
  font-size: 13px;
  color: #6b7280;
}

.hpi-list-wrap {
  margin-top: 8px;
}

.hpi-thumb,
#root_home_page_images img.hpi-thumb,
#root_home_page_images img.img-thumbnail {
  width: 80px;
  height: 60px;
  max-width: 80px;
  object-fit: cover;
  border-radius: 4px;
  padding: 0;
}

.hpi-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.hpi-back {
  margin-top: 18px;
  text-align: center;
}

.hpi-back a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.hpi-back a:hover {
  text-decoration: underline;
}

#root_home_page_images .aCenter,
#root_home_page_images .txtaCenter {
  text-align: center;
}

#root_home_page_images label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_home_page_images .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_home_page_images .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_home_page_images button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  #root_home_page_images #display_form_table td {
    display: block;
    width: 100%;
  }
}

/* ------------------------ Home Page Setup (hps-*) ------------------------ */
.hps-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.hps-page-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.hps-settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hps-settings-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hps-settings-row {
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
  }
}

.hps-label {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin: 0;
}

.hps-value {
  font-size: 14px;
  color: #111827;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-top: 0;
}

.hps-edit-link {
  text-decoration: none;
  display: inline-flex;
}

.hps-edit-link:hover {
  text-decoration: none;
}

#root_home_page_setup .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_home_page_setup .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_home_page_setup .homePageSetupCls {
  margin-top: 0;
}

#root_home_page_setup .settings {
  margin-bottom: 0;
}

#root_home_page_setup .below {
  margin-top: 0;
}

/* ------------------------ Attendance Access (aacc-*) ------------------------ */
.aacc-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.aacc-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.aacc-filters {
  margin-bottom: 16px;
}

.aacc-dept-form {
  max-width: 420px;
}

.aacc-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.aacc-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.aacc-staff-section {
  margin-top: 8px;
}

.aacc-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.aacc-modal-hidden {
  display: none !important;
}

.aacc-modal-lg {
  width: 100%;
  max-width: 720px;
}

.aacc-modal-form {
  margin-top: 8px;
}

#root_attendance_access label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_attendance_access select.error {
  border: 1px solid orange;
}

#root_attendance_access .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_attendance_access .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* ------------------------ Auto SMS Profile (asms-*) ------------------------ */
.asms-layout {
  min-height: calc(100vh - 80px);
}

.asms-sidebar {
  flex-shrink: 0;
}

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

.asms-menu li {
  margin: 0;
}

.asms-menu-link {
  width: 100%;
}

.asms-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

.asms-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.asms-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.asms-date-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.asms-date-form label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.asms-date-form input[type="date"] {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 180px;
}

.asms-date-form input[type="date"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.asms-actions {
  margin-bottom: 12px;
  min-height: 0;
}

.asms-restart-wrap {
  display: flex;
  justify-content: flex-end;
}

.asms-table-wrap {
  margin-top: 8px;
}

.asms-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  padding: 16px;
}

.asms-inline-edit .editIcon {
  color: #2563eb;
  margin-left: 6px;
  cursor: pointer;
}

.asms-inline-edit .hideInfo {
  display: none;
}

.asms-inline-form select {
  width: 100%;
  max-width: 180px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

#root_auto_sms_profile .asms-table th,
#root_auto_sms_profile .asms-table td {
  border: 1px solid #e5e7eb;
}

@media (max-width: 900px) {
  .asms-layout {
    flex-direction: column;
  }

  .asms-sidebar {
    width: 100%;
  }
}


/* ------------------------ Admin Soft Ticket Request (sftk-*) ------------------------ */
.sftk-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.sftk-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sftk-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 768px) {
  .sftk-filters {
    grid-template-columns: 1fr 1fr auto;
  }
}

.sftk-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.sftk-form-item select,
.sftk-form-item input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.sftk-form-item select:focus,
.sftk-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.sftk-create-wrap {
  display: flex;
  align-items: flex-end;
}

.sftk-table-wrap {
  margin-top: 8px;
}

.sftk-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

#root_admin_soft_ticket_request .tableHeadClass1 {
  font-weight: bold;
  text-align: center;
  background-color: #ECEFF7 !important;
}

#root_admin_soft_ticket_request .aCenter {
  text-align: center;
}

#root_admin_soft_ticket_request .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_admin_soft_ticket_request .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_admin_soft_ticket_request #ticketTblId a {
  color: #2563eb;
  font-weight: 600;
}

#root_admin_soft_ticket_request #ticketTblId a:hover {
  text-decoration: underline;
}

/* Create Tickets fancy button */
.sftk-fancy {
  background-color: transparent;
  border: 2px solid #05053d;
  border-radius: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 0.25em 2.5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.sftk-fancy::before {
  content: " ";
  width: 1.5625rem;
  height: 2px;
  background: #05053d;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transition: background 0.3s linear, width 0.3s linear;
}

.sftk-fancy-text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  text-decoration: none;
  color: #05053d;
}

.sftk-fancy-top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.sftk-fancy-bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.sftk-fancy-bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.sftk-fancy:hover {
  color: white;
  background: #05053d;
  text-decoration: none;
}

.sftk-fancy:hover::before {
  width: 0.9375rem;
  background: white;
}

.sftk-fancy:hover .sftk-fancy-text {
  color: white;
  padding-left: 1.5em;
}

.sftk-fancy:hover .sftk-fancy-top-key {
  left: -2px;
  width: 0;
}

.sftk-fancy:hover .sftk-fancy-bottom-key-1,
.sftk-fancy:hover .sftk-fancy-bottom-key-2 {
  right: 0;
  width: 0;
}

/* Modal */
.sftk-modal-hidden {
  display: none !important;
}

.sftk-modal-md {
  width: 100%;
  max-width: 520px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.sftk-modal-close {
  color: #fff;
  z-index: 2;
  top: 18px;
  right: 22px;
}

.sftk-ticket-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  background-color: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  position: relative;
}

.sftk-ticket-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 30px;
  color: #00bfff;
  margin: 0;
}

.sftk-ticket-title::before,
.sftk-ticket-title::after {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 50%;
  left: 0;
  background-color: #00bfff;
}

.sftk-ticket-title::after {
  animation: sftk-pulse 1s linear infinite;
}

.sftk-ticket-message {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 4px;
}

.sftk-field {
  position: relative;
  display: block;
}

.sftk-field .sftk-input {
  background-color: #333;
  color: #fff;
  width: 100%;
  padding: 20px 10px 8px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.4);
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.sftk-field textarea.sftk-input {
  min-height: 90px;
  resize: vertical;
}

.sftk-field .sftk-input + span {
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 10px;
  top: 0;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
  pointer-events: none;
}

.sftk-field .sftk-input:placeholder-shown + span {
  top: 12.5px;
  font-size: 0.9em;
}

.sftk-field .sftk-input:focus + span,
.sftk-field .sftk-input:valid + span {
  color: #00bfff;
  top: 0;
  font-size: 0.7em;
  font-weight: 600;
}

.sftk-field input[type="file"].sftk-input + span {
  top: 0;
  font-size: 0.7em;
  font-weight: 600;
  color: #00bfff;
}

.sftk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.sftk-btn-submit,
.sftk-btn-cancel {
  border: none;
  outline: none;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  flex: 1 1 140px;
  transition: background-color 0.3s ease;
}

.sftk-btn-submit {
  background-color: #00bfff;
}

.sftk-btn-submit:hover {
  background-color: rgba(0, 191, 255, 0.75);
}

.sftk-btn-cancel {
  background-color: #e61111;
}

.sftk-btn-cancel:hover {
  background-color: #b91c1c;
}

#root_admin_soft_ticket_request label.error,
#softTicketModal label.error {
  color: #fca5a5;
  font-size: 12px;
}

#root_admin_soft_ticket_request input.error,
#root_admin_soft_ticket_request textarea.error,
#softTicketModal input.error,
#softTicketModal textarea.error {
  border: 1px solid orange !important;
}

@keyframes sftk-pulse {
  from {
    transform: scale(0.9);
    opacity: 1;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .sftk-fancy {
    width: 100%;
    text-align: center;
  }

  .sftk-create-wrap {
    width: 100%;
  }
}


/* ------------------------ Administrators (adm-*) ------------------------ */
.adm-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.adm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.adm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.adm-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.adm-filter-form {
  min-width: 220px;
}

.adm-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .adm-filters {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.adm-form-item {
  margin-bottom: 14px;
}

.adm-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.adm-form-item select,
.adm-form-item input[type="text"],
.adm-form-item input[type="file"],
.adm-modal-form select,
.adm-modal-form input[type="text"],
.adm-modal-form input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.adm-form-item select:focus,
.adm-form-item input[type="text"]:focus,
.adm-modal-form select:focus,
.adm-modal-form input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.adm-modal-hidden {
  display: none !important;
}

.adm-modal-md {
  width: 100%;
  max-width: 520px;
}

.adm-modal-lg {
  width: 100%;
  max-width: 900px;
}

.adm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.adm-table-wrap {
  margin-top: 8px;
}

.adm-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.adm-photo {
  width: 40px;
  height: 40px;
  max-width: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.adm-nic-wrap {
  margin-bottom: 12px;
}

.adm-about-disp {
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  margin-bottom: 10px;
}

.adm-nic-panel {
  margin-bottom: 6px;
}

.adm-nic-instance {
  min-height: 120px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

#root_administrators .showList {
  display: block;
}

#root_administrators .hideList {
  display: none;
}

#root_administrators .curPointer {
  cursor: pointer;
}

#root_administrators .aCenter {
  text-align: center;
}

#root_administrators .inpBorder {
  border: 2px solid #61EF63;
}

#root_administrators label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_administrators input.error,
#root_administrators select.error {
  border: 1px solid orange;
}

#root_administrators .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_administrators .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* ------------------------ Hostel (hstl-*) ------------------------ */
.hstl-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.hstl-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.hstl-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hstl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hstl-table-wrap {
  margin-top: 8px;
}

.hstl-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.hstl-no-record h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

#root_hostel .aCenter,
#root_hostel .centerCls,
#root_hostel .serialNoCls {
  text-align: center;
}

#root_hostel .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_hostel .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

/* ------------------------ Question Bank (qbank-*) ------------------------ */
.qbank-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.qbank-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.qbank-section-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

.qbank-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .qbank-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .qbank-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.qbank-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.qbank-form-item select,
.qbank-form-item input[type="text"],
.qbank-form-item input[type="file"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.qbank-form-item select:focus,
.qbank-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.qbank-submit-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.qbank-label-spacer {
  visibility: hidden;
}

.qbank-table-wrap {
  margin-top: 8px;
}

.qbank-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.qbank-no-record h3,
.qbank-no-record .noRecordFoundCls {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #b91c1c;
}

.qbank-download-link {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 500;
}

.qbank-download-link:hover {
  color: #1d4ed8;
}

#root_question_bank .aCenter {
  text-align: center;
}

#root_question_bank .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_question_bank .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* ------------------------ Placements Info (plci-*) ------------------------ */
.plci-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.plci-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.plci-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.plci-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.plci-year-label {
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
  cursor: pointer;
  padding: 4px 8px;
}

.plci-year-select select {
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.plci-add-slot {
  margin-bottom: 10px;
}

.plci-table-wrap {
  margin-top: 8px;
}

.plci-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.plci-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.plci-modal-hidden {
  display: none !important;
}

.plci-modal-md {
  width: 100%;
  max-width: 560px;
}

.plci-form-item {
  margin-bottom: 14px;
}

.plci-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.plci-form-item input[type="text"],
.plci-form-item textarea,
.plci-modal-form input[type="text"],
.plci-modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.plci-form-item input[type="text"]:focus,
.plci-form-item textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.plci-time-input {
  margin-top: 8px;
}

.plci-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.plci-company-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.plci-company-logo {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.plci-status {
  white-space: nowrap;
}

.plci-edit-icon {
  color: rgb(54, 76, 236);
  cursor: pointer;
  margin-left: 6px;
}

.plci-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.plci-inline-edit textarea {
  width: 100%;
  min-width: 200px;
  max-width: 420px;
}

#root_placements_info .showInfo {
  display: block;
}

#root_placements_info .hideInfo {
  display: none;
}

#root_placements_info .curPointer {
  cursor: pointer;
}

#root_placements_info .aCenter {
  text-align: center;
}

#root_placements_info .inpBorder {
  border: 2px solid #61EF63;
}

#root_placements_info label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_placements_info input.error,
#root_placements_info textarea.error {
  border: 1px solid orange;
}

#root_placements_info .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_placements_info .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_placements_info .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_placements_info .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

/* ------------------------ Election List (elst-*) ------------------------ */
.elst-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.elst-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.elst-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.elst-header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.elst-ay-name {
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
  cursor: pointer;
}

.elst-ay-select select {
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.elst-table-wrap {
  margin-top: 8px;
}

.elst-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.elst-modal-hidden {
  display: none !important;
}

.elst-modal-md {
  width: 100%;
  max-width: 560px;
}

.elst-modal-form .form-group {
  margin-bottom: 14px;
}

.elst-modal-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.elst-modal-form input[type="text"],
.elst-modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.elst-modal-form textarea {
  min-height: 80px;
  resize: vertical;
}

.elst-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  min-height: 38px;
}

.elst-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
}

.elst-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

#root_election_list .aCenter {
  text-align: center;
}

#root_election_list .showList {
  display: inline;
}

#root_election_list .hideList {
  display: none;
}

#root_election_list .editIcon,
#root_election_list .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_election_list .inpBorder {
  border: 2px solid #61EF63;
}

#root_election_list .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_election_list .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_election_list .btn-danger,
#addElectionModal .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_election_list .btn-danger:hover,
#addElectionModal .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_election_list label.error,
#addElectionModal label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_election_list input.error,
#root_election_list textarea.error,
#addElectionModal input.error,
#addElectionModal textarea.error {
  border: 1px solid orange;
}

@media (max-width: 640px) {
  .elst-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .elst-ay-select select {
    width: 100%;
  }
}

/* ------------------------ Rules and Regulations (rreg-*) ------------------------ */
.rreg-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.rreg-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.rreg-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rreg-rules-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rreg-heading-table {
  margin-bottom: 0;
}

.rreg-heading-name {
  text-align: left;
  font-size: 15px;
  color: #05053d;
}

.rreg-sub-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
}

.rreg-rules-table {
  margin-top: 0;
}

.rreg-no-record,
.rreg-no-rules {
  margin-top: 12px;
  text-align: center;
  color: #b91c1c;
  font-size: 15px;
  font-weight: 600;
}

.rreg-view-heading {
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
  margin: 12px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.rreg-view-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rreg-view-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rreg-view-no {
  flex: 0 0 28px;
  font-weight: 600;
  color: #374151;
}

.rreg-view-desc {
  flex: 1;
  min-width: 0;
  color: #1f2937;
  line-height: 1.5;
}

.rreg-modal-hidden {
  display: none !important;
}

.rreg-modal-md {
  width: 100%;
  max-width: 560px;
}

.rreg-form-item {
  margin-bottom: 14px;
}

.rreg-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.rreg-form-item textarea,
.rreg-modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
  resize: vertical;
}

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

.rreg-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#root_rules_and_regulations .aCenter {
  text-align: center;
}

#root_rules_and_regulations .rar_rulesDetListCls {
  width: 56px;
  white-space: nowrap;
}

#root_rules_and_regulations label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_rules_and_regulations textarea.error {
  border: 1px solid orange;
}

#root_rules_and_regulations .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_rules_and_regulations .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_rules_and_regulations .btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_rules_and_regulations .btn-primary:hover {
  background-color: #4338ca;
  color: #ffffff;
}

#root_rules_and_regulations .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------ Student Assignment (stas-*) ------------------------ */
.stas-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.stas-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stas-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

@media (min-width: 640px) {
  .stas-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .stas-filters {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.stas-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.stas-form-item select,
.stas-modal-form select,
.stas-modal-form input[type="text"],
.stas-modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
  box-sizing: border-box;
}

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

.stas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.stas-toolbar-item {
  display: inline-flex;
  align-items: center;
}

.stas-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.stas-modal-hidden {
  display: none !important;
}

.stas-modal-md {
  width: 100%;
  max-width: 560px;
}

.stas-modal-form .form-group {
  margin-bottom: 14px;
}

.stas-modal-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.stas-modal-form textarea {
  min-height: 80px;
  resize: vertical;
}

.stas-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  font-size: 28px;
}

#root_student_assignment .aCenter {
  text-align: center;
}

#root_student_assignment .showSetting {
  display: inline;
}

#root_student_assignment .hideSetting {
  display: none;
}

#root_student_assignment .editIcon,
#root_student_assignment .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_student_assignment .addIcon,
#root_student_assignment .reportIconBar,
#root_student_assignment .viewIcon,
#root_student_assignment .deleteIcon,
#root_student_assignment .saveIcon,
#root_student_assignment .closeIcon,
#addSchActModalId .saveIcon,
#addSchActModalId .closeIcon {
  cursor: pointer;
}

#root_student_assignment .addIcon {
  color: #16a34a;
  font-size: 22px;
}

#root_student_assignment .reportIconBar {
  color: #0284c7;
  font-size: 22px;
}

#root_student_assignment .viewIcon {
  color: #0284c7;
  font-size: 18px;
}

#root_student_assignment .deleteIcon {
  color: #dc2626;
  font-size: 18px;
}

#addSchActModalId .saveIcon {
  color: #16a34a;
}

#addSchActModalId .closeIcon {
  color: #dc2626;
}

#root_student_assignment .inpBorder {
  border: 2px solid #61EF63;
}

#root_student_assignment label.error,
#addSchActModalId label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_student_assignment input.error,
#root_student_assignment textarea.error,
#root_student_assignment select.error,
#addSchActModalId input.error,
#addSchActModalId textarea.error,
#addSchActModalId select.error {
  border: 1px solid orange;
}

/* ------------------------ Referral Service (rfsv-*) ------------------------ */
.rfsv-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.rfsv-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.rfsv-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rfsv-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.rfsv-table-wrap {
  margin-top: 8px;
}

.rfsv-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.rfsv-modal-hidden {
  display: none !important;
}

.rfsv-modal-md {
  width: 100%;
  max-width: 560px;
}

.rfsv-modal-lg {
  width: 100%;
  max-width: 900px;
}

.rfsv-modal-xl {
  width: 100%;
  max-width: 1100px;
}

.rfsv-form-item {
  margin-bottom: 14px;
}

.rfsv-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.rfsv-form-item select,
.rfsv-form-item input[type="text"],
.rfsv-form-item textarea,
.rfsv-modal-form select,
.rfsv-modal-form input[type="text"],
.rfsv-modal-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.rfsv-form-item select:focus,
.rfsv-form-item input[type="text"]:focus,
.rfsv-form-item textarea:focus,
.rfsv-modal-form select:focus,
.rfsv-modal-form input[type="text"]:focus,
.rfsv-modal-form textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.rfsv-form-item-grow {
  flex: 1 1 240px;
}

.rfsv-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.rfsv-search-btn-wrap {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
}

.rfsv-pay-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rfsv-pay-grid .rfsv-form-item {
  flex: 1 1 160px;
}

.rfsv-need-details {
  margin-top: 8px;
}

.rfsv-desc {
  min-height: 50px;
  resize: vertical;
}

.rfsv-staff-list {
  margin-top: 12px;
}

.rfsv-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.rfsv-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.rfsv-claim-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rfsv-status-text {
  min-width: 70px;
}

.rfsv-action-btn {
  margin-left: 3px;
  padding: 2px 6px;
  font-size: 11px;
}

.rfsv-btn-group {
  display: flex;
  gap: 4px;
}

#root_refferral_service .aCenter {
  text-align: center;
}

#root_refferral_service .showList {
  display: inline;
}

#root_refferral_service .hideList {
  display: none;
}

#root_refferral_service .editIcon,
#root_refferral_service .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_refferral_service .inpBorder {
  border: 2px solid #61EF63;
}

#root_refferral_service .btn-info,
#addStudentFB .btn-info,
#addRefByStud .btn-info,
#addInchargeModal .btn-info,
#selectedfeesModal .btn-info,
#feesPaidTransModalId .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_refferral_service .btn-info:hover,
#addStudentFB .btn-info:hover,
#addRefByStud .btn-info:hover,
#addInchargeModal .btn-info:hover,
#selectedfeesModal .btn-info:hover,
#feesPaidTransModalId .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_refferral_service .btn-danger,
#addStudentFB .btn-danger,
#addRefByStud .btn-danger,
#addInchargeModal .btn-danger,
#selectedfeesModal .btn-danger,
#feesPaidTransModalId .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_refferral_service .btn-danger:hover,
#addStudentFB .btn-danger:hover,
#addRefByStud .btn-danger:hover,
#addInchargeModal .btn-danger:hover,
#selectedfeesModal .btn-danger:hover,
#feesPaidTransModalId .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_refferral_service label.error,
#addStudentFB label.error,
#addRefByStud label.error,
#addInchargeModal label.error,
#selectedfeesModal label.error,
#feesPaidTransModalId label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_refferral_service input.error,
#root_refferral_service textarea.error,
#root_refferral_service select.error,
#addStudentFB input.error,
#addStudentFB textarea.error,
#addStudentFB select.error,
#addRefByStud input.error,
#addRefByStud textarea.error,
#addRefByStud select.error,
#addInchargeModal input.error,
#addInchargeModal textarea.error,
#addInchargeModal select.error,
#selectedfeesModal input.error,
#selectedfeesModal textarea.error,
#selectedfeesModal select.error {
  border: 1px solid orange;
}

@media (max-width: 640px) {
  .rfsv-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .rfsv-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .rfsv-search-btn-wrap {
    width: 100%;
  }

  .rfsv-search-btn-wrap .btn {
    width: 100%;
  }
}

/* ------------------------ Update OD Attendance (uoda-*) ------------------------ */
.uoda-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.uoda-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.uoda-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 8px;
  align-items: end;
}

@media (min-width: 640px) {
  .uoda-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .uoda-filters {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr auto;
  }
}

.uoda-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.uoda-form-item select,
.uoda-form-item input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
  box-sizing: border-box;
}

.uoda-form-item select:focus,
.uoda-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.uoda-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.uoda-student-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.uoda-student-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .uoda-student-meta {
    grid-template-columns: 1fr 1fr;
  }
}

.uoda-meta-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 2px;
}

.uoda-meta-row span {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.uoda-table-wrap {
  margin-top: 8px;
}

.uoda-od-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.uoda-modal-hidden {
  display: none !important;
}

.uoda-modal-lg {
  width: 100%;
  max-width: 900px;
}

.uoda-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.uoda-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.uoda-student-photo,
#root_update_od_attendance img.single-img,
#SearchedStudent img.single-img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
}

#root_update_od_attendance .odText,
#root_update_od_attendance .centerCls {
  text-align: center;
}

.uoda-period-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
  white-space: nowrap;
}

.uoda-bootbox.bootbox.modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.uoda-bootbox .modal-dialog {
  width: 100%;
  max-width: 400px;
  margin: 0;
}

.uoda-bootbox .modal-content {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  padding: 20px 24px 16px;
}

.uoda-bootbox .modal-body {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  padding: 8px 0 16px;
}

.uoda-bootbox .modal-footer {
  display: flex;
  justify-content: center;
  border: 0;
  padding: 0;
}

.uoda-bootbox .bootbox-close-button,
.uoda-bootbox .close {
  position: absolute;
  top: 8px;
  right: 12px;
}

.uoda-bootbox-backdrop.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10040;
}

#root_update_od_attendance .btn-danger,
#SearchedStudent .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_update_od_attendance .btn-danger:hover,
#SearchedStudent .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_update_od_attendance label.error,
#SearchedStudent label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_update_od_attendance input.error,
#root_update_od_attendance select.error {
  border: 1px solid orange;
}

/* ------------------------ Update Attendance (uatt-*) ------------------------ */
.uatt-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.uatt-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.uatt-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .uatt-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.uatt-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.uatt-form-item input[type="text"],
.uatt-form-item select,
.uatt-form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.uatt-form-item input[type="text"]:focus,
.uatt-form-item select:focus,
.uatt-form-item textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.uatt-absentee-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .uatt-absentee-row {
    grid-template-columns: 1fr auto;
  }
}

.uatt-absentee-action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.uatt-results {
  margin-top: 8px;
}

.uatt-dept-name {
  margin: 12px 0 8px;
  font-size: 15px;
  color: #05053d;
}

.uatt-reg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.uatt-reg-btn {
  margin: 0 !important;
  display: inline-block;
}

.uatt-holidays {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}

.uatt-no-absentees {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.uatt-copy-wrap {
  margin-top: 14px;
}

.uatt-modal-hidden {
  display: none !important;
}

.uatt-modal-md {
  width: 100%;
  max-width: 520px;
}

.uatt-modal-lg {
  width: 100%;
  max-width: 800px;
}

.uatt-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.uatt-unadded-wrap {
  margin-top: 8px;
}

#root_update_attendance .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_update_attendance .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_update_attendance .btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_update_attendance .btn-primary:hover {
  background-color: #4338ca;
  color: #ffffff;
}

#root_update_attendance .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_update_attendance .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

/* ------------------------ Long Absentees (labs-*) ------------------------ */
.labs-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.labs-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.labs-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .labs-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .labs-filters {
    grid-template-columns: 1fr 1fr 1fr auto;
  }
}

.labs-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.labs-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.labs-btn-wrap {
  display: flex;
  align-items: flex-end;
}

.labs-table-wrap {
  margin-top: 8px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.labs-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

#root_long_absentees .centerCls {
  text-align: center;
}

#root_long_absentees .showInfo {
  display: inline;
}

#root_long_absentees .hideInfo {
  display: none;
}

#root_long_absentees .editIcon,
#root_long_absentees .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_long_absentees .inpBorder {
  border: 2px solid #61EF63;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* ------------------------ Evening Absentees (eabs-*) ------------------------ */
.eabs-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.eabs-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eabs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eabs-standard-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

@media (min-width: 768px) {
  .eabs-standard-block {
    grid-template-columns: 120px 1fr;
    align-items: start;
  }
}

.eabs-standard-label label {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: #05053d;
  background: #e5e7eb;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0;
}

.eabs-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eabs-section-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .eabs-section-block {
    grid-template-columns: 100px 1fr;
    align-items: start;
  }
}

.eabs-section-label label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  padding-top: 6px;
}

.eabs-table-wrap {
  overflow-x: auto;
}

.eabs-no-record {
  margin: 24px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

#root_eve_absentees .aCenter {
  text-align: center;
}

#root_eve_absentees .norecFount {
  text-align: center;
  color: #b91c1c;
}

/* ------------------------ Attendance Un Taken List (autl-*) ------------------------ */
.autl-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.autl-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.autl-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
  max-width: 640px;
}

@media (min-width: 640px) {
  .autl-filters {
    grid-template-columns: 1fr 1fr;
  }
}

.autl-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.autl-form-item input,
.autl-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.autl-table-wrap {
  margin-top: 8px;
}

.autl-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

#root_attendance_un_taken_list .college-table th,
#root_attendance_un_taken_list .college-table td {
  text-align: center;
  vertical-align: middle;
}

/* ------------------------ Department Mirror (dmir-*) ------------------------ */
.dmir-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.dmir-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dmir-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
  max-width: 720px;
}

@media (min-width: 640px) {
  .dmir-filters {
    grid-template-columns: 1fr 1fr;
  }
}

.dmir-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.dmir-form-item input,
.dmir-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.dmir-meta {
  margin: 8px 0 16px;
  font-size: 14px;
  color: #374151;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.dmir-meta-value {
  font-weight: 700;
  color: #05053d;
  margin: 0;
}

.dmir-meta-sep {
  display: none;
}

.dmir-no-record {
  margin: 12px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.dmir-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dmir-dept-title {
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  margin-bottom: 8px;
}

.dmir-table-wrap {
  overflow-x: auto;
}

#root_department_mirror .aCenter {
  text-align: center;
}

#root_department_mirror .tableLeftContent {
  text-align: left;
}

#root_department_mirror .noRecordFoundCls {
  color: #b91c1c;
  text-align: center;
}

#root_department_mirror .column_nameCls {
  text-align: center;
  white-space: nowrap;
}

#root_department_mirror .deptmirrorCls {
  min-width: 140px;
  text-align: left;
}

/* ------------------------ Staff Leave List (sll-*) ------------------------ */
.sll-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.sll-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.sll-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sll-date-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 20px;
}

.sll-date-current {
  min-width: 140px;
  text-align: center;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  font-weight: 600;
  color: #111827;
}

.sll-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.sll-no-record {
  margin: 24px 0;
  text-align: center;
  color: #b91c1c;
}

.sll-no-record h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #b91c1c;
}

.sll-modal-hidden {
  display: none !important;
}

.sll-modal-md {
  width: 100%;
  max-width: 560px;
}

.sll-modal-lg {
  width: 100%;
  max-width: 900px;
}

.sll-modal-form {
  margin-top: 8px;
}

.sll-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sll-search-input {
  flex: 1 1 200px;
  min-width: 160px;
}

.sll-search-action {
  flex: 0 0 auto;
  padding-top: 0;
}

.sll-form-item {
  margin-bottom: 10px;
}

.sll-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.sll-form-item input[type="text"],
.sll-form-item select,
.sll-modal-form input[type="text"],
.sll-modal-form select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.sll-half-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sll-half-day label {
  margin-bottom: 0;
}

.sll-half-day input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.sll-half-day select {
  flex: 1 1 140px;
  min-width: 120px;
}

.sll-leave-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .sll-leave-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

.sll-balance-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 10px 0;
}

.sll-staff-list {
  margin-top: 12px;
  text-align: center;
}

.sll-no-result {
  margin: 12px 0;
  text-align: center;
}

.sll-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.sll-staff-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 8px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.sll-profile-name {
  font-weight: 700;
  color: #111827;
  min-width: 120px;
}

.sll-profile-meta {
  color: #4b5563;
  font-size: 14px;
}

.sll-photo,
#root_staff_leave_list img.sll-photo,
#root_staff_leave_list img.single-img,
#searchStaffModal img.sll-photo,
#select_user img.sll-photo {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

#root_staff_leave_list .aCenter,
#searchStaffModal .aCenter,
#select_user .aCenter {
  text-align: center;
}

#root_staff_leave_list label.error,
#search_staff_form label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_staff_leave_list input.error,
#search_staff_form input.error {
  border: 1px solid orange;
}

#root_staff_leave_list .btn-danger,
#searchStaffModal .btn-danger,
#select_user .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_staff_leave_list .btn-danger:hover,
#searchStaffModal .btn-danger:hover,
#select_user .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_staff_leave_list .college-table {
  min-width: 720px;
  table-layout: auto;
}

/* ------------------------ Attendance Report For Few Days (arfd-*) ------------------------ */
.arfd-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.arfd-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.arfd-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .arfd-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .arfd-filters {
    grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr;
  }
}

.arfd-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.arfd-form-item input,
.arfd-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.arfd-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}

.arfd-report-table {
  min-width: 720px;
  border-collapse: collapse;
}

.arfd-excel-wrap {
  margin-top: 16px;
  text-align: center;
}

.arfd-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.arfd-holiday {
  margin: 12px 0;
  text-align: center;
  color: #92400e;
  font-weight: 600;
}

.arfd-dept-header {
  text-align: left !important;
  background-color: #d9edf7 !important;
  border: 1px solid #000 !important;
}

.arfd-class-header {
  text-align: left !important;
  background-color: #dff0d8 !important;
  border: 1px solid #000 !important;
}

.arfd-student-row,
.arfd-cell {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #000;
}

.arfd-student-img {
  max-width: 56px;
  max-height: 56px;
  object-fit: cover;
}

.arfd-student-meta {
  text-align: left;
  padding: 4px 8px;
}

#root_attendance_report_for_few_days .present {
  background-color: #cce5ff;
  color: #004085;
  font-weight: bold;
  border-radius: 4px;
  padding: 5px 10px;
  display: inline-block;
}

#root_attendance_report_for_few_days .absent {
  background-color: #ffd6d6;
  color: #721c24;
  font-weight: bold;
  border-radius: 4px;
  padding: 5px 10px;
  display: inline-block;
}

#root_attendance_report_for_few_days #tes {
  padding: 10px;
  text-align: center;
  border: 1px solid black;
  width: 500px;
}

#root_attendance_report_for_few_days #tes1 {
  padding: 10px;
  text-align: center;
  border: 1px solid black;
  width: 26px;
}

#root_attendance_report_for_few_days #tes2 {
  padding: 10px;
  text-align: center;
  border: 1px solid black;
  width: 474px;
}

#root_attendance_report_for_few_days .aCenter {
  text-align: center;
}

/* ------------------------ Attendance Settings (aset-*) ------------------------ */
.aset-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.aset-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.aset-display-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.aset-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

@media (min-width: 768px) {
  .aset-row {
    grid-template-columns: minmax(220px, 42%) 1fr;
    gap: 16px;
    align-items: center;
  }
}

.aset-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.aset-value {
  font-size: 14px;
  color: #111827;
}

.aset-edit-form {
  max-width: 720px;
}

.aset-form-item {
  margin-bottom: 16px;
}

.aset-form-item > label:first-child {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.aset-form-item input[type="text"] {
  width: 100%;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.aset-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.aset-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.aset-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.aset-actions {
  margin-top: 20px;
}

.aset-actions.aCenter {
  text-align: center;
}

#root_attendance_settings label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_attendance_settings label.error.studentDis {
  display: none;
}

#root_attendance_settings input.error {
  border: 1px solid orange;
}

#root_attendance_settings .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_attendance_settings .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

/* ------------------------ College Mirror (cmir-*) ------------------------ */
.cmir-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.cmir-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmir-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
  max-width: 520px;
  align-items: end;
}

@media (min-width: 640px) {
  .cmir-filters {
    grid-template-columns: 1fr auto;
  }
}

.cmir-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.cmir-form-item input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.cmir-btn-wrap {
  display: flex;
  align-items: flex-end;
}

.cmir-meta {
  margin: 8px 0 16px;
  font-size: 14px;
  color: #374151;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.cmir-meta-value {
  font-weight: 700;
  color: #05053d;
  margin: 0;
}

.cmir-meta-sep {
  display: none;
}

.cmir-no-record {
  margin: 12px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.cmir-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cmir-dept-title {
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  margin-bottom: 8px;
}

.cmir-table-wrap {
  overflow-x: auto;
}

#root_college_mirror .aCenter {
  text-align: center;
}

#root_college_mirror .tableLeftContent {
  text-align: left;
}

#root_college_mirror .noRecordFoundCls {
  color: #b91c1c;
  text-align: center;
}

#root_college_mirror .column_nameCls {
  text-align: center;
  white-space: nowrap;
}

#root_college_mirror .deptmirrorCls {
  min-width: 140px;
  text-align: left;
}

/* ------------------------ Attendance Fullday Dept (afdd-*) ------------------------ */
.afdd-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.afdd-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.afdd-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .afdd-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .afdd-filters {
    grid-template-columns: 1.2fr 1.2fr 1fr;
  }
}

.afdd-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.afdd-form-item input,
.afdd-form-item select,
.afdd-form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.afdd-absentee-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 768px) {
  .afdd-absentee-row {
    grid-template-columns: 1fr auto;
  }
}

.afdd-btn-wrap {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.afdd-results {
  margin-top: 8px;
}

.afdd-table-wrap {
  overflow-x: auto;
}

.afdd-holiday {
  margin: 16px 0;
  text-align: center;
  color: #92400e;
  font-weight: 600;
  font-size: 16px;
}

.afdd-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

#root_attendance_fullday_dept .aCenter {
  text-align: center;
}

#root_attendance_fullday_dept .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_attendance_fullday_dept .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_attendance_fullday_dept label.error {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

/* ------------------------ Staff Attendance (satt-*) ------------------------ */
.satt-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.satt-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.satt-date-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.satt-date-picker input {
  width: 150px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  text-align: center;
}

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

.satt-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}

.satt-name-th {
  min-width: 220px;
}

.satt-th-label {
  display: inline-block;
  margin-right: 12px;
  font-weight: 700;
}

.satt-search-wrap {
  display: inline-flex;
  position: relative;
  align-items: center;
  vertical-align: middle;
}

.satt-search-wrap input {
  width: 200px;
  padding: 6px 28px 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.satt-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #B7A9A9;
  font-size: 14px;
}

.satt-staff-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.satt-staff-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.satt-staff-info {
  min-width: 0;
}

.satt-staff-name {
  font-weight: 600;
  color: #111827;
}

.satt-staff-meta {
  font-size: 13px;
  color: #6b7280;
}

.satt-month-link a {
  color: #2563eb;
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
}

.satt-month-link a:hover {
  color: #1d4ed8;
}

#root_staff_attendance .aCenter {
  text-align: center;
}

#root_staff_attendance .tblTDWidthCls {
  width: 90px;
  white-space: nowrap;
}

#root_staff_attendance .btn.present {
  background-color: #16a34a;
  color: #ffffff;
  min-width: 42px;
}

#root_staff_attendance .btn.absent {
  background-color: #dc2626;
  color: #ffffff;
  min-width: 42px;
}

#root_staff_attendance .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------ Attendance Fullday College (afdc-*) ------------------------ */
.afdc-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.afdc-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.afdc-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
  max-width: 720px;
}

@media (min-width: 640px) {
  .afdc-filters {
    grid-template-columns: 1fr auto;
  }
}

.afdc-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.afdc-form-item input,
.afdc-form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.afdc-sms-wrap {
  display: flex;
  align-items: flex-end;
}

.afdc-absentee-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 768px) {
  .afdc-absentee-row {
    grid-template-columns: 1fr auto;
  }
}

.afdc-btn-wrap {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.afdc-results {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

.afdc-class-block {
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 12px;
  background: #fafafa;
}

.afdc-class-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 10px;
}

.afdc-class-heading label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #05053d;
}

.afdc-section-label {
  font-weight: 600 !important;
  color: #374151 !important;
}

.afdc-table-wrap {
  overflow-x: auto;
}

.afdc-holiday {
  margin: 16px 0;
  text-align: center;
  color: #92400e;
  font-weight: 600;
  font-size: 16px;
}

.afdc-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.afdc-hidden-stub {
  display: none;
}

#root_attendance_fullday_college .aCenter {
  text-align: center;
}

#root_attendance_fullday_college .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_attendance_fullday_college .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_attendance_fullday_college label.error {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

/* ------------------------ Staff List (stls-*) ------------------------ */
.stls-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.stls-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.stls-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stls-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.stls-order-wrap select {
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

.stls-order-wrap select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.stls-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stls-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}

.stls-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.stls-staff-thumb-cell {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  vertical-align: middle;
}

.stls-staff-thumb {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

.stls-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.stls-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

#root_staff_list .aCenter {
  text-align: center;
}

#root_staff_list .staffNameCls {
  color: #05053d;
}

#root_staff_list .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_staff_list .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_staff_list .btn-warning {
  background-color: #d97706;
  color: #ffffff;
}

#root_staff_list .btn-warning:hover {
  background-color: #b45309;
  color: #ffffff;
}

#root_staff_list .btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_staff_list .btn-primary:hover {
  background-color: #4338ca;
  color: #ffffff;
}

/* ------------------------ Shared modern jQuery UI Datepicker (cn-datepicker) ------------------------ */
#ui-datepicker-div {
  z-index: 10050 !important;
}

#ui-datepicker-div.ui-datepicker,
.ui-datepicker.cn-datepicker,
#ui-datepicker-div {
  width: 288px !important;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(5, 5, 61, 0.18) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #111827 !important;
  position: absolute !important;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 6px 4px 12px;
  background: linear-gradient(90deg, #05053d, #1a1a7a);
  border-radius: 10px;
  color: #ffffff;
  margin-bottom: 8px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  text-indent: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.ui-datepicker .ui-datepicker-prev {
  left: 8px;
}

.ui-datepicker .ui-datepicker-next {
  right: 8px;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.22);
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none !important;
}

.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 28px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.ui-datepicker .ui-datepicker-prev:before {
  content: "?";
}

.ui-datepicker .ui-datepicker-next:before {
  content: "?";
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 36px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 13px;
  font-weight: 600;
  margin: 0 2px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 0;
  background: #ffffff;
  color: #05053d;
  outline: none;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: auto;
  min-width: 72px;
}

.ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
}

.ui-datepicker th {
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 2px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 8px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ui-datepicker td a:hover {
  background: #eef2ff;
  color: #05053d;
}

.ui-datepicker .ui-datepicker-today a {
  background: #e0e7ff;
  color: #05053d;
}

.ui-datepicker .ui-datepicker-current-day a,
.ui-datepicker .ui-state-active {
  background: #05053d !important;
  color: #ffffff !important;
}

.ui-datepicker .ui-state-disabled span {
  color: #d1d5db;
  cursor: default;
}

.ui-datepicker .ui-datepicker-other-month a {
  color: #9ca3af;
}

.ui-datepicker .ui-helper-hidden-accessible {
  display: none !important;
}

/* Attendance Fullday Dept date field */
.afdd-date-wrap {
  position: relative;
}

.afdd-date-input {
  padding-right: 40px !important;
  cursor: pointer;
  background: #fff;
}

.afdd-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #05053d;
  cursor: pointer;
  font-size: 15px;
  pointer-events: auto;
}

/* ------------------------ Staff Groups (sgrp-*) ------------------------ */
.sgrp-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.sgrp-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sgrp-page-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sgrp-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sgrp-header-actions,
.sgrp-add-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sgrp-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}

.sgrp-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.sgrp-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.sgrp-hidden {
  display: none !important;
}

.sgrp-modal-hidden {
  display: none !important;
}

.sgrp-modal-md {
  width: 100%;
  max-width: 520px;
}

.sgrp-form-item {
  margin-bottom: 14px;
}

.sgrp-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.sgrp-form-item input[type="text"],
.sgrp-form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.sgrp-form-item input[type="text"]:focus,
.sgrp-form-item textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.sgrp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}

.sgrp-inline-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sgrp-inline-edit input[type="text"] {
  flex: 1;
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 6px;
}

#root_staff_groups .showList {
  display: block;
}

#root_staff_groups .hideList {
  display: none;
}

#root_staff_groups .editIcon {
  color: #2563eb;
  margin-left: 6px;
  cursor: pointer;
}

#root_staff_groups .aCenter {
  text-align: center;
}

#root_staff_groups .inpBorder {
  border: 2px solid #61EF63;
}

#root_staff_groups label.error {
  color: #dc2626;
  font-size: 12px;
}

#root_staff_groups input.error,
#root_staff_groups textarea.error {
  border: 1px solid orange;
}

#root_staff_groups .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_staff_groups .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_staff_groups .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_staff_groups .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

/* Update Attendance date field */
.uatt-date-wrap {
  position: relative;
}

.uatt-date-input {
  padding-right: 40px !important;
  cursor: pointer;
  background: #fff;
}

.uatt-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #05053d;
  cursor: pointer;
  font-size: 15px;
}

/* ------------------------ Add Staff (astf-*) ------------------------ */
.astf-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.astf-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.astf-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.astf-search-row input,
.astf-search-row .astf-form-control {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.astf-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.astf-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
}

@media (min-width: 768px) {
  .astf-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.astf-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.astf-form-item input[type="text"],
.astf-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.astf-form-item input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

.astf-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}

.astf-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
  cursor: pointer;
}

.astf-radio-group input[type="radio"] {
  width: auto;
  margin: 0;
}

.astf-field-error,
#root_add_staff .addStaffColorCls {
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
}

#root_add_staff label.error,
#root_add_staff .error_label {
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

#root_add_staff input.error,
#root_add_staff select.error,
#staffForm input.error,
#staffForm select.error {
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: none;
}

.astf-form-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.astf-modal-hidden {
  display: none !important;
}

#root_add_staff .btn-success {
  background-color: #16a34a;
  color: #ffffff;
}

#root_add_staff .btn-success:hover {
  background-color: #15803d;
  color: #ffffff;
}

#root_add_staff .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_add_staff .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

/* ------------------------ Search Staff By Name (ssfn-*) ------------------------ */
.ssfn-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.ssfn-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ssfn-search-form {
  margin-bottom: 18px;
}

.ssfn-search-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  .ssfn-search-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .ssfn-search-row {
    grid-template-columns: 1.2fr 1.2fr auto;
  }
}

.ssfn-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.ssfn-form-item input,
.ssfn-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.ssfn-btn-wrap {
  display: flex;
  align-items: flex-end;
}

.ssfn-results {
  margin-top: 8px;
}

.ssfn-table-wrap {
  overflow-x: auto;
}

.ssfn-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
}

.ssfn-no-record .error_message {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #b91c1c;
}

.ssfn-staff-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

#root_search_staff_by_name .aCenter {
  text-align: center;
}

#root_search_staff_by_name #searchTable a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

#root_search_staff_by_name #searchTable a:hover {
  text-decoration: underline;
}

#root_search_staff_by_name label.error {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

/* ------------------------ Photo Upload For All Staff (pufs-*) ------------------------ */
.pufs-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.pufs-page-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pufs-page-subtitle {
  margin: 0 0 18px;
  font-size: 14px;
  color: #6b7280;
}

.pufs-upload-block {
  margin-top: 4px;
}

.pufs-upload-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.pufs-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.pufs-file-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.pufs-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#staffPhotosFormId label.error {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

#staffPhotosFormId input.error,
#staffPhotosFormId select.error {
  border: 1px solid orange;
}

/* ------------------------ Add Staff From Excel (asfe-*) ------------------------ */
.asfe-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.asfe-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.asfe-form-item {
  margin-bottom: 16px;
}

.asfe-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.asfe-file-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.asfe-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.asfe-drop {
  min-height: 0;
}

.asfe-hidden {
  display: none !important;
}

.asfe-modal-hidden {
  display: none !important;
}

.asfe-modal-lg {
  width: 100%;
  max-width: 800px;
}

.asfe-modal-summary {
  margin-bottom: 12px;
  line-height: 1.7;
}

.asfe-modal-label {
  display: block;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 8px;
}

.asfe-modal-note {
  margin-top: 12px;
  color: #b91c1c;
  font-weight: 600;
}

.asfe-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

#root_add_staff_from_excel .aCenter {
  text-align: center;
}

#root_add_staff_from_excel .btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_add_staff_from_excel .btn-primary:hover {
  background-color: #4338ca;
  color: #ffffff;
}

/* ------------------------ New Joining / Resign Staff (njrs-*) ------------------------ */
.njrs-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.njrs-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.njrs-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.njrs-section-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  text-align: center;
}

.njrs-date-section {
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.njrs-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .njrs-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .njrs-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
  }
}

.njrs-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.njrs-form-item input[type="text"],
.njrs-form-item select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.njrs-form-item input[type="text"]:focus,
.njrs-form-item select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.njrs-label-spacer {
  visibility: hidden;
}

.njrs-results {
  margin-top: 8px;
}

.njrs-customize-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.njrs-table-wrap {
  overflow-x: auto;
}

.njrs-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

#root_new_joining_and_resign_staff .njrs-photo-cell {
  width: 64px;
  min-width: 64px;
  text-align: center;
  vertical-align: middle;
  padding-left: 8px;
  padding-right: 8px;
}

#root_new_joining_and_resign_staff img.njrs-staff-photo,
#root_new_joining_and_resign_staff img.njrs-staff-photo.single-img {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px;
  max-width: 56px !important;
  max-height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
}

.njrs-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.njrs-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

#root_new_joining_and_resign_staff .aCenter {
  text-align: center;
}

#root_new_joining_and_resign_staff .btn-warning {
  background-color: #d97706;
  color: #ffffff;
}

#root_new_joining_and_resign_staff .btn-warning:hover {
  background-color: #b45309;
  color: #ffffff;
}

#root_new_joining_and_resign_staff .btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_new_joining_and_resign_staff .btn-primary:hover {
  background-color: #4338ca;
  color: #ffffff;
}

/* ------------------------ Leave Request Response (lrr-*) ------------------------ */
.lrr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.lrr-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.lrr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lrr-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

.lrr-no-record,
.lrr-no-result {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-weight: 600;
}

.lrr-modal-hidden {
  display: none !important;
}

.lrr-modal-md {
  max-width: 640px;
  width: 94%;
}

.lrr-modal-xl {
  max-width: 1100px;
  width: 96%;
  max-height: 90vh;
  overflow-y: auto;
}

.lrr-modal-form {
  margin-top: 8px;
}

.lrr-leave-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 900px) {
  .lrr-leave-grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

.lrr-form-item {
  margin-bottom: 12px;
}

.lrr-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.lrr-form-item input[type="text"],
.lrr-form-item select,
.lrr-form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  min-width: 0;
}

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

.lrr-schedule-grid,
.lrr-date-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 12px 0;
}

@media (min-width: 640px) {
  .lrr-schedule-grid,
  .lrr-date-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }

  .lrr-date-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lrr-now-wrap label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.lrr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.lrr-char-left {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.lrr-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.lrr-search-row input {
  flex: 1 1 180px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.lrr-staff-list {
  margin-bottom: 12px;
}

.lrr-staff-profile {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.lrr-photo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.lrr-half {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.lrr-half select {
  min-width: 140px;
}

.lrr-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .lrr-summary {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.lrr-summary label {
  font-weight: 700;
  color: #05053d;
}

#root_leave_request_response .aCenter,
#addLeave .aCenter,
#myModal7 .aCenter {
  text-align: center;
}

#root_leave_request_response .btn-danger,
#addLeave .btn-danger,
#sms_to_staff .btn-danger,
#rejectSms .btn-danger,
#myModal7 .btn-danger,
#searchStaffModal .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_leave_request_response .btn-danger:hover,
#addLeave .btn-danger:hover,
#sms_to_staff .btn-danger:hover,
#rejectSms .btn-danger:hover,
#myModal7 .btn-danger:hover,
#searchStaffModal .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_leave_request_response .staff_img_cls,
#searchStaffModal .single-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

.note {
  font-size: 12px;
  color: #6b7280;
  margin: 4px 0 8px;
}

.instruction {
  font-size: 12px;
  color: #6b7280;
  margin: 8px 0;
}

/* ------------------------ Search All (sall-*) ------------------------ */
.sall-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.sall-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.sall-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

.sall-year-name {
  font-size: 16px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
}

.sall-year-select {
  min-width: 160px;
}

.sall-year-select select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.sall-search-form {
  margin-bottom: 18px;
}

.sall-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sall-search-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
}

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

.sall-results {
  margin-top: 12px;
}

.sall-section-head {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

.sall-result-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sall-result-card {
  display: flex;
  gap: 10px;
  min-width: min(100%, 480px);
  flex: 1 1 480px;
  max-width: 100%;
  position: relative;
  border-radius: 10px;
  padding: 10px;
  min-height: 110px;
  box-sizing: border-box;
}

.sall-staff-card {
  border: 1px solid #16a34a;
  background-color: #ecfdf5;
}

.sall-stud-card {
  border: 1px solid #a855f7;
  background-color: #fdf2f8;
}

.sall-group-card {
  border: 1px solid #2563eb;
  background-color: #eff6ff;
}

.sall-result-photo {
  flex: 0 0 auto;
}

.sall-result-info {
  flex: 1 1 auto;
  min-width: 0;
}

.sall-result-line {
  padding: 2px 0;
  font-size: 13px;
  color: #374151;
}

.sall-result-name {
  color: #111827;
  font-size: 14px;
}

.sall-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sall-photo,
#root_search_all img.sall-photo,
#root_search_all img.srchImgCls,
#root_search_all img.imgdefault {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 4px;
  padding: 0;
}

.sall-icon-mobile {
  cursor: pointer;
  font-size: 28px;
  color: #2c6df0;
}

.sall-icon-money {
  cursor: pointer;
  font-size: 28px;
  color: #49ab15;
}

.sall-icon-bus {
  cursor: pointer;
  color: #374151;
}

.sall-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
}

.sall-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #b91c1c;
}

.sall-modal-hidden {
  display: none !important;
}

.sall-modal-md {
  width: 100%;
  max-width: 560px;
}

.sall-modal-body {
  margin: 12px 0 8px;
  font-size: 15px;
  color: #111827;
  line-height: 1.5;
}

.sall-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#root_search_all .aCenter {
  text-align: center;
}

#root_search_all .dots {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root_search_all a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

#root_search_all a:hover {
  text-decoration: underline;
}

#root_search_all .btn-success {
  background-color: #16a34a;
  color: #ffffff;
}

#root_search_all .btn-success:hover {
  background-color: #15803d;
  color: #ffffff;
}

#root_search_all .btn-danger,
#root_search_all .modal-overlay .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_search_all .btn-danger:hover,
#root_search_all .modal-overlay .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_search_all label.error {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

#root_search_all input.error,
#root_search_all select.error {
  border-color: #dc2626;
}

/* ------------------------ Birthday List (bday-*) ------------------------ */
.bday-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.bday-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bday-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
  align-items: end;
  max-width: 720px;
}

@media (min-width: 640px) {
  .bday-filters {
    grid-template-columns: 1fr 1fr auto;
  }
}

.bday-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.bday-date-wrap {
  position: relative;
}

.bday-date-input {
  width: 100%;
  padding: 8px 40px 8px 12px !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  cursor: pointer;
}

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

.bday-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #05053d;
  cursor: pointer;
}

.bday-btn-wrap {
  display: flex;
  align-items: flex-end;
}

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

.bday-section-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
}

.bday-table-wrap {
  overflow-x: auto;
}

.bday-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
}

.bday-no-record h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #b91c1c;
}

.bday-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

#root_birthday_list .aCenter {
  text-align: center;
}

#root_birthday_list a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

#root_birthday_list a:hover {
  text-decoration: underline;
}

/* ------------------------ Anniversary List (aniv-*) ------------------------ */
.aniv-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.aniv-page-title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.aniv-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
  align-items: end;
  max-width: 720px;
}

@media (min-width: 640px) {
  .aniv-filters {
    grid-template-columns: 1fr 1fr auto;
  }
}

.aniv-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.aniv-date-wrap {
  position: relative;
}

.aniv-date-input {
  width: 100%;
  padding: 8px 40px 8px 12px !important;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  cursor: pointer;
}

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

.aniv-date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #05053d;
  cursor: pointer;
}

.aniv-btn-wrap {
  display: flex;
  align-items: flex-end;
}

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

.aniv-section-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
}

.aniv-table-wrap {
  overflow-x: auto;
}

.aniv-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 600;
}

.aniv-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

#root_anniversary_list .aCenter {
  text-align: center;
}

#root_anniversary_list a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

#root_anniversary_list a:hover {
  text-decoration: underline;
}

/* ------------------------ Search All redesign extras (append-only) ------------------------ */
#root_search_all .sall-hero {
  background: linear-gradient(120deg, #05053d 0%, #1a1a7a 55%, #2563eb 100%);
  border-radius: 20px;
  padding: 22px 22px 20px;
  margin-bottom: 18px;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(5, 5, 61, 0.22);
}

#root_search_all .sall-hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

#root_search_all .sall-hero-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 600;
}

#root_search_all .sall-hero-title {
  margin: 0;
  font-size: 26px;
  font-weight: 750;
  line-height: 1.2;
}

#root_search_all .sall-hero-sub {
  margin: 6px 0 0;
  font-size: 14px;
  opacity: 0.9;
  max-width: 34rem;
}

#root_search_all .sall-year-panel {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 180px;
}

#root_search_all .sall-year-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 4px;
}

#root_search_all .sall-year-panel .sall-year-name {
  color: #ffffff;
}

#root_search_all .sall-year-panel .sall-year-select select {
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 600;
  color: #05053d;
}

#root_search_all .sall-primary-card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  padding: 22px;
}

#root_search_all .sall-field-label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: #374151;
  margin-bottom: 8px;
}

#root_search_all .sall-search-row-lg {
  align-items: stretch;
}

#root_search_all .sall-input-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}

#root_search_all .sall-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 14px;
  pointer-events: none;
}

#root_search_all .sall-input-lg {
  width: 100%;
  padding: 12px 14px 12px 40px !important;
  border-radius: 12px !important;
  border: 1px solid #d1d5db !important;
  font-size: 15px;
  min-height: 46px;
}

#root_search_all .sall-input-lg:focus {
  border-color: #05053d !important;
  box-shadow: 0 0 0 3px rgba(5, 5, 61, 0.15) !important;
}

#root_search_all .sall-btn-primary {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.25);
}

#root_search_all .sall-btn-secondary {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 700;
  background: #ffffff;
  color: #05053d;
  border: 1px solid #c7c9d9;
}

#root_search_all .sall-btn-secondary:hover {
  background: #f3f4f6;
  color: #05053d;
}

#root_search_all .sall-trans-card {
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

#root_search_all .sall-trans-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

#root_search_all .sall-trans-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef2ff;
  color: #05053d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}

#root_search_all .sall-trans-title {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  color: #05053d;
}

#root_search_all .sall-trans-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6b7280;
}

#root_search_all .sall-result-card {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#root_search_all .sall-result-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

#root_search_all .sall-photo,
#root_search_all img.sall-photo,
#root_search_all img.srchImgCls,
#root_search_all img.imgdefault {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  border-radius: 12px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

@media (max-width: 639px) {
  #root_search_all .sall-hero-title {
    font-size: 22px;
  }

  #root_search_all .sall-btn-primary,
  #root_search_all .sall-btn-secondary {
    width: 100%;
  }
}

/* ------------------------ Global table border reset (fix grid lines) ------------------------ */
/* jquery-ui.css previously forced borders on all table/th/td; keep college tables clean. */
.college-table,
.college-table th,
.college-table td {
  border: none;
}

.college-table {
  border-collapse: collapse;
}

.college-table thead th {
  border-bottom: 1px solid #a7f3d0;
}

.college-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.college-table tbody tr:last-child {
  border-bottom: none;
}

/* ------------------------ Question Generator (qgen-*) ------------------------ */
#root_question_generator .qgen-layout {
  min-height: calc(100vh - 80px);
}

#root_question_generator .qgen-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_question_generator .qgen-sidebar::-webkit-scrollbar {
  display: none;
}

#root_question_generator .qgen-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#root_question_generator .qgen-menu li {
  margin: 0;
}

#root_question_generator .qgen-menu-link {
  width: 100%;
}

#root_question_generator .qgen-main {
  min-width: 0;
}

#root_question_generator .qgen-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#root_question_generator .qgen-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#root_question_generator .qgen-page-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

#root_question_generator .qgen-sub-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

#root_question_generator .qgen-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#root_question_generator .qgen-add-btn:hover {
  background: #4338ca;
}

#root_question_generator .qgen-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#root_question_generator .qgen-table {
  width: 100%;
  min-width: 640px;
}

#root_question_generator .qgen-table th,
#root_question_generator .qgen-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

#root_question_generator .qgen-table-caption {
  text-align: center;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

#root_question_generator .qgen-empty {
  margin-top: 12px;
  text-align: center;
  color: #6b7280;
}

#root_question_generator .qgen-part-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

#root_question_generator .qgen-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 20px;
  max-width: 720px;
}

#root_question_generator .qgen-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#root_question_generator .qgen-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

#root_question_generator .qgen-select,
#root_question_generator .qgen-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff;
  color: #111827;
}

#root_question_generator .qgen-select:focus,
#root_question_generator .qgen-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#root_question_generator .qgen-inline-edit .editIcon {
  margin-left: 8px;
  cursor: pointer;
  color: #4f46e5;
}

#root_question_generator .hideInfo {
  display: none;
}

#root_question_generator .qgen-inline-form .qgen-inline-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#root_question_generator .qgen-inline-input {
  min-width: 120px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 8px;
}

#root_question_generator .qgen-modal-hidden {
  display: none !important;
}

#root_question_generator .qgen-modal-box {
  width: min(520px, 94vw);
}

#root_question_generator .qgen-modal-lg {
  width: min(720px, 94vw);
}

#root_question_generator .qgen-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

#root_question_generator .qgen-modal-body {
  padding: 18px;
}

#root_question_generator .qgen-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#root_question_generator .qgen-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#root_question_generator .qgen-form-row label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

#root_question_generator .qgen-file {
  width: 100%;
  padding: 8px 0;
}

#root_question_generator .qgen-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 900px) {
  #root_question_generator .qgen-layout {
    flex-direction: column;
  }

  #root_question_generator .qgen-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_question_generator .qgen-main {
    padding: 16px;
  }

  #root_question_generator .qgen-filter-form {
    grid-template-columns: 1fr;
  }
}

/* ------------------------ Study Materials (smats-*) ------------------------ */
/* Match collegeProfile sidebar scroll behavior */
#root_study_materials .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_study_materials .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.smats-layout {
  min-height: calc(100vh - 80px);
}

.smats-sidebar {
  flex-shrink: 0;
}

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

.smats-menu li {
  margin: 0;
}

.smats-menu-link {
  width: 100%;
}

.smats-main {
  flex: 1;
  min-width: 0;
}

.smats-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.smats-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.smats-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.smats-page-header .smats-page-title {
  margin: 0;
}

.smats-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .smats-filters {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .smats-filters {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .smats-filters {
    grid-template-columns: repeat(5, 1fr) auto;
  }
}

.smats-filters-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .smats-filters-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .smats-filters-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.smats-filters-staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 768px) {
  .smats-filters-staff {
    grid-template-columns: 1fr 1fr;
  }
}

.smats-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.smats-form-item select,
.smats-form-item input[type="text"],
.smats-form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.smats-form-item select:focus,
.smats-form-item input[type="text"]:focus,
.smats-form-item textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.smats-add-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 62px;
}

.smats-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}

.smats-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 16px 0 8px;
}

.smats-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  padding: 16px;
  font-weight: 600;
}

.smats-report-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.smats-modal-hidden {
  display: none !important;
}

.smats-modal-lg {
  width: 100%;
  max-width: 720px;
}

.smats-modal-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.smats-modal-search-row .smats-form-item {
  flex: 1;
  min-width: 180px;
}

.smats-author-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.smats-modal-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .smats-modal-form-row {
    flex-direction: row;
    align-items: flex-start;
  }

  .smats-modal-form-row > label {
    width: 40%;
    padding-top: 8px;
    margin-bottom: 0;
  }

  .smats-modal-form-row > .smats-form-item {
    width: 60%;
  }
}

#root_study_materials label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_study_materials select.error,
#root_study_materials input.error,
#root_study_materials textarea.error {
  border: 1px solid orange;
}

#root_study_materials .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_study_materials .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_study_materials .hideInfo {
  display: none;
}

#root_study_materials .curPointer {
  cursor: pointer;
}

#root_study_materials .queckBtnCls {
  display: inline-block;
  margin-top: 6px;
  width: 28px;
  height: 28px;
  background: #16a34a;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}

#root_study_materials .queckBtnCls:before {
  content: "\f00c";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  left: 7px;
  top: 5px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .smats-layout {
    flex-direction: column;
  }

  .smats-sidebar {
    width: 100%;
    min-height: auto;
  }
}

/* ------------------------ Purchase Profile (purp-*) ------------------------ */
#root_purchase_profile .pro-submenu-icon.fa {
  width: auto;
  height: auto;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#root_purchase_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_purchase_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_purchase_profile .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_purchase_profile .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_purchase_profile .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_purchase_profile .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_purchase_profile .purp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

#root_purchase_profile .purp-form-row,
#root_purchase_profile .purp-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

#root_purchase_profile .purp-label {
  width: 100%;
  max-width: 200px;
  font-weight: 600;
  color: #374151;
  padding-top: 10px;
}

#root_purchase_profile .purp-field {
  flex: 1;
  min-width: 200px;
}

#root_purchase_profile .purp-field-sm {
  max-width: 280px;
}

#root_purchase_profile .purp-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  color: #374151;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#root_purchase_profile .purp-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#root_purchase_profile .purp-textarea {
  min-height: 96px;
  resize: vertical;
}

#root_purchase_profile .purp-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  padding-top: 8px;
}

#root_purchase_profile .purp-form-actions.centerCls {
  justify-content: center;
}

#root_purchase_profile .purp-search-form {
  margin-bottom: 20px;
}

#root_purchase_profile .purp-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  max-width: 720px;
}

#root_purchase_profile .purp-search-row .purp-input {
  flex: 1;
  min-width: 220px;
}

#root_purchase_profile .purp-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 16px 0 12px;
}

#root_purchase_profile .purp-section-block {
  margin-top: 8px;
}

#root_purchase_profile .purp-no-rec {
  text-align: center;
  color: #dc2626;
  font-weight: 600;
  padding: 24px 12px;
}

#root_purchase_profile .purp-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
}

#root_purchase_profile .purp-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

#root_purchase_profile .purp-category-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#root_purchase_profile .purp-cat-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#root_purchase_profile .purp-subcat-wrap {
  padding-left: 12px;
}

#root_purchase_profile .purp-subcat-table {
  margin-left: 8px;
}

#root_purchase_profile .purp-inline-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#root_purchase_profile .purp-inline-input,
#root_purchase_profile .inpBorder {
  min-width: 120px;
  max-width: 220px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
}

#root_purchase_profile .purp-inline-input:focus,
#root_purchase_profile .inpBorder:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#root_purchase_profile .showStudent,
#root_purchase_profile .showList,
#root_purchase_profile .showInfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
  cursor: pointer;
}

#root_purchase_profile .hideStudent,
#root_purchase_profile .hideList,
#root_purchase_profile .hideInfo {
  display: none;
}

#root_purchase_profile .editIcon,
#root_purchase_profile .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_purchase_profile .curPointer {
  cursor: pointer;
}

#root_purchase_profile .purp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 16px;
}

#root_purchase_profile .purp-modal-overlay.flex {
  display: flex;
}

#root_purchase_profile .purp-modal-dialog {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  margin-top: 48px;
}

#root_purchase_profile .purp-modal-content {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

#root_purchase_profile .purp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

#root_purchase_profile .purp-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

#root_purchase_profile .purp-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

#root_purchase_profile .purp-modal-close:hover {
  color: #111827;
}

#root_purchase_profile .purp-modal-body {
  padding: 20px 18px;
}

#root_purchase_profile .purp-modal-body .purp-form {
  max-width: none;
}

@media (max-width: 900px) {
  #root_purchase_profile .pro-layout {
    flex-direction: column;
  }

  #root_purchase_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_purchase_profile .pro-main-content {
    padding: 16px;
  }

  #root_purchase_profile .purp-label {
    max-width: none;
    padding-top: 0;
  }

  #root_purchase_profile .purp-form-row,
  #root_purchase_profile .purp-filter-row {
    flex-direction: column;
  }

  #root_purchase_profile .purp-subcat-wrap {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  #root_purchase_profile .formtbl-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #root_purchase_profile .purp-search-row .btn,
  #root_purchase_profile .purp-form-actions .btn {
    width: 100%;
  }

  #root_purchase_profile .purp-modal-dialog {
    margin-top: 24px;
  }
}

/* ------------------------ Transport Profile (tprof-*) ------------------------ */
#root_transport_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_transport_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.tprof-layout {
  min-height: calc(100vh - 64px);
}

.tprof-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

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

.tprof-menu li {
  margin: 0;
}

.tprof-menu-link {
  width: 100%;
}

.tprof-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.tprof-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tprof-panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #05053d;
}

.tprof-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tprof-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.tprof-table {
  width: 100%;
  min-width: 640px;
}

.tprof-sms-partial {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.tprof-no-record,
.tprof-no-record-found {
  text-align: center;
  color: #b91c1c;
  padding: 16px;
  font-weight: 600;
}

.tprof-driver-sms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.tprof-report-wrap {
  display: block;
}

.tprof-report-hero {
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.tprof-report-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tprof-report-hero-sub {
  margin: 0;
  opacity: 0.85;
  font-size: 14px;
}

.tprof-filter-block {
  margin-bottom: 18px;
}

.tprof-filter-label {
  display: block;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
}

.tprof-transport-types {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tprof-transport-card {
  position: relative;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #dbe3ec;
  background: #fff;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tprof-transport-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.tprof-transport-card span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.tprof-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .tprof-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .tprof-filter-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tprof-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.tprof-select,
.tprof-form-item select,
.tprof-form-item input[type="text"],
.tprof-search-row input {
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.tprof-select:focus,
.tprof-form-item select:focus,
.tprof-form-item input[type="text"]:focus,
.tprof-search-row input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.15);
}

.tprof-search-center {
  text-align: center;
  margin-top: 8px;
}

.tprof-report-data {
  min-height: 150px;
}

.tprof-print-wrap {
  margin-top: 12px;
}

.tprof-search-form {
  margin: 12px 0 18px;
}

.tprof-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 640px;
}

.tprof-search-row input {
  flex: 1 1 220px;
  min-width: 0;
}

.tprof-name-list {
  margin-top: 20px;
}

.tprof-section-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
}

.tprof-stud-pay {
  margin-top: 20px;
}

.tprof-stud-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

@media (min-width: 768px) {
  .tprof-stud-info {
    grid-template-columns: 120px 1fr 1fr;
  }
}

.tprof-photo {
  height: 100px;
  width: 100px;
  object-fit: cover;
  border-radius: 10px;
}

.tprof-stud-meta div {
  margin-bottom: 6px;
}

.tprof-modal-hidden {
  display: none !important;
}

.tprof-modal-md {
  max-width: 560px;
  width: 92%;
}

.tprof-modal-lg {
  max-width: 720px;
  width: 94%;
}

.tprof-modal-row {
  margin-bottom: 12px;
}

.tprof-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .tprof-modal-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tprof-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 12px 0;
}

@media (min-width: 640px) {
  .tprof-schedule-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.tprof-now-wrap {
  padding-bottom: 8px;
  white-space: nowrap;
}

.tprof-char-left {
  text-align: right;
  font-size: 13px;
  color: #4b5563;
  margin-top: 6px;
}

.tprof-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.tprof-drop-hidden {
  display: none;
}

#root_transport_profile img.single-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

#root_transport_profile .aCenter,
#root_transport_profile .acenter {
  text-align: center;
}

@media (max-width: 900px) {
  .tprof-layout {
    flex-direction: column;
  }

  .tprof-sidebar,
  #root_transport_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .tprof-main {
    padding: 16px;
  }
}

/* ------------------------ Class Test Profile AD (ctpad-*) ------------------------ */
#root_class_test_profile_ad .ctpad-layout {
  min-height: calc(100vh - 80px);
}

#root_class_test_profile_ad .ctpad-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_class_test_profile_ad .ctpad-sidebar::-webkit-scrollbar {
  display: none;
}

#root_class_test_profile_ad .ctpad-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#root_class_test_profile_ad .ctpad-menu li {
  margin: 0;
}

#root_class_test_profile_ad .ctpad-menu-link {
  width: 100%;
}

#root_class_test_profile_ad .ctpad-main {
  min-width: 0;
}

#root_class_test_profile_ad .ctpad-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#root_class_test_profile_ad .ctpad-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#root_class_test_profile_ad .ctpad-panel-title {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
}

#root_class_test_profile_ad .ctpad-panel-header .ctpad-panel-title {
  margin-bottom: 0;
}

#root_class_test_profile_ad .ctpad-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

#root_class_test_profile_ad .ctpad-filter-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#root_class_test_profile_ad .ctpad-field {
  min-width: 0;
}

#root_class_test_profile_ad .ctpad-select,
#root_class_test_profile_ad .ctpad-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff;
  color: #111827;
}

#root_class_test_profile_ad .ctpad-select:focus,
#root_class_test_profile_ad .ctpad-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#root_class_test_profile_ad .ctpad-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#root_class_test_profile_ad .ctpad-table {
  width: 100%;
  min-width: 560px;
}

#root_class_test_profile_ad .ctpad-table th,
#root_class_test_profile_ad .ctpad-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

#root_class_test_profile_ad .ctpad-empty {
  margin-top: 12px;
  text-align: center;
  color: #6b7280;
}

#root_class_test_profile_ad .ctpad-note {
  margin: 0 0 12px;
  color: #374151;
  font-size: 0.9rem;
}

#root_class_test_profile_ad .ctpad-actions-right {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

#root_class_test_profile_ad .ctpad-flex-center {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

#root_class_test_profile_ad .ctpad-box-btn {
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}

#root_class_test_profile_ad .ctpad-box {
  width: 300px;
  max-width: 90vw;
  display: block;
  overflow: hidden;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  transition: 0.5s linear;
  background: transparent;
}

#root_class_test_profile_ad .ctpad-box:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(100%);
}

#root_class_test_profile_ad .ctpad-box:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(-100%);
}

#root_class_test_profile_ad .ctpad-box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#root_class_test_profile_ad .ctpad-box:hover:before {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: 0.3s transform linear, 0.3s height linear 0.3s;
}

#root_class_test_profile_ad .ctpad-box:hover:after {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: 0.3s transform linear, 0.3s height linear 0.5s;
}

#root_class_test_profile_ad .ctpad-modal-hidden {
  display: none !important;
}

#root_class_test_profile_ad .ctpad-modal-box {
  width: min(520px, 94vw);
}

#root_class_test_profile_ad .ctpad-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#root_class_test_profile_ad .ctpad-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#root_class_test_profile_ad .ctpad-form-row > label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

#root_class_test_profile_ad .ctpad-radio-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

#root_class_test_profile_ad .ctpad-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #374151;
}

#root_class_test_profile_ad .ctpad-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

#root_class_test_profile_ad .ctpad-error-msg {
  color: #dc2626;
  display: none;
  font-size: 0.75rem;
}

#root_class_test_profile_ad .aCenter {
  text-align: center;
}

@media (max-width: 1100px) {
  #root_class_test_profile_ad .ctpad-filter-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #root_class_test_profile_ad .ctpad-layout {
    flex-direction: column;
  }

  #root_class_test_profile_ad .ctpad-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_class_test_profile_ad .ctpad-main {
    padding: 16px;
  }

  #root_class_test_profile_ad .ctpad-filter-row,
  #root_class_test_profile_ad .ctpad-filter-4 {
    grid-template-columns: 1fr;
  }
}


/* ------------------------ Course Outcome Profile (cop-*) ------------------------ */
#root_course_outcome_profile .pro-submenu-icon.fa {
  width: auto;
  height: auto;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#root_course_outcome_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_course_outcome_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.cop-layout {
  min-height: calc(100vh - 64px);
}

.cop-sidebar {
  flex-shrink: 0;
}

.cop-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

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

.cop-menu li {
  margin: 0;
}

.cop-menu-link {
  width: 100%;
}

.cop-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.cop-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.cop-panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
}

.cop-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cop-section-note {
  margin-bottom: 12px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.cop-filter-form {
  margin-bottom: 16px;
}

.cop-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  align-items: end;
}

.cop-filter-grid-dense {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cop-filter-label,
.cop-form-item > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  line-height: 1.3;
}

.cop-form-item-action {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cop-form-item select,
.cop-form-item input,
.cop-modal-field input,
.cop-modal-field select,
.cop-readonly-span,
#root_course_outcome_profile .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.4;
}

.cop-readonly-span {
  display: flex;
  align-items: center;
  background: #f9fafb;
  color: #4b5563;
  min-height: 42px;
}

.cop-form-item select:focus,
.cop-form-item input:focus,
.cop-modal-field input:focus,
.cop-modal-field select:focus,
#root_course_outcome_profile .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.cop-btn-add,
.cop-btn-import,
#root_course_outcome_profile .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#root_course_outcome_profile .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_course_outcome_profile .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

.cop-add-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cop-table-wrap,
#root_course_outcome_profile .center-table {
  overflow-x: auto;
  width: 100%;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
}

.cop-table,
#root_course_outcome_profile .college-table,
#root_course_outcome_profile .center-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.cop-table-wide {
  min-width: 960px;
}

.cop-no-record {
  text-align: center;
  color: #b91c1c;
  padding: 20px 16px;
  font-weight: 600;
  font-size: 14px;
}

.cop-no-record .noRecFoundsCls {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #b91c1c;
}

.cop-dynamic-block {
  margin-top: 8px;
}

.cop-section-block {
  margin: 12px 0 8px;
}

.cop-head-title,
#root_course_outcome_profile .head_title {
  margin: 16px 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.35;
}

.cop-term-title,
#root_course_outcome_profile .term_head_title,
#root_course_outcome_profile .m_sub_title {
  margin: 12px 0 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.cop-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 12px 0 16px;
}

.cop-toolbar-row .form-control,
.cop-toolbar-row select {
  min-width: 220px;
  max-width: 320px;
}

.cop-mark-input {
  width: 88px;
  min-height: 36px;
  margin: 0 auto;
  text-align: center;
}

#root_course_outcome_profile .no-spinner::-webkit-outer-spin-button,
#root_course_outcome_profile .no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#root_course_outcome_profile .no-spinner {
  -moz-appearance: textfield;
}

.cop-modal-hidden {
  display: none !important;
}

.cop-modal-md {
  max-width: 560px;
  width: 92%;
}

.cop-modal-lg {
  max-width: 820px;
  width: 94%;
}

#root_course_outcome_profile .modal-overlay > .modal-box,
#root_course_outcome_profile .modal-overlay > .cop-modal-md,
#root_course_outcome_profile .modal-overlay > .cop-modal-lg {
  margin: auto;
}

#root_course_outcome_profile .modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 28px 18px 0;
  text-align: left;
}

.cop-modal-field {
  margin-bottom: 14px;
}

#root_course_outcome_profile .cop-modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.cop-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  align-items: center;
}

.cop-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 4px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.cop-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

#root_course_outcome_profile .aCenter,
#root_course_outcome_profile .acenter,
#root_course_outcome_profile .centerCls {
  text-align: center;
}

#root_course_outcome_profile .addIcon {
  cursor: pointer;
  font-size: 20px;
  color: #16a34a;
}

#root_course_outcome_profile .showInfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
  word-break: break-word;
}

#root_course_outcome_profile .hideInfo {
  display: none;
}

#root_course_outcome_profile .editIcon,
#root_course_outcome_profile .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_course_outcome_profile .editIcon:hover,
#root_course_outcome_profile .fa-pencil:hover {
  color: #1d4ed8;
}

.cop-inline-edit,
#root_course_outcome_profile .input-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.cop-inline-edit .recValue,
.cop-inline-edit .inpBorder,
#root_course_outcome_profile .inpBorder,
#root_course_outcome_profile .recValue {
  min-width: 110px;
  max-width: 220px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  font-size: 13px;
}

#root_course_outcome_profile .inpBorder:focus,
#root_course_outcome_profile .recValue:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#root_course_outcome_profile .saveIcon,
#root_course_outcome_profile .closeIcon {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}

#root_course_outcome_profile .saveIcon {
  color: #16a34a;
}

#root_course_outcome_profile .closeIcon {
  color: #dc2626;
}

#root_course_outcome_profile .marginLeft50px {
  margin-left: 12px;
}

#root_course_outcome_profile label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

#root_course_outcome_profile select.error,
#root_course_outcome_profile input.error,
#root_course_outcome_profile textarea.error {
  border-color: #f59e0b;
}

#root_course_outcome_profile #termWise_table {
  margin-top: 12px;
}

#root_course_outcome_profile #termWise_table .college-table,
#root_course_outcome_profile #termWise_table table {
  min-width: 420px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .cop-layout {
    flex-direction: column;
  }

  .cop-sidebar,
  #root_course_outcome_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .cop-main {
    padding: 16px;
  }

  .cop-panel-title {
    font-size: 18px;
  }

  .cop-toolbar-row {
    justify-content: stretch;
  }

  .cop-toolbar-row .form-control,
  .cop-toolbar-row select {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .cop-modal-actions {
    justify-content: stretch;
  }

  .cop-modal-actions .btn {
    flex: 1 1 auto;
  }
}

/* ------------------------ Expense Profile (expp-*) ------------------------ */
#root_expense_profile .pro-submenu-icon.fa {
  width: auto;
  height: auto;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#root_expense_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_expense_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_expense_profile .btn-info {
  background-color: #0284c7;
  color: #ffffff;
}

#root_expense_profile .btn-info:hover {
  background-color: #0369a1;
  color: #ffffff;
}

#root_expense_profile .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_expense_profile .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_expense_profile .expp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#root_expense_profile .expp-form-row,
#root_expense_profile .expp-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

#root_expense_profile .expp-label {
  width: 100%;
  max-width: 200px;
  font-weight: 600;
  color: #374151;
  padding-top: 10px;
}

#root_expense_profile .expp-field {
  flex: 1;
  min-width: 200px;
}

#root_expense_profile .expp-field-sm {
  max-width: 280px;
}

#root_expense_profile .expp-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  color: #374151;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#root_expense_profile .expp-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#root_expense_profile .expp-textarea {
  min-height: 96px;
  resize: vertical;
}

#root_expense_profile .expp-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  padding-top: 8px;
}

#root_expense_profile .expp-form-actions.centerCls {
  justify-content: center;
}

#root_expense_profile .expp-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

#root_expense_profile .expp-filter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#root_expense_profile .expp-filter-item .expp-label {
  max-width: none;
  padding-top: 0;
}

#root_expense_profile .expp-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

#root_expense_profile .expp-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

#root_expense_profile .expp-search-row .expp-input {
  flex: 1;
  min-width: 220px;
}

#root_expense_profile .expp-no-rec {
  text-align: center;
  color: #dc2626;
  font-weight: 600;
  padding: 24px 12px;
}

#root_expense_profile .expp-file-row {
  align-items: center;
}

#root_expense_profile .expp-file-input {
  width: 100%;
  padding: 8px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
}

#root_expense_profile .box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#root_expense_profile .box-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#root_expense_profile .paddingClas {
  flex: 1;
  min-width: 200px;
}

#root_expense_profile .pClass {
  margin: 6px 0;
}

#root_expense_profile .labelClass {
  font-weight: 600;
  color: #374151;
  margin-right: 6px;
}

#root_expense_profile .hrClass {
  width: 100%;
  border-top: 1px solid #e5e7eb;
  margin: 12px 0;
}

#root_expense_profile .showInfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
  cursor: pointer;
}

#root_expense_profile .hideInfo {
  display: none;
}

#root_expense_profile .editIcon,
#root_expense_profile .fa-pencil {
  color: #2563eb;
  margin-left: 4px;
  cursor: pointer;
}

#root_expense_profile .redText {
  color: #dc2626;
  font-weight: 600;
}

#root_expense_profile .center-table {
  overflow-x: auto;
  margin-top: 12px;
}

#root_expense_profile .center-table .college-table,
#root_expense_profile .center-table table {
  width: 100%;
}

#root_expense_profile .expp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 16px;
}

#root_expense_profile .expp-modal-overlay.flex {
  display: flex;
}

#root_expense_profile .expp-modal-dialog {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  margin-top: 48px;
}

#root_expense_profile .expp-modal-dialog-lg {
  max-width: 900px;
}

#root_expense_profile .expp-modal-content {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

#root_expense_profile .expp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

#root_expense_profile .expp-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

#root_expense_profile .expp-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

#root_expense_profile .expp-modal-close:hover {
  color: #111827;
}

#root_expense_profile .expp-modal-body {
  padding: 20px 18px;
}

#root_expense_profile .expp-modal-body .expp-form {
  max-width: none;
}

#root_expense_profile .expp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid #e5e7eb;
}

#root_expense_profile img.single-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 900px) {
  #root_expense_profile .pro-layout {
    flex-direction: column;
  }

  #root_expense_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_expense_profile .pro-main-content {
    padding: 16px;
  }

  #root_expense_profile .expp-label {
    max-width: none;
    padding-top: 0;
  }

  #root_expense_profile .expp-form-row,
  #root_expense_profile .expp-filter-row {
    flex-direction: column;
  }

  #root_expense_profile .expp-filter-grid,
  #root_expense_profile .expp-search-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #root_expense_profile .formtbl-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #root_expense_profile .expp-search-row .btn,
  #root_expense_profile .expp-form-actions .btn {
    width: 100%;
  }

  #root_expense_profile .expp-modal-dialog {
    margin-top: 24px;
  }
}

/* ------------------------ Alumni Profile (alum-*) ------------------------ */
#root_alumni_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_alumni_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.alum-layout {
  min-height: calc(100vh - 80px);
}

.alum-sidebar {
  flex-shrink: 0;
}

.alum-main {
  flex: 1;
  min-width: 0;
}

.alum-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.alum-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.alum-page-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alum-panel-header .alum-page-title {
  margin: 0;
}

.alum-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .alum-filters {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.alum-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 18px;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .alum-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.alum-form-item {
  margin-bottom: 4px;
}

.alum-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.alum-form-item select,
.alum-form-item input[type="text"],
.alum-form-item input[type="number"],
.alum-form-item input[type="email"],
.alum-form-item input[type="file"],
.alum-form-item textarea {
  width: 100%;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.alum-form-item select:focus,
.alum-form-item input[type="text"]:focus,
.alum-form-item input[type="number"]:focus,
.alum-form-item input[type="email"]:focus,
.alum-form-item textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.alum-form-item input:disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.alum-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-height: 38px;
}

.alum-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
  cursor: pointer;
}

.alum-radio-group input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: #4f46e5;
}

.alum-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.alum-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: 12px 0;
}

.alum-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.alum-no-record {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  padding: 16px;
  font-weight: 600;
}

.alum-info-content {
  line-height: 1.6;
  color: #374151;
  word-break: break-word;
}

.alum-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.alum-hint-text {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}

.alum-summary-box {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.alum-summary-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.alum-summary-row b {
  color: #111827;
  font-weight: 600;
}

.alum-modal-hidden {
  display: none !important;
}

.alum-modal-lg {
  background: #fff;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
}

.alum-modal-sm {
  background: #fff;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
}

#root_alumni_profile .modal-overlay > .modal-box,
#root_alumni_profile .modal-overlay > .alum-modal-lg,
#root_alumni_profile .modal-overlay > .alum-modal-sm {
  margin: auto;
}

.alum-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.alum-modal-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.alum-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
  padding: 0 4px;
}

.alum-modal-close:hover {
  color: #111827;
}

.alum-modal-body {
  padding: 18px;
}

.alum-modal-body .alum-form-item {
  margin-bottom: 12px;
}

.alum-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
  border-top: 1px solid #f3f4f6;
}

.alum-image-viewer {
  text-align: center;
}

.alum-image-viewer img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.alum-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .alum-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.alum-notable-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (max-width: 560px) {
  .alum-notable-card {
    grid-template-columns: 1fr;
  }
}

.alum-notable-photo {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.alum-notable-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alum-notable-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  word-break: break-word;
}

.alum-notable-summary {
  max-height: 120px;
  overflow: hidden;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

.alum-notable-more {
  color: #4f46e5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.alum-notable-more:hover {
  text-decoration: underline;
}

.alum-notable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.alum-meet-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.alum-meet-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .alum-meet-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  }
}

.alum-meet-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  word-break: break-word;
}

.alum-meet-summary {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 8px;
}

.alum-meet-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alum-meet-meta-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.alum-meet-date {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.alum-meet-time {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.alum-meet-time-sep {
  font-size: 13px;
  color: #9ca3af;
  margin: 0 4px;
}

.alum-meet-docs {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

.alum-meet-docs-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}

.alum-upload-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}

@media (min-width: 640px) {
  .alum-upload-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

.alum-inline-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.alum-inline-edit .inpBorder,
.alum-inline-edit textarea,
.alum-inline-edit input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
}

.alum-edit-icon {
  color: #4f46e5;
  cursor: pointer;
  margin-left: 6px;
}

.alum-grade-block {
  margin-bottom: 14px;
}

.alum-grade-block > b {
  display: block;
  margin-bottom: 8px;
  color: #111827;
}

#root_alumni_profile label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_alumni_profile select.error,
#root_alumni_profile input.error,
#root_alumni_profile textarea.error {
  border: 1px solid orange;
}

#root_alumni_profile .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_alumni_profile .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_alumni_profile .hideSetting {
  display: none;
}

#root_alumni_profile .editIcon {
  margin-left: 8px;
  color: #4f46e5;
  cursor: pointer;
}

#root_alumni_profile .text-danger {
  color: #dc2626;
}

#root_alumni_profile .single-img,
#root_alumni_profile .img-thumbnail {
  max-width: 64px;
  max-height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

@media (max-width: 900px) {
  .alum-layout {
    flex-direction: column;
  }

  .alum-sidebar {
    width: 100%;
    min-height: auto;
  }

  .alum-summary-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .alum-page-card {
    padding: 16px;
  }
}

/* ------------------------ Course Outcome Profile UI polish (cop-*) ------------------------ */
#root_course_outcome_profile .cop-panel-title {
  color: #111827;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

#root_course_outcome_profile .pro-sidebar-title {
  color: #4b5563;
  font-weight: 700;
}

#root_course_outcome_profile .pro-submenu-link,
#root_course_outcome_profile .cop-menu-link {
  color: #374151;
}

#root_course_outcome_profile .pro-submenu-link.active,
#root_course_outcome_profile .admin-menu li.active > a {
  color: #312e81;
  font-weight: 600;
}

#root_course_outcome_profile .cop-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#root_course_outcome_profile .cop-btn-add,
#root_course_outcome_profile .cop-btn-import {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-weight: 600;
  white-space: nowrap;
}

#root_course_outcome_profile .cop-filter-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#root_course_outcome_profile .cop-form-item select,
#root_course_outcome_profile .cop-form-item input,
#root_course_outcome_profile .cop-modal-field input,
#root_course_outcome_profile .cop-modal-field select,
#root_course_outcome_profile .cop-readonly-span {
  color: #111827;
  border-color: #cbd5e1;
  background-color: #fff;
}

#root_course_outcome_profile .cop-readonly-span {
  display: flex;
  align-items: center;
  min-height: 42px;
  color: #4b5563;
  background: #f8fafc;
}

#root_course_outcome_profile .cop-filter-grid {
  gap: 14px 16px;
  margin-bottom: 18px;
}

@media (min-width: 1024px) {
  #root_course_outcome_profile .cop-filter-grid-dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#root_course_outcome_profile .cop-page-card .table-container,
#root_course_outcome_profile .modal-box .table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  overflow-x: auto;
}

#root_course_outcome_profile .college-table th,
#root_course_outcome_profile .college-table td {
  color: #1f2937;
  vertical-align: middle;
}

#root_course_outcome_profile .college-table thead th {
  color: #065f46;
  font-size: 13px;
  white-space: nowrap;
}

#root_course_outcome_profile .cop-table-wide {
  min-width: 980px;
}

#root_course_outcome_profile .cop-no-record,
#root_course_outcome_profile .noRecFoundsCls {
  color: #b91c1c;
  font-size: 15px;
  font-weight: 600;
}

#root_course_outcome_profile .cop-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 16px;
}

@media (min-width: 640px) {
  #root_course_outcome_profile .cop-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #root_course_outcome_profile .cop-modal-span-2 {
    grid-column: 1 / -1;
  }
}

#root_course_outcome_profile .cop-modal-hint {
  margin: 0 0 16px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

#root_course_outcome_profile .cop-modal-actions {
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

#root_course_outcome_profile .cop-modal-actions .btn,
#root_course_outcome_profile .cop-choice-actions .btn,
#root_course_outcome_profile .cop-actions-bar .btn {
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
}

#root_course_outcome_profile .cop-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_course_outcome_profile .cop-radio-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

#root_course_outcome_profile .cop-radio-item input[type="radio"] {
  width: auto;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

#root_course_outcome_profile .cop-inline-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

#root_course_outcome_profile .cop-inline-input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #111827;
}

#root_course_outcome_profile .cop-inline-save {
  padding: 8px 10px;
  min-width: 36px;
  flex-shrink: 0;
}

#root_course_outcome_profile .editIcon {
  margin-left: 8px;
  color: #4f46e5;
  cursor: pointer;
}

#root_course_outcome_profile .cop-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

#root_course_outcome_profile .cop-student-select {
  max-width: 320px;
  margin: 0 0 16px auto;
}

#root_course_outcome_profile .cop-dynamic-block {
  margin-top: 8px;
}

#root_course_outcome_profile .cop-form-item-action {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  #root_course_outcome_profile .pro-layout.cop-layout {
    flex-direction: column;
  }

  #root_course_outcome_profile .pro-sidebar,
  #root_course_outcome_profile .cop-sidebar {
    width: 100%;
    position: relative;
    z-index: 1;
    min-height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_course_outcome_profile .cop-main {
    padding: 14px;
  }

  #root_course_outcome_profile .cop-page-card {
    padding: 16px;
    border-radius: 14px;
  }

  #root_course_outcome_profile .cop-panel-header {
    align-items: flex-start;
  }

  #root_course_outcome_profile .cop-student-select {
    max-width: 100%;
    margin-left: 0;
  }

  #root_course_outcome_profile .cop-modal-actions .btn,
  #root_course_outcome_profile .cop-choice-actions .btn {
    width: 100%;
  }
}

/* ------------------------ Course Outcome Profile contrast pass ------------------------ */
#root_course_outcome_profile .cop-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 8px;
}

#root_course_outcome_profile .cop-panel-title {
  color: #0f172a;
}

#root_course_outcome_profile .pro-submenu-link,
#root_course_outcome_profile .cop-menu-link,
#root_course_outcome_profile .pro-sidebar-nav a {
  color: #1f2937 !important;
}

#root_course_outcome_profile .pro-sidebar-title {
  color: #334155;
}

#root_course_outcome_profile .college-table thead {
  background-color: #ecfdf5;
}

#root_course_outcome_profile .college-table thead th {
  color: #064e3b;
  font-weight: 700;
}

#root_course_outcome_profile .college-table tbody td {
  color: #111827;
}

#root_course_outcome_profile .cop-form-item select,
#root_course_outcome_profile .cop-form-item input,
#root_course_outcome_profile .cop-modal-field input,
#root_course_outcome_profile .cop-modal-field select {
  color: #0f172a;
  border: 1px solid #94a3b8;
}

#root_course_outcome_profile .cop-modal-field label {
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
}

/* Dynamic panels: exam / marks / attainment */
#root_course_outcome_profile .cop-mark-input {
  width: 88px !important;
  min-width: 88px;
  max-width: 88px;
  min-height: 36px;
  margin: 0 auto;
  padding: 6px 8px;
  text-align: center;
}

#root_course_outcome_profile .cop-section-block {
  margin: 12px 0 8px;
}

#root_course_outcome_profile .head_title,
#root_course_outcome_profile .cop-head-title {
  margin: 16px 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

#root_course_outcome_profile .term_head_title,
#root_course_outcome_profile .m_sub_title,
#root_course_outcome_profile .cop-term-title {
  margin: 10px 0 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

#root_course_outcome_profile .center-table,
#root_course_outcome_profile .cop-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_course_outcome_profile .center-table .college-table,
#root_course_outcome_profile .center-table table,
#root_course_outcome_profile .cop-dynamic-block .college-table,
#root_course_outcome_profile #termWise_table .college-table {
  width: 100%;
  min-width: 560px;
}

#root_course_outcome_profile .btn-delete {
  color: #ffffff;
}

#root_course_outcome_profile .showInfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
  word-break: break-word;
}

#root_course_outcome_profile .hideInfo {
  display: none;
}

#root_course_outcome_profile label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
  font-weight: 500;
}

#root_course_outcome_profile select.error,
#root_course_outcome_profile input.error,
#root_course_outcome_profile textarea.error {
  border-color: #f59e0b;
}

#root_course_outcome_profile .no-spinner::-webkit-outer-spin-button,
#root_course_outcome_profile .no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#root_course_outcome_profile .no-spinner {
  -moz-appearance: textfield;
}

#root_course_outcome_profile .pro-submenu-icon.fa {
  width: auto;
  height: auto;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ------------------------ Attendance Not Marked Report (anmr-*) ------------------------ */
.anmr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.anmr-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.anmr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.anmr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.anmr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: end;
}

@media (min-width: 640px) {
  .anmr-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .anmr-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.anmr-filter-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.anmr-label-spacer {
  visibility: hidden;
}

.anmr-filter-group select,
.anmr-filter-group input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}

.anmr-filter-group select:focus,
.anmr-filter-group input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.anmr-search-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  min-height: 42px;
}

.anmr-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.anmr-table {
  width: 100%;
  min-width: 720px;
}

#att_not_mark_root .anmr-table th,
#att_not_mark_root .anmr-table td {
  vertical-align: middle;
}

#att_not_mark_root .anmr-staff-cell,
#att_not_mark_root .staff-cell {
  background: #eef2ff;
  font-weight: 600;
  color: #312e81;
  text-align: left;
}

#att_not_mark_root .anmr-good,
#att_not_mark_root .good {
  color: #15803d;
  font-weight: 600;
}

#att_not_mark_root .anmr-warning,
#att_not_mark_root .warning {
  color: #c2410c;
  font-weight: 600;
}

#att_not_mark_root .anmr-danger,
#att_not_mark_root .danger {
  color: #b91c1c;
  font-weight: 600;
}

#att_not_mark_root .error-border {
  border: 2px solid #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.anmr-no-record-card {
  margin: 28px auto 8px;
  max-width: 420px;
  text-align: center;
  background: #f8fafc;
  padding: 28px 20px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.anmr-no-record-icon {
  font-size: 36px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.anmr-no-record-card h3 {
  margin: 8px 0 6px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 700;
}

.anmr-no-record-card p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

#att_not_mark_root .aCenter {
  text-align: center;
}

@media (max-width: 639px) {
  .anmr-page-card {
    padding: 16px;
  }

  .anmr-page-title {
    font-size: 18px;
  }

  .anmr-label-spacer {
    display: none;
  }
}

@media print {
  #att_not_mark_root .anmr-filters,
  #att_not_mark_root .anmr-search-btn {
    display: none !important;
  }

  .anmr-page-card {
    box-shadow: none;
    border: none;
  }
}


/* ------------------------ Fees Collection Report (fcre-*) ------------------------ */
.fcre-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fcre-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.fcre-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

.fcre-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.fcre-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.fcre-college-name {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

.fcre-print-dates {
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
}

.fcre-filters {
  margin-bottom: 4px;
}

.fcre-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: end;
}

@media (min-width: 640px) {
  .fcre-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fcre-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .fcre-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.fcre-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.fcre-form-item select,
.fcre-form-item input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.fcre-form-item select:focus,
.fcre-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.fcre-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.fcre-feefor-wrap {
  flex: 1 1 240px;
  min-width: 0;
  margin-bottom: 0;
}

.fcre-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  min-height: 42px;
}

.fcre-checkbox-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.fcre-checkbox-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.fcre-checkbox-item input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: #4f46e5;
}

.fcre-search-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.fcre-search-btn {
  min-width: 120px;
}

.fcre-results {
  margin-top: 20px;
}

.fcre-fine-block {
  margin-top: 8px;
}

.fcre-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 20px 0 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.fcre-section-head .head_title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.fcre-section-meta,
.fcre-section-head .qbCls {
  font-size: 13px;
  color: #6b7280;
}

.fcre-table-wrap {
  margin-top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_fees_collection_report .fcre-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border: none;
}

#root_fees_collection_report .fcre-table th,
#root_fees_collection_report .fcre-table td {
  vertical-align: top;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

#root_fees_collection_report .fcre-col-name {
  min-width: 220px;
  word-break: break-word;
}

#root_fees_collection_report .fcre-col-date,
#root_fees_collection_report .fcre-col-mode,
#root_fees_collection_report .fcre-col-rcpt {
  white-space: nowrap;
}

#root_fees_collection_report .fcre-col-amt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#root_fees_collection_report th.fcre-col-amt {
  text-align: right;
}

.fcre-inr {
  font-weight: 600;
  color: #374151;
}

.fcre-mode-total {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 18px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.fcre-totals-wrap {
  margin-top: 8px;
}

#root_fees_collection_report .feesListCls {
  width: 100%;
  max-width: 100%;
  padding-top: 0;
}

.fcre-totals {
  margin-top: 12px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-width: 420px;
  margin-left: auto;
}

.fcre-total-line {
  font-size: 15px;
  color: #111827;
  margin: 6px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.fcre-total-line strong {
  font-weight: 600;
  width: 100%;
}

.fcre-grand-total {
  font-size: 17px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #d1d5db;
  color: #05053d;
}

.fcre-no-record {
  margin-top: 24px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.fcre-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.fcre-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.fcre-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.fcre-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.fcre-download-bar a {
  text-decoration: none;
}

@media (max-width: 640px) {
  .fcre-page-card {
    padding: 16px;
  }

  .fcre-page-title {
    font-size: 18px;
  }

  .fcre-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .fcre-search-row {
    justify-content: stretch;
  }

  .fcre-search-row .btn,
  .fcre-search-btn {
    width: 100%;
  }

  .fcre-totals {
    max-width: 100%;
    margin-left: 0;
  }

  .fcre-download-bar {
    flex-direction: column;
  }

  .fcre-download-bar .btn,
  .fcre-download-bar a {
    width: 100%;
    text-align: center;
  }

  #root_fees_collection_report .fcre-table {
    min-width: 640px;
  }
}

@media print {
  #root_fees_collection_report .fcre-filters,
  #root_fees_collection_report .fcre-search-row,
  #root_fees_collection_report .fcre-download-bar,
  #root_fees_collection_report .fcre-actions-row {
    display: none !important;
  }

  .fcre-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .fcre-table-wrap {
    border: none;
    overflow: visible;
  }
}

#root_fees_collection_report .fcre-cancelled-row td {
  text-decoration: line-through;
  color: red; 
  background-color: #fef2f2;
}

#root_fees_collection_report .fcre-cancelled-badge {
  text-decoration: none;
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  white-space: nowrap;
}

/* ------------------------ Bill Wise Daily Report (bwdr-*) ------------------------ */
#root_bill_wise_daily_report .bwdr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

#root_bill_wise_daily_report .bwdr-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_bill_wise_daily_report .bwdr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#root_bill_wise_daily_report .bwdr-college-name {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

#root_bill_wise_daily_report .bwdr-print-dates {
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

#root_bill_wise_daily_report .bwdr-filters {
  margin-bottom: 18px;
}

#root_bill_wise_daily_report .bwdr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_bill_wise_daily_report .bwdr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_bill_wise_daily_report .bwdr-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#root_bill_wise_daily_report .bwdr-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_bill_wise_daily_report .bwdr-label-spacer {
  visibility: hidden;
}

#root_bill_wise_daily_report .bwdr-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  color: #374151;
  background: #ffffff;
  outline: none;
  font-size: 14px;
  min-height: 42px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#root_bill_wise_daily_report .bwdr-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_bill_wise_daily_report .bwdr-search-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#root_bill_wise_daily_report .bwdr-customize {
  display: none;
}

#root_bill_wise_daily_report .bwdr-main-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 20px;
}

#root_bill_wise_daily_report .bwdr-main-table {
  width: 100%;
  min-width: 900px;
  margin: 0;
}

#root_bill_wise_daily_report .bwdr-main-table th,
#root_bill_wise_daily_report .bwdr-main-table td {
  white-space: nowrap;
  vertical-align: middle;
}

#root_bill_wise_daily_report .bwdr-col-name {
  min-width: 180px;
}

#root_bill_wise_daily_report .verticalTableHeader,
#root_bill_wise_daily_report .bwdr-vertical-th {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  height: 140px;
  width: 42px;
  padding: 8px 4px;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
}

#root_bill_wise_daily_report .bwdr-total-row td {
  background: #f0fdf4;
  font-weight: 600;
}

#root_bill_wise_daily_report .bwdr-total-row td:first-child {
  text-align: right;
}

#root_bill_wise_daily_report .bwdr-wallet-block {
  margin: 16px 0 20px;
}

#root_bill_wise_daily_report .bwdr-wallet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 8px;
}

#root_bill_wise_daily_report .bwdr-wallet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_bill_wise_daily_report .bwdr-wallet-meta {
  font-size: 13px;
  color: #6b7280;
}

#root_bill_wise_daily_report .bwdr-wallet-total {
  text-align: right;
  font-size: 14px;
  color: #111827;
  padding: 8px 4px 0;
}

#root_bill_wise_daily_report .bwdr-summary-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

#root_bill_wise_daily_report .bwdr-summary-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #f9fafb;
}

#root_bill_wise_daily_report .bwdr-summary-table {
  width: 100%;
  min-width: 0;
  margin: 0;
}

#root_bill_wise_daily_report .bwdr-grand-total {
  margin-top: 10px;
}

#root_bill_wise_daily_report .bwdr-grand-line {
  text-align: right;
  font-size: 15px;
  color: #111827;
  padding: 8px 4px 0;
}

#root_bill_wise_daily_report .bwdr-no-rec {
  text-align: center;
  color: #dc2626;
  font-weight: 600;
  padding: 24px 12px;
}

#root_bill_wise_daily_report .bwdr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
}

#root_bill_wise_daily_report .bwdr-actions .btn,
#root_bill_wise_daily_report .bwdr-actions a .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#root_bill_wise_daily_report .aCenter {
  text-align: center;
}

@media (max-width: 640px) {
  #root_bill_wise_daily_report .bwdr-page-card {
    padding: 16px;
  }

  #root_bill_wise_daily_report .bwdr-page-title {
    font-size: 18px;
  }

  #root_bill_wise_daily_report .bwdr-label-spacer {
    display: none;
  }

  #root_bill_wise_daily_report .bwdr-summary-wrap {
    justify-content: stretch;
  }

  #root_bill_wise_daily_report .bwdr-summary-card {
    max-width: none;
  }

  #root_bill_wise_daily_report .bwdr-actions {
    flex-direction: column;
  }

  #root_bill_wise_daily_report .bwdr-actions .btn,
  #root_bill_wise_daily_report .bwdr-actions a,
  #root_bill_wise_daily_report .bwdr-actions a .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media print {
  /* Avoid blank first page: hide fixed nav / overlays / spacers */
  body.bwdr-printing {
    margin-top: 0 !important;
    background: #fff !important;
  }

  body.bwdr-printing #menu_root,
  body.bwdr-printing .header,
  body.bwdr-printing #loaderIcon,
  body.bwdr-printing #loading-overlays,
  body.bwdr-printing #warningModal,
  body.bwdr-printing .col-md-12[style*="padding-top"] {
    display: none !important;
  }

  #root_bill_wise_daily_report,
  #root_bill_wise_daily_report * {
    visibility: visible !important;
  }

  #root_bill_wise_daily_report {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #root_bill_wise_daily_report > main.page-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #root_bill_wise_daily_report .bwdr-filters,
  #root_bill_wise_daily_report .bwdr-filter-panel,
  #root_bill_wise_daily_report .bwdr-actions,
  #root_bill_wise_daily_report .bwdr-page-subtitle,
  #root_bill_wise_daily_report .bwdr-table-scroll-hint,
  #root_bill_wise_daily_report .print_hide {
    display: none !important;
  }

  #root_bill_wise_daily_report .bwdr-page-card {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #root_bill_wise_daily_report .bwdr-header {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }

  #root_bill_wise_daily_report .bwdr-main-table-wrap,
  #root_bill_wise_daily_report .bwdr-wallet-block .table-wrapper {
    overflow: visible !important;
    border: none !important;
    margin: 0 0 10px !important;
  }

  /* Sticky thead causes blank first page in Firefox print */
  #root_bill_wise_daily_report .bwdr-main-table thead th {
    position: static !important;
    top: auto !important;
  }

  #root_bill_wise_daily_report .bwdr-main-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto;
    font-size: 9px !important;
  }

  #root_bill_wise_daily_report .bwdr-main-table th,
  #root_bill_wise_daily_report .bwdr-main-table td {
    padding: 3px 4px !important;
    font-size: 9px !important;
    white-space: nowrap;
  }

  #root_bill_wise_daily_report .verticalTableHeader,
  #root_bill_wise_daily_report .bwdr-vertical-th {
    height: 70px !important;
    width: 22px !important;
    font-size: 8px !important;
    padding: 2px !important;
  }

  #root_bill_wise_daily_report .bwdr-summary-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #root_bill_wise_daily_report .bwdr-main-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Bill Wise Daily Report UI polish */
#root_bill_wise_daily_report .bwdr-page-card {
  padding: 24px;
}

#root_bill_wise_daily_report .bwdr-page-title .fa {
  color: #2563eb;
  font-size: 20px;
}

#root_bill_wise_daily_report .bwdr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.4;
}

#root_bill_wise_daily_report .bwdr-college-name {
  margin-top: 10px;
  font-size: 15px;
  color: #1f2937;
}

#root_bill_wise_daily_report .bwdr-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 4px;
}

#root_bill_wise_daily_report .bwdr-filter-grid {
  margin: 0;
}

#root_bill_wise_daily_report .bwdr-input {
  border-radius: 10px;
  border-color: #cbd5e1;
  min-height: 44px;
  box-sizing: border-box;
}

#root_bill_wise_daily_report .bwdr-search-btn {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
}

#root_bill_wise_daily_report .bwdr-hidden-block {
  display: none !important;
}

#root_bill_wise_daily_report .bwdr-results {
  margin-top: 8px;
}

#root_bill_wise_daily_report .bwdr-table-scroll-hint {
  display: none;
  font-size: 12px;
  color: #6b7280;
  padding: 8px 12px 0;
}

#root_bill_wise_daily_report .bwdr-main-table-wrap {
  margin-top: 16px;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

#root_bill_wise_daily_report .bwdr-main-table th,
#root_bill_wise_daily_report .bwdr-main-table td {
  padding: 10px 12px;
  font-size: 13px;
  color: #1f2937;
}

#root_bill_wise_daily_report .bwdr-main-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

#root_bill_wise_daily_report .verticalTableHeader,
#root_bill_wise_daily_report .bwdr-vertical-th {
  height: 120px;
  width: 36px;
  font-size: 11px;
  font-weight: 600;
  color: #14532d;
  letter-spacing: 0.02em;
}

#root_bill_wise_daily_report .bwdr-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#root_bill_wise_daily_report .bwdr-row-total {
  background: #f9fafb;
}

#root_bill_wise_daily_report .bwdr-total-row td {
  background: #ecfdf5;
  border-top: 2px solid #bbf7d0;
}

#root_bill_wise_daily_report .bwdr-total-label {
  text-align: right;
  padding-right: 16px;
  color: #065f46;
}

#root_bill_wise_daily_report .bwdr-summary-wrap {
  margin-top: 4px;
  margin-bottom: 8px;
}

#root_bill_wise_daily_report .bwdr-summary-card {
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_bill_wise_daily_report .bwdr-summary-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

#root_bill_wise_daily_report .bwdr-summary-table th,
#root_bill_wise_daily_report .bwdr-summary-table td {
  padding: 10px 12px;
  font-size: 13px;
}

#root_bill_wise_daily_report .bwdr-grand-line {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  font-size: 15px;
  color: #05053d;
}

#root_bill_wise_daily_report .bwdr-grand-line .fa-inr {
  margin: 0 2px;
}

#root_bill_wise_daily_report .bwdr-no-rec {
  margin-top: 20px;
  padding: 28px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #b91c1c;
}

#root_bill_wise_daily_report .bwdr-no-rec-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

#root_bill_wise_daily_report .bwdr-no-rec h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #b91c1c;
}

#root_bill_wise_daily_report .bwdr-no-rec p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_bill_wise_daily_report .bwdr-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  gap: 12px;
}

#root_bill_wise_daily_report .bwdr-action-link {
  text-decoration: none;
  display: inline-flex;
}

#root_bill_wise_daily_report .bwdr-action-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  justify-content: center;
}

@media (max-width: 768px) {
  #root_bill_wise_daily_report .bwdr-table-scroll-hint {
    display: block;
  }

  #root_bill_wise_daily_report .bwdr-main-table {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  #root_bill_wise_daily_report .bwdr-filter-panel {
    padding: 14px;
  }

  #root_bill_wise_daily_report .bwdr-page-subtitle {
    font-size: 13px;
  }

  #root_bill_wise_daily_report .bwdr-action-link,
  #root_bill_wise_daily_report .bwdr-action-btn {
    width: 100%;
  }
}

/* Sticky S.No + Name while scrolling fee columns horizontally */
#root_bill_wise_daily_report .bwdr-main-table thead th.bwdr-sticky-sno,
#root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-sno {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 52px;
  background: #d1fae5;
}

#root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-sno {
  background: #ffffff;
  z-index: 2;
}

#root_bill_wise_daily_report .bwdr-main-table thead th.bwdr-sticky-name,
#root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-name {
  position: sticky;
  left: 52px;
  z-index: 3;
  min-width: 180px;
  background: #d1fae5;
  box-shadow: 4px 0 6px -4px rgba(15, 23, 42, 0.25);
}

#root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-name {
  background: #ffffff;
  z-index: 2;
}

#root_bill_wise_daily_report .bwdr-main-table tbody tr:hover td.bwdr-sticky-sno,
#root_bill_wise_daily_report .bwdr-main-table tbody tr:hover td.bwdr-sticky-name {
  background: #eff6ff;
}

#root_bill_wise_daily_report .bwdr-main-table tbody tr.bwdr-total-row td.bwdr-sticky-sno,
#root_bill_wise_daily_report .bwdr-main-table tbody tr.bwdr-total-row td.bwdr-sticky-name {
  background: #ecfdf5;
}

#root_bill_wise_daily_report .bwdr-cancelled-row td {
  text-decoration: line-through;
  color: red; 
  background-color: #fef2f2;
}

#root_bill_wise_daily_report .bwdr-cancelled-row td.bwdr-sticky-sno,
#root_bill_wise_daily_report .bwdr-cancelled-row td.bwdr-sticky-name {
  background-color: #fef2f2;
}

#root_bill_wise_daily_report .bwdr-main-table tbody tr.bwdr-cancelled-row:hover td.bwdr-sticky-sno,
#root_bill_wise_daily_report .bwdr-main-table tbody tr.bwdr-cancelled-row:hover td.bwdr-sticky-name {
  background-color: #fef2f2;
}

#root_bill_wise_daily_report .bwdr-cancelled-badge {
  text-decoration: none;
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  white-space: nowrap;
}

@media print {
  #root_bill_wise_daily_report .bwdr-main-table thead th.bwdr-sticky-sno,
  #root_bill_wise_daily_report .bwdr-main-table thead th.bwdr-sticky-name,
  #root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-sno,
  #root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-name {
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
  }
}

@media (max-width: 640px) {
  #root_bill_wise_daily_report .bwdr-main-table thead th.bwdr-sticky-name,
  #root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-name {
    left: 44px;
    min-width: 140px;
  }

  #root_bill_wise_daily_report .bwdr-main-table thead th.bwdr-sticky-sno,
  #root_bill_wise_daily_report .bwdr-main-table tbody td.bwdr-sticky-sno {
    min-width: 44px;
  }
}

/* ------------------------ Date Wise Daily Report (dwdr-*) ------------------------ */
#root_date_wise_daily_report .dwdr-page {
  color: #111827;
}

#root_date_wise_daily_report .dwdr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_date_wise_daily_report .dwdr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_date_wise_daily_report .dwdr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.3;
}

#root_date_wise_daily_report .dwdr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_date_wise_daily_report .dwdr-page-subtitle {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  line-height: 1.4;
}

#root_date_wise_daily_report .dwdr-hidden {
  display: none !important;
}

#root_date_wise_daily_report .dwdr-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#root_date_wise_daily_report .dwdr-wallet-block {
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px 12px;
}

#root_date_wise_daily_report .dwdr-wallet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 10px;
}

#root_date_wise_daily_report .dwdr-wallet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_date_wise_daily_report .dwdr-wallet-meta {
  font-size: 13px;
  color: #6b7280;
}

#root_date_wise_daily_report .dwdr-wallet-table-wrap {
  overflow-x: auto;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_date_wise_daily_report #displayWalletTopupListId thead th {
  background: #eff6ff;
  color: #1e3a8a;
  border-bottom: 1px solid #bfdbfe;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
}

#root_date_wise_daily_report #displayWalletTopupListId td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  vertical-align: middle;
}

#root_date_wise_daily_report #displayWalletTopupListId td.dwdr-col-name {
  text-align: left;
}

#root_date_wise_daily_report .dwdr-wallet-total {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 10px 4px 0;
}

#root_date_wise_daily_report .dwdr-print-dates {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

#root_date_wise_daily_report .dwdr-print-line {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
}

#root_date_wise_daily_report .dwdr-filter-form {
  margin-bottom: 8px;
}

#root_date_wise_daily_report .dwdr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  #root_date_wise_daily_report .dwdr-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_date_wise_daily_report .dwdr-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#root_date_wise_daily_report .dwdr-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

#root_date_wise_daily_report .dwdr-label-spacer {
  visibility: hidden;
}

#root_date_wise_daily_report .dwdr-filter-group select,
#root_date_wise_daily_report .dwdr-filter-group input,
#root_date_wise_daily_report .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.4;
}

#root_date_wise_daily_report .dwdr-filter-group select:focus,
#root_date_wise_daily_report .dwdr-filter-group input:focus,
#root_date_wise_daily_report .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_date_wise_daily_report .dwdr-search-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#root_date_wise_daily_report .dwdr-search-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  min-height: 42px;
  border-radius: 10px;
  padding: 8px 14px;
}

#root_date_wise_daily_report .dwdr-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}

@media (min-width: 1024px) {
  #root_date_wise_daily_report .dwdr-results {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }
}

#root_date_wise_daily_report .dwdr-main-table-wrap {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  position: relative;
}

#root_date_wise_daily_report .dwdr-rupee {
  font-weight: 700;
  margin-right: 2px;
}

#root_date_wise_daily_report .dwdr-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  margin: 0;
}

#root_date_wise_daily_report #displayFeesModeListId thead th {
  background: #ecfdf5;
  color: #064e3b;
  border-bottom: 1px solid #bbf7d0;
  border-right: 1px solid #d1fae5;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  vertical-align: bottom;
  white-space: nowrap;
}

#root_date_wise_daily_report #displayFeesModeListId thead th:last-child {
  border-right: none;
}

#root_date_wise_daily_report #displayFeesModeListId td {
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  vertical-align: middle;
}

#root_date_wise_daily_report #displayFeesModeListId td:last-child {
  border-right: none;
}

#root_date_wise_daily_report #displayFeesModeListId td.dwdr-amt,
#root_date_wise_daily_report #paymentSummaryTable td.dwdr-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#root_date_wise_daily_report #displayFeesModeListId tbody tr:hover {
  background: #f8fafc;
}

#root_date_wise_daily_report .aCenter {
  text-align: center;
}

#root_date_wise_daily_report .verticalTableHeader,
#root_date_wise_daily_report .dwdr-vertical-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 140px;
  width: 44px;
  padding: 8px 4px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
}

#root_date_wise_daily_report .totals-row td,
#root_date_wise_daily_report .dwdr-totals-row td {
  background: #f0fdf4;
  font-weight: 700;
  border-top: 2px solid #86efac;
}

#root_date_wise_daily_report .dwdr-total-label {
  text-align: right;
}

#root_date_wise_daily_report .dwdr-summary-wrap {
  width: 100%;
}

#root_date_wise_daily_report .dwdr-summary-card {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #f9fafb;
  box-sizing: border-box;
}

#root_date_wise_daily_report .dwdr-summary-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

#root_date_wise_daily_report .dwdr-summary-table-wrap {
  overflow-x: auto;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_date_wise_daily_report .dwdr-summary-table {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-collapse: collapse;
}

#root_date_wise_daily_report #paymentSummaryTable th {
  background: #ecfdf5;
  color: #064e3b;
  border-bottom: 1px solid #bbf7d0;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
}

#root_date_wise_daily_report #paymentSummaryTable th.aCenter {
  text-align: center;
}

#root_date_wise_daily_report #paymentSummaryTable td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  text-align: left;
}

#root_date_wise_daily_report #paymentSummaryTable tbody tr:last-child td {
  border-bottom: none;
}

#root_date_wise_daily_report .dwdr-grand-total,
#root_date_wise_daily_report .dwdr-fee-name,
#root_date_wise_daily_report .dwdr-grand-line {
  margin-top: 12px;
  font-size: 15px;
  color: #0f172a;
  text-align: right;
  padding: 4px 2px 0;
}

#root_date_wise_daily_report .dwdr-no-record {
  display: none;
  margin-top: 20px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
}

#root_date_wise_daily_report .dwdr-no-record-icon {
  font-size: 28px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_date_wise_daily_report .dwdr-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_date_wise_daily_report .dwdr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

#root_date_wise_daily_report .dwdr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_date_wise_daily_report .dwdr-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  min-width: 140px;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 16px;
}

#root_date_wise_daily_report .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 920px) {
  #root_date_wise_daily_report .verticalTableHeader,
  #root_date_wise_daily_report .dwdr-vertical-header {
    height: 120px;
    width: 40px;
    padding: 4px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  #root_date_wise_daily_report .dwdr-page-card {
    padding: 16px;
  }

  #root_date_wise_daily_report .dwdr-page-title {
    font-size: 18px;
  }

  #root_date_wise_daily_report .dwdr-label-spacer {
    display: none;
  }

  #root_date_wise_daily_report .dwdr-main-table-wrap {
    box-shadow: inset -12px 0 12px -12px rgba(15, 23, 42, 0.18);
  }

  #root_date_wise_daily_report .dwdr-actions {
    flex-direction: column;
  }

  #root_date_wise_daily_report .dwdr-actions .btn {
    width: 100%;
    min-width: 0;
  }

  #root_date_wise_daily_report .dwdr-grand-line {
    text-align: left;
  }
}

@media print {
  #root_date_wise_daily_report .dwdr-filters,
  #root_date_wise_daily_report .dwdr-actions,
  #root_date_wise_daily_report #search,
  #root_date_wise_daily_report .print_hide {
    display: none !important;
  }

  #root_date_wise_daily_report .dwdr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  #root_date_wise_daily_report .dwdr-results {
    grid-template-columns: 1fr;
  }

  #root_date_wise_daily_report .dwdr-main-table-wrap,
  #root_date_wise_daily_report .dwdr-summary-table-wrap {
    overflow: visible;
    border: none;
  }
}


/* ------------------------ Attendance Not Marked Report UI polish ------------------------ */
#att_not_mark_root .anmr-page-title {
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.3;
}

#att_not_mark_root .anmr-page-title .fa {
  color: #4f46e5;
}

#att_not_mark_root .anmr-page-subtitle {
  color: #475569;
  font-size: 14px;
  margin-top: 8px;
}

#att_not_mark_root .anmr-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

#att_not_mark_root .anmr-filter-bar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

#att_not_mark_root .anmr-filters {
  margin-bottom: 0;
  gap: 14px 16px;
  align-items: end;
}

#att_not_mark_root .anmr-filter-label {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

#att_not_mark_root .anmr-filter-group select,
#att_not_mark_root .anmr-filter-group input {
  border-color: #94a3b8;
  color: #0f172a;
  background: #ffffff;
}

#att_not_mark_root .anmr-search-wrap {
  display: flex;
  align-items: flex-end;
}

#att_not_mark_root .anmr-search-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
}

#att_not_mark_root .anmr-table-hidden {
  display: none !important;
}

#att_not_mark_root .anmr-page-card .table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  overflow-x: auto;
}

#att_not_mark_root .college-table thead {
  background-color: #ecfdf5;
}

#att_not_mark_root .college-table thead th {
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  padding: 12px 14px;
}

#att_not_mark_root .college-table tbody td {
  color: #111827;
  padding: 12px 14px;
  font-size: 14px;
}

#att_not_mark_root .anmr-subject-cell {
  text-align: left;
  white-space: normal;
  word-break: break-word;
  min-width: 160px;
  max-width: 280px;
}

#att_not_mark_root .anmr-class-cell {
  text-align: left;
  white-space: nowrap;
}

#att_not_mark_root .anmr-staff-cell,
#att_not_mark_root .staff-cell {
  background: #eef2ff;
  color: #312e81;
  font-weight: 700;
  text-align: left;
  min-width: 120px;
}

#att_not_mark_root .anmr-neutral {
  color: #334155;
  font-weight: 600;
}

#att_not_mark_root .anmr-muted {
  color: #64748b;
  font-style: italic;
}

#att_not_mark_root .anmr-no-record-card {
  margin: 12px auto 4px;
  max-width: 460px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 32px 24px;
}

#att_not_mark_root .anmr-no-record-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

#att_not_mark_root .anmr-no-record-card h3 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
}

#att_not_mark_root .anmr-no-record-card p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 639px) {
  #att_not_mark_root .anmr-filter-bar {
    padding: 14px;
  }

  #att_not_mark_root .anmr-page-title {
    font-size: 1.15rem;
  }

  #att_not_mark_root .anmr-search-wrap {
    width: 100%;
  }

  #att_not_mark_root .anmr-search-btn {
    width: 100%;
  }

  #att_not_mark_root .anmr-subject-cell {
    max-width: 180px;
  }
}

/* ------------------------ ANMR button/table overflow polish ------------------------ */
#att_not_mark_root .anmr-search-btn.btn {
  height: 42px;
  min-height: 42px;
  padding: 0 16px;
  line-height: 42px;
  box-sizing: border-box;
}

#att_not_mark_root .anmr-search-btn .fa {
  line-height: 1;
  vertical-align: middle;
}

#att_not_mark_root .anmr-table-wrap,
#att_not_mark_root #anmrTableWrap.table-container {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#att_not_mark_root .anmr-table {
  min-width: 820px;
  table-layout: auto;
}

#att_not_mark_root .anmr-subject-cell {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 639px) {
  #att_not_mark_root .anmr-table-wrap::after {
    content: "" ;
    display: block;
  }

  #att_not_mark_root .anmr-page-card .table-container {
    border-radius: 12px;
  }
}

/* ------------------------ Term Wise Fees Collection Report (twfcr-*) ------------------------ */
.twfcr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.twfcr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.twfcr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

.twfcr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.twfcr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.twfcr-print-dates {
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
}

.twfcr-filters {
  margin-bottom: 4px;
}

.twfcr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: end;
}

@media (min-width: 640px) {
  .twfcr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .twfcr-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .twfcr-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.twfcr-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.twfcr-form-item select,
.twfcr-form-item input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.twfcr-form-item select:focus,
.twfcr-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.twfcr-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.twfcr-feefor-wrap {
  flex: 1 1 240px;
  min-width: 0;
  margin-bottom: 0;
}

.twfcr-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  min-height: 42px;
}

.twfcr-checkbox-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.twfcr-checkbox-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.twfcr-checkbox-item input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: #4f46e5;
}

.twfcr-search-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.twfcr-search-btn {
  min-width: 120px;
}

.twfcr-results {
  margin-top: 20px;
}

.twfcr-date-head {
  margin: 20px 0 10px;
  padding: 10px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
}

.twfcr-date-head .head_title {
  font-size: 16px;
  font-weight: 700;
  color: #312e81;
}

.twfcr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 12px 0 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.twfcr-section-head .qbCls {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.twfcr-table-wrap {
  margin-top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_term_wise_fees_collection_report .twfcr-table {
  width: 100%;
  min-width: 780px;
  margin: 0;
  border: none;
}

#root_term_wise_fees_collection_report .twfcr-table th,
#root_term_wise_fees_collection_report .twfcr-table td {
  vertical-align: top;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

#root_term_wise_fees_collection_report .twfcr-col-amt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#root_term_wise_fees_collection_report th.twfcr-col-amt {
  text-align: right;
}

.twfcr-inr {
  font-weight: 600;
  color: #374151;
}

.twfcr-mode-total {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 16px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.twfcr-wallet-block {
  margin-top: 12px;
}

#root_term_wise_fees_collection_report .twfcr-wallet-block .twfcr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

#root_term_wise_fees_collection_report .twfcr-wallet-block .head_title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.twfcr-section-meta,
#root_term_wise_fees_collection_report .twfcr-wallet-block .qbCls {
  font-size: 13px;
  color: #6b7280;
}

#root_term_wise_fees_collection_report #displayWalletTopupListId thead th {
  background: #eff6ff;
  color: #1e3a8a;
}

#root_term_wise_fees_collection_report .twfcr-col-name {
  text-align: left;
}

#root_term_wise_fees_collection_report .twfcr-col-date,
#root_term_wise_fees_collection_report .twfcr-col-mode {
  text-align: center;
  white-space: nowrap;
}

.twfcr-total-line {
  font-size: 15px;
  color: #111827;
  margin: 6px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.twfcr-total-line strong {
  font-weight: 600;
  width: 100%;
}

.twfcr-grand-total {
  font-size: 17px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.twfcr-summary-block {
  margin-top: 20px;
}

.twfcr-summary-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

.twfcr-summary-body {
  margin-bottom: 4px;
}

#root_term_wise_fees_collection_report .twfcr-summary-body .twfcr-table th {
  white-space: nowrap;
  font-size: 12px;
}

.twfcr-totals-wrap {
  margin-top: 8px;
}

#root_term_wise_fees_collection_report .fees_list,
#root_term_wise_fees_collection_report .feeRecTable {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
}

.twfcr-totals {
  margin-top: 12px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.twfcr-no-record {
  margin-top: 24px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.twfcr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.twfcr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.twfcr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.twfcr-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.twfcr-download-bar a {
  text-decoration: none;
}

@media (max-width: 640px) {
  .twfcr-page-card {
    padding: 16px;
  }

  .twfcr-page-title {
    font-size: 18px;
  }

  .twfcr-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .twfcr-search-row {
    justify-content: stretch;
  }

  .twfcr-search-row .btn,
  .twfcr-search-btn {
    width: 100%;
  }

  .twfcr-download-bar {
    flex-direction: column;
  }

  .twfcr-download-bar .btn,
  .twfcr-download-bar a {
    width: 100%;
    text-align: center;
  }

  #root_term_wise_fees_collection_report .twfcr-table {
    min-width: 680px;
  }
}

@media print {
  #root_term_wise_fees_collection_report .twfcr-filters,
  #root_term_wise_fees_collection_report .twfcr-actions-row,
  #root_term_wise_fees_collection_report .twfcr-download-bar {
    display: none !important;
  }

  .twfcr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .twfcr-table-wrap {
    border: none;
    overflow: visible;
  }
}

/* ------------------------ Bill Wise Fees Collected Amount Report (bwfca-*) ------------------------ */
#root_bill_wise_fees_collected_amount_report .bwfca-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_bill_wise_fees_collected_amount_report .bwfca-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_bill_wise_fees_collected_amount_report .bwfca-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-page-title .fa {
  color: #2563eb;
  font-size: 20px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_bill_wise_fees_collected_amount_report .bwfca-print-dates {
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

#root_bill_wise_fees_collected_amount_report .bwfca-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_bill_wise_fees_collected_amount_report .bwfca-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_bill_wise_fees_collected_amount_report .bwfca-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #root_bill_wise_fees_collected_amount_report .bwfca-filter-grid {
    grid-template-columns: 1fr 1fr 1.2fr 1.2fr auto;
  }
}

#root_bill_wise_fees_collected_amount_report .bwfca-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-label-spacer {
  visibility: hidden;
}

#root_bill_wise_fees_collected_amount_report .bwfca-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  color: #111827;
  background: #ffffff;
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
}

#root_bill_wise_fees_collected_amount_report .bwfca-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_bill_wise_fees_collected_amount_report .bwfca-search-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 600;
}

#root_bill_wise_fees_collected_amount_report .bwfca-feefor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

#root_bill_wise_fees_collected_amount_report .bwfca-check-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  margin: 0;
  cursor: pointer;
}

#root_bill_wise_fees_collected_amount_report .bwfca-check-item input {
  width: 16px;
  height: 16px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-date-block {
  margin-bottom: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #ffffff;
}

#root_bill_wise_fees_collected_amount_report .bwfca-date-heading {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_bill_wise_fees_collected_amount_report .bwfca-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 10px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
}

#root_bill_wise_fees_collected_amount_report .bwfca-table th,
#root_bill_wise_fees_collected_amount_report .bwfca-table td {
  padding: 10px 12px;
  font-size: 13px;
  white-space: nowrap;
}

#root_bill_wise_fees_collected_amount_report .bwfca-amt,
#root_bill_wise_fees_collected_amount_report .bwfca-amt-head {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#root_bill_wise_fees_collected_amount_report .bwfca-date-mode-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  font-size: 14px;
  color: #1f2937;
}

#root_bill_wise_fees_collected_amount_report .bwfca-date-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #e5e7eb;
  color: #065f46;
}

#root_bill_wise_fees_collected_amount_report .bwfca-cancelled-row td {
  text-decoration: line-through;
  color: red;
  background-color: #fef2f2;
}

#root_bill_wise_fees_collected_amount_report .bwfca-cancelled-badge {
  text-decoration: none;
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  white-space: nowrap;
}

#root_bill_wise_fees_collected_amount_report .bwfca-wallet-block {
  margin-top: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px 12px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-wallet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 10px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-wallet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_bill_wise_fees_collected_amount_report .bwfca-wallet-meta {
  font-size: 13px;
  color: #6b7280;
}

#root_bill_wise_fees_collected_amount_report #displayWalletTopupListId thead th {
  background: #eff6ff;
  color: #1e3a8a;
}

#root_bill_wise_fees_collected_amount_report .bwfca-wallet-total {
  text-align: right;
  font-size: 14px;
  color: #111827;
  padding: 10px 4px 0;
}

#root_bill_wise_fees_collected_amount_report .bwfca-side-totals {
  margin-top: 16px;
  margin-left: auto;
  max-width: 420px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f9fafb;
}

#root_bill_wise_fees_collected_amount_report .bwfca-total-heading {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-side-line,
#root_bill_wise_fees_collected_amount_report .bwfca-grand-line {
  font-size: 14px;
  color: #1f2937;
  margin: 4px 0;
}

#root_bill_wise_fees_collected_amount_report .bwfca-grand-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d1d5db;
  font-size: 15px;
  color: #05053d;
}

#root_bill_wise_fees_collected_amount_report .bwfca-no-rec {
  text-align: center;
  color: #b91c1c;
  font-weight: 600;
  padding: 24px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin-top: 16px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: center;
}

#root_bill_wise_fees_collected_amount_report .bwfca-action-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 640px) {
  #root_bill_wise_fees_collected_amount_report .bwfca-page-card {
    padding: 16px;
  }

  #root_bill_wise_fees_collected_amount_report .bwfca-page-title {
    font-size: 18px;
  }

  #root_bill_wise_fees_collected_amount_report .bwfca-label-spacer {
    display: none;
  }

  #root_bill_wise_fees_collected_amount_report .bwfca-side-totals {
    max-width: none;
    margin-left: 0;
  }

  #root_bill_wise_fees_collected_amount_report .bwfca-action-btn {
    width: 100%;
    justify-content: center;
  }

  #root_bill_wise_fees_collected_amount_report .bwfca-excel-wrap,
  #root_bill_wise_fees_collected_amount_report .bwfca-actions {
    width: 100%;
  }
}

@media print {
  #root_bill_wise_fees_collected_amount_report .bwfca-filters,
  #root_bill_wise_fees_collected_amount_report .bwfca-actions,
  #root_bill_wise_fees_collected_amount_report .bwfca-page-subtitle {
    display: none !important;
  }

  #root_bill_wise_fees_collected_amount_report .bwfca-page-card {
    box-shadow: none;
    border: none;
  }
}


/* ------------------------ Staff Wise Fees Collection Report (swfcr-*) ------------------------ */
#root_staff_wise_fees_collection_report .swfcr-page {
  color: #111827;
}

#root_staff_wise_fees_collection_report .swfcr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_staff_wise_fees_collection_report .swfcr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_staff_wise_fees_collection_report .swfcr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_staff_wise_fees_collection_report .swfcr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_staff_wise_fees_collection_report .swfcr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_staff_wise_fees_collection_report .swfcr-filter-form {
  margin-bottom: 8px;
}

#root_staff_wise_fees_collection_report .swfcr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  #root_staff_wise_fees_collection_report .swfcr-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_staff_wise_fees_collection_report .swfcr-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #root_staff_wise_fees_collection_report .swfcr-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

#root_staff_wise_fees_collection_report .swfcr-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

#root_staff_wise_fees_collection_report .swfcr-label-spacer {
  visibility: hidden;
}

#root_staff_wise_fees_collection_report .swfcr-filter-group select,
#root_staff_wise_fees_collection_report .swfcr-filter-group input,
#root_staff_wise_fees_collection_report .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
  font-size: 14px;
}

#root_staff_wise_fees_collection_report .swfcr-filter-group select:focus,
#root_staff_wise_fees_collection_report .swfcr-filter-group input:focus,
#root_staff_wise_fees_collection_report .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_staff_wise_fees_collection_report .swfcr-search-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  min-height: 42px;
  border-radius: 10px;
}

#root_staff_wise_fees_collection_report .swfcr-results {
  margin-top: 18px;
}

#root_staff_wise_fees_collection_report .swfcr-staff-block {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
}

#root_staff_wise_fees_collection_report .swfcr-staff-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

#root_staff_wise_fees_collection_report .swfcr-date-block {
  margin: 14px 0 18px;
}

#root_staff_wise_fees_collection_report .swfcr-date-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
}

#root_staff_wise_fees_collection_report .swfcr-date-total {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

#root_staff_wise_fees_collection_report .swfcr-table-wrap {
  overflow-x: auto;
  width: 100%;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

#root_staff_wise_fees_collection_report .swfcr-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
}

#root_staff_wise_fees_collection_report .swfcr-table thead th {
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 1px solid #bbf7d0;
  white-space: nowrap;
}

#root_staff_wise_fees_collection_report .swfcr-table td {
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_staff_wise_fees_collection_report .swfcr-table tbody tr:hover {
  background: #f8fafc;
}

#root_staff_wise_fees_collection_report .aCenter {
  text-align: center;
}

#root_staff_wise_fees_collection_report .swfcr-amt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#root_staff_wise_fees_collection_report .swfcr-rupee {
  font-weight: 700;
}

#root_staff_wise_fees_collection_report .swfcr-mode-total {
  text-align: right;
  font-size: 14px;
  color: #0f172a;
  padding: 8px 4px 4px;
}

#root_staff_wise_fees_collection_report .swfcr-staff-total,
#root_staff_wise_fees_collection_report .swfcr-staff-grand {
  text-align: right;
  font-size: 14px;
  color: #0f172a;
  padding: 4px 4px;
}

#root_staff_wise_fees_collection_report .swfcr-staff-grand {
  font-size: 15px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
}

#root_staff_wise_fees_collection_report .swfcr-no-record {
  margin-top: 20px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
}

#root_staff_wise_fees_collection_report .swfcr-no-record-icon {
  font-size: 28px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_staff_wise_fees_collection_report .swfcr-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_staff_wise_fees_collection_report .swfcr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

#root_staff_wise_fees_collection_report .swfcr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_staff_wise_fees_collection_report .swfcr-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-weight: 600;
  border-radius: 10px;
}

@media (max-width: 640px) {
  #root_staff_wise_fees_collection_report .swfcr-page-card {
    padding: 16px;
  }

  #root_staff_wise_fees_collection_report .swfcr-page-title {
    font-size: 18px;
  }

  #root_staff_wise_fees_collection_report .swfcr-label-spacer {
    display: none;
  }

  #root_staff_wise_fees_collection_report .swfcr-date-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #root_staff_wise_fees_collection_report .swfcr-mode-total,
  #root_staff_wise_fees_collection_report .swfcr-staff-total,
  #root_staff_wise_fees_collection_report .swfcr-staff-grand {
    text-align: left;
  }

  #root_staff_wise_fees_collection_report .swfcr-actions .btn,
  #root_staff_wise_fees_collection_report .swfcr-actions a {
    width: 100%;
  }

  #root_staff_wise_fees_collection_report .swfcr-actions a .btn {
    width: 100%;
  }
}

@media print {
  #root_staff_wise_fees_collection_report .swfcr-filters,
  #root_staff_wise_fees_collection_report .swfcr-actions,
  #root_staff_wise_fees_collection_report #search,
  #root_staff_wise_fees_collection_report .swfcr-idle-hint {
    display: none !important;
  }

  #root_staff_wise_fees_collection_report .swfcr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  #root_staff_wise_fees_collection_report .swfcr-table-wrap {
    overflow: visible;
    border: none;
  }
}

/* Phase 3 UI polish ? staff wise fees collection report */
#root_staff_wise_fees_collection_report .swfcr-page-title .fa {
  color: #047857;
}

#root_staff_wise_fees_collection_report .swfcr-idle-hint {
  margin-top: 18px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

#root_staff_wise_fees_collection_report .swfcr-idle-hint-icon {
  font-size: 26px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_staff_wise_fees_collection_report .swfcr-idle-hint p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

#root_staff_wise_fees_collection_report .swfcr-staff-block {
  border-left: 4px solid #059669;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

#root_staff_wise_fees_collection_report .swfcr-staff-name {
  font-size: 17px;
  letter-spacing: 0.01em;
}

#root_staff_wise_fees_collection_report .swfcr-date-label {
  font-weight: 700;
  color: #0f172a;
}

#root_staff_wise_fees_collection_report .swfcr-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

#root_staff_wise_fees_collection_report .swfcr-table tbody tr:nth-child(even):hover,
#root_staff_wise_fees_collection_report .swfcr-table tbody tr:hover {
  background: #f0fdf4;
}

#root_staff_wise_fees_collection_report .swfcr-staff-summary {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  background: #ecfdf5;
}

#root_staff_wise_fees_collection_report .swfcr-staff-summary .swfcr-staff-total,
#root_staff_wise_fees_collection_report .swfcr-staff-summary .swfcr-staff-grand {
  padding: 3px 0;
}

#root_staff_wise_fees_collection_report .swfcr-staff-summary .swfcr-staff-grand {
  border-top: 1px dashed #a7f3d0;
  margin-top: 6px;
  padding-top: 8px;
  color: #065f46;
  font-size: 15px;
}

#root_staff_wise_fees_collection_report .swfcr-excel-link {
  display: inline-block;
  text-decoration: none;
}

#root_staff_wise_fees_collection_report .swfcr-excel-btn {
  min-width: 180px;
}

#root_staff_wise_fees_collection_report .swfcr-customize-wrap:empty,
#root_staff_wise_fees_collection_report .swfcr-customize-wrap:has(#customizeReports:empty) {
  display: none;
}

@media (max-width: 640px) {
  #root_staff_wise_fees_collection_report .swfcr-staff-summary .swfcr-staff-total,
  #root_staff_wise_fees_collection_report .swfcr-staff-summary .swfcr-staff-grand {
    text-align: left;
  }

  #root_staff_wise_fees_collection_report .swfcr-excel-btn {
    width: 100%;
    min-width: 0;
  }
}

/* BWFCA UI polish */
#root_bill_wise_fees_collected_amount_report .bwfca-check-item b {
  text-transform: capitalize;
  font-weight: 600;
}

#root_bill_wise_fees_collected_amount_report .bwfca-table-scroll-hint {
  display: none;
  font-size: 12px;
  color: #6b7280;
  margin: -4px 0 8px;
}

#root_bill_wise_fees_collected_amount_report .bwfca-date-block {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_bill_wise_fees_collected_amount_report .bwfca-side-totals {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_bill_wise_fees_collected_amount_report .bwfca-total-lines {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  #root_bill_wise_fees_collected_amount_report .bwfca-table-scroll-hint {
    display: block;
  }
}

/* ------------------------ Overall Student Fees Report (osfr-*) ------------------------ */
.osfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.osfr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.osfr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.osfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.osfr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.osfr-ay-name {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.osfr-ay-select {
  min-width: 180px;
}

.osfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.osfr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.osfr-filters {
  margin-bottom: 8px;
}

.osfr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  .osfr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .osfr-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .osfr-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.osfr-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.osfr-form-item select,
.osfr-form-item input[type="text"],
.osfr-form-item textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.osfr-form-item select:focus,
.osfr-form-item input[type="text"]:focus,
.osfr-form-item textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.osfr-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  min-height: 42px;
}

.osfr-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.osfr-check input {
  width: auto;
  margin: 0;
  accent-color: #4f46e5;
}

.osfr-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.osfr-feefor-wrap {
  flex: 1 1 240px;
  min-width: 0;
}

.osfr-search-wrap {
  flex: 0 0 auto;
}

.osfr-search-btn {
  min-width: 120px;
}

.osfr-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 14px;
  color: #312e81;
}

.osfr-totals:empty,
#root_overall_student_fees_report #ToTalAmount:empty + #CollectedAmount:empty {
  display: none;
}

.osfr-results {
  margin-top: 8px;
}

.osfr-class-block {
  margin-bottom: 18px;
}

.osfr-class-title {
  margin-bottom: 8px;
  font-size: 15px;
  color: #111827;
}

.osfr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_overall_student_fees_report .osfr-table {
  width: 100%;
  min-width: 760px;
  margin: 0;
  border: none;
}

#root_overall_student_fees_report .osfr-table th,
#root_overall_student_fees_report .osfr-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: top;
}

#root_overall_student_fees_report .osfr-col-amt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.osfr-inr {
  font-weight: 600;
  color: #374151;
}

.osfr-no-record {
  margin-top: 20px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.osfr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.osfr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.osfr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.osfr-sms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.osfr-sms-btn-wrap {
  display: inline-flex;
}

.osfr-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

.osfr-modal-hidden {
  display: none !important;
}

.osfr-modal {
  background: #fff;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  margin: auto;
}

.osfr-modal-sm {
  max-width: 420px;
}

#root_overall_student_fees_report .modal-overlay > .osfr-modal {
  margin: auto;
}

.osfr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.osfr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.osfr-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}

.osfr-modal-close:hover {
  color: #111827;
}

.osfr-modal-body {
  padding: 18px;
}

.osfr-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .osfr-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.osfr-message-block {
  margin-bottom: 14px;
}

.osfr-note {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #6b7280;
}

.osfr-char-left {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.osfr-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

@media (min-width: 640px) {
  .osfr-schedule {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.osfr-now-wrap {
  display: flex;
  align-items: center;
  min-height: 42px;
}

.osfr-instruction {
  margin: 0 0 14px;
  font-size: 13px;
  color: #6b7280;
}

.osfr-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .osfr-page-card {
    padding: 16px;
  }

  .osfr-page-title {
    font-size: 18px;
  }

  .osfr-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .osfr-search-btn {
    width: 100%;
  }

  .osfr-sms-actions {
    flex-direction: column;
  }

  .osfr-sms-btn-wrap .btn {
    width: 100%;
  }

  .osfr-download-bar {
    flex-direction: column;
  }

  .osfr-download-bar .btn,
  .osfr-download-bar a {
    width: 100%;
    text-align: center;
  }
}

@media print {
  #root_overall_student_fees_report .osfr-filters,
  #root_overall_student_fees_report .osfr-actions-row,
  #root_overall_student_fees_report .osfr-sms-actions,
  #root_overall_student_fees_report .osfr-download-bar {
    display: none !important;
  }

  .osfr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ------------------------ Class Wise Term Fees Report (cwtfr-*) ------------------------ */
#root_class_wise_term_fees_report .cwtfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
}

#root_class_wise_term_fees_report .cwtfr-header {
  margin-bottom: 20px;
}

#root_class_wise_term_fees_report .cwtfr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#root_class_wise_term_fees_report .cwtfr-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_class_wise_term_fees_report .cwtfr-page-title .fa {
  color: #2563eb;
}

#root_class_wise_term_fees_report .cwtfr-ay-name {
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
}

#root_class_wise_term_fees_report .cwtfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_class_wise_term_fees_report .cwtfr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#root_class_wise_term_fees_report .cwtfr-filters {
  margin-bottom: 16px;
}

#root_class_wise_term_fees_report .cwtfr-term-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#root_class_wise_term_fees_report .cwtfr-year-group {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}

#root_class_wise_term_fees_report .cwtfr-year-title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

#root_class_wise_term_fees_report .cwtfr-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 1024px) {
  #root_class_wise_term_fees_report .cwtfr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #root_class_wise_term_fees_report .cwtfr-filter-grid {
    grid-template-columns: 1fr;
  }
}

#root_class_wise_term_fees_report .cwtfr-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_class_wise_term_fees_report .cwtfr-form-item select,
#root_class_wise_term_fees_report .cwtfr-form-item input[type="text"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
}

#root_class_wise_term_fees_report .cwtfr-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}

#root_class_wise_term_fees_report .cwtfr-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
  cursor: pointer;
}

#root_class_wise_term_fees_report .cwtfr-term-block {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

#root_class_wise_term_fees_report .cwtfr-term-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#root_class_wise_term_fees_report .cwtfr-term-header label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_class_wise_term_fees_report .cwtfr-course-hint {
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 999px;
  padding: 3px 10px;
}

#root_class_wise_term_fees_report .cwtfr-term-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#root_class_wise_term_fees_report .cwtfr-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

#root_class_wise_term_fees_report .cwtfr-search-btn {
  min-width: 120px;
}

#root_class_wise_term_fees_report .cwtfr-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  margin: 16px 0;
  font-size: 14px;
  color: #1e3a8a;
}

#root_class_wise_term_fees_report .cwtfr-results {
  margin-top: 8px;
}

#root_class_wise_term_fees_report .cwtfr-class-block {
  margin-bottom: 20px;
}

#root_class_wise_term_fees_report .cwtfr-class-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#root_class_wise_term_fees_report .cwtfr-class-title {
  margin-bottom: 0;
  font-size: 15px;
  color: #111827;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#root_class_wise_term_fees_report .cwtfr-details-btn {
  font-weight: 600;
  padding: 6px 14px;
  white-space: nowrap;
  background-color: #0ea5e9 !important;
  border: 1px solid #0284c7 !important;
  color: #ffffff !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#root_class_wise_term_fees_report .cwtfr-details-btn:hover {
  background-color: #0284c7 !important;
}

#root_class_wise_term_fees_report .cwtfr-selected-terms {
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
  border-radius: 999px;
  padding: 3px 10px;
}

#root_class_wise_term_fees_report .cwtfr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_class_wise_term_fees_report .cwtfr-table {
  width: 100%;
  margin: 0;
}

#root_class_wise_term_fees_report .cwtfr-table th,
#root_class_wise_term_fees_report .cwtfr-table td {
  padding: 10px 12px;
  font-size: 13px;
}

#root_class_wise_term_fees_report .cwtfr-col-amt {
  white-space: nowrap;
}

#root_class_wise_term_fees_report .cwtfr-inr {
  font-weight: 600;
}

#root_class_wise_term_fees_report .cwtfr-no-record {
  text-align: center;
  padding: 40px 16px;
  color: #6b7280;
}

#root_class_wise_term_fees_report .cwtfr-no-record-icon {
  font-size: 36px;
  color: #9ca3af;
  margin-bottom: 8px;
}

#root_class_wise_term_fees_report .cwtfr-download-bar {
  margin-top: 16px;
}

#root_class_wise_term_fees_report .cwtfr-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#root_class_wise_term_fees_report .cwtfr-excel-btn {
  background-color: #f59e0b !important;
  border-color: #d97706 !important;
  color: #111827 !important;
  font-weight: 600;
  padding: 8px 14px;
}

#root_class_wise_term_fees_report .cwtfr-pdf-btn {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 8px 14px;
}

@media print {
  #root_class_wise_term_fees_report .cwtfr-filters,
  #root_class_wise_term_fees_report .cwtfr-actions-row,
  #root_class_wise_term_fees_report .cwtfr-download-bar,
  #root_class_wise_term_fees_report .cwtfr-details-btn {
    display: none !important;
  }
}

/* ------------------------ Overall Fees Details Report (ofdr-*) ------------------------ */
#root_overall_fees_details_report .ofdr-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_overall_fees_details_report .hideOverAllFees {
  visibility: visible;
}

#root_overall_fees_details_report .ofdr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_overall_fees_details_report .ofdr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#root_overall_fees_details_report .ofdr-page-title .fa {
  color: #2563eb;
}

#root_overall_fees_details_report .ofdr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_overall_fees_details_report .ofdr-year-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: end;
}

#root_overall_fees_details_report .ofdr-year-label {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
}

#root_overall_fees_details_report .ofdr-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

#root_overall_fees_details_report .ofdr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_overall_fees_details_report .ofdr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_overall_fees_details_report .ofdr-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #root_overall_fees_details_report .ofdr-filter-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

#root_overall_fees_details_report .ofdr-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_overall_fees_details_report .ofdr-label-spacer {
  visibility: hidden;
}

#root_overall_fees_details_report .ofdr-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

#root_overall_fees_details_report .ofdr-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_overall_fees_details_report .ofdr-textarea {
  min-height: 100px;
  resize: vertical;
}

#root_overall_fees_details_report .ofdr-search-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 600;
}

#root_overall_fees_details_report .ofdr-feefor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-height: 44px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_overall_fees_details_report .ofdr-check-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
}

#root_overall_fees_details_report .ofdr-check-item b {
  text-transform: capitalize;
  font-weight: 600;
}

#root_overall_fees_details_report .ofdr-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: flex-end;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  font-size: 14px;
  color: #14532d;
}

#root_overall_fees_details_report .ofdr-summary-item {
  white-space: nowrap;
}

#root_overall_fees_details_report .ofdr-no-rec {
  text-align: center;
  padding: 24px 12px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin: 16px 0;
}

#root_overall_fees_details_report .ofdr-no-rec h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

#root_overall_fees_details_report .ofdr-class-block {
  margin-bottom: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

#root_overall_fees_details_report .ofdr-class-title {
  margin-bottom: 10px;
  font-size: 15px;
  color: #111827;
}

#root_overall_fees_details_report .ofdr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_overall_fees_details_report .ofdr-table {
  width: 100%;
  min-width: 860px;
  margin: 0;
}

#root_overall_fees_details_report .ofdr-table th,
#root_overall_fees_details_report .ofdr-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: top;
}

#root_overall_fees_details_report .ofdr-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#root_overall_fees_details_report .hrnewStyle,
#root_overall_fees_details_report .ofdr-hr {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
  width: 100%;
}

#root_overall_fees_details_report .ofdr-sms-bar {
  margin-bottom: 12px;
}

#root_overall_fees_details_report .ofdr-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

#root_overall_fees_details_report .aCenter {
  text-align: center;
}

#root_overall_fees_details_report .ofdr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
}

#root_overall_fees_details_report .ofdr-modal-overlay.flex {
  display: flex;
}

#root_overall_fees_details_report .ofdr-modal-dialog {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

#root_overall_fees_details_report .ofdr-modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

#root_overall_fees_details_report .ofdr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

#root_overall_fees_details_report .ofdr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

#root_overall_fees_details_report .ofdr-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

#root_overall_fees_details_report .ofdr-modal-body {
  padding: 18px;
}

#root_overall_fees_details_report .ofdr-form-row {
  margin-bottom: 14px;
}

#root_overall_fees_details_report .ofdr-note {
  font-size: 13px;
  color: #6b7280;
  margin: 6px 0 10px;
}

#root_overall_fees_details_report .ofdr-char-left {
  text-align: right;
  font-size: 13px;
  color: #6b7280;
  margin-top: 6px;
}

#root_overall_fees_details_report .ofdr-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 640px) {
  #root_overall_fees_details_report .ofdr-schedule-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

#root_overall_fees_details_report .ofdr-instruction {
  font-size: 13px;
  color: #6b7280;
  margin: 12px 0;
}

#root_overall_fees_details_report .ofdr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

@media (max-width: 640px) {
  #root_overall_fees_details_report .ofdr-page-card {
    padding: 16px;
  }

  #root_overall_fees_details_report .ofdr-page-title {
    font-size: 18px;
  }

  #root_overall_fees_details_report .ofdr-label-spacer {
    display: none;
  }

  #root_overall_fees_details_report .ofdr-summary-bar {
    justify-content: flex-start;
  }

  #root_overall_fees_details_report .ofdr-modal-actions .btn {
    width: 100%;
  }
}

@media print {
  #root_overall_fees_details_report .ofdr-filters,
  #root_overall_fees_details_report .ofdr-sms-actions,
  #root_overall_fees_details_report .ofdr-actions-row {
    display: none !important;
  }
}

/* ===== Class Wise Fees Report (cwfr-) ===== */
#root_class_wise_fees_report .cwfr-page {
  color: #111827;
}

#root_class_wise_fees_report .cwfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_class_wise_fees_report .cwfr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_class_wise_fees_report .cwfr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

#root_class_wise_fees_report .cwfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_class_wise_fees_report .cwfr-page-title .fa {
  color: #047857;
  font-size: 20px;
}

#root_class_wise_fees_report .cwfr-ay-name {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

#root_class_wise_fees_report .cwfr-ay-select {
  min-width: 180px;
  max-width: 260px;
}

#root_class_wise_fees_report .cwfr-ay-select select,
#root_class_wise_fees_report .cwfr-order-row select,
#root_class_wise_fees_report .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
  font-size: 14px;
}

#root_class_wise_fees_report .cwfr-ay-select select:focus,
#root_class_wise_fees_report .cwfr-order-row select:focus,
#root_class_wise_fees_report .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_class_wise_fees_report .cwfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_class_wise_fees_report .cwfr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#root_class_wise_fees_report .cwfr-dept-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#root_class_wise_fees_report .cwfr-dept-block {
  border-left: 4px solid #059669;
  padding: 4px 0 4px 12px;
}

#root_class_wise_fees_report .cwfr-dept-name {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

#root_class_wise_fees_report .cwfr-course-wrap {
  margin: 0 0 8px 12px;
  padding-left: 8px;
}

#root_class_wise_fees_report .cwfr-course-name {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 12px 0 8px;
}

#root_class_wise_fees_report .cwfr-table-wrap,
#root_class_wise_fees_report .cwfr-fee-table-wrap {
  overflow-x: auto;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}

#root_class_wise_fees_report .cwfr-table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse;
}

#root_class_wise_fees_report .cwfr-table thead th {
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 1px solid #bbf7d0;
  white-space: nowrap;
}

#root_class_wise_fees_report .cwfr-table td {
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_class_wise_fees_report .cwfr-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

#root_class_wise_fees_report .cwfr-table tbody tr:hover {
  background: #f0fdf4;
}

#root_class_wise_fees_report .cwfr-std-cell {
  min-width: 140px;
}

#root_class_wise_fees_report .cwfr-action-btn {
  min-width: 40px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

#root_class_wise_fees_report .aCenter {
  text-align: center;
}

#root_class_wise_fees_report .cwfr-idle-hint,
#root_class_wise_fees_report .cwfr-no-record {
  margin-top: 18px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

#root_class_wise_fees_report .cwfr-idle-hint-icon,
#root_class_wise_fees_report .cwfr-no-record-icon {
  font-size: 26px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_class_wise_fees_report .cwfr-idle-hint p,
#root_class_wise_fees_report .cwfr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

#root_class_wise_fees_report .cwfr-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_class_wise_fees_report .cwfr-modal-hidden {
  display: none !important;
}

#root_class_wise_fees_report .cwfr-modal {
  background: #ffffff;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
}

#root_class_wise_fees_report .cwfr-modal-lg {
  max-width: 760px;
}

#root_class_wise_fees_report .cwfr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

#root_class_wise_fees_report .cwfr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

#root_class_wise_fees_report .cwfr-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
}

#root_class_wise_fees_report .cwfr-modal-body {
  padding: 16px 20px 20px;
}

#root_class_wise_fees_report .cwfr-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}

#root_class_wise_fees_report .cwfr-order-row .cwfr-filter-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_class_wise_fees_report .cwfr-order-row select {
  min-width: 160px;
  max-width: 220px;
}

#root_class_wise_fees_report .cwfr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

#root_class_wise_fees_report .cwfr-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-weight: 600;
  border-radius: 10px;
}

@media (max-width: 640px) {
  #root_class_wise_fees_report .cwfr-page-card {
    padding: 16px;
  }

  #root_class_wise_fees_report .cwfr-page-title {
    font-size: 18px;
  }

  #root_class_wise_fees_report .cwfr-ay-select {
    width: 100%;
    max-width: none;
  }

  #root_class_wise_fees_report .cwfr-course-wrap {
    margin-left: 0;
    padding-left: 0;
  }

  #root_class_wise_fees_report .cwfr-modal-actions .btn {
    width: 100%;
  }

  #root_class_wise_fees_report .cwfr-order-row select {
    width: 100%;
    max-width: none;
  }
}

/* Overall Student Fees Report - Phase 3 polish (osfr-*) */
#root_overall_student_fees_report .osfr-sms-actions .btn {
  white-space: normal;
  line-height: 1.35;
  text-align: center;
  padding: 10px 14px;
  min-height: 42px;
  font-style: normal;
  font-weight: 600;
}

#root_overall_student_fees_report .osfr-sms-btn-wrap {
  flex: 1 1 220px;
}

#root_overall_student_fees_report .osfr-sms-btn-wrap .btn {
  width: 100%;
}

#root_overall_student_fees_report .osfr-modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-top: 16px;
}

#root_overall_student_fees_report .osfr-modal-footer .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

#root_overall_student_fees_report .osfr-modal-footer .btn-danger:hover {
  background-color: #b91c1c;
}

#root_overall_student_fees_report .osfr-totals span:empty {
  display: none;
}

#root_overall_student_fees_report .osfr-class-title {
  padding: 4px 2px 8px;
}

#root_overall_student_fees_report .osfr-download-bar:empty,
#root_overall_student_fees_report .osfr-download-bar:not(:has(a, button, *:not(:empty))) {
  display: none;
}

#root_overall_student_fees_report .osfr-download-bar:has(a),
#root_overall_student_fees_report .osfr-download-bar:has(button) {
  display: flex;
}

#root_overall_student_fees_report #downloadInExcelBtn a {
  display: inline-flex;
  text-decoration: none;
}

#root_overall_student_fees_report .osfr-actions-row .osfr-checkbox-row {
  gap: 10px 18px;
}

/* ------------------------ Master Profile (mprof-*) ------------------------ */
#root_master_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_master_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.mprof-layout {
  min-height: calc(100vh - 64px);
}

.mprof-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

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

.mprof-menu li {
  margin: 0;
}

.mprof-menu-link {
  width: 100%;
}

.mprof-panel {
  width: 100%;
}

.mprof-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.mprof-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.mprof-panel-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: #05053d;
}

.mprof-panel-header .mprof-panel-title {
  margin-bottom: 0;
}

.mprof-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mprof-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.mprof-table {
  width: 100%;
  min-width: 560px;
}

.mprof-no-record {
  text-align: center;
  color: #b91c1c;
  padding: 16px;
  font-weight: 600;
}

#root_master_profile .aCenter,
#root_master_profile .acenter {
  text-align: center;
}

#root_master_profile .norecFount,
#root_master_profile .noRecFoundClass,
#root_master_profile .noRecCls {
  text-align: center;
  color: #b91c1c;
  padding: 16px;
  font-weight: 600;
}

/* modal (shared modal-overlay/modal-box/modal-close/modal-title/modal-form
   classes are defined globally; only mprof-specific sizing/spacing added) */
.mprof-modal-hidden {
  display: none !important;
}

.mprof-modal-md {
  max-width: 560px;
  width: 92%;
}

.mprof-modal-lg {
  max-width: 760px;
  width: 94%;
}

.mprof-modal-row {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mprof-form-item {
  margin-bottom: 12px;
}

.mprof-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.mprof-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .mprof-layout {
    flex-direction: column;
  }

  .mprof-sidebar,
  #root_master_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .mprof-main {
    padding: 16px;
  }
}

/* ------------------------ Overall Fees Details Report polish (ofdr-*) ------------------------ */
#root_overall_fees_details_report .ofdr-year-label:hover {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#root_overall_fees_details_report .ofdr-summary-bar:empty,
#root_overall_fees_details_report .ofdr-summary-bar.ofdr-summary-empty {
  display: none;
}

#root_overall_fees_details_report .ofdr-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

#root_overall_fees_details_report .ofdr-student-name {
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

#root_overall_fees_details_report .ofdr-meta {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.45;
}

#root_overall_fees_details_report .ofdr-feefor-cell {
  text-transform: capitalize;
}

#root_overall_fees_details_report .ofdr-row-total {
  margin-top: 2px;
  font-weight: 600;
}

#root_overall_fees_details_report .ofdr-table th.ofdr-amt {
  text-align: right;
}

#root_overall_fees_details_report .ofdr-sms-bar .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 10px;
  font-weight: 600;
}

#root_overall_fees_details_report .ofdr-modal-actions .btn {
  min-height: 40px;
  min-width: 110px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#root_overall_fees_details_report .ofdr-now-wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-bottom: 2px;
}

#root_overall_fees_details_report .ofdr-class-block {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

@media (max-width: 768px) {
  #root_overall_fees_details_report .ofdr-scroll-hint {
    display: block;
  }

  #root_overall_fees_details_report .ofdr-sms-bar .btn {
    width: 100%;
    justify-content: center;
  }

  #root_overall_fees_details_report .ofdr-summary-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ------------------------ Class Wise Fees Assigned Report (cwfar-*) ------------------------ */
.cwfar-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.cwfar-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.cwfar-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.cwfar-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cwfar-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.cwfar-ay-name {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.cwfar-ay-select {
  min-width: 180px;
}

.cwfar-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.cwfar-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.cwfar-filters {
  margin-bottom: 8px;
}

.cwfar-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

@media (min-width: 640px) {
  .cwfar-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
}

.cwfar-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.cwfar-form-item select,
.cwfar-form-item input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.cwfar-form-item select:focus,
.cwfar-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.cwfar-search-wrap {
  display: flex;
  align-items: flex-end;
}

.cwfar-search-btn {
  min-width: 120px;
  min-height: 42px;
}

.cwfar-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.cwfar-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 14px;
  color: #312e81;
}

.cwfar-table-host {
  margin-top: 16px;
}

.cwfar-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_class_wise_fees_assigned_report .cwfar-table {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border-collapse: collapse;
}

#root_class_wise_fees_assigned_report .cwfar-table thead tr {
  background-color: #d0f0c0;
}

#root_class_wise_fees_assigned_report .cwfar-table th,
#root_class_wise_fees_assigned_report .cwfar-table td {
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
  border: 1px solid #d1d5db;
  vertical-align: middle;
}

#root_class_wise_fees_assigned_report .cwfar-table th:nth-child(2),
#root_class_wise_fees_assigned_report .cwfar-table td:nth-child(2) {
  text-align: left;
  min-width: 140px;
}

#root_class_wise_fees_assigned_report .green-check {
  color: #15803d;
  font-weight: 700;
  font-size: 16px;
}

#root_class_wise_fees_assigned_report .red-cross {
  color: #dc2626;
  font-weight: 700;
  font-size: 16px;
}

.cwfar-no-record {
  margin-top: 20px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.cwfar-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.cwfar-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.cwfar-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.cwfar-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.cwfar-download-bar:empty {
  display: none;
}

@media (max-width: 640px) {
  .cwfar-page-card {
    padding: 16px;
  }

  .cwfar-page-title {
    font-size: 18px;
  }

  .cwfar-filter-row {
    grid-template-columns: 1fr;
  }

  .cwfar-search-btn {
    width: 100%;
  }

  .cwfar-search-wrap {
    width: 100%;
  }
}

@media print {
  #root_class_wise_fees_assigned_report .cwfar-filters,
  #root_class_wise_fees_assigned_report .cwfar-download-bar {
    display: none !important;
  }

  .cwfar-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ------------------------ Management Fees Report (mfr-*) ------------------------ */
#root_management_fees_report .mfr-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_management_fees_report .mfr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_management_fees_report .mfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#root_management_fees_report .mfr-page-title .fa {
  color: #2563eb;
}

#root_management_fees_report .mfr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_management_fees_report .mfr-year-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: end;
}

#root_management_fees_report .mfr-year-label {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
}

#root_management_fees_report .mfr-year-label:hover {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#root_management_fees_report .mfr-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

#root_management_fees_report .mfr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 768px) {
  #root_management_fees_report .mfr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_management_fees_report .mfr-filter-grid {
    grid-template-columns: 1.2fr 1.4fr 1fr;
  }
}

#root_management_fees_report .mfr-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_management_fees_report .mfr-label-spacer {
  visibility: hidden;
}

#root_management_fees_report .mfr-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

#root_management_fees_report .mfr-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_management_fees_report .mfr-check-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

#root_management_fees_report .mfr-no-rec {
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin: 12px 0 16px;
}

#root_management_fees_report .mfr-no-rec-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

#root_management_fees_report .mfr-no-rec h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

#root_management_fees_report .mfr-no-rec p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

#root_management_fees_report .mfr-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

#root_management_fees_report .mfr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
}

#root_management_fees_report .mfr-table {
  width: 100%;
  min-width: 1100px;
  margin: 0;
}

#root_management_fees_report .mfr-table th,
#root_management_fees_report .mfr-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
}

#root_management_fees_report .mfr-table td[align='right'],
#root_management_fees_report .mfr-num {
  font-variant-numeric: tabular-nums;
}

#root_management_fees_report .mfr-total-row td {
  background: #f0fdf4;
  border-top: 2px solid #bbf7d0;
}

#root_management_fees_report .mfr-ex-row td {
  background: #f8fafc;
}

#root_management_fees_report .mfr-link {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#root_management_fees_report .mfr-link:hover {
  color: #1d4ed8;
}

#root_management_fees_report .mfr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

#root_management_fees_report .mfr-action-btn {
  min-height: 40px;
  min-width: 140px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 768px) {
  #root_management_fees_report .mfr-page-card {
    padding: 16px;
  }

  #root_management_fees_report .mfr-page-title {
    font-size: 18px;
  }

  #root_management_fees_report .mfr-label-spacer {
    display: none;
  }

  #root_management_fees_report .mfr-scroll-hint {
    display: block;
  }

  #root_management_fees_report .mfr-action-btn {
    width: 100%;
  }
}

@media print {
  #root_management_fees_report .mfr-filter-panel,
  #root_management_fees_report .mfr-actions,
  #root_management_fees_report .mfr-scroll-hint {
    display: none !important;
  }
}

/* Phase 3 UI polish ? class wise fees report */
#root_class_wise_fees_report .btn-warning {
  background-color: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

#root_class_wise_fees_report .btn-warning:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: #ffffff;
}

#root_class_wise_fees_report .btn-info {
  background-color: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

#root_class_wise_fees_report .btn-info:hover {
  background-color: #0369a1;
  border-color: #0369a1;
  color: #ffffff;
}

#root_class_wise_fees_report .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

#root_class_wise_fees_report .btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

#root_class_wise_fees_report .cwfr-action-btn {
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#root_class_wise_fees_report .cwfr-action-btn .fa {
  font-size: 14px;
}

#root_class_wise_fees_report .cwfr-table td.aCenter .cwfr-action-btn {
  margin: 0 auto;
}

#root_class_wise_fees_report .cwfr-fee-table-wrap .cwfr-table td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#root_class_wise_fees_report .cwfr-modal-actions {
  justify-content: flex-start;
}

#root_class_wise_fees_report .cwfr-modal {
  border: 1px solid #e5e7eb;
}

#root_class_wise_fees_report .cwfr-dept-name {
  color: #065f46;
}

#root_class_wise_fees_report .cwfr-course-wrap {
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 12px 14px 8px;
  background: #ffffff;
  margin-top: 8px;
}

@media (max-width: 640px) {
  #root_class_wise_fees_report .cwfr-table {
    min-width: 560px;
  }

  #root_class_wise_fees_report .cwfr-modal-actions {
    flex-direction: column;
  }
}

/* Class Wise Fees Assigned Report - Phase 3 polish (cwfar-*) */
.cwfar-search-wrap {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.cwfar-search-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: transparent;
  user-select: none;
  line-height: 1.25;
}

#root_class_wise_fees_assigned_report .cwfar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 4px 0 12px;
  font-size: 13px;
  color: #4b5563;
}

#root_class_wise_fees_assigned_report .cwfar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#root_class_wise_fees_assigned_report .cwfar-table thead th {
  font-weight: 700;
  color: #14532d;
  white-space: nowrap;
}

#root_class_wise_fees_assigned_report .cwfar-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

#root_class_wise_fees_assigned_report .cwfar-table tbody tr:hover {
  background: #f0fdf4;
}

@media (max-width: 640px) {
  .cwfar-search-label {
    display: none;
  }
}

/* ------------------------ Management Fees Report polish (mfr-*) ------------------------ */
#root_management_fees_report .mfr-scroll-hint {
  display: none;
}

#root_management_fees_report .mfr-scroll-hint.mfr-hint-visible {
  display: none;
}

@media (max-width: 768px) {
  #root_management_fees_report .mfr-scroll-hint.mfr-hint-visible {
    display: block;
  }
}

#root_management_fees_report .mfr-table th.mfr-num,
#root_management_fees_report .mfr-table th.centerCls {
  text-align: right;
}

#root_management_fees_report .mfr-table th:first-child,
#root_management_fees_report .mfr-table th:nth-child(2) {
  text-align: left;
}

#root_management_fees_report .mfr-table th:first-child {
  text-align: center;
}

#root_management_fees_report .mfr-check-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#root_management_fees_report .mfr-actions .btn-success {
  background-color: #16a34a;
  border-color: #16a34a;
}

#root_management_fees_report .mfr-actions .btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* ------------------------ Fees Type Wise Management Fees Report (ftwmfr-*) ------------------------ */
.ftwmfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.ftwmfr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.ftwmfr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.ftwmfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ftwmfr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.ftwmfr-ay-name {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.ftwmfr-ay-select {
  min-width: 180px;
}

.ftwmfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.ftwmfr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ftwmfr-filters {
  margin-bottom: 8px;
}

.ftwmfr-filter-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

@media (min-width: 768px) {
  .ftwmfr-filter-panel {
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 220px) auto;
  }
}

.ftwmfr-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.ftwmfr-form-item select,
.ftwmfr-form-item input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.ftwmfr-form-item select:focus,
.ftwmfr-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.ftwmfr-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  min-height: 42px;
}

.ftwmfr-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.ftwmfr-check input {
  width: auto;
  margin: 0;
  accent-color: #4f46e5;
}

.ftwmfr-search-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ftwmfr-search-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: transparent;
  user-select: none;
  line-height: 1.25;
}

.ftwmfr-search-btn {
  min-width: 120px;
  min-height: 42px;
}

.ftwmfr-options-row {
  margin: 4px 0 14px;
  padding: 0 4px;
}

.ftwmfr-table-host {
  margin-top: 8px;
}

.ftwmfr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_fees_type_wise_management_fees_report .ftwmfr-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
  text-align: center;
  font-size: 13px;
}

#root_fees_type_wise_management_fees_report .ftwmfr-table th,
#root_fees_type_wise_management_fees_report .ftwmfr-table td {
  border: 1px solid #d1d5db;
  padding: 8px 10px;
  vertical-align: middle;
}

#root_fees_type_wise_management_fees_report .ftwmfr-main-head td {
  background-color: #d7f3c8;
  font-weight: 700;
  color: #14532d;
}

#root_fees_type_wise_management_fees_report .ftwmfr-sub-head td {
  background-color: #e5e7eb;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

#root_fees_type_wise_management_fees_report .ftwmfr-table td:first-child {
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}

#root_fees_type_wise_management_fees_report .ftwmfr-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#root_fees_type_wise_management_fees_report .ftwmfr-total-row,
#root_fees_type_wise_management_fees_report .total-row {
  font-weight: 700;
  background-color: #d7f3c8;
}

#root_fees_type_wise_management_fees_report .ftwmfr-table tbody tr:nth-child(even):not(.ftwmfr-total-row):not(.total-row) {
  background: #f9fafb;
}

.ftwmfr-no-record {
  margin-top: 16px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.ftwmfr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.ftwmfr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.ftwmfr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

@media (max-width: 640px) {
  .ftwmfr-page-card {
    padding: 16px;
  }

  .ftwmfr-page-title {
    font-size: 18px;
  }

  .ftwmfr-search-label {
    display: none;
  }

  .ftwmfr-search-btn {
    width: 100%;
  }
}

@media print {
  #root_fees_type_wise_management_fees_report .ftwmfr-filters .ftwmfr-filter-panel,
  #root_fees_type_wise_management_fees_report .ftwmfr-options-row {
    display: none !important;
  }

  .ftwmfr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ===== Payment Gateway Fees Report (pgfr-) ===== */
#root_payment_gateway_fees_report .pgfr-page {
  color: #111827;
}

#root_payment_gateway_fees_report .pgfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_payment_gateway_fees_report .pgfr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_payment_gateway_fees_report .pgfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_payment_gateway_fees_report .pgfr-page-title .fa {
  color: #047857;
  font-size: 20px;
}

#root_payment_gateway_fees_report .pgfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_payment_gateway_fees_report .pgfr-print-dates {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  color: #374151;
}

#root_payment_gateway_fees_report .pgfr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  #root_payment_gateway_fees_report .pgfr-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_payment_gateway_fees_report .pgfr-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #root_payment_gateway_fees_report .pgfr-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#root_payment_gateway_fees_report .pgfr-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

#root_payment_gateway_fees_report .pgfr-label-spacer {
  visibility: hidden;
}

#root_payment_gateway_fees_report .pgfr-filter-group select,
#root_payment_gateway_fees_report .pgfr-filter-group input,
#root_payment_gateway_fees_report .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
  font-size: 14px;
}

#root_payment_gateway_fees_report .pgfr-filter-group select:focus,
#root_payment_gateway_fees_report .pgfr-filter-group input:focus,
#root_payment_gateway_fees_report .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_payment_gateway_fees_report .pgfr-search-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  min-height: 42px;
  border-radius: 10px;
}

#root_payment_gateway_fees_report .pgfr-idle-hint,
#root_payment_gateway_fees_report .pgfr-no-record {
  margin-top: 18px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

#root_payment_gateway_fees_report .pgfr-idle-hint-icon,
#root_payment_gateway_fees_report .pgfr-no-record-icon {
  font-size: 26px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_payment_gateway_fees_report .pgfr-idle-hint p,
#root_payment_gateway_fees_report .pgfr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

#root_payment_gateway_fees_report .pgfr-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_payment_gateway_fees_report .pgfr-results {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1024px) {
  #root_payment_gateway_fees_report .pgfr-results {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
  }
}

#root_payment_gateway_fees_report .pgfr-table-wrap,
#root_payment_gateway_fees_report .pgfr-modal-table-wrap {
  overflow-x: auto;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

#root_payment_gateway_fees_report .pgfr-table {
  width: 100%;
  min-width: 900px;
  margin: 0;
  border-collapse: collapse;
}

#root_payment_gateway_fees_report #stdviewTableId.pgfr-table {
  min-width: 480px;
}

#root_payment_gateway_fees_report .pgfr-table thead th {
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 1px solid #bbf7d0;
  white-space: nowrap;
}

#root_payment_gateway_fees_report .pgfr-table td {
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_payment_gateway_fees_report .pgfr-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

#root_payment_gateway_fees_report .pgfr-table tbody tr:hover {
  background: #f0fdf4;
}

#root_payment_gateway_fees_report .aCenter {
  text-align: center;
}

#root_payment_gateway_fees_report .pgfr-amt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#root_payment_gateway_fees_report .pgfr-rupee {
  font-weight: 700;
}

#root_payment_gateway_fees_report .pgfr-summary {
  border: 1px solid #d1fae5;
  border-radius: 12px;
  background: #ecfdf5;
  padding: 14px;
}

#root_payment_gateway_fees_report .pgfr-totals .pgfr-total-line,
#root_payment_gateway_fees_report .pgfr-totals .pgfr-grand-total {
  font-size: 14px;
  color: #065f46;
  padding: 4px 0;
}

#root_payment_gateway_fees_report .pgfr-grand-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #a7f3d0;
  font-size: 15px;
}

#root_payment_gateway_fees_report .pgfr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_payment_gateway_fees_report .pgfr-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-weight: 600;
  border-radius: 10px;
}

#root_payment_gateway_fees_report .pgfr-icon-btn {
  min-width: 40px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

#root_payment_gateway_fees_report .btn-info {
  background-color: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

#root_payment_gateway_fees_report .btn-info:hover {
  background-color: #0369a1;
  border-color: #0369a1;
  color: #ffffff;
}

#root_payment_gateway_fees_report .btn-warning {
  background-color: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

#root_payment_gateway_fees_report .btn-warning:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: #ffffff;
}

#root_payment_gateway_fees_report .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

#root_payment_gateway_fees_report .btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

#root_payment_gateway_fees_report .pgfr-modal-hidden {
  display: none !important;
}

#root_payment_gateway_fees_report .pgfr-modal {
  background: #ffffff;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
}

#root_payment_gateway_fees_report .pgfr-modal-header,
#root_payment_gateway_fees_report .pgfr-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

#root_payment_gateway_fees_report .pgfr-modal-title,
#root_payment_gateway_fees_report .pgfr-popup-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

#root_payment_gateway_fees_report .pgfr-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
}

#root_payment_gateway_fees_report .pgfr-modal-body {
  padding: 16px 20px 20px;
}

#root_payment_gateway_fees_report .pgfr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

#root_payment_gateway_fees_report .pgfr-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-weight: 600;
  border-radius: 10px;
}

#root_payment_gateway_fees_report .pgfr-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
}

#root_payment_gateway_fees_report .pgfr-popup-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  width: min(520px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  border: 1px solid #e5e7eb;
}

#root_payment_gateway_fees_report .pgfr-popup-body {
  padding: 16px 20px;
}

#root_payment_gateway_fees_report .pgfr-detail-row {
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #1f2937;
  word-break: break-word;
}

#root_payment_gateway_fees_report .pgfr-detail-row:last-child {
  border-bottom: none;
}

#root_payment_gateway_fees_report .pgfr-popup-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  #root_payment_gateway_fees_report .pgfr-page-card {
    padding: 16px;
  }

  #root_payment_gateway_fees_report .pgfr-page-title {
    font-size: 18px;
  }

  #root_payment_gateway_fees_report .pgfr-label-spacer {
    display: none;
  }

  #root_payment_gateway_fees_report .pgfr-actions .btn,
  #root_payment_gateway_fees_report .pgfr-modal-actions .btn {
    width: 100%;
  }
}

@media print {
  #root_payment_gateway_fees_report .pgfr-filters,
  #root_payment_gateway_fees_report .pgfr-actions,
  #root_payment_gateway_fees_report #search,
  #root_payment_gateway_fees_report .pgfr-idle-hint {
    display: none !important;
  }

  #root_payment_gateway_fees_report .pgfr-print-dates {
    display: block !important;
  }

  #root_payment_gateway_fees_report .pgfr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  #root_payment_gateway_fees_report .pgfr-results {
    grid-template-columns: 1fr;
  }
}

/* ------------------------ Master Profile UI polish (mprof-*) ------------------------ */
#root_master_profile .mprof-panel-title {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#root_master_profile .pro-sidebar-title {
  color: #334155;
  font-weight: 700;
}

#root_master_profile .pro-submenu-link,
#root_master_profile .mprof-menu-link,
#root_master_profile .pro-sidebar-nav a {
  color: #1f2937 !important;
}

#root_master_profile .pro-submenu-link.active,
#root_master_profile .admin-menu li.active > a {
  color: #312e81 !important;
  font-weight: 600;
}

#root_master_profile .mprof-page-card .table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  overflow-x: auto;
}

#root_master_profile .college-table thead {
  background-color: #ecfdf5;
}

#root_master_profile .college-table thead th {
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

#root_master_profile .college-table tbody td {
  color: #111827;
  vertical-align: middle;
}

#root_master_profile .mprof-modal-actions .btn {
  min-width: 110px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
}

#root_master_profile .mprof-form-item label {
  color: #0f172a;
}

#root_master_profile .mprof-form-item input,
#root_master_profile .mprof-form-item select,
#root_master_profile .mprof-form-item textarea,
#root_master_profile .modal-form .form-control {
  width: 100%;
  min-height: 40px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  color: #0f172a;
  box-sizing: border-box;
}

#root_master_profile .mprof-panel-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 8px 14px;
}

#root_master_profile .mprof-no-record,
#root_master_profile .norecFount,
#root_master_profile .noRecFoundClass,
#root_master_profile .noRecCls {
  margin-top: 12px;
  padding: 18px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}

@media (max-width: 900px) {
  #root_master_profile .mprof-page-card {
    padding: 16px;
  }

  #root_master_profile .mprof-panel-header {
    align-items: flex-start;
  }

  #root_master_profile .mprof-modal-actions .btn {
    width: 100%;
  }

  #root_master_profile .pro-sidebar {
    position: relative;
    z-index: 1;
    max-height: none;
  }
}

/* ------------------------ Payment Gateway Settle Report (pgsr-*) ------------------------ */
#root_payment_gateway_settle_report .pgsr-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_payment_gateway_settle_report .pgsr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_payment_gateway_settle_report .pgsr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#root_payment_gateway_settle_report .pgsr-page-title .fa {
  color: #2563eb;
}

#root_payment_gateway_settle_report .pgsr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_payment_gateway_settle_report .pgsr-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

#root_payment_gateway_settle_report .pgsr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 768px) {
  #root_payment_gateway_settle_report .pgsr-filter-grid {
    grid-template-columns: minmax(180px, 260px) 1fr;
  }
}

#root_payment_gateway_settle_report .pgsr-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_payment_gateway_settle_report .pgsr-label-spacer {
  visibility: hidden;
}

#root_payment_gateway_settle_report .pgsr-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

#root_payment_gateway_settle_report .pgsr-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_payment_gateway_settle_report .pgsr-file {
  padding: 8px 10px;
}

#root_payment_gateway_settle_report .pgsr-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#root_payment_gateway_settle_report .pgsr-action-btn {
  min-height: 44px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-left: 14px;
  padding-right: 14px;
}

#root_payment_gateway_settle_report .pgsr-results-wrap {
  margin: 12px 0;
}

#root_payment_gateway_settle_report .pgsr-no-rec {
  text-align: center;
  padding: 24px 12px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin: 12px 0 16px;
  font-size: 16px;
  font-weight: 600;
}

#root_payment_gateway_settle_report .pgsr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 12px 0 20px;
}

#root_payment_gateway_settle_report .pgsr-upload-panel {
  margin-top: 8px;
  padding: 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_payment_gateway_settle_report .pgsr-upload-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_payment_gateway_settle_report .pgsr-upload-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: #6b7280;
}

#root_payment_gateway_settle_report .pgsr-upload-row {
  max-width: 480px;
  margin-bottom: 14px;
}

#root_payment_gateway_settle_report .pgsr-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#root_payment_gateway_settle_report .pgsr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
}

#root_payment_gateway_settle_report .pgsr-modal-overlay.flex {
  display: flex;
}

#root_payment_gateway_settle_report .pgsr-modal-dialog {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

#root_payment_gateway_settle_report .pgsr-modal-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

#root_payment_gateway_settle_report .pgsr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

#root_payment_gateway_settle_report .pgsr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

#root_payment_gateway_settle_report .pgsr-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

#root_payment_gateway_settle_report .pgsr-modal-body {
  padding: 18px;
}

#root_payment_gateway_settle_report .pgsr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 14px;
}

#root_payment_gateway_settle_report .pgsr-modal-table {
  width: 100%;
  margin: 0;
}

#root_payment_gateway_settle_report .pgsr-modal-table th,
#root_payment_gateway_settle_report .pgsr-modal-table td {
  padding: 10px 12px;
  font-size: 13px;
}

#root_payment_gateway_settle_report .pgsr-col-amt {
  width: 80px;
}

#root_payment_gateway_settle_report .pgsr-col-dt {
  width: 140px;
}

#root_payment_gateway_settle_report .pgsr-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

#root_payment_gateway_settle_report .pgsr-drop {
  display: none;
}

@media (max-width: 640px) {
  #root_payment_gateway_settle_report .pgsr-page-card {
    padding: 16px;
  }

  #root_payment_gateway_settle_report .pgsr-page-title {
    font-size: 18px;
  }

  #root_payment_gateway_settle_report .pgsr-label-spacer {
    display: none;
  }

  #root_payment_gateway_settle_report .pgsr-action-btn {
    width: 100%;
  }

  #root_payment_gateway_settle_report .pgsr-modal-footer .btn {
    width: 100%;
  }
}

@media print {
  #root_payment_gateway_settle_report .pgsr-filters,
  #root_payment_gateway_settle_report .pgsr-actions,
  #root_payment_gateway_settle_report .pgsr-upload-panel {
    display: none !important;
  }
}

/* Fees Type Wise Management Fees Report - Phase 3 polish (ftwmfr-*) */
.ftwmfr-scroll-hint {
  display: none;
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.ftwmfr-scroll-hint.ftwmfr-hint-visible {
  display: block;
}

@media (min-width: 1024px) {
  .ftwmfr-scroll-hint.ftwmfr-hint-visible {
    display: none;
  }
}

#root_fees_type_wise_management_fees_report .ftwmfr-table td:first-child,
#root_fees_type_wise_management_fees_report .ftwmfr-table .ftwmfr-main-head td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

#root_fees_type_wise_management_fees_report .ftwmfr-main-head td:first-child,
#root_fees_type_wise_management_fees_report .ftwmfr-total-row td:first-child,
#root_fees_type_wise_management_fees_report .total-row td:first-child {
  background-color: #d7f3c8;
}

#root_fees_type_wise_management_fees_report .ftwmfr-options-row {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_fees_type_wise_management_fees_report .ftwmfr-feefor-wrap .ftwmfr-check b {
  font-weight: 600;
}

#root_fees_type_wise_management_fees_report .ftwmfr-college-name {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

#root_fees_type_wise_management_fees_report .ftwmfr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

#root_fees_type_wise_management_fees_report .ftwmfr-action-btn {
  min-height: 40px;
  min-width: 140px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 768px) {
  #root_fees_type_wise_management_fees_report .ftwmfr-action-btn {
    width: 100%;
  }
}

@media print {
  #root_fees_type_wise_management_fees_report .ftwmfr-actions {
    display: none !important;
  }
}

/* Phase 3 UI polish ? payment gateway fees report */
#root_payment_gateway_fees_report .pgfr-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #f3f4f6;
  color: #374151;
}

#root_payment_gateway_fees_report .pgfr-customize-wrap:has(#customizeReports:empty) {
  display: none;
}

#root_payment_gateway_fees_report .pgfr-summary {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_payment_gateway_fees_report .pgfr-icon-btn {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#root_payment_gateway_fees_report .pgfr-popup-modal {
  display: block;
}

@media (max-width: 640px) {
  #root_payment_gateway_fees_report .pgfr-summary {
    order: -1;
  }
}

/* ------------------------ Payment Gateway Settle Report polish (pgsr-*) ------------------------ */
#root_payment_gateway_settle_report .pgsr-instance-btn.btn-info {
  background-color: #0284c7;
  border-color: #0284c7;
  color: #fff;
}

#root_payment_gateway_settle_report .pgsr-instance-btn.btn-info:hover {
  background-color: #0369a1;
  border-color: #0369a1;
}

#root_payment_gateway_settle_report .pgsr-modal-footer {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

#root_payment_gateway_settle_report .pgsr-upload-panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#root_payment_gateway_settle_report .pgsr-filter-panel,
#root_payment_gateway_settle_report .pgsr-upload-panel {
  transition: box-shadow 0.15s ease;
}

#root_payment_gateway_settle_report .pgsr-file::-webkit-file-upload-button {
  margin-right: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f1f5f9;
  padding: 6px 10px;
  cursor: pointer;
}

/* ------------------------ Payment Gateway Settlement Report (pgsr-*) ------------------------ */
.pgsr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.pgsr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.pgsr-college-name {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #4f46e5;
}

.pgsr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pgsr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.pgsr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.pgsr-print-dates {
  margin-top: 8px;
  font-size: 13px;
  color: #374151;
}

.pgsr-filters {
  margin-bottom: 12px;
}

.pgsr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

@media (min-width: 640px) {
  .pgsr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pgsr-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pgsr-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.pgsr-form-item select,
.pgsr-form-item input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.pgsr-form-item select:focus,
.pgsr-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.pgsr-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.pgsr-search-btn,
.pgsr-tally-btn {
  min-height: 42px;
}

.pgsr-date-block {
  margin-bottom: 22px;
}

.pgsr-date-head {
  margin-bottom: 8px;
  font-size: 15px;
  color: #111827;
}

.pgsr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_payment_gateway_settlement_report .pgsr-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
}

#root_payment_gateway_settlement_report .pgsr-table th,
#root_payment_gateway_settlement_report .pgsr-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: top;
}

#root_payment_gateway_settlement_report .pgsr-amt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pgsr-inr {
  font-weight: 600;
  color: #374151;
}

.pgsr-date-total {
  margin-top: 8px;
  font-size: 14px;
  color: #1f2937;
}

.pgsr-grand-wrap {
  margin: 12px 0 16px;
}

.pgsr-grand-total,
.pgsr-grand-line {
  padding: 12px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-size: 16px;
  color: #312e81;
}

.pgsr-no-record {
  margin-top: 16px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.pgsr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.pgsr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.pgsr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.pgsr-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

@media (max-width: 640px) {
  .pgsr-page-card {
    padding: 16px;
  }

  .pgsr-page-title {
    font-size: 18px;
  }

  .pgsr-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pgsr-search-btn,
  .pgsr-tally-btn {
    width: 100%;
  }

  .pgsr-download-bar {
    flex-direction: column;
  }

  .pgsr-download-bar .btn {
    width: 100%;
  }
}

@media print {
  #root_payment_gateway_settlement_report .pgsr-filters,
  #root_payment_gateway_settlement_report .pgsr-download-bar,
  #root_payment_gateway_settlement_report #search,
  #root_payment_gateway_settlement_report #feeCollectionExcelDownloadBtn {
    display: none !important;
  }

  .pgsr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ------------------------ Transport Fees Month Wise Report (tfmw-*) ------------------------ */
#root_transport_fees_month_wise_report .tfmw-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_transport_fees_month_wise_report .hideOverAllFees {
  visibility: visible;
}

#root_transport_fees_month_wise_report .tfmw-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_transport_fees_month_wise_report .tfmw-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#root_transport_fees_month_wise_report .tfmw-page-title .fa {
  color: #2563eb;
}

#root_transport_fees_month_wise_report .tfmw-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_transport_fees_month_wise_report .tfmw-year-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: end;
}

#root_transport_fees_month_wise_report .tfmw-year-label {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
}

#root_transport_fees_month_wise_report .tfmw-year-label:hover {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#root_transport_fees_month_wise_report .tfmw-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

#root_transport_fees_month_wise_report .tfmw-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 768px) {
  #root_transport_fees_month_wise_report .tfmw-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#root_transport_fees_month_wise_report .tfmw-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_transport_fees_month_wise_report .tfmw-label-spacer {
  visibility: hidden;
}

#root_transport_fees_month_wise_report .tfmw-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

#root_transport_fees_month_wise_report .tfmw-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_transport_fees_month_wise_report .tfmw-search-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 600;
}

#root_transport_fees_month_wise_report .tfmw-no-rec {
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin: 12px 0 16px;
}

#root_transport_fees_month_wise_report .tfmw-no-rec-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

#root_transport_fees_month_wise_report .tfmw-no-rec h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #b91c1c;
}

#root_transport_fees_month_wise_report .tfmw-no-rec p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

#root_transport_fees_month_wise_report .tfmw-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

#root_transport_fees_month_wise_report .tfmw-scroll-hint.tfmw-hint-visible {
  display: none;
}

@media (max-width: 768px) {
  #root_transport_fees_month_wise_report .tfmw-scroll-hint.tfmw-hint-visible {
    display: block;
  }
}

#root_transport_fees_month_wise_report .tfmw-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
}

#root_transport_fees_month_wise_report .tfmw-table {
  width: 100%;
  min-width: 900px;
  margin: 0;
}

#root_transport_fees_month_wise_report .tfmw-table th,
#root_transport_fees_month_wise_report .tfmw-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
}

#root_transport_fees_month_wise_report .hrnewStyle {
  margin-top: 0;
  margin-bottom: 0;
  border-color: #e5e7eb;
  width: 100%;
}

#root_transport_fees_month_wise_report .verticalTableHeader,
#root_transport_fees_month_wise_report .tfmw-vhead {
  line-height: 1.1;
  position: relative;
  transform: rotate(180deg);
  white-space: nowrap;
  writing-mode: vertical-rl;
  padding: 0.5rem 0.25rem;
  width: 2.5rem;
  min-height: 90px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}

#root_transport_fees_month_wise_report .tfmw-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: #14532d;
}

#root_transport_fees_month_wise_report .tfmw-summary-item {
  width: 100%;
  text-align: right;
  font-size: 14px;
}

#root_transport_fees_month_wise_report .tfmw-amt {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  #root_transport_fees_month_wise_report .tfmw-page-card {
    padding: 16px;
  }

  #root_transport_fees_month_wise_report .tfmw-page-title {
    font-size: 18px;
  }

  #root_transport_fees_month_wise_report .tfmw-label-spacer {
    display: none;
  }

  #root_transport_fees_month_wise_report .tfmw-summary {
    align-items: flex-start;
  }

  #root_transport_fees_month_wise_report .tfmw-summary-item {
    text-align: left;
  }
}

@media print {
  #root_transport_fees_month_wise_report .tfmw-filters,
  #root_transport_fees_month_wise_report .tfmw-scroll-hint,
  #root_transport_fees_month_wise_report .tfmw-excel {
    display: none !important;
  }
}

/* ------------------------ Master Profile UX pass (radios/tables/buttons) ------------------------ */
#root_master_profile .mprof-form-item input:not([type="radio"]):not([type="checkbox"]),
#root_master_profile .mprof-form-item select,
#root_master_profile .mprof-form-item textarea,
#root_master_profile .modal-form .form-control {
  width: 100%;
  min-height: 40px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  color: #0f172a;
  box-sizing: border-box;
}

#root_master_profile .mprof-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-top: 4px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

#root_master_profile .mprof-radio-item,
#root_master_profile .radio-inline {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
}

#root_master_profile input[type="radio"],
#root_master_profile input[type="checkbox"],
#root_master_profile .mprof-form-item input[type="radio"],
#root_master_profile .mprof-form-item input[type="checkbox"],
#root_master_profile .modal-form input[type="radio"],
#root_master_profile .modal-form input[type="checkbox"] {
  width: auto !important;
  min-width: 16px;
  min-height: 16px !important;
  height: 16px;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  accent-color: #4f46e5;
}

#root_master_profile .mprof-error-label {
  display: block;
  color: #dc2626;
  font-size: 12px;
  margin-top: 6px;
}

#root_master_profile .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_master_profile .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_master_profile .mprof-table {
  min-width: 720px;
}

#root_master_profile .mprof-table th,
#root_master_profile .mprof-table td,
#root_master_profile #leaveTypeMasterTable th,
#root_master_profile #leaveTypeMasterTable td {
  padding: 12px 14px;
  white-space: nowrap;
}

#root_master_profile .editIcon,
#root_master_profile .fa-pencil {
  margin-left: 8px;
  color: #4f46e5;
  cursor: pointer;
}

#root_master_profile .showInfo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#root_master_profile .mprof-inline-edit {
  margin: 0;
}

#root_master_profile .mprof-panel-actions .btn-success {
  background-color: #16a34a;
  color: #fff;
}

#root_master_profile .modal-title {
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 14px;
}

#root_master_profile .mprof-table-wrap {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  #root_master_profile .mprof-main {
    padding: 14px;
  }

  #root_master_profile .mprof-page-card {
    padding: 14px;
  }
}

/* ===== Transport Fees Report (tfr-) ===== */
#root_transport_fees_report .tfr-page {
  color: #111827;
}

#root_transport_fees_report .tfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_transport_fees_report .tfr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_transport_fees_report .tfr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

#root_transport_fees_report .tfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_transport_fees_report .tfr-page-title .fa {
  color: #047857;
  font-size: 20px;
}

#root_transport_fees_report .tfr-ay-name {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

#root_transport_fees_report .tfr-ay-select {
  min-width: 180px;
  max-width: 260px;
}

#root_transport_fees_report .tfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_transport_fees_report .tfr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#root_transport_fees_report .tfr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  #root_transport_fees_report .tfr-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_transport_fees_report .tfr-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#root_transport_fees_report .tfr-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_transport_fees_report .tfr-label-spacer {
  visibility: hidden;
}

#root_transport_fees_report .tfr-filter-group select,
#root_transport_fees_report .tfr-ay-select select,
#root_transport_fees_report .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
  font-size: 14px;
}

#root_transport_fees_report .tfr-filter-group select:focus,
#root_transport_fees_report .tfr-ay-select select:focus,
#root_transport_fees_report .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_transport_fees_report .tfr-search-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  min-height: 42px;
  border-radius: 10px;
}

#root_transport_fees_report .tfr-idle-hint,
#root_transport_fees_report .tfr-no-record {
  margin-top: 18px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

#root_transport_fees_report .tfr-idle-hint-icon,
#root_transport_fees_report .tfr-no-record-icon {
  font-size: 26px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_transport_fees_report .tfr-idle-hint p,
#root_transport_fees_report .tfr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

#root_transport_fees_report .tfr-no-record h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_transport_fees_report .tfr-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: flex-end;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #065f46;
}

#root_transport_fees_report .tfr-stop-results {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#root_transport_fees_report .tfr-stop-block {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #059669;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

#root_transport_fees_report .tfr-stop-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

#root_transport_fees_report .tfr-table-wrap,
#root_transport_fees_report .tfr-legacy-table-wrap {
  overflow-x: auto;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

#root_transport_fees_report .tfr-table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse;
}

#root_transport_fees_report .tfr-table thead th,
#root_transport_fees_report .tfr-table .tableHeadClass th,
#root_transport_fees_report .tfr-head-cell {
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 1px solid #bbf7d0;
  white-space: nowrap;
}

#root_transport_fees_report .tfr-table td {
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_transport_fees_report .tfr-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

#root_transport_fees_report .tfr-table tbody tr:hover {
  background: #f0fdf4;
}

#root_transport_fees_report .aCenter {
  text-align: center;
}

#root_transport_fees_report .tfr-amt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#root_transport_fees_report .tfr-excel-wrap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_transport_fees_report .tfr-excel-btn,
#root_transport_fees_report .btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-weight: 600;
  border-radius: 10px;
  background-color: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

#root_transport_fees_report .btn-warning:hover,
#root_transport_fees_report .tfr-excel-btn:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: #ffffff;
}

#root_transport_fees_report .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

#root_transport_fees_report .btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

#root_transport_fees_report .tfr-modal-hidden {
  display: none !important;
}

#root_transport_fees_report .tfr-modal {
  background: #ffffff;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 1px solid #e5e7eb;
}

#root_transport_fees_report .tfr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

#root_transport_fees_report .tfr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

#root_transport_fees_report .tfr-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

#root_transport_fees_report .tfr-modal-body {
  padding: 16px 20px 20px;
}

#root_transport_fees_report .tfr-form-item {
  margin-bottom: 14px;
}

#root_transport_fees_report .tfr-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_transport_fees_report .tfr-note {
  font-size: 13px;
  color: #6b7280;
  margin: 6px 0 10px;
}

#root_transport_fees_report .tfr-char-left {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

#root_transport_fees_report .tfr-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 640px) {
  #root_transport_fees_report .tfr-schedule {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

#root_transport_fees_report .tfr-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

#root_transport_fees_report .tfr-instruction {
  font-size: 13px;
  color: #6b7280;
  margin: 12px 0;
}

#root_transport_fees_report .tfr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

@media (max-width: 640px) {
  #root_transport_fees_report .tfr-page-card {
    padding: 16px;
  }

  #root_transport_fees_report .tfr-page-title {
    font-size: 18px;
  }

  #root_transport_fees_report .tfr-label-spacer {
    display: none;
  }

  #root_transport_fees_report .tfr-ay-select {
    width: 100%;
    max-width: none;
  }

  #root_transport_fees_report .tfr-excel-btn,
  #root_transport_fees_report .tfr-modal-actions .btn {
    width: 100%;
  }
}

/* Payment Gateway Settlement Report - Phase 3 polish (pgsr-*) */
#root_payment_gateway_settlement_report .pgsr-tally-btn {
  background-color: #d97706;
  border-color: #d97706;
  color: #fff;
}

#root_payment_gateway_settlement_report .pgsr-tally-btn:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: #fff;
}

#root_payment_gateway_settlement_report .pgsr-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

#root_payment_gateway_settlement_report .pgsr-status-settled {
  background: #dcfce7;
  color: #166534;
}

#root_payment_gateway_settlement_report .pgsr-status-other {
  background: #ffedd5;
  color: #9a3412;
}

#root_payment_gateway_settlement_report .pgsr-actions-row {
  padding: 4px 2px 8px;
}

#root_payment_gateway_settlement_report .pgsr-date-total {
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* ------------------------ Transport Fees Month Wise Report hint fix (tfmw-*) ------------------------ */
#root_transport_fees_month_wise_report .tfmw-scroll-hint.tfmw-hint-visible {
  display: none !important;
}

@media (max-width: 768px) {
  #root_transport_fees_month_wise_report .tfmw-scroll-hint.tfmw-hint-visible {
    display: block !important;
  }
}

/* ------------------------ Transport Fees Month Wise Report polish (tfmw-*) ------------------------ */
#root_transport_fees_month_wise_report .tfmw-table tbody td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#root_transport_fees_month_wise_report .tfmw-table tbody td:nth-child(2),
#root_transport_fees_month_wise_report .tfmw-table tbody td:nth-child(3) {
  text-align: left;
}

#root_transport_fees_month_wise_report .tfmw-table thead {
  background: #ecfdf5;
}

#root_transport_fees_month_wise_report .tfmw-table tbody tr:hover td {
  background: #f8fafc;
}

/* Phase 3 UI polish ? transport fees report */
#root_transport_fees_report .tfr-table tbody td.tfr-amt:last-child {
  color: #065f46;
  font-weight: 700;
}

#root_transport_fees_report .tfr-legacy-table-wrap:empty,
#root_transport_fees_report #newMarkUpdateTblId:empty {
  display: none;
}

#root_transport_fees_report .tfr-stop-block {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_transport_fees_report .tfr-excel-btn {
  min-width: 200px;
}

#root_transport_fees_report .tfr-excel-slot:empty {
  display: none;
}

/* ------------------------ Master Profile UX pass 2 (contrast/radios/nested tables) ------------------------ */
#root_master_profile .mprof-radio-row {
  width: fit-content;
  max-width: 100%;
}

#root_master_profile .college-table thead,
#root_master_profile .mprof-table thead {
  background-color: #d1fae5 !important;
}

#root_master_profile .college-table thead th,
#root_master_profile .mprof-table thead th,
#root_master_profile #leaveTypeMasterTable thead th {
  color: #064e3b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #6ee7b7 !important;
}

#root_master_profile .college-table tbody td,
#root_master_profile .mprof-table tbody td {
  color: #111827 !important;
  font-size: 14px;
}

#root_master_profile .mprof-nested-asset {
  margin-bottom: 10px;
}

#root_master_profile .mprof-nested-asset-sub {
  margin: 0 0 18px 12px;
}

#root_master_profile .mprof-panel-header h4,
#root_master_profile .mprof-page-card h4,
#root_master_profile .admin-content h4 {
  color: #0f172a;
  font-weight: 700;
  font-size: 18px;
}

#root_master_profile .admin-menu > h4,
#root_master_profile .pro-sidebar h4,
#root_master_profile .mprof-menu-title {
  color: #334155;
  font-weight: 600;
}

@media (max-width: 640px) {
  #root_master_profile .mprof-modal-actions {
    flex-direction: column;
  }

  #root_master_profile .mprof-modal-actions .btn {
    width: 100%;
  }

  #root_master_profile .mprof-nested-asset-sub {
    margin-left: 0;
  }
}

/* ------------------------ Tally with Bank Statement Report (twbr-*) ------------------------ */
#root_tally_with_bank_report .twbr-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_tally_with_bank_report .twbr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_tally_with_bank_report .twbr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#root_tally_with_bank_report .twbr-page-title .fa {
  color: #2563eb;
}

#root_tally_with_bank_report .twbr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_tally_with_bank_report .twbr-filter-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

#root_tally_with_bank_report .twbr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_tally_with_bank_report .twbr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_tally_with_bank_report .twbr-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

#root_tally_with_bank_report .twbr-filter-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_tally_with_bank_report .twbr-label-spacer {
  visibility: hidden;
}

#root_tally_with_bank_report .twbr-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

#root_tally_with_bank_report .twbr-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_tally_with_bank_report .twbr-search-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 600;
}

#root_tally_with_bank_report .twbr-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

#root_tally_with_bank_report .twbr-scroll-hint.twbr-hint-visible {
  display: none;
}

@media (max-width: 768px) {
  #root_tally_with_bank_report .twbr-scroll-hint.twbr-hint-visible {
    display: block;
  }
}

#root_tally_with_bank_report .twbr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 14px;
}

#root_tally_with_bank_report .twbr-table {
  width: 100%;
  min-width: 980px;
  margin: 0;
}

#root_tally_with_bank_report .twbr-table th,
#root_tally_with_bank_report .twbr-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
}

#root_tally_with_bank_report .twbr-num,
#root_tally_with_bank_report .twbr-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#root_tally_with_bank_report .twbr-total-row td {
  background: #f3f4f6;
  font-weight: 700;
  border-top: 2px solid #d1d5db;
}

#root_tally_with_bank_report .twbr-grand {
  margin: 8px 0 14px;
}

#root_tally_with_bank_report .twbr-grand-total {
  display: inline-block;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  color: #14532d;
  font-size: 14px;
}

#root_tally_with_bank_report .twbr-no-rec {
  text-align: center;
  padding: 24px 12px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin: 12px 0 16px;
  font-size: 16px;
  font-weight: 600;
}

#root_tally_with_bank_report .twbr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

#root_tally_with_bank_report .twbr-action-btn {
  min-height: 40px;
  min-width: 120px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 640px) {
  #root_tally_with_bank_report .twbr-page-card {
    padding: 16px;
  }

  #root_tally_with_bank_report .twbr-page-title {
    font-size: 18px;
  }

  #root_tally_with_bank_report .twbr-label-spacer {
    display: none;
  }

  #root_tally_with_bank_report .twbr-action-btn {
    width: 100%;
  }
}

@media print {
  #root_tally_with_bank_report .twbr-filters,
  #root_tally_with_bank_report .twbr-actions,
  #root_tally_with_bank_report .twbr-scroll-hint {
    display: none !important;
  }
}

/* ===== Tally Fees Report (tlfr-) ===== */
#root_tally_fees_report .tlfr-page {
  color: #111827;
}

#root_tally_fees_report .tlfr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_tally_fees_report .tlfr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_tally_fees_report .tlfr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_tally_fees_report .tlfr-page-title .fa {
  color: #047857;
  font-size: 20px;
}

#root_tally_fees_report .tlfr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_tally_fees_report .tlfr-print-dates {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  color: #374151;
}

#root_tally_fees_report .tlfr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  #root_tally_fees_report .tlfr-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_tally_fees_report .tlfr-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  #root_tally_fees_report .tlfr-filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

#root_tally_fees_report .tlfr-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

#root_tally_fees_report .tlfr-label-spacer {
  visibility: hidden;
}

#root_tally_fees_report .tlfr-filter-group select,
#root_tally_fees_report .tlfr-filter-group input,
#root_tally_fees_report .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
  font-size: 14px;
}

#root_tally_fees_report .tlfr-filter-group select:focus,
#root_tally_fees_report .tlfr-filter-group input:focus,
#root_tally_fees_report .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_tally_fees_report .tlfr-download-btn,
#root_tally_fees_report .btn-warning {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  min-height: 42px;
  border-radius: 10px;
  background-color: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

#root_tally_fees_report .tlfr-download-btn:hover,
#root_tally_fees_report .btn-warning:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: #ffffff;
}

#root_tally_fees_report .tlfr-idle-hint,
#root_tally_fees_report .tlfr-no-record {
  margin-top: 18px;
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

#root_tally_fees_report .tlfr-idle-hint-icon,
#root_tally_fees_report .tlfr-no-record-icon {
  font-size: 26px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_tally_fees_report .tlfr-idle-hint p,
#root_tally_fees_report .tlfr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

#root_tally_fees_report .tlfr-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_tally_fees_report .tlfr-results-slot:empty {
  display: none;
}

#root_tally_fees_report .tlfr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_tally_fees_report .tlfr-customize-wrap:has(#customizeReports:empty) {
  display: none;
}

@media (max-width: 640px) {
  #root_tally_fees_report .tlfr-page-card {
    padding: 16px;
  }

  #root_tally_fees_report .tlfr-page-title {
    font-size: 18px;
  }

  #root_tally_fees_report .tlfr-label-spacer {
    display: none;
  }
}

@media print {
  #root_tally_fees_report .tlfr-filters,
  #root_tally_fees_report .tlfr-actions,
  #root_tally_fees_report .tlfr-idle-hint,
  #root_tally_fees_report #feeCollectionExcelDownloadBtn {
    display: none !important;
  }

  #root_tally_fees_report .tlfr-print-dates {
    display: block !important;
  }

  #root_tally_fees_report .tlfr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ------------------------ Fees Type VS Payment Mode Report (ftpmr-*) ------------------------ */
.ftpmr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.ftpmr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.ftpmr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ftpmr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.ftpmr-college-name {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #4f46e5;
}

.ftpmr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.ftpmr-print-dates {
  margin-top: 8px;
  font-size: 13px;
  color: #374151;
}

.ftpmr-filters {
  margin-bottom: 12px;
}

.ftpmr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

@media (min-width: 640px) {
  .ftpmr-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ftpmr-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
}

.ftpmr-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.ftpmr-form-item select,
.ftpmr-form-item input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

.ftpmr-form-item select:focus,
.ftpmr-form-item input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.ftpmr-search-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ftpmr-search-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: transparent;
  user-select: none;
  line-height: 1.25;
}

.ftpmr-search-btn {
  min-width: 120px;
  min-height: 42px;
}

.ftpmr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  margin-top: 8px;
  margin-bottom: 14px;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table {
  width: 100%;
  min-width: 980px;
  margin: 0;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table th,
#root_fees_type_vs_payment_mode_report .ftpmr-table td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: middle;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table thead th {
  white-space: nowrap;
}

#root_fees_type_vs_payment_mode_report .ftpmr-num,
#root_fees_type_vs_payment_mode_report .ftpmr-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table tbody tr:hover td {
  background: #f8fafc;
}

#root_fees_type_vs_payment_mode_report .ftpmr-total-row td {
  background: #f3f4f6;
  font-weight: 700;
  border-top: 2px solid #d1d5db;
}

#root_fees_type_vs_payment_mode_report .ftpmr-grand {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0 14px;
}

#root_fees_type_vs_payment_mode_report .ftpmr-grand-total {
  display: inline-block;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  color: #14532d;
  font-size: 14px;
}

.ftpmr-no-record {
  margin-top: 16px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.ftpmr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.ftpmr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.ftpmr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.ftpmr-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

.ftpmr-download-bar a {
  text-decoration: none;
}

@media (max-width: 640px) {
  .ftpmr-page-card {
    padding: 16px;
  }

  .ftpmr-page-title {
    font-size: 18px;
  }

  .ftpmr-search-label {
    display: none;
  }

  .ftpmr-search-btn {
    width: 100%;
  }

  .ftpmr-download-bar {
    flex-direction: column;
  }

  .ftpmr-download-bar .btn,
  .ftpmr-download-bar a {
    width: 100%;
    text-align: center;
  }
}

@media print {
  /* Avoid blank first page: hide fixed nav / overlays / spacers */
  body.ftpmr-printing {
    margin-top: 0 !important;
    background: #fff !important;
  }

  body.ftpmr-printing #menu_root,
  body.ftpmr-printing .header,
  body.ftpmr-printing #loaderIcon,
  body.ftpmr-printing #loading-overlays,
  body.ftpmr-printing #warningModal,
  body.ftpmr-printing .col-md-12[style*="padding-top"] {
    display: none !important;
  }

  #root_fees_type_vs_payment_mode_report,
  #root_fees_type_vs_payment_mode_report * {
    visibility: visible !important;
  }

  #root_fees_type_vs_payment_mode_report {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #root_fees_type_vs_payment_mode_report > main.page-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-filters,
  #root_fees_type_vs_payment_mode_report .ftpmr-filter-grid,
  #root_fees_type_vs_payment_mode_report .ftpmr-download-bar,
  #root_fees_type_vs_payment_mode_report .ftpmr-page-subtitle,
  #root_fees_type_vs_payment_mode_report .ftpmr-scroll-hint,
  #root_fees_type_vs_payment_mode_report .print_hide {
    display: none !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-page-card,
  .ftpmr-page-card {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-header {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-table-wrap {
    overflow: visible !important;
    border: none !important;
    margin: 0 !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-table thead th {
    position: static !important;
    top: auto !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-table {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 10px !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-table th,
  #root_fees_type_vs_payment_mode_report .ftpmr-table td {
    padding: 4px 5px !important;
    font-size: 10px !important;
  }

  #root_fees_type_vs_payment_mode_report .ftpmr-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Phase 3 UI polish ? tally fees report */
#root_tally_fees_report .tlfr-download-btn {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#root_tally_fees_report .tlfr-idle-hint,
#root_tally_fees_report .tlfr-no-record {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#root_tally_fees_report #displayFeesModeListId:empty {
  display: none;
}

/* ------------------------ Tally with Bank Report polish (twbr-*) ------------------------ */
#root_tally_with_bank_report .twbr-no-rec {
  display: none;
}

#root_tally_with_bank_report .twbr-table thead th {
  white-space: nowrap;
}

#root_tally_with_bank_report .twbr-table tbody tr:hover td {
  background: #f8fafc;
}

#root_tally_with_bank_report .twbr-grand {
  display: flex;
  justify-content: flex-start;
}

#root_tally_with_bank_report .twbr-actions .btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* Fees Type VS Payment Mode Report - Phase 3 polish (ftpmr-*) */
.ftpmr-scroll-hint {
  display: none;
  margin: 4px 0 8px;
  font-size: 12px;
  color: #6b7280;
}

.ftpmr-scroll-hint.ftpmr-hint-visible {
  display: block;
}

@media (min-width: 1024px) {
  .ftpmr-scroll-hint.ftpmr-hint-visible {
    display: none;
  }
}

#root_fees_type_vs_payment_mode_report .ftpmr-table td:nth-child(1),
#root_fees_type_vs_payment_mode_report .ftpmr-table th:nth-child(1),
#root_fees_type_vs_payment_mode_report .ftpmr-table td:nth-child(2),
#root_fees_type_vs_payment_mode_report .ftpmr-table th:nth-child(2) {
  position: sticky;
  z-index: 1;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table th:nth-child(1) {
  left: 0;
  background-color: #d1fae5;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table th:nth-child(2) {
  left: 52px;
  background-color: #d1fae5;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

#root_fees_type_vs_payment_mode_report .ftpmr-table td:nth-child(1) {
  left: 0;
  background: #fff;
  min-width: 52px;
}

#root_fees_type_vs_payment_mode_report .ftpmr-table td:nth-child(2) {
  left: 52px;
  background: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

#root_fees_type_vs_payment_mode_report .ftpmr-total-row td:nth-child(1) {
  background: #f3f4f6;
}

#root_fees_type_vs_payment_mode_report .ftpmr-download-bar .btn {
  min-height: 42px;
}

/* ------------------------ Unpaid Alumni Fees Report (uafr-*) ------------------------ */
.uafr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.uafr-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.uafr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.uafr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.uafr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

.uafr-ay-name {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.uafr-ay-select {
  min-width: 180px;
}

.uafr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.uafr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.uafr-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

.uafr-scroll-hint.uafr-hint-visible {
  display: block;
}

@media (min-width: 1280px) {
  .uafr-scroll-hint.uafr-hint-visible {
    display: none;
  }
}

.uafr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_unpaid_alumni_fees_report .uafr-table {
  width: 100%;
  min-width: 980px;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
}

#root_unpaid_alumni_fees_report .uafr-table th,
#root_unpaid_alumni_fees_report .uafr-table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}

#root_unpaid_alumni_fees_report .uafr-table thead th {
  background: #ecfdf5;
  color: #14532d;
  font-weight: 700;
  white-space: nowrap;
}

#root_unpaid_alumni_fees_report .uafr-avatar,
#root_unpaid_alumni_fees_report img.single-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

#root_unpaid_alumni_fees_report .uafr-photo-col,
#root_unpaid_alumni_fees_report .uafr-photo-cell {
  width: 64px;
  text-align: center;
}

#root_unpaid_alumni_fees_report .uafr-amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #b91c1c;
  white-space: nowrap;
}

#root_unpaid_alumni_fees_report .uafr-icon-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: #4f46e5;
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
}

#root_unpaid_alumni_fees_report .uafr-icon-btn:hover {
  background: #eef2ff;
  color: #3730a3;
}

#root_unpaid_alumni_fees_report .uafr-table tbody tr:hover {
  background: #f8fafc;
}

.uafr-no-record {
  margin-top: 16px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.uafr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

.uafr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

.uafr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.uafr-modal-hidden {
  display: none !important;
}

.uafr-modal {
  background: #fff;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  margin: auto;
}

#root_unpaid_alumni_fees_report .modal-overlay > .uafr-modal,
body > .modal-overlay > .uafr-modal {
  margin: auto;
}

.uafr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.uafr-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.uafr-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}

.uafr-modal-close:hover {
  color: #111827;
}

.uafr-modal-body {
  padding: 18px;
}

.uafr-mobile-block {
  padding: 18px 12px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.02em;
}

.uafr-modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .uafr-page-card {
    padding: 16px;
  }

  .uafr-page-title {
    font-size: 18px;
  }
}

@media print {
  #root_unpaid_alumni_fees_report .uafr-ay-select,
  #root_unpaid_alumni_fees_report .uafr-scroll-hint,
  #root_unpaid_alumni_fees_report .uafr-icon-btn {
    display: none !important;
  }

  .uafr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* ------------------------ Fees Discount / Concession Report (fddr-*) ------------------------ */
#root_fees_discount_report .fddr-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#root_fees_discount_report .fddr-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_fees_discount_report .fddr-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

#root_fees_discount_report .fddr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_fees_discount_report .fddr-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_fees_discount_report .fddr-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_fees_discount_report .fddr-year-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-top: 14px;
}

#root_fees_discount_report .fddr-year-label {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  padding: 6px 0;
}

#root_fees_discount_report .fddr-year-label:hover {
  color: #4f46e5;
  text-decoration: underline;
}

#root_fees_discount_report .fddr-year-edit {
  display: inline-block;
  min-width: 200px;
  max-width: 280px;
}

#root_fees_discount_report .fddr-filter-panel {
  margin-bottom: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_fees_discount_report .fddr-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_fees_discount_report .fddr-filter-grid {
    grid-template-columns: minmax(0, 320px);
  }
}

#root_fees_discount_report .fddr-filter-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_fees_discount_report .fddr-input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

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

#root_fees_discount_report .fddr-results {
  margin-top: 20px;
}

#root_fees_discount_report .fddr-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 20px 0 10px;
  padding: 12px 14px;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
}

#root_fees_discount_report .fddr-section-head .head_title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_fees_discount_report .fddr-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 14px 0 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_fees_discount_report .fddr-subhead .qbCls {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

#root_fees_discount_report .fddr-section-meta {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
}

#root_fees_discount_report .fddr-table-wrap {
  margin: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_fees_discount_report .fddr-table {
  width: 100%;
  min-width: 520px;
}

#root_fees_discount_report .fddr-table th,
#root_fees_discount_report .fddr-table td {
  padding: 12px 14px;
  vertical-align: middle;
}

#root_fees_discount_report .fddr-col-name {
  width: 70%;
  word-break: break-word;
  white-space: normal;
}

#root_fees_discount_report .fddr-col-amt {
  width: 30%;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: #111827;
}

#root_fees_discount_report .fddr-table thead th.fddr-col-amt {
  text-align: right;
}

#root_fees_discount_report .fddr-inr {
  margin-right: 4px;
  color: #6b7280;
}

#root_fees_discount_report .fddr-inline-empty {
  margin: 8px 0 12px;
  padding: 14px;
  text-align: center;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px dashed #fecaca;
  border-radius: 10px;
  font-weight: 600;
}

#root_fees_discount_report .fddr-no-record {
  margin-top: 24px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

#root_fees_discount_report .fddr-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

#root_fees_discount_report .fddr-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

#root_fees_discount_report .fddr-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

#root_fees_discount_report .fddr-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_fees_discount_report .fddr-download-bar a {
  text-decoration: none;
}

#root_fees_discount_report .fddr-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 10px;
}

@media (max-width: 640px) {
  #root_fees_discount_report .fddr-page-card {
    padding: 16px;
  }

  #root_fees_discount_report .fddr-page-title {
    font-size: 18px;
  }

  #root_fees_discount_report .fddr-year-edit {
    min-width: 100%;
    max-width: 100%;
  }

  #root_fees_discount_report .fddr-download-bar {
    flex-direction: column;
  }

  #root_fees_discount_report .fddr-download-bar .btn,
  #root_fees_discount_report .fddr-download-bar a {
    width: 100%;
    text-align: center;
  }

  #root_fees_discount_report .fddr-download-btn {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  #root_fees_discount_report .fddr-filter-panel,
  #root_fees_discount_report .fddr-download-bar,
  #root_fees_discount_report .fddr-year-edit {
    display: none !important;
  }

  #root_fees_discount_report .fddr-page-card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* Unpaid Alumni Fees Report - Phase 3 polish (uafr-*) */
#root_unpaid_alumni_fees_report .uafr-table a {
  color: #4338ca;
  font-weight: 600;
  text-decoration: none;
}

#root_unpaid_alumni_fees_report .uafr-table a:hover {
  text-decoration: underline;
  color: #312e81;
}

#root_unpaid_alumni_fees_report .uafr-inr {
  font-weight: 600;
  color: #7f1d1d;
  margin-right: 2px;
}

#root_unpaid_alumni_fees_report .uafr-modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  margin-top: 8px;
}

#root_unpaid_alumni_fees_report .uafr-modal-footer .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

#root_unpaid_alumni_fees_report .uafr-modal-footer .btn-danger:hover {
  background-color: #b91c1c;
}

#root_unpaid_alumni_fees_report .uafr-mobile-block {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_unpaid_alumni_fees_report .modal-overlay {
  align-items: center;
  justify-content: center;
}

/* ------------------------ College Profile UX polish (cprof-*) ------------------------ */
#root_college_profile {
  min-height: calc(100vh - 48px);
}

#root_college_profile .pro-header-title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  max-width: min(70vw, 720px);
  white-space: normal;
  word-break: break-word;
}

#root_college_profile .pro-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#root_college_profile .pro-main-content {
  min-width: 0;
  background: #f3f4f6;
}

#root_college_profile .cprof-section-card {
  margin-bottom: 20px;
}

#root_college_profile .cprof-about-body {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

#root_college_profile .cprof-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: #4f46e5;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#root_college_profile .cprof-edit-btn:hover {
  background: #4338ca;
}

#root_college_profile .cprof-edit-btn-ghost {
  background: transparent;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
}

#root_college_profile .cprof-edit-btn-ghost:hover {
  background: #eef2ff;
  color: #3730a3;
}

#root_college_profile .cprof-contact-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

#root_college_profile .cprof-contact-row {
  display: grid;
  grid-template-columns: minmax(120px, 28%) 1fr;
  gap: 12px 16px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

#root_college_profile .cprof-contact-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#root_college_profile .cprof-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

#root_college_profile .cprof-contact-value {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

#root_college_profile .cprof-panel-header {
  gap: 12px;
  flex-wrap: wrap;
}

#root_college_profile .cprof-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_college_profile .cprof-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: #fff;
}

#root_college_profile .cprof-action-btn-primary {
  background: #4f46e5;
}

#root_college_profile .cprof-action-btn-primary:hover {
  background: #4338ca;
  color: #fff;
}

#root_college_profile .cprof-action-btn-success {
  background: #16a34a;
}

#root_college_profile .cprof-action-btn-success:hover {
  background: #15803d;
  color: #fff;
}

#root_college_profile .cprof-action-btn-danger {
  background: #dc2626;
}

#root_college_profile .cprof-action-btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}

#root_college_profile .cprof-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_college_profile .cprof-empty-state {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 14px;
  font-weight: 600;
}

#root_college_profile .formtbl-info td {
  vertical-align: top;
}

#root_college_profile .formvalue-cell {
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  #root_college_profile .pro-layout {
    flex-direction: column;
  }

  #root_college_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_college_profile .pro-sidebar.collapsed {
    width: 100%;
  }

  #root_college_profile .pro-main-content {
    padding: 16px;
  }

  #root_college_profile .pro-header-title {
    font-size: 16px;
  }

  #root_college_profile .cprof-contact-row {
    grid-template-columns: 1fr;
  }
}

/* Survey modal (outside profile root) */
.cprof-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
  padding-top: 72px;
}

.cprof-modal-overlay.hidden {
  display: none;
}

.cprof-modal-dialog {
  width: 100%;
  max-width: 28rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

.cprof-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.cprof-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #374151;
}

.cprof-modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

.cprof-modal-body {
  padding: 18px;
}

.cprof-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cprof-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 640px) {
  .cprof-form-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .cprof-form-label {
    width: 33%;
  }

  .cprof-form-control {
    width: 67%;
  }
}

.cprof-form-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.cprof-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1f2937;
  background: #fff;
  box-sizing: border-box;
}

.cprof-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.cprof-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
}

.cprof-modal-actions .cprof-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  color: #fff;
}

.cprof-modal-actions .cprof-action-btn-success {
  background: #16a34a;
}

.cprof-modal-actions .cprof-action-btn-danger {
  background: #dc2626;
}

/* ===== College Staff Profile UI polish (csp-*) ===== */
#root_college_staff_profile {
  color: #111827;
}

#root_college_staff_profile .csp-header .pro-header-container,
#root_college_staff_profile .csp-header-container {
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

#root_college_staff_profile .csp-header-center {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

#root_college_staff_profile .csp-staff-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

#root_college_staff_profile .csp-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

#root_college_staff_profile .csp-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: #ffffff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#root_college_staff_profile .csp-header-btn:hover {
  background: #eef2ff;
}

#root_college_staff_profile .csp-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 88px;
}

#root_college_staff_profile .csp-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #ffffff;
}

#root_college_staff_profile .csp-change-photo {
  font-size: 12px;
  color: #e0e7ff;
  text-decoration: underline;
}

#root_college_staff_profile .csp-change-photo:hover {
  color: #ffffff;
}

#root_college_staff_profile .csp-layout {
  min-height: calc(100vh - 72px);
}

#root_college_staff_profile .csp-sidebar,
#root_college_staff_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_college_staff_profile .csp-sidebar::-webkit-scrollbar,
#root_college_staff_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_college_staff_profile .csp-main,
#root_college_staff_profile .pro-main-content {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

#root_college_staff_profile #surveyProDatas > *:not(.csp-page-card):not(.main-container):not(.fixed):not(.csp-modal-overlay) {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 16px;
}

#root_college_staff_profile .csp-page-card,
#root_college_staff_profile #surveyProDatas > .main-container {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

#root_college_staff_profile .csp-section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

#root_college_staff_profile .csp-section-title-inline {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#root_college_staff_profile .csp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

#root_college_staff_profile .csp-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_college_staff_profile .csp-panel-actions-end {
  justify-content: flex-end;
  margin-top: 12px;
}

#root_college_staff_profile .csp-info-grid {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr;
  gap: 10px 16px;
  align-items: start;
}

#root_college_staff_profile .csp-info-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#root_college_staff_profile .csp-info-row {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr;
  gap: 10px 16px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

#root_college_staff_profile .csp-info-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_college_staff_profile .csp-info-value {
  font-size: 14px;
  color: #111827;
  min-width: 0;
  word-break: break-word;
}

#root_college_staff_profile .csp-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#root_college_staff_profile .csp-contact-row {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr;
  gap: 10px 16px;
  align-items: center;
}

#root_college_staff_profile .csp-contact-row-top {
  align-items: start;
}

#root_college_staff_profile .csp-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#root_college_staff_profile .csp-contact-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#root_college_staff_profile .csp-value-chip {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  line-height: 1.45;
}

#root_college_staff_profile .csp-empty-state {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  padding: 20px 8px;
}

#root_college_staff_profile .csp-empty-error {
  color: #dc2626;
}

#root_college_staff_profile .csp-subsection-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 12px 0 8px;
}

#root_college_staff_profile .csp-additional-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  margin-bottom: 8px;
}

#root_college_staff_profile .csp-additional-text {
  flex: 1;
  min-width: 180px;
  font-size: 14px;
  color: #1f2937;
}

#root_college_staff_profile .csp-action-btn {
  min-height: 36px;
}

#root_college_staff_profile .csp-status-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#root_college_staff_profile .header-container {
  padding: 0 0 12px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

#root_college_staff_profile .table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-top: 4px;
}

#root_college_staff_profile .showInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #f3f4f6;
}

#root_college_staff_profile .csp-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

#root_college_staff_profile .csp-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid #f3f4f6;
}

#root_college_staff_profile .csp-field-value {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #111827;
  word-break: break-word;
}

#root_college_staff_profile .csp-edit-icon {
  color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}

#root_college_staff_profile .csp-edit-icon:hover {
  color: #1d4ed8;
}

#root_college_staff_profile .csp-readonly-list p {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #111827;
}

#root_college_staff_profile .college-table,
#root_college_staff_profile table {
  width: 100%;
  border-collapse: collapse;
}

#root_college_staff_profile .college-table thead th,
#root_college_staff_profile table thead th,
#root_college_staff_profile .tableHeadClass th {
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #c7d2fe;
  white-space: nowrap;
}

#root_college_staff_profile .college-table td,
#root_college_staff_profile table td {
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_college_staff_profile .btn-success {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

#root_college_staff_profile .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

#root_college_staff_profile .btn-primary {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

#root_college_staff_profile .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.csp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.csp-modal-overlay.csp-modal-open,
.csp-modal-overlay:not(.hidden).csp-modal-open {
  display: flex !important;
}

#addStaffDes.csp-modal-overlay:not(.hidden) {
  display: flex !important;
}

.csp-modal {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.csp-modal-lg {
  max-width: 720px;
}

.csp-modal-md {
  max-width: 640px;
}

.csp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.csp-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.csp-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.csp-modal-body {
  padding: 16px 18px 20px;
}

.csp-form-item {
  margin-bottom: 14px;
}

.csp-form-item label,
.csp-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.csp-required {
  color: #dc2626;
}

.csp-input,
.csp-modal .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 14px;
  outline: none;
  background: #fff;
}

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

.csp-help {
  margin: 4px 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.csp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.csp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .csp-form-row {
    grid-template-columns: 180px 1fr;
    align-items: start;
  }
}

.csp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .csp-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.csp-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .csp-schedule-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.csp-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.csp-camera-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .csp-camera-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.csp-camera-box {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-height: 160px;
  padding: 8px;
  background: #f9fafb;
}

.csp-link {
  color: #4f46e5;
  font-size: 13px;
  text-decoration: underline;
}

.csp-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.csp-char-count {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

.csp-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
}

.csp-toast-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 250px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.csp-toast-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 768px) {
  #root_college_staff_profile .csp-header-container {
    justify-content: center;
  }

  #root_college_staff_profile .csp-main {
    padding: 14px;
  }

  #root_college_staff_profile .pro-sidebar.collapsed {
    width: 0;
    padding: 0;
    border: none;
  }

  .csp-modal-actions .btn {
    width: 100%;
  }
}

@media print {
  #root_college_staff_profile .pro-sidebar,
  #root_college_staff_profile .csp-header-actions,
  #root_college_staff_profile .csp-change-photo,
  #root_college_staff_profile .pro-menu-btn {
    display: none !important;
  }

  #root_college_staff_profile .csp-main {
    padding: 0;
  }
}

/* ------------------------ College Profile UX polish pass 2 (cprof-*) ------------------------ */
#root_college_profile .formtbl-header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

#root_college_profile .formlabel-cell {
  width: 240px;
  max-width: 42%;
  padding-right: 16px;
}

#root_college_profile .formtbl-info td {
  padding: 12px 4px;
  vertical-align: middle;
}

#root_college_profile .cprof-logo {
  display: block;
  background: #fff;
}

#root_college_profile .cprof-contact-label .fa {
  color: #4f46e5;
  width: 16px;
  text-align: center;
}

#root_college_profile .pro-submenu-link {
  min-height: 40px;
}

#root_college_profile .pro-sidebar-title {
  letter-spacing: 0.2px;
}

#root_college_profile .cprof-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4f46e5;
  font-size: 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* College Staff Profile ? toast error + modal/responsiveness polish */
.csp-toast-box.csp-toast-error {
  background: #dc2626;
}

#root_college_staff_profile .fixed.inset-0:not(.hidden),
#root_college_staff_profile [id].fixed:not(.hidden) {
  padding: 16px;
}

#root_college_staff_profile .fixed.inset-0 > .bg-white,
#root_college_staff_profile .fixed > .bg-white {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  #root_college_staff_profile .csp-info-grid,
  #root_college_staff_profile .csp-info-row,
  #root_college_staff_profile .csp-contact-row {
    grid-template-columns: 1fr;
  }

  #root_college_staff_profile .csp-panel-header {
    align-items: flex-start;
  }

  #root_college_staff_profile .csp-page-card,
  #root_college_staff_profile #surveyProDatas > .main-container {
    padding: 16px;
  }
}

/* ------------------------ Class Profile UX polish (clspro-*) ------------------------ */
#root_departmnet {
  min-height: calc(100vh - 48px);
}

#root_departmnet .pro-header-title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  max-width: min(52vw, 560px);
  white-space: normal;
  word-break: break-word;
}

#root_departmnet .pro-header-right,
#root_departmnet .clspro-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}

#root_departmnet .pro-main-content {
  min-width: 0;
  background: #f3f4f6;
}

#root_departmnet .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_departmnet .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_departmnet .clspro-class-switch {
  max-width: min(42vw, 420px);
}

#root_departmnet .clspro-class-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#root_departmnet .clspro-class-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}

#root_departmnet .clspro-class-btn-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

#root_departmnet .clspro-class-btn-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root_departmnet .clspro-class-btn-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

#root_departmnet .clspro-subheader {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 24px;
}

#root_departmnet .clspro-subheader-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

#root_departmnet .clspro-stat-card {
  min-width: 180px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

#root_departmnet .clspro-stat-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #4f46e5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#root_departmnet .clspro-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  font-size: 14px;
  color: #4b5563;
}

#root_departmnet .clspro-stat-row label {
  margin: 0;
  font-weight: 500;
}

#root_departmnet .clspro-stat-value {
  font-weight: 700;
  color: #111827;
}

#root_departmnet .clspro-stat-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  color: #111827;
}

#root_departmnet .clspro-people-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

#root_departmnet .clspro-person-slot {
  flex: 1 1 220px;
  min-width: 200px;
}

#root_departmnet .clspro-person-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_departmnet .clspro-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

#root_departmnet .clspro-avatar {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #e0e7ff;
  background: #f3f4f6;
}

#root_departmnet .clspro-avatar-edit {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #fff;
  color: #4f46e5;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#root_departmnet .clspro-avatar-edit:hover {
  background: #eef2ff;
}

#root_departmnet .clspro-person-meta {
  min-width: 0;
}

#root_departmnet .clspro-person-role {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#root_departmnet .clspro-person-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

#root_departmnet .clspro-person-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  word-break: break-word;
}

#root_departmnet .clspro-person-edit {
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 4px;
}

#root_departmnet .clspro-person-edit:hover {
  color: #4f46e5;
}

/* Compact single blue header panel (clspro-one-panel / clspro-bar-*) */
#root_departmnet .clspro-main-header-compact {
  padding: 10px 0;
}

#root_departmnet .clspro-one-panel {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 14px;
  padding: 0 20px;
  min-width: 0;
  min-height: 48px;
}

#root_departmnet .clspro-one-panel-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 32%;
}

#root_departmnet .clspro-one-panel .pro-header-title {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

#root_departmnet .clspro-one-panel .pro-menu-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

#root_departmnet .clspro-one-panel-meta {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

#root_departmnet .clspro-one-panel-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}

#root_departmnet .clspro-one-panel .clspro-class-switch {
  max-width: 260px;
}

#root_departmnet .clspro-one-panel .clspro-class-btn {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
}

#root_departmnet .clspro-bar-meta-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

#root_departmnet .clspro-bar-stats {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#root_departmnet .clspro-bar-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

#root_departmnet .clspro-bar-stat label {
  margin: 0;
  font-weight: 600;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 11px;
  line-height: 1;
}

#root_departmnet .clspro-bar-stat-value {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

#root_departmnet .clspro-bar-stat-total {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

#root_departmnet .clspro-bar-people {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#root_departmnet .clspro-bar-person {
  min-width: 0;
  display: flex;
  align-items: center;
}

#root_departmnet .clspro-bar-person-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 210px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px 0 4px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#root_departmnet .clspro-bar-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#root_departmnet .clspro-bar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.2);
  display: block;
}

#root_departmnet .clspro-bar-avatar-edit {
  position: absolute;
  top: -5px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: #fff;
  color: #4f46e5;
  font-size: 9px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

#root_departmnet .clspro-bar-avatar-edit:hover {
  background: #eef2ff;
}

#root_departmnet .clspro-bar-person-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-right: 2px;
}

#root_departmnet .clspro-bar-person-role {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  line-height: 1;
}

#root_departmnet .clspro-bar-person-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

#root_departmnet .clspro-bar-person-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root_departmnet .clspro-bar-person-edit {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

#root_departmnet .clspro-bar-person-edit:hover {
  color: #fff;
}

#root_departmnet .clspro-panel {
  width: 100%;
  min-height: 100%;
  padding: 16px 20px 24px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

#root_departmnet .clspro-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_departmnet .clspro-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

#root_departmnet .clspro-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  margin-bottom: 18px;
}

#root_departmnet .clspro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

#root_departmnet .clspro-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_departmnet .clspro-select {
  min-height: 40px;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
}

#root_departmnet .clspro-select:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

#root_departmnet .clspro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#root_departmnet .clspro-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
}

#root_departmnet .clspro-action-btn-primary {
  background: #4f46e5;
}

#root_departmnet .clspro-action-btn-primary:hover {
  background: #4338ca;
}

#root_departmnet .clspro-action-btn-success {
  background: #059669;
}

#root_departmnet .clspro-action-btn-success:hover {
  background: #047857;
}

#root_departmnet .clspro-action-btn-warning {
  background: #d97706;
}

#root_departmnet .clspro-action-btn-warning:hover {
  background: #b45309;
}

#root_departmnet .clspro-rollno-btn {
  margin: 0 8px 4px 0;
  padding: 4px 10px;
  min-height: 30px;
  font-size: 12px;
}

#root_departmnet .clspro-table-wrap {
  overflow-x: auto;
}

#root_departmnet .college-table thead th {
  background: #eef2ff;
  color: #312e81;
  font-size: 13px;
  font-weight: 700;
  vertical-align: middle;
}

#root_departmnet .college-table td {
  font-size: 13px;
  vertical-align: middle;
}

#root_departmnet .clspro-footer-section {
  margin-top: 16px;
}

#root_departmnet .clspro-signoff-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-weight: 700;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

#root_departmnet .clspro-signoff-table td {
  padding: 10px 8px;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 13px;
}

#root_departmnet .clspro-signoff-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

#root_departmnet .clspro-download-slot {
  margin-top: 16px;
  text-align: center;
}

#root_departmnet .clspro-empty-state {
  margin-top: 20px;
  text-align: center;
}

#root_departmnet .clspro-empty-msg {
  margin: 0;
  color: #dc2626;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 900px) {
  #root_departmnet .pro-layout {
    flex-direction: column;
  }

  #root_departmnet .pro-sidebar {
    width: 100%;
    min-height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_departmnet .pro-sidebar.collapsed {
    width: 100%;
  }

  #root_departmnet .pro-main-content {
    padding: 12px;
  }

  #root_departmnet .pro-header-container {
    padding: 0 12px;
    gap: 8px;
  }

  #root_departmnet .pro-header-title {
    font-size: 15px;
    max-width: min(48vw, 220px);
  }

  #root_departmnet .clspro-class-switch {
    max-width: min(46vw, 200px);
  }

  #root_departmnet .clspro-class-btn {
    padding: 5px 8px;
    min-height: 34px;
  }

  #root_departmnet .clspro-class-btn-label {
    display: none;
  }

  #root_departmnet .clspro-class-btn-name {
    font-size: 12px;
  }

  #root_departmnet .clspro-one-panel {
    padding: 0 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  #root_departmnet .clspro-one-panel-left {
    max-width: calc(100% - 160px);
  }

  #root_departmnet .clspro-one-panel-meta {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  #root_departmnet .clspro-bar-meta-inner {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }

  #root_departmnet .clspro-bar-stats,
  #root_departmnet .clspro-bar-people {
    flex-wrap: wrap;
  }

  #root_departmnet .clspro-bar-person {
    flex: 1 1 calc(50% - 8px);
  }

  #root_departmnet .clspro-bar-person-card {
    width: 100%;
    max-width: none;
  }

  #root_departmnet .clspro-bar-person-name {
    max-width: none;
  }

  #root_departmnet .clspro-subheader {
    padding: 12px;
  }

  #root_departmnet .clspro-stat-card,
  #root_departmnet .clspro-person-slot {
    flex: 1 1 100%;
    min-width: 0;
  }

  #root_departmnet .clspro-panel {
    padding: 12px;
    border-radius: 8px;
  }

  #root_departmnet .clspro-panel-title {
    font-size: 16px;
  }

  #root_departmnet .clspro-field {
    min-width: 100%;
  }

  #root_departmnet .clspro-select {
    width: 100%;
    min-width: 0;
  }

  #root_departmnet .clspro-actions {
    margin-left: 0;
    width: 100%;
  }

  #root_departmnet .clspro-action-btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

/* ------------------------ Fees Discount Report UX polish ------------------------ */
#root_fees_discount_report .fddr-year-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  color: #312e81;
  font-size: 13px;
  font-weight: 600;
}

#root_fees_discount_report .fddr-year-label:hover {
  background: #e0e7ff;
  text-decoration: none;
}

#root_fees_discount_report .fddr-table thead {
  background-color: #d1fae5;
}

#root_fees_discount_report .fddr-table thead th {
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid #6ee7b7;
}

#root_fees_discount_report .fddr-table tbody td {
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
}

#root_fees_discount_report .fddr-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 640px) {
  #root_fees_discount_report .fddr-scroll-hint.fddr-hint-visible {
    display: block;
  }
}

/* ===== College Student Profile UI polish (cstp-*) ===== */
#root_clg_student_profile_id {
  color: #111827;
}

#root_clg_student_profile_id .cstp-header .pro-header-container,
#root_clg_student_profile_id .cstp-header-container {
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

#root_clg_student_profile_id .cstp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

#root_clg_student_profile_id .cstp-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  color: #e0e7ff;
  font-size: 13px;
}

#root_clg_student_profile_id .cstp-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

#root_clg_student_profile_id .cstp-stat-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #c7d2fe;
}

#root_clg_student_profile_id .cstp-stat-value,
#root_clg_student_profile_id .cstp-stat-pct {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

#root_clg_student_profile_id .cstp-stat-pct-strong {
  font-weight: 800;
}

#root_clg_student_profile_id .cstp-header-center {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}

#root_clg_student_profile_id .cstp-student-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

#root_clg_student_profile_id .cstp-student-meta {
  font-size: 14px;
  font-weight: 600;
  color: #e0e7ff;
}

#root_clg_student_profile_id .cstp-student-ids {
  font-size: 13px;
  color: #c7d2fe;
}

#root_clg_student_profile_id .cstp-header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 88px;
}

#root_clg_student_profile_id .cstp-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #ffffff;
}

#root_clg_student_profile_id .cstp-change-photo {
  font-size: 12px;
  color: #e0e7ff;
  text-decoration: underline;
}

#root_clg_student_profile_id .cstp-change-photo:hover {
  color: #ffffff;
}

#root_clg_student_profile_id .cstp-layout {
  min-height: calc(100vh - 96px);
}

#root_clg_student_profile_id .cstp-sidebar,
#root_clg_student_profile_id .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_clg_student_profile_id .cstp-sidebar::-webkit-scrollbar,
#root_clg_student_profile_id .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_clg_student_profile_id .cstp-main,
#root_clg_student_profile_id .pro-main-content {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

#root_clg_student_profile_id #studentProDatas > *:not(.cstp-page-card):not(.fixed):not(.cstp-modal-overlay) {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 16px;
}

#root_clg_student_profile_id .cstp-page-card {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  margin-bottom: 16px;
}

#root_clg_student_profile_id .cstp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

#root_clg_student_profile_id .cstp-section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

#root_clg_student_profile_id .cstp-card-header .cstp-section-title {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

#root_clg_student_profile_id .cstp-fields {
  display: flex;
  flex-direction: column;
}

#root_clg_student_profile_id .cstp-fields-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 900px) {
  #root_clg_student_profile_id .cstp-fields-2col {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
}

#root_clg_student_profile_id .cstp-field-label {
  display: block;
  min-width: 160px;
  max-width: 42%;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_clg_student_profile_id .cstp-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #f3f4f6;
}

#root_clg_student_profile_id .cstp-field-row-top {
  align-items: flex-start;
}

#root_clg_student_profile_id .cstp-field-value {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #111827;
  word-break: break-word;
}

#root_clg_student_profile_id .cstp-edit-icon {
  color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}

#root_clg_student_profile_id .cstp-edit-icon:hover {
  color: #1d4ed8;
}

#root_clg_student_profile_id .cstp-readonly-list > div {
  margin: 0;
  padding: 4px 0;
  font-size: 14px;
  color: #111827;
}

#root_clg_student_profile_id .cstp-address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#root_clg_student_profile_id .cstp-address-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  background: #f9fafb;
  font-size: 13px;
  line-height: 1.55;
  color: #111827;
}

#root_clg_student_profile_id .cstp-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

#root_clg_student_profile_id .college-table,
#root_clg_student_profile_id table {
  width: 100%;
  border-collapse: collapse;
}

#root_clg_student_profile_id .college-table thead th,
#root_clg_student_profile_id table thead th,
#root_clg_student_profile_id .tableHeadClass th {
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #c7d2fe;
  white-space: nowrap;
}

#root_clg_student_profile_id .college-table tbody td,
#root_clg_student_profile_id table tbody td {
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

#root_clg_student_profile_id input[type="text"],
#root_clg_student_profile_id input[type="number"],
#root_clg_student_profile_id input[type="email"],
#root_clg_student_profile_id input[type="password"],
#root_clg_student_profile_id input[type="date"],
#root_clg_student_profile_id select,
#root_clg_student_profile_id textarea,
#root_clg_student_profile_id .recValue,
#root_clg_student_profile_id .cstp-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
}

#root_clg_student_profile_id input:focus,
#root_clg_student_profile_id select:focus,
#root_clg_student_profile_id textarea:focus,
#root_clg_student_profile_id .cstp-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.cstp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.cstp-modal-overlay.cstp-modal-open,
.cstp-modal-overlay:not(.hidden).cstp-modal-open {
  display: flex !important;
}

.cstp-modal {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.cstp-modal-lg {
  max-width: 720px;
}

.cstp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.cstp-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.cstp-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.cstp-modal-body {
  padding: 16px 18px 20px;
}

.cstp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .cstp-form-row {
    grid-template-columns: 180px 1fr;
    align-items: start;
  }
}

.cstp-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.cstp-form-control {
  min-width: 0;
}

.cstp-help {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.cstp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.cstp-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cstp-camera-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .cstp-camera-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cstp-camera-box {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-height: 160px;
  padding: 8px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cstp-link {
  display: inline-block;
  margin-top: 8px;
  color: #4f46e5;
  font-size: 13px;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cstp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.cstp-btn-primary {
  background: #4f46e5;
  color: #ffffff;
}

.cstp-btn-primary:hover {
  background: #4338ca;
}

.cstp-btn-success {
  background: #16a34a;
  color: #ffffff;
}

.cstp-btn-success:hover {
  background: #15803d;
}

.cstp-btn-danger {
  background: #dc2626;
  color: #ffffff;
}

.cstp-btn-danger:hover {
  background: #b91c1c;
}

@media (max-width: 768px) {
  #root_clg_student_profile_id .cstp-header-container {
    justify-content: center;
  }

  #root_clg_student_profile_id .cstp-main {
    padding: 14px;
  }

  #root_clg_student_profile_id .pro-sidebar.collapsed {
    width: 0;
    padding: 0;
    border: none;
  }

  #root_clg_student_profile_id .cstp-field-row {
    flex-direction: column;
    align-items: flex-start;
  }

  #root_clg_student_profile_id .cstp-field-label {
    max-width: 100%;
  }

  .cstp-modal-actions .cstp-btn {
    width: 100%;
  }
}

@media print {
  #root_clg_student_profile_id .pro-sidebar,
  #root_clg_student_profile_id .cstp-change-photo,
  #root_clg_student_profile_id .pro-menu-btn {
    display: none !important;
  }

  #root_clg_student_profile_id .cstp-main {
    padding: 0;
  }
}

/* ===== College Student Profile responsive polish (cstp-*) ===== */
#root_clg_student_profile_id .cstp-field-value {
  word-break: normal;
  overflow-wrap: anywhere;
}

#root_clg_student_profile_id .cstp-field-value .showStudent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

@media (max-width: 900px) {
  #root_clg_student_profile_id .pro-layout,
  #root_clg_student_profile_id .cstp-layout {
    flex-direction: column;
  }

  #root_clg_student_profile_id .pro-sidebar,
  #root_clg_student_profile_id .cstp-sidebar {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    overflow: visible;
  }

  #root_clg_student_profile_id .pro-sidebar.collapsed {
    width: 100% !important;
  }

  #root_clg_student_profile_id .pro-sidebar.collapsed .pro-sidebar-text {
    display: inline;
  }

  #root_clg_student_profile_id .pro-sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #root_clg_student_profile_id .pro-submenu-link {
    flex: 1 1 auto;
  }

  #root_clg_student_profile_id .cstp-main,
  #root_clg_student_profile_id .pro-main-content {
    width: 100%;
    max-width: 100%;
    padding: 14px;
  }

  #root_clg_student_profile_id .cstp-page-card,
  #root_clg_student_profile_id #studentProDatas > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #root_clg_student_profile_id .cstp-header-container {
    justify-content: center;
  }

  #root_clg_student_profile_id .cstp-stats {
    min-width: 0;
    width: 100%;
  }

  #root_clg_student_profile_id .cstp-student-name {
    font-size: 20px;
  }
}

/* ------------------------ Bulk SMS UX (bsms-*) ------------------------ */
#root_bulk_sms {
  min-height: calc(100vh - 72px);
}

#root_bulk_sms .bsms-page-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

#root_bulk_sms .bsms-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
}

#root_bulk_sms .bsms-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_bulk_sms .bsms-page-title .fa {
  color: #4f46e5;
}

#root_bulk_sms .bsms-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.45;
}

#root_bulk_sms .bsms-compose-card {
  padding: 20px 24px 28px;
}

#root_bulk_sms .bsms-section-title {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

#root_bulk_sms .bsms-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#root_bulk_sms .bsms-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#root_bulk_sms .bsms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#root_bulk_sms .bsms-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_bulk_sms .bsms-required {
  color: #dc2626;
}

#root_bulk_sms .bsms-hint {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

#root_bulk_sms .bsms-input,
#root_bulk_sms select.bsms-input,
#root_bulk_sms textarea.bsms-input,
#root_bulk_sms .form-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

#root_bulk_sms .bsms-textarea {
  min-height: 120px;
  resize: vertical;
}

#root_bulk_sms .bsms-input:focus,
#root_bulk_sms .form-control:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

#root_bulk_sms .bsms-input.error,
#root_bulk_sms .form-control.error {
  border-color: #ef4444;
}

#root_bulk_sms label.error {
  display: block;
  margin-top: 4px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
}

#root_bulk_sms .error_label {
  color: #dc2626;
  font-size: 12px;
}

#root_bulk_sms .bsms-counter {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #4f46e5;
  text-align: right;
}

#root_bulk_sms .bsms-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

#root_bulk_sms .bsms-now {
  padding-bottom: 8px;
}

#root_bulk_sms .bsms-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

#root_bulk_sms .bsms-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
  cursor: pointer;
}

#root_bulk_sms .bsms-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}

#root_bulk_sms .bsms-note .fa {
  margin-right: 4px;
}

#root_bulk_sms .bsms-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

#root_bulk_sms .bsms-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 180px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #059669;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#root_bulk_sms .bsms-submit-btn:hover {
  background: #047857;
}

#root_bulk_sms .bsms-submit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  #root_bulk_sms .bsms-header,
  #root_bulk_sms .bsms-compose-card {
    padding: 16px;
  }

  #root_bulk_sms .bsms-page-title {
    font-size: 18px;
  }

  #root_bulk_sms .bsms-row,
  #root_bulk_sms .bsms-schedule {
    grid-template-columns: 1fr;
  }

  #root_bulk_sms .bsms-now {
    padding-bottom: 0;
  }

  #root_bulk_sms .bsms-actions {
    justify-content: stretch;
  }

  #root_bulk_sms .bsms-submit-btn,
  #root_bulk_sms #buttonDiv {
    width: 100%;
  }
}

/* ------------------------ Department Profile UX polish (dprof-*) ------------------------ */
#root_departmnet.dprof-root {
  min-height: calc(100vh - 48px);
}

#root_departmnet.dprof-root .dprof-layout {
  align-items: stretch;
}

#root_departmnet.dprof-root .dprof-main {
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
}

#root_departmnet.dprof-root .pro-header-title,
#root_departmnet.dprof-root #titleId {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

#root_departmnet.dprof-root .dprof-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#root_departmnet.dprof-root .dprof-hod-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  max-width: min(46vw, 280px);
}

#root_departmnet.dprof-root .dprof-hod-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

#root_departmnet.dprof-root .dprof-hod-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#root_departmnet.dprof-root .dprof-hod-meta {
  min-width: 0;
}

#root_departmnet.dprof-root .dprof-hod-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

#root_departmnet.dprof-root .dprof-hod-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#root_departmnet.dprof-root .dprof-hod-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root_departmnet.dprof-root .dprof-icon-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

#root_departmnet.dprof-root .dprof-icon-btn:hover {
  color: #c7d2fe;
}

#root_departmnet.dprof-root .dprof-panel,
#root_departmnet.dprof-root .main-container.dprof-panel {
  width: 100%;
  min-height: 100%;
  padding: 18px 20px 24px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

#root_departmnet.dprof-root .dprof-panel-header,
#root_departmnet.dprof-root .dprof-panel .header-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_departmnet.dprof-root .dprof-panel-title,
#root_departmnet.dprof-root .dprof-panel .header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

#root_departmnet.dprof-root .dprof-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#root_departmnet.dprof-root .dprof-about-card {
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

#root_departmnet.dprof-root .dprof-about-body {
  font-size: 14px;
  line-height: 1.6;
  color: #1f2937;
  white-space: pre-wrap;
  word-break: break-word;
}

#root_departmnet.dprof-root .dprof-table-card {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

#root_departmnet.dprof-root .dprof-table-wrap,
#root_departmnet.dprof-root .dprof-panel .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_departmnet.dprof-root .dprof-table,
#root_departmnet.dprof-root .dprof-panel .college-table {
  width: 100%;
  min-width: 640px;
}

#root_departmnet.dprof-root .dprof-panel .college-table thead,
#root_departmnet.dprof-root .dprof-table thead {
  background-color: #d1fae5;
}

#root_departmnet.dprof-root .dprof-panel .college-table thead th,
#root_departmnet.dprof-root .dprof-table thead th {
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 14px;
  white-space: nowrap;
  border-bottom: 1px solid #6ee7b7;
}

#root_departmnet.dprof-root .dprof-panel .college-table tbody td,
#root_departmnet.dprof-root .dprof-table tbody td {
  color: #111827;
  font-size: 14px;
  padding: 12px 14px;
  vertical-align: middle;
}

#root_departmnet.dprof-root .dprof-btn,
#root_departmnet.dprof-root .dprof-panel button.bg-blue-600,
#root_departmnet.dprof-root .dprof-panel button.bg-green-500,
#root_departmnet.dprof-root .dprof-panel button.bg-green-600,
#root_departmnet.dprof-root .dprof-panel button.bg-red-500,
#root_departmnet.dprof-root .dprof-panel button.bg-red-600,
#root_departmnet.dprof-root .dprof-panel button.bg-yellow-500,
#root_departmnet.dprof-root .dprof-panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;
}

#root_departmnet.dprof-root .dprof-btn-primary,
#root_departmnet.dprof-root .dprof-panel button.bg-blue-600 {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_departmnet.dprof-root .dprof-btn-primary:hover,
#root_departmnet.dprof-root .dprof-panel button.bg-blue-600:hover {
  background-color: #4338ca;
  color: #ffffff;
}

#root_departmnet.dprof-root .dprof-btn-success,
#root_departmnet.dprof-root .dprof-panel button.bg-green-500,
#root_departmnet.dprof-root .dprof-panel button.bg-green-600 {
  background-color: #16a34a;
  color: #ffffff;
}

#root_departmnet.dprof-root .dprof-btn-success:hover,
#root_departmnet.dprof-root .dprof-panel button.bg-green-500:hover,
#root_departmnet.dprof-root .dprof-panel button.bg-green-600:hover {
  background-color: #15803d;
  color: #ffffff;
}

#root_departmnet.dprof-root .dprof-panel button.bg-red-500,
#root_departmnet.dprof-root .dprof-panel button.bg-red-600,
#root_departmnet.dprof-root .dprof-panel .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_departmnet.dprof-root .dprof-panel button.bg-yellow-500 {
  background-color: #ca8a04;
  color: #ffffff;
}

#root_departmnet.dprof-root .dprof-input,
#root_departmnet.dprof-root .dprof-panel select,
#root_departmnet.dprof-root .dprof-panel input[type="text"],
#root_departmnet.dprof-root .dprof-panel input[type="number"],
#root_departmnet.dprof-root .dprof-panel textarea {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}

#root_departmnet.dprof-root .dprof-input:focus,
#root_departmnet.dprof-root .dprof-panel select:focus,
#root_departmnet.dprof-root .dprof-panel input[type="text"]:focus,
#root_departmnet.dprof-root .dprof-panel textarea:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_departmnet.dprof-root .dprof-empty-state,
#root_departmnet.dprof-root .dprof-panel .text-red-500.font-semibold,
#root_departmnet.dprof-root .dprof-panel [id*="noRec"],
#root_departmnet.dprof-root .dprof-panel [id*="NoRec"],
#root_departmnet.dprof-root .dprof-panel [id*="no_"] {
  margin-top: 16px;
  padding: 18px 16px;
  text-align: center;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px dashed #fecaca;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

#root_departmnet.dprof-root .dprof-empty-state.hidden,
#root_departmnet.dprof-root .dprof-panel .hidden {
  display: none !important;
}

#root_departmnet.dprof-root .dprof-modal-overlay {
  padding: 16px;
  overflow-y: auto;
}

#root_departmnet.dprof-root .dprof-modal-box {
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}

#root_departmnet.dprof-root .dprof-modal-header h2 {
  color: #0f172a;
  font-weight: 700;
}

#root_departmnet.dprof-root .dprof-modal-close {
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
}

#root_departmnet.dprof-root .pro-sidebar-nav .pro-submenu-link {
  border-radius: 8px;
}

#root_departmnet.dprof-root .pro-sidebar-nav .pro-submenu-link.active {
  background: #eef2ff;
  color: #312e81;
  font-weight: 600;
}

@media (max-width: 900px) {
  #root_departmnet.dprof-root .dprof-main {
    padding: 12px;
  }

  #root_departmnet.dprof-root .dprof-panel,
  #root_departmnet.dprof-root .main-container.dprof-panel {
    padding: 14px;
  }

  #root_departmnet.dprof-root .dprof-hod-card {
    max-width: 100%;
  }

  #root_departmnet.dprof-root .pro-header-title {
    max-width: 48vw;
    font-size: 15px;
  }

  #root_departmnet.dprof-root .dprof-panel-actions .dprof-btn,
  #root_departmnet.dprof-root .dprof-panel-actions button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #root_departmnet.dprof-root .dprof-panel-header,
  #root_departmnet.dprof-root .dprof-panel .header-container {
    flex-direction: column;
    align-items: stretch;
  }

  #root_departmnet.dprof-root .dprof-panel-actions {
    width: 100%;
  }
}

/* ===== Send Bulk SMS / Group message (sbs-*) ===== */
#root_send_bulk_sms {
  color: #111827;
}

#root_send_bulk_sms .sbs-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px 24px;
}

#root_send_bulk_sms .sbs-page-card.sendBulkSMSHDCls {
  visibility: hidden;
  overflow: hidden;
}

#root_send_bulk_sms .sbs-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

#root_send_bulk_sms .sbs-page-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
}

#root_send_bulk_sms .sbs-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_send_bulk_sms .sbs-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr) minmax(220px, 0.95fr);
  gap: 16px;
  align-items: start;
}

#root_send_bulk_sms .sbs-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 0;
}

#root_send_bulk_sms .sbs-panel-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

#root_send_bulk_sms .sms_group_section,
#root_send_bulk_sms .sbs-groups {
  max-height: 640px;
  overflow: auto;
  background: #f8fafc;
}

#root_send_bulk_sms .sbs-tree,
#root_send_bulk_sms .tree {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 0;
}

#root_send_bulk_sms .sbs-tree ul,
#root_send_bulk_sms .tree ul {
  list-style: none;
  margin: 4px 0 4px 14px;
  padding-left: 8px;
  border-left: 1px solid #e5e7eb;
}

#root_send_bulk_sms .sbs-tree li,
#root_send_bulk_sms .tree li {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #1f2937;
}

#root_send_bulk_sms .sbs-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
}

#root_send_bulk_sms .sbs-compose-inner,
#root_send_bulk_sms .sms_body_section {
  background: transparent;
  padding: 0;
  min-height: 0;
}

#root_send_bulk_sms .sbs-channel-row,
#root_send_bulk_sms .sbs-audience-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_send_bulk_sms .sbs-sender-row,
#root_send_bulk_sms .sbs-app-grid,
#root_send_bulk_sms .sbs-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  #root_send_bulk_sms .sbs-sender-row,
  #root_send_bulk_sms .sbs-app-grid {
    grid-template-columns: 1fr 1fr;
  }

  #root_send_bulk_sms .sbs-schedule {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

#root_send_bulk_sms .sbs-field {
  margin-bottom: 12px;
  min-width: 0;
}

#root_send_bulk_sms .sbs-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_send_bulk_sms .form-control,
#root_send_bulk_sms select.form-control,
#root_send_bulk_sms textarea.form-control,
#root_send_bulk_sms input.form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  outline: none;
}

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

#root_send_bulk_sms .sbs-to-box {
  min-height: 64px;
  resize: vertical;
  background: #f9fafb;
}

#root_send_bulk_sms .sbs-message-box,
#root_send_bulk_sms .sbs-purpose {
  min-height: 120px;
  resize: vertical;
}

#root_send_bulk_sms .sbs-help,
#root_send_bulk_sms .instruction,
#root_send_bulk_sms .note {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
  margin: 4px 0 10px;
}

#root_send_bulk_sms .sbs-char-count {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

#root_send_bulk_sms .sbs-error,
#root_send_bulk_sms .error_label,
#root_send_bulk_sms label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}

#root_send_bulk_sms .sbs-now {
  padding-bottom: 8px;
}

#root_send_bulk_sms .sbs-actions,
#root_send_bulk_sms #buttonDiv {
  text-align: center;
  padding-top: 8px;
}

#root_send_bulk_sms .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#root_send_bulk_sms .btn-success {
  background-color: #16a34a;
  color: #fff;
}

#root_send_bulk_sms .btn-success:hover {
  background-color: #15803d;
}

#root_send_bulk_sms .btn-danger {
  background-color: #dc2626;
  color: #fff;
}

#root_send_bulk_sms .btn:disabled,
#root_send_bulk_sms .btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

#root_send_bulk_sms .sbs-filters {
  max-height: 640px;
  overflow: auto;
}

#root_send_bulk_sms .sbs-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}

#root_send_bulk_sms .sbs-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_send_bulk_sms .sbs-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

#root_send_bulk_sms .sbs-filter-stack {
  flex-direction: column;
  align-items: stretch;
}

#root_send_bulk_sms .sbs-age-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

#root_send_bulk_sms .sbs-app-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d1d5db;
}

#root_send_bulk_sms .nicEdit-main {
  background: #ffffff !important;
  min-height: 120px !important;
  border-radius: 0 0 10px 10px;
}

#root_send_bulk_sms .nicEdit-panelContain {
  width: 100% !important;
  border-radius: 10px 10px 0 0;
}

.sbs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sbs-modal-overlay.sbs-modal-open,
.sbs-modal-overlay:not(.hidden).sbs-modal-open {
  display: flex !important;
}

.sbs-modal {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sbs-modal-sm {
  max-width: 420px;
}

.sbs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.sbs-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.sbs-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.sbs-modal-body {
  padding: 16px 18px 20px;
}

.sbs-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.sbs-alert-message {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  #root_send_bulk_sms .sbs-layout {
    grid-template-columns: 1fr 1fr;
  }

  #root_send_bulk_sms .sbs-filters {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 768px) {
  #root_send_bulk_sms .sbs-layout {
    grid-template-columns: 1fr;
  }

  #root_send_bulk_sms .sbs-page-card {
    padding: 16px;
  }

  #root_send_bulk_sms .sms_group_section,
  #root_send_bulk_sms .sbs-groups,
  #root_send_bulk_sms .sbs-filters {
    max-height: 360px;
  }

  #root_send_bulk_sms .sbs-actions .btn {
    width: 100%;
  }
}

/* dprof empty-state scope fix: avoid over-matching ids */
#root_departmnet.dprof-root .dprof-panel [id*="noRec"],
#root_departmnet.dprof-root .dprof-panel [id*="NoRec"],
#root_departmnet.dprof-root .dprof-panel [id*="no_"] {
  margin-top: 0;
  padding: 0;
  text-align: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  font-weight: inherit;
  font-size: inherit;
}

#root_departmnet.dprof-root .dprof-empty-state,
#root_departmnet.dprof-root .dprof-panel .dprof-empty-state,
#root_departmnet.dprof-root #noRecFound:not(.hidden),
#root_departmnet.dprof-root #noNotice:not(.hidden) {
  margin-top: 16px;
  padding: 18px 16px;
  text-align: center;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px dashed #fecaca;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

/* dprof contrast polish */
#root_departmnet.dprof-root .dprof-about-body {
  color: #0f172a !important;
  font-size: 15px;
  line-height: 1.65;
}

#root_departmnet.dprof-root .pro-sidebar-title {
  color: #334155 !important;
  font-weight: 700;
  font-size: 14px;
}

#root_departmnet.dprof-root .pro-submenu-link {
  color: #1f2937;
}

#root_departmnet.dprof-root .dprof-panel .header-title,
#root_departmnet.dprof-root .dprof-panel-title {
  color: #0f172a !important;
}

/* Send Bulk SMS ? Phase 3 UI polish */
#root_send_bulk_sms .sbs-compose {
  background: #ffffff;
  border-color: #dbe3f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_send_bulk_sms .sbs-groups,
#root_send_bulk_sms .sbs-filters {
  background: #f8fafc;
}

#root_send_bulk_sms .sbs-page-title i {
  color: #3730a3;
}

#root_send_bulk_sms .sbs-channel-row {
  background: #eef2ff;
  border-color: #c7d2fe;
}

#root_send_bulk_sms .sbs-audience-row {
  background: #f8fafc;
}

#root_send_bulk_sms .sbs-actions .btn-success {
  min-width: 200px;
  min-height: 44px;
  font-size: 15px;
}

#root_send_bulk_sms .sbs-filter-row {
  grid-template-columns: minmax(110px, 38%) 1fr;
  align-items: start;
}

#root_send_bulk_sms .sbs-filter-row .sbs-filter-label:empty {
  display: none;
}

@media (max-width: 640px) {
  #root_send_bulk_sms .sbs-filter-row {
    grid-template-columns: 1fr;
  }
}

#root_send_bulk_sms .sbs-tree li B,
#root_send_bulk_sms .tree li B {
  font-weight: 700;
  color: #111827;
}

#root_send_bulk_sms input[type="checkbox"]:disabled + span,
#root_send_bulk_sms .sbs-check:has(input:disabled) {
  opacity: 0.65;
}

#root_bulk_sms .bsms-row.bsms-row-single {
  grid-template-columns: 1fr;
}

/* ===== SMS To Many (stm-*) ===== */
#root_sms_to_many {
  color: #111827;
}

#root_sms_to_many .stm-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_sms_to_many .stm-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_sms_to_many .stm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#root_sms_to_many .stm-page-title .fa {
  color: #2563eb;
}

#root_sms_to_many .stm-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_sms_to_many .stm-section {
  margin-bottom: 22px;
}

#root_sms_to_many .stm-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#root_sms_to_many .stm-section-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
}

#root_sms_to_many .stm-section-head .stm-section-title {
  margin-bottom: 0;
}

#root_sms_to_many .stm-search-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

#root_sms_to_many .stm-search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_sms_to_many .stm-search-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

#root_sms_to_many .stm-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#root_sms_to_many .stm-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_sms_to_many .stm-label-spacer {
  visibility: hidden;
}

#root_sms_to_many .stm-input,
#root_sms_to_many select.stm-input,
#root_sms_to_many textarea.stm-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
}

#root_sms_to_many .stm-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_sms_to_many .stm-textarea {
  min-height: 110px;
  resize: vertical;
}

#root_sms_to_many .stm-search-btn,
#root_sms_to_many .stm-send-btn {
  min-height: 38px;
  white-space: nowrap;
}

#root_sms_to_many .stm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_sms_to_many .stm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  margin: 0;
}

#root_sms_to_many .stm-table thead th,
#root_sms_to_many .stm-table tr.tableHeadClass th,
#root_sms_to_many .stm-table .tableHeadClass th {
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #c7d2fe;
  white-space: nowrap;
  text-align: left;
}

#root_sms_to_many .stm-table tbody td,
#root_sms_to_many .stm-table td {
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

#root_sms_to_many .stm-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_sms_to_many .stm-avatar,
#root_sms_to_many .img-thumbnail {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

#root_sms_to_many .stm-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

#root_sms_to_many .stm-no-rec {
  text-align: center;
  padding: 28px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #991b1b;
}

#root_sms_to_many .stm-no-rec h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

#root_sms_to_many label.error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}

#root_sms_to_many .stm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.45);
  overflow-y: auto;
}

#root_sms_to_many .stm-modal-overlay.flex {
  display: flex !important;
}

#root_sms_to_many .stm-modal-dialog {
  width: 100%;
  max-width: 720px;
  margin: auto;
}

#root_sms_to_many .stm-modal-content {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

#root_sms_to_many .stm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

#root_sms_to_many .stm-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

#root_sms_to_many .stm-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

#root_sms_to_many .stm-modal-body {
  padding: 16px 18px 20px;
}

#root_sms_to_many .stm-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

#root_sms_to_many .stm-check-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

#root_sms_to_many .stm-sender-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  #root_sms_to_many .stm-sender-grid {
    grid-template-columns: 1fr 1fr;
  }
}

#root_sms_to_many .stm-message-block {
  margin-bottom: 14px;
}

#root_sms_to_many .stm-note,
#root_sms_to_many .stm-instruction {
  margin: 4px 0 8px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
}

#root_sms_to_many .stm-char-left {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

#root_sms_to_many .stm-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  #root_sms_to_many .stm-schedule-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

#root_sms_to_many .stm-now-wrap {
  padding-bottom: 8px;
}

#root_sms_to_many .stm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

@media (max-width: 640px) {
  #root_sms_to_many .stm-page-card {
    padding: 16px;
  }

  #root_sms_to_many .stm-page-title {
    font-size: 18px;
  }

  #root_sms_to_many .stm-scroll-hint {
    display: block;
  }

  #root_sms_to_many .stm-modal-actions .btn,
  #root_sms_to_many .stm-modal-actions input[type="button"] {
    width: 100%;
  }

  #root_sms_to_many .stm-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  #root_sms_to_many .stm-send-btn {
    width: 100%;
  }
}

#root_bulk_sms .bsms-actions {
  justify-content: center;
}

#root_bulk_sms .bsms-counter {
  letter-spacing: 0.01em;
}

#root_bulk_sms .ui-datepicker,
#root_bulk_sms .ui-timepicker-table {
  font-size: 13px;
}

/* ===== Send SMS from Excel (fxe-*) ===== */
#root_from_excel {
  color: #111827;
}

#root_from_excel .fxe-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 22px 24px 26px;
}

#root_from_excel .fxe-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

#root_from_excel .fxe-page-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
}

#root_from_excel .fxe-page-title i {
  color: #15803d;
}

#root_from_excel .fxe-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_from_excel .fxe-form-item {
  margin-bottom: 14px;
}

#root_from_excel .fxe-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_from_excel .form-control,
#root_from_excel select.form-control,
#root_from_excel input.form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  outline: none;
}

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

#root_from_excel .fxe-file-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 14px;
  box-sizing: border-box;
}

#root_from_excel .fxe-records {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}

#root_from_excel .fxe-record-count {
  font-size: 15px;
  font-weight: 700;
  color: #166534;
}

#root_from_excel .fxe-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_from_excel .fxe-schedule-grid {
    grid-template-columns: 1fr 1fr auto;
  }
}

#root_from_excel .fxe-now {
  padding-bottom: 8px;
}

#root_from_excel .fxe-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
}

#root_from_excel .fxe-help,
#root_from_excel .fromExcelInstruction {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
}

#root_from_excel .fxe-actions {
  margin-top: 18px;
  text-align: center;
}

#root_from_excel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  min-width: 180px;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#root_from_excel .btn-success {
  background-color: #16a34a;
  color: #fff;
}

#root_from_excel .btn-success:hover {
  background-color: #15803d;
}

#root_from_excel .btn:disabled,
#root_from_excel .btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

#root_from_excel label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

#root_from_excel .fxe-drop,
#root_from_excel .fxe-hidden {
  display: none;
}

.fxe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fxe-modal-overlay.fxe-modal-open,
.fxe-modal-overlay:not(.hidden).fxe-modal-open {
  display: flex !important;
}

.fxe-modal {
  background: #ffffff;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.fxe-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.fxe-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.fxe-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.fxe-modal-body {
  padding: 16px 18px 20px;
}

.fxe-alert-message {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

.fxe-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@media (max-width: 640px) {
  #root_from_excel .fxe-page-card {
    padding: 16px;
  }

  #root_from_excel .fxe-actions .btn {
    width: 100%;
  }
}

/* ------------------------ SMS Template (smt-*) ------------------------ */
#root_sms_template .smt-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_sms_template .smt-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_sms_template .smt-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_sms_template .smt-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_sms_template .smt-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

#root_sms_template .smt-filter-panel {
  margin-bottom: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_sms_template .smt-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_sms_template .smt-filter-grid {
    grid-template-columns: minmax(220px, 320px) auto;
  }
}

#root_sms_template .smt-filter-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_sms_template .smt-input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}

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

#root_sms_template .smt-filter-actions {
  display: flex;
  align-items: flex-end;
}

#root_sms_template .smt-add-btn,
#root_sms_template .smt-modal-actions .btn,
#root_sms_template .smt-filter-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
}

#root_sms_template .smt-results {
  margin-top: 20px;
}

#root_sms_template .smt-section-head {
  margin-bottom: 12px;
}

#root_sms_template .smt-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

#root_sms_template .smt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_sms_template .smt-table {
  width: 100%;
  min-width: 720px;
}

#root_sms_template .smt-table th,
#root_sms_template .smt-table td {
  padding: 12px 14px;
  vertical-align: top;
}

#root_sms_template .smt-table thead {
  background-color: #d1fae5;
}

#root_sms_template .smt-table thead th {
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid #6ee7b7;
  white-space: nowrap;
}

#root_sms_template .smt-table tbody td {
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}

#root_sms_template .aCenter {
  text-align: center;
}

#root_sms_template .showList {
  display: inline;
}

#root_sms_template .hideList {
  display: none;
}

#root_sms_template .editIcon {
  margin-left: 8px;
  color: #4f46e5;
  cursor: pointer;
}

#root_sms_template .smt-inline-edit {
  margin: 0;
}

#root_sms_template .smt-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

#root_sms_template .smt-inline-input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  box-sizing: border-box;
}

#root_sms_template .smt-inline-save {
  flex: 0 0 auto;
  min-width: 42px;
}

#root_sms_template .smt-no-record {
  margin-top: 20px;
  text-align: center;
  padding: 28px 16px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

#root_sms_template .smt-no-record-icon {
  font-size: 28px;
  color: #f87171;
  margin-bottom: 8px;
}

#root_sms_template .smt-no-record h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

#root_sms_template .smt-no-record p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

#root_sms_template .smt-modal-hidden {
  display: none !important;
}

#root_sms_template .smt-modal-md {
  width: min(560px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
}

#root_sms_template .smt-form-item {
  margin-bottom: 14px;
}

#root_sms_template .smt-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_sms_template .smt-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}

#root_sms_template .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_sms_template .btn-danger:hover {
  background-color: #b91c1c;
  color: #ffffff;
}

#root_sms_template .btn-success {
  background-color: #16a34a;
  color: #ffffff;
}

#root_sms_template .btn-success:hover {
  background-color: #15803d;
  color: #ffffff;
}

#root_sms_template label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

@media (max-width: 640px) {
  #root_sms_template .smt-page-card {
    padding: 16px;
  }

  #root_sms_template .smt-page-title {
    font-size: 18px;
  }

  #root_sms_template .smt-filter-actions,
  #root_sms_template .smt-filter-actions .btn,
  #root_sms_template .smt-add-btn {
    width: 100%;
  }

  #root_sms_template .smt-modal-actions {
    flex-direction: column;
  }

  #root_sms_template .smt-modal-actions .btn {
    width: 100%;
  }
}

/* smt UX polish */
#root_sms_template .smt-scroll-hint {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 640px) {
  #root_sms_template .smt-scroll-hint.smt-hint-visible {
    display: block;
  }
}

#root_sms_template .smt-table td .showList {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}


/* ===== Send Bulk WhatsApp / Group message (sbwa-*) ===== */
#root_send_bulk_whatsapp {
  color: #111827;
}

#root_send_bulk_whatsapp .sbwa-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px 24px;
}

#root_send_bulk_whatsapp .sbwa-page-card.sendBulkSMSHDCls {
  visibility: hidden;
  overflow: hidden;
}

#root_send_bulk_whatsapp .sbwa-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

#root_send_bulk_whatsapp .sbwa-page-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
}

#root_send_bulk_whatsapp .sbwa-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_send_bulk_whatsapp .sbwa-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr) minmax(220px, 0.95fr);
  gap: 16px;
  align-items: start;
}

#root_send_bulk_whatsapp .sbwa-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 0;
}

#root_send_bulk_whatsapp .sbwa-panel-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

#root_send_bulk_whatsapp .sms_group_section,
#root_send_bulk_whatsapp .sbwa-groups {
  max-height: 640px;
  overflow: auto;
  background: #f8fafc;
}

#root_send_bulk_whatsapp .sbwa-tree,
#root_send_bulk_whatsapp .tree {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 0;
}

#root_send_bulk_whatsapp .sbwa-tree ul,
#root_send_bulk_whatsapp .tree ul {
  list-style: none;
  margin: 4px 0 4px 14px;
  padding-left: 8px;
  border-left: 1px solid #e5e7eb;
}

#root_send_bulk_whatsapp .sbwa-tree li,
#root_send_bulk_whatsapp .tree li {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #1f2937;
}

#root_send_bulk_whatsapp .sbwa-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
}

#root_send_bulk_whatsapp .sbwa-compose-inner,
#root_send_bulk_whatsapp .sms_body_section {
  background: transparent;
  padding: 0;
  min-height: 0;
}

#root_send_bulk_whatsapp .sbwa-channel-row,
#root_send_bulk_whatsapp .sbwa-audience-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#root_send_bulk_whatsapp .sbwa-sender-row,
#root_send_bulk_whatsapp .sbwa-app-grid,
#root_send_bulk_whatsapp .sbwa-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  #root_send_bulk_whatsapp .sbwa-sender-row,
  #root_send_bulk_whatsapp .sbwa-app-grid {
    grid-template-columns: 1fr 1fr;
  }

  #root_send_bulk_whatsapp .sbwa-schedule {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

#root_send_bulk_whatsapp .sbwa-field {
  margin-bottom: 12px;
  min-width: 0;
}

#root_send_bulk_whatsapp .sbwa-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_send_bulk_whatsapp .form-control,
#root_send_bulk_whatsapp select.form-control,
#root_send_bulk_whatsapp textarea.form-control,
#root_send_bulk_whatsapp input.form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  outline: none;
}

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

#root_send_bulk_whatsapp .sbwa-to-box {
  min-height: 64px;
  resize: vertical;
  background: #f9fafb;
}

#root_send_bulk_whatsapp .sbwa-message-box,
#root_send_bulk_whatsapp .sbwa-purpose {
  min-height: 120px;
  resize: vertical;
}

#root_send_bulk_whatsapp .sbwa-help,
#root_send_bulk_whatsapp .instruction,
#root_send_bulk_whatsapp .note {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
  margin: 4px 0 10px;
}

#root_send_bulk_whatsapp .sbwa-char-count {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

#root_send_bulk_whatsapp .sbwa-error,
#root_send_bulk_whatsapp .error_label,
#root_send_bulk_whatsapp label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}

#root_send_bulk_whatsapp .sbwa-now {
  padding-bottom: 8px;
}

#root_send_bulk_whatsapp .sbwa-actions,
#root_send_bulk_whatsapp #buttonDiv {
  text-align: center;
  padding-top: 8px;
}

#root_send_bulk_whatsapp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#root_send_bulk_whatsapp .btn-success {
  background-color: #16a34a;
  color: #fff;
}

#root_send_bulk_whatsapp .btn-success:hover {
  background-color: #15803d;
}

#root_send_bulk_whatsapp .btn-danger {
  background-color: #dc2626;
  color: #fff;
}

#root_send_bulk_whatsapp .btn:disabled,
#root_send_bulk_whatsapp .btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

#root_send_bulk_whatsapp .sbwa-filters {
  max-height: 640px;
  overflow: auto;
}

#root_send_bulk_whatsapp .sbwa-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}

#root_send_bulk_whatsapp .sbwa-filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_send_bulk_whatsapp .sbwa-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

#root_send_bulk_whatsapp .sbwa-filter-stack {
  flex-direction: column;
  align-items: stretch;
}

#root_send_bulk_whatsapp .sbwa-age-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

#root_send_bulk_whatsapp .sbwa-app-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d1d5db;
}

#root_send_bulk_whatsapp .nicEdit-main {
  background: #ffffff !important;
  min-height: 120px !important;
  border-radius: 0 0 10px 10px;
}

#root_send_bulk_whatsapp .nicEdit-panelContain {
  width: 100% !important;
  border-radius: 10px 10px 0 0;
}

.sbwa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sbwa-modal-overlay.sbwa-modal-open,
.sbwa-modal-overlay:not(.hidden).sbwa-modal-open {
  display: flex !important;
}

.sbwa-modal {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sbwa-modal-sm {
  max-width: 420px;
}

.sbwa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.sbwa-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.sbwa-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.sbwa-modal-body {
  padding: 16px 18px 20px;
}

.sbwa-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.sbwa-alert-message {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  #root_send_bulk_whatsapp .sbwa-layout {
    grid-template-columns: 1fr 1fr;
  }

  #root_send_bulk_whatsapp .sbwa-filters {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 768px) {
  #root_send_bulk_whatsapp .sbwa-layout {
    grid-template-columns: 1fr;
  }

  #root_send_bulk_whatsapp .sbwa-page-card {
    padding: 16px;
  }

  #root_send_bulk_whatsapp .sms_group_section,
  #root_send_bulk_whatsapp .sbwa-groups,
  #root_send_bulk_whatsapp .sbwa-filters {
    max-height: 360px;
  }

  #root_send_bulk_whatsapp .sbwa-actions .btn {
    width: 100%;
  }
}

/* dprof empty-state scope fix: avoid over-matching ids */
#root_departmnet.dprof-root .dprof-panel [id*="noRec"],
#root_departmnet.dprof-root .dprof-panel [id*="NoRec"],
#root_departmnet.dprof-root .dprof-panel [id*="no_"] {
  margin-top: 0;
  padding: 0;
  text-align: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  font-weight: inherit;
  font-size: inherit;
}

#root_departmnet.dprof-root .dprof-empty-state,
#root_departmnet.dprof-root .dprof-panel .dprof-empty-state,
#root_departmnet.dprof-root #noRecFound:not(.hidden),
#root_departmnet.dprof-root #noNotice:not(.hidden) {
  margin-top: 16px;
  padding: 18px 16px;
  text-align: center;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px dashed #fecaca;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

/* dprof contrast polish */
#root_departmnet.dprof-root .dprof-about-body {
  color: #0f172a !important;
  font-size: 15px;
  line-height: 1.65;
}

#root_departmnet.dprof-root .pro-sidebar-title {
  color: #334155 !important;
  font-weight: 700;
  font-size: 14px;
}

#root_departmnet.dprof-root .pro-submenu-link {
  color: #1f2937;
}

#root_departmnet.dprof-root .dprof-panel .header-title,
#root_departmnet.dprof-root .dprof-panel-title {
  color: #0f172a !important;
}

/* Send Bulk WhatsApp ? Phase 3 UI polish */
#root_send_bulk_whatsapp .sbwa-compose {
  background: #ffffff;
  border-color: #dbe3f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_send_bulk_whatsapp .sbwa-groups,
#root_send_bulk_whatsapp .sbwa-filters {
  background: #f8fafc;
}

#root_send_bulk_whatsapp .sbwa-page-title i {
  color: #3730a3;
}

#root_send_bulk_whatsapp .sbwa-channel-row {
  background: #eef2ff;
  border-color: #c7d2fe;
}

#root_send_bulk_whatsapp .sbwa-audience-row {
  background: #f8fafc;
}

#root_send_bulk_whatsapp .sbwa-actions .btn-success {
  min-width: 200px;
  min-height: 44px;
  font-size: 15px;
}

#root_send_bulk_whatsapp .sbwa-filter-row {
  grid-template-columns: minmax(110px, 38%) 1fr;
  align-items: start;
}

#root_send_bulk_whatsapp .sbwa-filter-row .sbwa-filter-label:empty {
  display: none;
}

@media (max-width: 640px) {
  #root_send_bulk_whatsapp .sbwa-filter-row {
    grid-template-columns: 1fr;
  }
}

#root_send_bulk_whatsapp .sbwa-tree li B,
#root_send_bulk_whatsapp .tree li B {
  font-weight: 700;
  color: #111827;
}

#root_send_bulk_whatsapp input[type="checkbox"]:disabled + span,
#root_send_bulk_whatsapp .sbwa-check:has(input:disabled) {
  opacity: 0.65;
}

#root_bulk_sms .bsms-row.bsms-row-single {
  grid-template-columns: 1fr;
}

/* ===== SMS To Many (stm-*) ===== */
#root_sms_to_many {
  color: #111827;
}

#root_sms_to_many .stm-page-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* From Excel ? Phase 3 polish */
#root_from_excel .fxe-schedule {
  margin-top: 4px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_from_excel .fxe-records .fxe-label {
  margin-bottom: 0;
}

#root_from_excel .fxe-file-input:hover {
  border-color: #64748b;
  background: #f1f5f9;
}

#root_from_excel .fxe-actions .btn-success {
  font-size: 15px;
  letter-spacing: 0.01em;
}

/* Send Bulk WhatsApp accent polish */
#root_send_bulk_whatsapp .sbwa-page-title i.fa-whatsapp {
  color: #16a34a;
}
#root_send_bulk_whatsapp .sbwa-channel-row {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* ===== SMS To Many UX polish pass (stm-*) ===== */
#root_sms_to_many .stm-table a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

#root_sms_to_many .stm-table a:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

#root_sms_to_many .stm-table .btn {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#root_sms_to_many .stm-table th.aCenter,
#root_sms_to_many .stm-table td.aCenter,
#root_sms_to_many .stm-table td[align="center"] {
  text-align: center;
}

#root_sms_to_many .stm-search-actions .stm-search-btn {
  width: 100%;
}

@media (min-width: 640px) {
  #root_sms_to_many .stm-search-actions .stm-search-btn {
    width: auto;
  }
}

#root_sms_to_many .stm-modal-actions .btn,
#root_sms_to_many .stm-modal-actions input[type="button"] {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
}

#root_sms_to_many .stm-send-btn {
  border-radius: 8px;
  font-weight: 600;
}

#root_sms_to_many #selectedPersonDiv {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
}

#root_sms_to_many #selectedPersonDiv .stm-table-wrap {
  background: #ffffff;
}

/* ===== Search All visual redesign v2 (append-only) ===== */
#root_search_all .sall-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

#root_search_all .sall-year-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

#root_search_all .sall-year-toolbar .sall-year-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

#root_search_all .nameListCls {
  margin-top: 20px;
}

#root_search_all .sall-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #05053d;
}

#root_search_all .sall-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 700;
}

#root_search_all .sall-result-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#root_search_all .sall-result-card,
#root_search_all .sall-person-card,
#root_search_all .sall-staff-card,
#root_search_all .sall-stud-card,
#root_search_all .sall-group-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: none;
  min-height: 0;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  position: relative;
}

#root_search_all .sall-staff-card {
  border-left: 4px solid #059669 !important;
}

#root_search_all .sall-stud-card {
  border-left: 4px solid #2563eb !important;
}

#root_search_all .sall-group-card {
  border-left: 4px solid #64748b !important;
}

#root_search_all .sall-result-card:hover,
#root_search_all .sall-person-card:hover {
  transform: none;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

#root_search_all .sall-result-photo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

#root_search_all .sall-photo,
#root_search_all img.sall-photo,
#root_search_all img.srchImgCls,
#root_search_all img.imgdefault {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: cover;
  border-radius: 999px !important;
  border: 2px solid #e5e7eb !important;
  box-shadow: none !important;
  background: #f8fafc;
  padding: 0 !important;
}

#root_search_all .sall-group-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 auto;
}

#root_search_all .sall-result-info {
  flex: 1 1 auto;
  min-width: 0;
}

#root_search_all .sall-person-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#root_search_all .sall-result-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

#root_search_all .sall-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

#root_search_all .sall-type-staff {
  background: #ecfdf5;
  color: #047857;
}

#root_search_all .sall-type-student {
  background: #eff6ff;
  color: #1d4ed8;
}

#root_search_all .sall-type-group {
  background: #f1f5f9;
  color: #475569;
}

#root_search_all .sall-meta {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  padding: 2px 0;
}

#root_search_all .sall-meta-label {
  font-weight: 700;
  color: #6b7280;
  margin-right: 4px;
}

#root_search_all .sall-meta-sep {
  color: #cbd5e1;
  margin: 0 4px;
}

#root_search_all .sall-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  white-space: normal !important;
  overflow: visible !important;
}

#root_search_all .sall-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #1f2937;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  line-height: 1;
}

#root_search_all .sall-action-btn i {
  font-size: 14px;
}

#root_search_all .sall-action-btn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
}

#root_search_all .sall-action-mobile {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

#root_search_all .sall-action-pay {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

#root_search_all .sall-action-bus {
  color: #334155;
  border-color: #cbd5e1;
  background: #f8fafc;
}

#root_search_all .sall-icon-mobile,
#root_search_all .sall-icon-money,
#root_search_all .sall-icon-bus {
  font-size: 14px;
}

#root_search_all .sall-no-record {
  margin-top: 16px;
  padding: 20px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

@media (max-width: 640px) {
  #root_search_all .sall-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  #root_search_all .sall-person-card {
    padding: 12px;
  }

  #root_search_all .sall-photo,
  #root_search_all img.sall-photo,
  #root_search_all img.srchImgCls,
  #root_search_all img.imgdefault,
  #root_search_all .sall-group-icon {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  #root_search_all .sall-action-btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

/* Search All: two result cards per row */
#root_search_all .sall-result-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

@media (min-width: 768px) {
  #root_search_all .sall-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#root_search_all .sall-result-grid > .sall-result-card,
#root_search_all .sall-result-grid > .sall-person-card,
#root_search_all .sall-result-grid > .sall-staff-card,
#root_search_all .sall-result-grid > .sall-stud-card,
#root_search_all .sall-result-grid > .sall-group-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  height: 100%;
}

@media (max-width: 767px) {
  #root_search_all .sall-result-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------ Attendance Report Profile UX polish (aprof-*) ------------------------ */
#root_attendance_report.aprof-root {
  min-height: calc(100vh - 48px);
}

#root_attendance_report.aprof-root .aprof-layout {
  align-items: stretch;
}

#root_attendance_report.aprof-root .aprof-main {
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
  background: #f3f4f6;
}

#root_attendance_report.aprof-root .pro-sidebar-title {
  color: #334155;
  font-weight: 700;
  font-size: 14px;
}

#root_attendance_report.aprof-root .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
}

#root_attendance_report.aprof-root .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_attendance_report.aprof-root .pro-submenu-link.active {
  background: #eef2ff;
  color: #312e81;
  font-weight: 600;
  border-radius: 8px;
}

#root_attendance_report.aprof-root .aprof-panel {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 18px 20px 24px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

#root_attendance_report.aprof-root .aprof-panel-title,
#root_attendance_report.aprof-root .aprof-panel .text-xl,
#root_attendance_report.aprof-root .aprof-panel .text-2xl,
#root_attendance_report.aprof-root .aprof-panel .attendanceHeadTitle {
  color: #0f172a !important;
  font-weight: 700;
  line-height: 1.3;
}

#root_attendance_report.aprof-root .aprof-panel select,
#root_attendance_report.aprof-root .aprof-panel input[type="text"],
#root_attendance_report.aprof-root .aprof-panel input[type="number"] {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}

#root_attendance_report.aprof-root .aprof-panel select:focus,
#root_attendance_report.aprof-root .aprof-panel input[type="text"]:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_attendance_report.aprof-root .aprof-btn,
#root_attendance_report.aprof-root .aprof-panel .btn,
#root_attendance_report.aprof-root .aprof-panel button.bg-blue-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-green-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-indigo-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-purple-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-emerald-600 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;
}

#root_attendance_report.aprof-root .aprof-btn-primary,
#root_attendance_report.aprof-root .aprof-panel button.bg-blue-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-indigo-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-purple-600 {
  background-color: #4f46e5;
  color: #ffffff;
}

#root_attendance_report.aprof-root .aprof-btn-primary:hover,
#root_attendance_report.aprof-root .aprof-panel button.bg-blue-600:hover,
#root_attendance_report.aprof-root .aprof-panel button.bg-indigo-600:hover {
  background-color: #4338ca;
  color: #ffffff;
}

#root_attendance_report.aprof-root .aprof-btn-success,
#root_attendance_report.aprof-root .aprof-panel button.bg-green-600,
#root_attendance_report.aprof-root .aprof-panel button.bg-emerald-600 {
  background-color: #16a34a;
  color: #ffffff;
}

#root_attendance_report.aprof-root .aprof-btn-success:hover,
#root_attendance_report.aprof-root .aprof-panel button.bg-green-600:hover {
  background-color: #15803d;
  color: #ffffff;
}

#root_attendance_report.aprof-root .aprof-table-wrap,
#root_attendance_report.aprof-root .aprof-panel .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

#root_attendance_report.aprof-root .aprof-panel .college-table {
  width: 100%;
  min-width: 640px;
}

#root_attendance_report.aprof-root .aprof-panel .college-table thead {
  background-color: #d1fae5;
}

#root_attendance_report.aprof-root .aprof-panel .college-table thead th {
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 14px;
  white-space: nowrap;
  border-bottom: 1px solid #6ee7b7;
}

#root_attendance_report.aprof-root .aprof-panel .college-table tbody td {
  color: #111827;
  font-size: 14px;
  padding: 12px 14px;
  vertical-align: middle;
}

#root_attendance_report.aprof-root .aprof-empty-state,
#root_attendance_report.aprof-root #noStudentList,
#root_attendance_report.aprof-root #noStudentList1,
#root_attendance_report.aprof-root #noYearStudentList,
#root_attendance_report.aprof-root #noPersentageStudentList,
#root_attendance_report.aprof-root #no_detail {
  margin-top: 16px;
  padding: 18px 16px;
  text-align: center;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px dashed #fecaca;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

#root_attendance_report.aprof-root .aprof-empty-inner h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #b91c1c;
}

#root_attendance_report.aprof-root .aprof-empty-inner p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

#root_attendance_report.aprof-root .aprof-day-panel #dayAttdHead {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: none;
}

@media (max-width: 900px) {
  #root_attendance_report.aprof-root .aprof-main {
    padding: 12px;
  }

  #root_attendance_report.aprof-root .aprof-panel {
    padding: 14px;
  }

  #root_attendance_report.aprof-root .aprof-panel .flex.justify-center {
    flex-direction: column;
  }

  #root_attendance_report.aprof-root .aprof-btn,
  #root_attendance_report.aprof-root .aprof-panel button {
    width: 100%;
  }
}

/* ===== Department List (dpt-*) ===== */
#root_department {
  color: #111827;
}

#root_department .dpt-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px 24px;
}

#root_department .dpt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

#root_department .dpt-page-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
}

#root_department .dpt-page-title i {
  color: #3730a3;
}

#root_department .dpt-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_department .dpt-table-wrap {
  margin-top: 4px;
}

#root_department .college-table {
  width: 100%;
  border-collapse: collapse;
}

#root_department .college-table thead th,
#root_department .tableHeadClass th {
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #c7d2fe;
  white-space: nowrap;
}

#root_department .college-table td {
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_department .showList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#root_department .editIcon {
  color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}

#root_department .editIcon:hover {
  color: #1d4ed8;
}

#root_department .hideList {
  display: none;
}

#root_department .dpt-inline-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#root_department .dpt-inline-input,
#root_department .inpBorder {
  flex: 1;
  min-width: 120px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  box-sizing: border-box;
}

#root_department .dpt-no-record,
#root_department .noRecordFoundCls {
  text-align: center;
  color: #6b7280;
  padding: 28px 12px;
}

#root_department .dpt-no-record h3,
#root_department .noRecordFoundCls h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

#root_department .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#root_department .btn-success {
  background-color: #16a34a;
  color: #fff;
}

#root_department .btn-danger {
  background-color: #dc2626;
  color: #fff;
}

#root_department .btn-default {
  background-color: #e5e7eb;
  color: #111827;
}

#root_department .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 14px;
  outline: none;
}

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

#root_department label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

.dpt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dpt-modal-overlay.dpt-modal-open,
.dpt-modal-overlay:not(.hidden).dpt-modal-open {
  display: flex !important;
}

.dpt-modal {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.dpt-modal-sm {
  max-width: 420px;
}

.dpt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.dpt-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.dpt-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.dpt-modal-body {
  padding: 16px 18px 20px;
}

.dpt-form-item {
  margin-bottom: 14px;
}

.dpt-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.dpt-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

.dpt-modal-actions.centerCls {
  justify-content: center;
}

.dpt-alert-message {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  #root_department .dpt-page-card {
    padding: 16px;
  }

  #root_department .dpt-header {
    align-items: flex-start;
  }

  #root_department .college-table {
    display: block;
    overflow-x: auto;
  }

  .dpt-modal-actions .btn {
    flex: 1;
  }
}

/* ------------------------ Instant Fee Profile UX polish (ifp-*) ------------------------ */
#root_instant {
  min-height: calc(100vh - 48px);
}

#root_instant .pro-header-title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  max-width: min(70vw, 720px);
  white-space: normal;
  word-break: break-word;
}

#root_instant .pro-main-content {
  min-width: 0;
  background: #f3f4f6;
}

#root_instant .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_instant .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_instant .ifp-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 18px 20px 22px;
  box-sizing: border-box;
}

#root_instant .ifp-panel-narrow {
  max-width: 28rem;
  margin: 0 auto;
}

#root_instant .ifp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

#root_instant .ifp-panel-header-center {
  justify-content: center;
}

#root_instant .ifp-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

#root_instant .ifp-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

#root_instant .ifp-panel-footer-center {
  justify-content: center;
}

#root_instant .ifp-filter-card {
  margin-bottom: 16px;
}

#root_instant .ifp-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 14px;
  align-items: end;
  margin-bottom: 16px;
}

#root_instant .ifp-filter-grid-5,
#root_instant .ifp-filter-grid-6 {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

#root_instant .ifp-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  min-height: 40px;
}

#root_instant .ifp-filter-action {
  display: flex;
  align-items: end;
}

#root_instant .ifp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#root_instant .ifp-field-grow {
  flex: 1 1 220px;
}

#root_instant .ifp-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_instant .ifp-input,
#root_instant select.ifp-input,
#root_instant textarea.ifp-input,
#root_instant input.ifp-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  box-sizing: border-box;
}

#root_instant .ifp-input:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

#root_instant .ifp-input-readonly,
#root_instant .ifp-input[readonly] {
  background: #f3f4f6;
  color: #4b5563;
}

#root_instant .ifp-file {
  padding: 6px 10px;
  background: #f9fafb;
}

#root_instant .ifp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

#root_instant .ifp-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

#root_instant .ifp-form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#root_instant .ifp-table-wrap {
  overflow-x: auto;
}

#root_instant .college-table thead th {
  background: #eef2ff;
  color: #312e81;
  font-size: 13px;
  font-weight: 700;
}

#root_instant .college-table td {
  font-size: 13px;
  vertical-align: middle;
}

#root_instant .ifp-empty-state {
  margin-top: 16px;
  text-align: center;
  color: #dc2626;
  font-size: 14px;
  font-weight: 600;
}

#root_instant .ifp-empty-inline {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

#root_instant .ifp-field-error {
  margin: 0;
  min-height: 16px;
  color: #dc2626;
  font-size: 12px;
}

#root_instant .ifp-action-btn,
.ifp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
}

#root_instant .ifp-action-btn-sm {
  min-height: 32px;
  padding: 4px 10px;
}

#root_instant .ifp-search-icon-btn {
  min-width: 44px;
}

#root_instant .ifp-action-btn-success,
.ifp-action-btn-success {
  background: #059669;
}

#root_instant .ifp-action-btn-success:hover,
.ifp-action-btn-success:hover {
  background: #047857;
}

#root_instant .ifp-action-btn-primary,
.ifp-action-btn-primary {
  background: #4f46e5;
}

#root_instant .ifp-action-btn-primary:hover,
.ifp-action-btn-primary:hover {
  background: #4338ca;
}

#root_instant .ifp-action-btn-danger,
.ifp-action-btn-danger {
  background: #dc2626;
}

#root_instant .ifp-action-btn-danger:hover,
.ifp-action-btn-danger:hover {
  background: #b91c1c;
}

.ifp-action-btn-muted {
  background: #e5e7eb;
  color: #374151;
}

.ifp-action-btn-muted:hover {
  background: #d1d5db;
}

.ifp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: 72px;
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.ifp-modal-overlay.flex,
.ifp-modal-overlay:not(.hidden) {
  display: flex !important;
}

.ifp-modal-overlay.hidden {
  display: none !important;
}

.ifp-modal {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

.ifp-modal-sm { max-width: 26rem; }
.ifp-modal-md { max-width: 28rem; }
.ifp-modal-lg { max-width: 48rem; }
.ifp-modal-xl { max-width: 56rem; }

.ifp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.ifp-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
}

.ifp-modal-title-pad {
  padding: 18px 18px 0;
}

.ifp-modal-text {
  margin: 0;
  padding: 12px 18px 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

.ifp-modal-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

.ifp-modal-body {
  padding: 18px;
  overflow-y: auto;
}

.ifp-modal-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.ifp-search-form { margin-bottom: 16px; }
.ifp-section-heading {
  margin: 0 0 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}

.ifp-form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ifp-grid-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: center;
}

.ifp-paid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ifp-paid-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.ifp-toast {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 60;
  background: #059669;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  font-weight: 600;
}

.ifp-toast.hidden {
  display: none !important;
}

/* Survey print hide-all lives in survey_profile.jsp only.
   Do not use body * { visibility: hidden } here — it blanks every other page print. */

@media (max-width: 900px) {
  #root_instant .pro-layout {
    flex-direction: column;
  }

  #root_instant .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_instant .pro-sidebar.collapsed {
    width: 100%;
  }

  #root_instant .pro-main-content {
    padding: 12px;
  }

  #root_instant .pro-header-title {
    font-size: 16px;
  }

  #root_instant .ifp-panel {
    padding: 14px;
  }

  .ifp-grid-row {
    grid-template-columns: 1fr;
  }
}

/* Department List ? Phase 3 polish */
#root_department .dpt-page-card .btn {
  white-space: nowrap;
  min-width: auto;
  padding: 7px 12px;
}

#root_department .dpt-page-card .btn-success,
#root_department .dpt-page-card .btn-danger {
  min-width: 76px;
}

#root_department .dpt-add-btn {
  min-width: 88px;
}

#root_department .college-table td .btn {
  margin: 0 2px;
}

#root_department .dpt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_department .showList .editIcon {
  margin-left: 8px;
  opacity: 0.85;
}

@media (max-width: 640px) {
  #root_department .college-table thead th,
  #root_department .college-table td {
    padding: 8px 10px;
    font-size: 13px;
  }

  #root_department .dpt-page-card .btn {
    min-width: 70px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

#root_instant .ifp-filter-checks {
  align-items: center;
  padding-bottom: 4px;
}

#root_instant .ifp-label {
  font-size: 13px;
  color: #374151;
}

#root_instant .ifp-panel-footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 14px;
}

/* ===== Library Profile (libp-*) UI polish ? 22.07.2026 ===== */
#root_library {
  color: #111827;
}

#root_library .libp-header .libp-header-container,
#root_library .libp-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

#root_library .libp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

#root_library .libp-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

#root_library .libp-title .blc:empty {
  display: none;
}

#root_library .libp-stats {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

#root_library .libp-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 96px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

#root_library .libp-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c7d2fe;
}

#root_library .libp-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

#root_library .libp-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(34, 197, 94, 0.92);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

#root_library .libp-refresh-btn:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

#root_library .libp-layout {
  min-height: calc(100vh - 96px);
}

#root_library .libp-sidebar,
#root_library .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_library .libp-sidebar::-webkit-scrollbar,
#root_library .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_library .libp-main,
#root_library .pro-main-content {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

#root_library #libraryProData > *:not(.libp-page-card):not(.fixed):not(.libp-modal-overlay) {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  margin-bottom: 16px;
}

#root_library .libp-page-card {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  margin-bottom: 16px;
}

#root_library .libp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#root_library .libp-section-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

#root_library .libp-card-header .libp-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

#root_library .libp-section-hint {
  margin: 0 0 18px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
}

#root_library .libp-search-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

#root_library .libp-search-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  flex-wrap: wrap;
}

#root_library .libp-input,
#root_library input[type="text"],
#root_library input[type="date"],
#root_library input[type="number"],
#root_library input[type="email"],
#root_library select,
#root_library textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#root_library .libp-input:focus,
#root_library input:focus,
#root_library select:focus,
#root_library textarea:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

#root_library .libp-search-form .libp-input {
  flex: 1;
  min-width: 200px;
}

#root_library .libp-btn,
.libp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

#root_library .libp-btn-sm,
.libp-btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
}

#root_library .libp-btn-primary,
.libp-btn-primary {
  background: #059669;
  color: #ffffff;
}

#root_library .libp-btn-primary:hover,
.libp-btn-primary:hover {
  background: #047857;
}

#root_library .libp-btn-muted,
.libp-btn-muted {
  background: #e5e7eb;
  color: #374151;
}

#root_library .libp-btn-muted:hover,
.libp-btn-muted:hover {
  background: #d1d5db;
}

#root_library .libp-btn-danger,
.libp-btn-danger {
  background: #dc2626;
  color: #ffffff;
}

#root_library .libp-btn-danger:hover,
.libp-btn-danger:hover {
  background: #b91c1c;
}

#root_library .libp-result-block {
  margin-top: 20px;
  padding-top: 4px;
}

#root_library .libp-result-block.hidden {
  display: none !important;
}

#root_library .libp-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

#root_library .libp-person-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  flex-shrink: 0;
}

#root_library .libp-person-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

#root_library .libp-person-sub {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

#root_library .libp-table-wrap,
#root_library .table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

#root_library .libp-table,
#root_library .college-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#root_library .libp-table thead,
#root_library .college-table thead {
  background: #f3f4f6;
}

#root_library .libp-table th,
#root_library .college-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#root_library .libp-table td,
#root_library .college-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #1f2937;
  vertical-align: middle;
}

#root_library .libp-table tbody tr:hover,
#root_library .college-table tbody tr:hover {
  background: #f9fafb;
}

#root_library .libp-empty {
  margin-top: 18px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  padding: 18px 12px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #fafafa;
}

#root_library .libp-empty-error {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

#root_library .libp-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

#root_library .libp-label,
#root_library .libp-label-block {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  padding-top: 10px;
}

#root_library .libp-label-block {
  display: block;
  padding-top: 0;
  margin-bottom: 6px;
}

#root_library .libp-label-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

#root_library .libp-field {
  min-width: 0;
}

#root_library .libp-field-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#root_library .libp-form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#root_library .libp-fine-heading {
  margin: 8px 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #05053d;
}

#root_library .libp-modal-overlay,
.libp-modal-overlay {
  background: rgba(15, 23, 42, 0.45);
  padding: 16px;
}

#root_library .libp-modal-overlay.hidden,
.libp-modal-overlay.hidden {
  display: none !important;
}

#root_library .libp-modal-overlay.flex,
.libp-modal-overlay.flex {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#root_library .libp-modal,
.libp-modal {
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#root_library .libp-modal-sm,
.libp-modal-sm {
  max-width: 480px;
}

#root_library .libp-modal-md,
.libp-modal-md {
  max-width: 640px;
}

#root_library .libp-modal-header,
.libp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

#root_library .libp-modal-title,
.libp-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

#root_library .libp-modal-text,
.libp-modal-text {
  margin: 0;
  padding: 0 18px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

#root_library .libp-modal-close,
.libp-modal-close {
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

#root_library .libp-modal-close:hover,
.libp-modal-close:hover {
  color: #111827;
}

#root_library .libp-modal-body,
.libp-modal-body {
  padding: 18px;
}

#root_library .libp-modal-body-scroll,
.libp-modal-body-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

#root_library .libp-modal-actions,
.libp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}

#root_library .libp-modal-actions-inline,
.libp-modal-actions-inline {
  margin-top: 16px;
  padding: 0;
  border-top: none;
  background: transparent;
}

#root_library .libp-modal-actions-between,
.libp-modal-actions-between {
  justify-content: space-between;
}

#root_library .libp-modal > .libp-modal-title {
  padding: 18px 18px 8px;
}

#root_library .libp-modal > .libp-modal-text {
  padding: 0 18px 8px;
}

@media (max-width: 900px) {
  #root_library .libp-header-container {
    align-items: flex-start;
  }

  #root_library .libp-stats {
    width: 100%;
  }

  #root_library .libp-stat {
    flex: 1;
    min-width: 88px;
  }

  #root_library .libp-form-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #root_library .libp-label,
  #root_library .libp-label-check {
    padding-top: 0;
  }

  #root_library .libp-main,
  #root_library .pro-main-content {
    padding: 14px;
  }

  #root_library .libp-page-card,
  #root_library #libraryProData > *:not(.libp-page-card):not(.fixed):not(.libp-modal-overlay) {
    padding: 16px;
    border-radius: 14px;
  }
}

@media (max-width: 640px) {
  #root_library .libp-search-form {
    flex-direction: column;
  }

  #root_library .libp-search-form .libp-btn {
    width: 100%;
  }

  #root_library .libp-person {
    align-items: flex-start;
  }
}

/* Library Profile mobile stack (libp-*) */
#root_library {
  overflow-x: hidden;
  max-width: 100%;
}

#root_library .libp-refresh-btn {
  align-self: center;
}

@media (max-width: 900px) {
  #root_library .pro-layout,
  #root_library .libp-layout {
    flex-direction: column;
  }

  #root_library .pro-sidebar,
  #root_library .libp-sidebar {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    overflow: visible;
  }

  #root_library .pro-sidebar.collapsed {
    width: 100% !important;
  }

  #root_library .pro-sidebar.collapsed .pro-sidebar-text {
    display: inline;
  }

  #root_library .pro-sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #root_library .pro-submenu-link {
    flex: 1 1 auto;
  }

  #root_library .libp-main,
  #root_library .pro-main-content {
    width: 100%;
    max-width: 100%;
    padding: 14px;
  }

  #root_library .libp-page-card,
  #root_library #libraryProData > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #root_library .libp-search-form {
    max-width: 100%;
  }
}

#root_library .libp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
}

#root_library .libp-icon-btn:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

/* ------------------------ Requested Transport List (rtrq-*) ------------------------ */
#root_requested_transport .rtrq-page {
  width: 100%;
  box-sizing: border-box;
}

#root_requested_transport .rtrq-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  min-height: 420px;
  box-sizing: border-box;
  max-width: 100%;
}

#root_requested_transport .rtrq-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_requested_transport .rtrq-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}

#root_requested_transport .rtrq-title .fa {
  color: #2563eb;
  font-size: 20px;
}

#root_requested_transport .rtrq-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_requested_transport .rtrq-date-block {
  margin-top: 18px;
}

#root_requested_transport .rtrq-date-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

#root_requested_transport .rtrq-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_requested_transport .rtrq-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  background: #fff;
  margin: 0;
}

#root_requested_transport .rtrq-table thead th,
#root_requested_transport .rtrq-table .tableHeadClass th {
  background: #f8fafc;
  color: #05053d;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#root_requested_transport .rtrq-table tbody td {
  padding: 11px 10px;
  font-size: 13px;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  word-break: break-word;
}

#root_requested_transport .rtrq-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

#root_requested_transport .rtrq-table tbody tr:hover td {
  background: #eff6ff;
}

#root_requested_transport .rtrq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}

#root_requested_transport .rtrq-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#root_requested_transport .rtrq-btn-success {
  background: #16a34a;
  color: #fff;
}

#root_requested_transport .rtrq-btn-success:hover:not(:disabled) {
  background: #15803d;
}

#root_requested_transport .rtrq-btn-danger {
  background: #dc2626;
  color: #fff;
}

#root_requested_transport .rtrq-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

#root_requested_transport .rtrq-empty {
  text-align: center;
  padding: 36px 16px;
  color: #6b7280;
}

#root_requested_transport .rtrq-empty-icon {
  font-size: 28px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_requested_transport .rtrq-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #334155;
}

#root_requested_transport .rtrq-empty p {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 768px) {
  #root_requested_transport .rtrq-card {
    padding: 16px;
  }

  #root_requested_transport .rtrq-title {
    font-size: 20px;
  }

  #root_requested_transport .rtrq-btn {
    width: 100%;
    white-space: normal;
  }
}

#root_requested_transport .rtrq-body {
  min-height: 220px;
}

#root_requested_transport .rtrq-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#root_requested_transport .rtrq-status-pending {
  background: #fef3c7;
  color: #92400e;
}

#root_requested_transport .rtrq-status-ok {
  background: #dcfce7;
  color: #166534;
}

#root_requested_transport .rtrq-status-bad {
  background: #fee2e2;
  color: #991b1b;
}

#root_requested_transport .rtrq-status-muted {
  background: #f1f5f9;
  color: #475569;
}

#root_requested_transport .rtrq-table tbody td.aCenter {
  text-align: center;
  vertical-align: middle;
}

#root_requested_transport .rtrq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

/* ===== Calendar View (internal) ? cview-* | #root_calendar_view ? appended 22.07.2026 ===== */
body.cview-modal-open {
  overflow: hidden;
}

#root_calendar_view .cview-page {
  width: 100%;
}

#root_calendar_view .cview-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
}

#root_calendar_view .cview-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_calendar_view .cview-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 18px;
}

#root_calendar_view .cview-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
}

#root_calendar_view .cview-title .fa {
  color: #1a1a7a;
}

#root_calendar_view .cview-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

#root_calendar_view .cview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

#root_calendar_view .cview-link-btn {
  text-decoration: none;
}

#root_calendar_view .cview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#root_calendar_view .cview-btn-primary {
  background: linear-gradient(90deg, #05053d, #1a1a7a);
  color: #fff;
}

#root_calendar_view .cview-btn-primary:hover {
  background: linear-gradient(90deg, #0a0a52, #2222a0);
}

#root_calendar_view .cview-btn-info {
  background: #0ea5e9;
  color: #fff;
  width: 100%;
  max-width: 280px;
}

#root_calendar_view .cview-btn-info:hover {
  background: #0284c7;
}

#root_calendar_view .cview-btn-success {
  background: #16a34a;
  color: #fff;
}

#root_calendar_view .cview-btn-success:hover {
  background: #15803d;
}

#root_calendar_view .cview-btn-danger {
  background: #dc2626;
  color: #fff;
}

#root_calendar_view .cview-btn-danger:hover {
  background: #b91c1c;
}

#root_calendar_view .cview-calendar {
  min-height: 420px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

#root_calendar_view .cview-calendar .fc {
  max-width: 100%;
}

#root_calendar_view .fc {
  font-size: 13px;
  color: #1f2937;
}

#root_calendar_view .fc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px !important;
}

#root_calendar_view .fc-toolbar .fc-left,
#root_calendar_view .fc-toolbar .fc-center,
#root_calendar_view .fc-toolbar .fc-right {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#root_calendar_view .fc-button {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 6px !important;
  height: auto !important;
  padding: 5px 10px !important;
  font-weight: 600 !important;
}

#root_calendar_view .fc-state-active,
#root_calendar_view .fc-state-down {
  background: #05053d !important;
  border-color: #05053d !important;
  color: #fff !important;
}

#root_calendar_view .fc-day-grid-event,
#root_calendar_view .fc-event {
  border-radius: 4px;
  border: none !important;
  background: #1a1a7a !important;
  color: #fff !important;
  padding: 1px 4px;
  font-size: 11px;
}

#root_calendar_view .fc-day:hover {
  background: #f8fafc;
}

#root_calendar_view .fc-today {
  background: #eef2ff !important;
}

#root_calendar_view .cview-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#root_calendar_view .cview-modal.hidden {
  display: none !important;
}

#root_calendar_view .cview-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

#root_calendar_view .cview-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow: auto;
}

#root_calendar_view .cview-modal-lg {
  max-width: 640px;
}

#root_calendar_view .cview-modal-sm {
  max-width: 380px;
}

#root_calendar_view .cview-modal-content {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#root_calendar_view .cview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(90deg, #05053d, #1a1a7a);
}

#root_calendar_view .cview-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

#root_calendar_view .cview-modal-close {
  border: none;
  background: transparent;
  color: #e2e8f0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

#root_calendar_view .cview-modal-close:hover {
  color: #fff;
}

#root_calendar_view .cview-modal-body {
  padding: 18px;
}

#root_calendar_view .cview-modal-footer {
  padding: 12px 18px 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f1f5f9;
}

#root_calendar_view .cview-field {
  margin-bottom: 12px;
}

#root_calendar_view .cview-center {
  text-align: center;
}

#root_calendar_view .cview-center > span {
  display: inline-block;
  margin: 4px;
}

#root_calendar_view .cview-form-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 14px;
}

#root_calendar_view .cview-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 0;
}

#root_calendar_view .cview-input,
#root_calendar_view .cview-select,
#root_calendar_view .cview-textarea,
#root_calendar_view .form-control {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}

#root_calendar_view .cview-textarea {
  min-height: 80px;
  resize: vertical;
}

#root_calendar_view .cview-input:focus,
#root_calendar_view .cview-select:focus,
#root_calendar_view .cview-textarea:focus,
#root_calendar_view .form-control:focus {
  outline: none;
  border-color: #1a1a7a;
  box-shadow: 0 0 0 3px rgba(26, 26, 122, 0.12);
}

#root_calendar_view .cview-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#root_calendar_view .cview-choice,
#root_calendar_view .btn.btn-default,
#root_calendar_view .btn.btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

#root_calendar_view .cview-choice-active,
#root_calendar_view .btn.btn-info {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}

#root_calendar_view .cview-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

#root_calendar_view label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
  display: block;
  margin: 4px 0 8px;
}

#root_calendar_view .calendarViewCls {
  display: none;
}

#root_calendar_view input.error,
#root_calendar_view select.error,
#root_calendar_view textarea.error {
  border-color: #f59e0b;
}

#root_calendar_view .cview-alert-msg {
  margin: 0 0 14px;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}

#root_calendar_view .cview-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  #root_calendar_view .cview-card {
    padding: 14px;
  }

  #root_calendar_view .cview-title {
    font-size: 18px;
  }

  #root_calendar_view .cview-actions,
  #root_calendar_view .cview-actions .cview-btn {
    width: 100%;
  }

  #root_calendar_view .cview-form-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #root_calendar_view .fc-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #root_calendar_view .fc-toolbar .fc-left,
  #root_calendar_view .fc-toolbar .fc-center,
  #root_calendar_view .fc-toolbar .fc-right {
    justify-content: center;
  }
}

/* ------------------------ Staff Attendance Profile (saprof-*) ------------------------ */
#root_staff_attendance_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_staff_attendance_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.saprof-layout {
  min-height: calc(100vh - 64px);
}

.saprof-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

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

.saprof-menu li {
  margin: 0;
}

.saprof-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.saprof-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.saprof-panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #05053d;
}

.saprof-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.saprof-toolbar .form-control {
  max-width: 240px;
  min-width: 160px;
}

.saprof-table-wrap {
  overflow-x: auto;
  width: 100%;
}

#root_staff_attendance_profile .college-table {
  width: 100%;
  min-width: 640px;
}

#root_staff_attendance_profile .headTitleLeave {
  font-size: 22px;
  font-family: Quicksand_Bold, sans-serif;
  color: #000;
}

#root_staff_attendance_profile .leaveTableWidth {
  width: 500px;
}

#root_staff_attendance_profile .noRecFoundClass,
#root_staff_attendance_profile .norecFount,
#root_staff_attendance_profile .noRecordFoundCls,
#root_staff_attendance_profile #noResult .error_message {
  text-align: center;
  color: #b91c1c;
  padding: 16px;
  font-weight: 600;
}

.saprof-modal-hidden {
  display: none !important;
}

.saprof-modal-md {
  max-width: 560px;
  width: 92%;
}

.saprof-modal-lg {
  max-width: 720px;
  width: 94%;
}

.saprof-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.saprof-user-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.saprof-staff-photo {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
}

.saprof-user-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.saprof-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .saprof-form-row {
    grid-template-columns: 160px 1fr;
    align-items: center;
  }
}

.saprof-form-row label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_staff_attendance_profile #search_staff_form label.error {
  color: red;
}

#root_staff_attendance_profile #search_staff_form input.error {
  border: 1px solid orange;
}

#root_staff_attendance_profile .aCenter,
#root_staff_attendance_profile .acenter {
  text-align: center;
}

#root_staff_attendance_profile img.single-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

@media (max-width: 900px) {
  .saprof-layout {
    flex-direction: column;
  }

  .saprof-sidebar,
  #root_staff_attendance_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .saprof-main {
    padding: 16px;
  }

  .saprof-toolbar .form-control {
    max-width: 100%;
    width: 100%;
  }

  #root_staff_attendance_profile .leaveTableWidth {
    width: 100%;
  }
}

#root_staff_attendance_profile .saprof-staff-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#root_staff_attendance_profile .saprof-staff-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

#root_staff_attendance_profile .saprof-staff-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#root_staff_attendance_profile .aStfNameCls {
  font-weight: 600;
  color: #05053d;
}

#root_staff_attendance_profile .aStfDesCls,
#root_staff_attendance_profile .aStfMobCls {
  font-size: 13px;
  color: #6b7280;
}

#root_staff_attendance_profile .stfAbsCls {
  color: #b91c1c;
  font-weight: 700;
}

#root_staff_attendance_profile .stfPreCls {
  color: #047857;
  font-weight: 600;
}

#root_staff_attendance_profile .saprof-date-nav {
  align-items: center;
}

#root_staff_attendance_profile .saprof-date-label,
#root_staff_attendance_profile .saprof-toolbar .input-group-addon,
#root_staff_attendance_profile .saprof-toolbar #yearDiv,
#root_staff_attendance_profile .saprof-toolbar #yearsDiv,
#root_staff_attendance_profile .saprof-toolbar #cur {
  min-width: 140px;
  text-align: center;
  font-weight: 600;
  color: #05053d;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 8px 12px;
}

#root_staff_attendance_profile .saprof-toolbar .btn {
  white-space: nowrap;
}

#root_staff_attendance_profile .form-control {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
}

#root_staff_attendance_profile .college-table thead th {
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 700;
  font-size: 13px;
}

/* ------------------------ College Profile company data field/value spacing (cprof-*) ------------------------ */
#root_college_profile .formtbl-info {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#root_college_profile .formtbl-info .formlabel-cell {
  width: 38%;
  min-width: 260px;
  max-width: 420px;
  padding: 14px 48px 14px 4px;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}

#root_college_profile .formtbl-info .formvalue-cell {
  width: 62%;
  padding: 14px 4px 14px 24px;
  vertical-align: top;
  color: #1f2937;
}

#root_college_profile .formtbl-info .show-formval {
  gap: 10px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  #root_college_profile .formtbl-info,
  #root_college_profile .formtbl-info tbody,
  #root_college_profile .formtbl-info tr,
  #root_college_profile .formtbl-info td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #root_college_profile .formtbl-info .formlabel-cell {
    padding: 12px 4px 4px;
  }

  #root_college_profile .formtbl-info .formvalue-cell {
    padding: 0 4px 14px;
  }
}

/* Calendar View overflow containment (Phase 3 polish) */
#root_calendar_view {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
#root_calendar_view .cview-page,
#root_calendar_view .cview-card {
  max-width: 100%;
  box-sizing: border-box;
}
#root_calendar_view .fc-view-container,
#root_calendar_view .fc-view,
#root_calendar_view .fc-day-grid {
  max-width: 100%;
}

/* Calendar View Phase 3 UI polish */
#root_calendar_view .cview-header {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  margin: -4px -6px 18px;
  padding: 12px 12px 16px;
  border-radius: 10px 10px 0 0;
}
#root_calendar_view .fc-toolbar h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #05053d !important;
}
#root_calendar_view .fc-day-header {
  padding: 8px 4px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #f8fafc !important;
}
#root_calendar_view .holidayHeightCls {
  min-height: 40px;
}
#root_calendar_view .cview-modal-header .cview-modal-title {
  letter-spacing: 0.01em;
}
#root_calendar_view .cview-choice-row .cview-choice {
  flex: 1 1 auto;
  min-width: 120px;
}

/* ------------------------ Staff List UX polish pass (stls-*) ------------------------ */
#root_staff_list .stls-page {
  width: 100%;
  box-sizing: border-box;
}

#root_staff_list .stls-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_staff_list .stls-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_staff_list .stls-title-block {
  min-width: 0;
  flex: 1 1 220px;
}

#root_staff_list .stls-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#root_staff_list .stls-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_staff_list .stls-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
}

#root_staff_list .stls-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 320px;
}

#root_staff_list .stls-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#root_staff_list .stls-select,
#root_staff_list .stls-order-wrap select {
  min-width: 168px;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.25;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

#root_staff_list .stls-select:focus,
#root_staff_list .stls-order-wrap select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#root_staff_list .stls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

#root_staff_list .stls-btn-view {
  height: 34px;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

#root_staff_list .stls-table-wrap {
  margin-top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

#root_staff_list .stls-table,
#root_staff_list #staffTable.college-table {
  width: 100%;
  min-width: 980px;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
}

#root_staff_list .stls-table thead,
#root_staff_list #staffTable.college-table thead {
  background: #f8fafc;
  color: #05053d;
}

#root_staff_list .stls-table thead th,
#root_staff_list #staffTable.college-table thead th {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e5e7eb;
  color: #05053d;
  background: #f8fafc;
}

#root_staff_list .stls-table thead th.aCenter,
#root_staff_list #staffTable.college-table thead th.aCenter {
  text-align: center;
}

#root_staff_list .stls-table tbody td,
#root_staff_list #staffTable.college-table tbody td {
  padding: 12px 14px;
  font-size: 13px;
  color: #334155;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

#root_staff_list .stls-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

#root_staff_list .stls-table tbody tr:hover td {
  background: #eff6ff;
}

#root_staff_list .stls-sno {
  font-weight: 600;
  color: #4f46e5;
  width: 56px;
}

#root_staff_list .stls-photo-cell {
  width: 56px;
  padding-right: 6px !important;
}

#root_staff_list .stls-photo,
#root_staff_list img.stls-photo.single-img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: block;
}

#root_staff_list .stls-name-cell {
  min-width: 160px;
}

#root_staff_list .stls-name-link {
  text-decoration: none;
}

#root_staff_list .stls-name-link:hover .staffNameCls {
  color: #4338ca;
  text-decoration: underline;
}

#root_staff_list .staffNameCls {
  color: #05053d;
  font-size: 13px;
  font-weight: 700;
}

#root_staff_list .stls-nick {
  color: #64748b;
  font-size: 12px;
}

#root_staff_list .stls-designation {
  max-width: 220px;
  word-break: break-word;
}

#root_staff_list .stls-view-cell {
  white-space: nowrap;
}

#root_staff_list .stls-no-record {
  display: none;
  text-align: center;
  padding: 40px 16px;
  color: #6b7280;
  margin-top: 8px;
}

#root_staff_list .stls-no-record:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#root_staff_list .stls-no-record-icon {
  font-size: 28px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_staff_list .stls-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #334155;
}

#root_staff_list .stls-no-record p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

/* Keep zoom affordance from colliding with photo layout */
#root_staff_list .stls-photo-cell .magnify,
#root_staff_list .stls-photo-cell .img-zoom + a,
#root_staff_list .stls-photo-cell .zoom {
  margin-top: 4px;
}

@media (max-width: 768px) {
  #root_staff_list .stls-page-card {
    padding: 16px;
  }

  #root_staff_list .stls-page-title {
    font-size: 20px;
  }

  #root_staff_list .stls-header-actions {
    width: 100%;
    justify-content: stretch;
  }

  #root_staff_list .stls-order-wrap,
  #root_staff_list .stls-order-wrap select,
  #root_staff_list .stls-select {
    width: 100%;
    min-width: 0;
  }

  #root_staff_list .stls-action-group {
    width: 100%;
  }

  #root_staff_list .stls-action-group > span,
  #root_staff_list .stls-action-group > span > a,
  #root_staff_list .stls-action-group .stls-btn {
    width: 100%;
  }

  #root_staff_list .stls-btn {
    justify-content: center;
  }
}

/* ===== Staff Payroll Profile (spay-*) ? append only | Root: #root_staff_payroll_profile ===== */
#root_staff_payroll_profile {
  width: 100%;
  box-sizing: border-box;
}

#root_staff_payroll_profile .spay-layout {
  min-height: calc(100vh - 64px);
}

#root_staff_payroll_profile .spay-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#root_staff_payroll_profile .spay-menu li {
  margin: 0;
}

#root_staff_payroll_profile .spay-menu-link,
#root_staff_payroll_profile .admin-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

#root_staff_payroll_profile .admin-menu li.active > a,
#root_staff_payroll_profile .spay-menu-link.active {
  background: #eef2ff;
  color: #05053d;
}

#root_staff_payroll_profile .spay-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

#root_staff_payroll_profile .spay-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

#root_staff_payroll_profile .spay-panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_payroll_profile .spay-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_staff_payroll_profile .spay-info-row {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr;
  gap: 10px 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  align-items: start;
}

#root_staff_payroll_profile .spay-info-label {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

#root_staff_payroll_profile .spay-info-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  word-break: break-word;
}

#root_staff_payroll_profile .spay-table-wrap,
#root_staff_payroll_profile .table-container {
  overflow-x: auto;
  width: 100%;
}

#root_staff_payroll_profile .college-table,
#root_staff_payroll_profile .spay-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

#root_staff_payroll_profile .college-table .tableHeadClass th,
#root_staff_payroll_profile .college-table thead th,
#root_staff_payroll_profile .college-table tr.tableHeadClass th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  border: none;
}

#root_staff_payroll_profile .college-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
}

#root_staff_payroll_profile .college-table tr:nth-child(even) td {
  background: #f9fafb;
}

#root_staff_payroll_profile .aCenter,
#root_staff_payroll_profile .acenter {
  text-align: center;
}

#root_staff_payroll_profile .spay-no-record,
#root_staff_payroll_profile .norecFount {
  margin: 18px auto;
  max-width: 420px;
  text-align: center;
  padding: 20px 16px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
}

#root_staff_payroll_profile .spay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#root_staff_payroll_profile .spay-btn-success {
  background: #15803d;
  color: #fff;
}

#root_staff_payroll_profile .spay-btn-success:hover {
  background: #166534;
}

#root_staff_payroll_profile .spay-btn-danger {
  background: #dc2626;
  color: #fff;
}

#root_staff_payroll_profile .spay-btn-danger:hover {
  background: #b91c1c;
}

#root_staff_payroll_profile .spay-btn-primary {
  background: #0369a1;
  color: #fff;
}

#root_staff_payroll_profile .spay-btn-primary:hover {
  background: #075985;
}

#root_staff_payroll_profile .spay-btn:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 2px;
}

#root_staff_payroll_profile .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

#root_staff_payroll_profile .form-control:focus {
  outline: none;
  border-color: #05053d;
  box-shadow: 0 0 0 3px rgba(5, 5, 61, 0.12);
}

#root_staff_payroll_profile .spay-form-row {
  display: grid;
  grid-template-columns: minmax(120px, 32%) 1fr;
  gap: 10px 14px;
  margin-bottom: 14px;
  align-items: center;
}

#root_staff_payroll_profile .spay-form-item {
  margin-bottom: 14px;
}

#root_staff_payroll_profile .spay-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

#root_staff_payroll_profile .spay-salary-row,
#root_staff_payroll_profile #salaryDetails .col-md-12 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}

#root_staff_payroll_profile #salaryDetails .col-md-6 {
  flex: 1 1 180px;
}

#root_staff_payroll_profile .headTitleLeft {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_payroll_profile .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

#root_staff_payroll_profile .spay-modal-hidden {
  display: none !important;
}

#root_staff_payroll_profile .modal-box {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  border: 1px solid #e5e7eb;
  padding: 18px;
}

#root_staff_payroll_profile .modal-box.spay-modal-lg {
  max-width: 760px;
}

#root_staff_payroll_profile .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_payroll_profile .modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  float: right;
}

#root_staff_payroll_profile .modal-close:hover {
  color: #111827;
}

#root_staff_payroll_profile .modal-form,
#root_staff_payroll_profile .spay-modal-body {
  margin-top: 14px;
}

#root_staff_payroll_profile .spay-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

#root_staff_payroll_profile .hideInfo {
  display: none;
}

@media (max-width: 900px) {
  #root_staff_payroll_profile .spay-info-row,
  #root_staff_payroll_profile .spay-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #root_staff_payroll_profile .spay-page-card {
    padding: 16px;
  }

  #root_staff_payroll_profile .spay-panel-title {
    font-size: 18px;
  }

  #root_staff_payroll_profile .spay-btn {
    width: 100%;
  }

  #root_staff_payroll_profile .spay-modal-actions {
    justify-content: stretch;
  }

  #root_staff_payroll_profile .spay-modal-actions .spay-btn {
    width: 100%;
  }
}

/* ===== Staff Payroll Profile Phase-3 polish (append-only) ===== */
#root_staff_payroll_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_staff_payroll_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

#root_staff_payroll_profile .spay-main {
  min-width: 0;
}

#root_staff_payroll_profile .spay-menu-link,
#root_staff_payroll_profile .admin-menu a {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

#root_staff_payroll_profile .spay-menu-link .fa {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: #4f46e5;
}

#root_staff_payroll_profile .college-table {
  border-radius: 12px;
  overflow: hidden;
}

#root_staff_payroll_profile .college-table thead th:first-child {
  border-top-left-radius: 12px;
}

#root_staff_payroll_profile .college-table thead th:last-child {
  border-top-right-radius: 12px;
}

#root_staff_payroll_profile .spay-salary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #111827;
}

#root_staff_payroll_profile .spay-salary-total {
  background: #f9fafb;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
  border-bottom: none;
}

#root_staff_payroll_profile .spay-salary-amt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#root_staff_payroll_profile .spay-salary-empty {
  color: #9ca3af;
  padding: 4px 0 10px;
}

#root_staff_payroll_profile .spay-salary-net {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_payroll_profile .spay-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#root_staff_payroll_profile .spay-modal-header .modal-title {
  flex: 1;
  min-width: 0;
}

#root_staff_payroll_profile .spay-modal-header .modal-close {
  float: none;
  flex-shrink: 0;
  padding: 0 4px;
}

#root_staff_payroll_profile #downloadReport {
  margin-top: 12px;
}

#root_staff_payroll_profile select.form-control {
  appearance: auto;
  background-color: #fff;
}

@media (max-width: 900px) {
  #root_staff_payroll_profile .spay-layout {
    flex-direction: column;
  }

  #root_staff_payroll_profile .pro-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_staff_payroll_profile .pro-main-content {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  #root_staff_payroll_profile .college-table .spay-btn,
  #root_staff_payroll_profile .spay-table-wrap .spay-btn {
    width: auto;
  }

  #root_staff_payroll_profile .spay-panel-actions .spay-btn {
    width: 100%;
  }

  #root_staff_payroll_profile .spay-salary-line,
  #root_staff_payroll_profile .spay-salary-net {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ------------------------ Staff List mobile toolbar polish (stls-*) ------------------------ */
@media (max-width: 768px) {
  #root_staff_list .stls-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  #root_staff_list .stls-action-group > span,
  #root_staff_list .stls-action-group > span > a {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #root_staff_list .stls-action-group .stls-btn {
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: 40px;
    padding: 8px 10px !important;
    text-align: center;
  }

  #root_staff_list .stls-table-wrap {
    position: relative;
  }

  #root_staff_list .stls-table-wrap::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(15, 23, 42, 0.08));
  }
}

/* Staff List — survey_list-matched layout helpers (stls-*) */
#root_staff_list .stls-order-row {
  flex-wrap: wrap;
}

#root_staff_list .stls-order-select {
  min-width: 140px;
  background: #ffffff;
  color: #111827;
}

#root_staff_list .stls-button-group {
  flex-wrap: wrap;
  align-items: center;
}

#root_staff_list .stls-button-group > a,
#root_staff_list .stls-button-group > span {
  display: inline-flex;
}

#root_staff_list .stls-photo-cell {
  width: 56px;
  padding-right: 0 !important;
}

#root_staff_list .stls-photo {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  display: block;
}

#root_staff_list .stls-name-link {
  text-decoration: none;
  color: inherit;
}

#root_staff_list .stls-name-link:hover .staffNameCls {
  text-decoration: underline;
  color: #4f46e5;
}

#root_staff_list .stls-nick {
  color: #6b7280;
  font-size: 12px;
}

#root_staff_list #noRecord[hidden] {
  display: none !important;
}

/* Force survey_list table look (overrides older #staffTable gray header rules) */
#root_staff_list .table-container.stls-survey-wrap {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
}

#root_staff_list #staffTable.college-table.stls-survey-table {
  width: 100%;
  min-width: 900px;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  background: #ffffff;
}

#root_staff_list #staffTable.college-table.stls-survey-table thead {
  background-color: #d1fae5 !important;
  color: #374151 !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table thead th {
  padding: 12px 16px !important;
  text-align: left;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #374151 !important;
  background-color: #d1fae5 !important;
  border: none !important;
  border-bottom: 1px solid #a7f3d0 !important;
  white-space: nowrap;
}

#root_staff_list #staffTable.college-table.stls-survey-table thead th.text-center {
  text-align: center !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table tbody td {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #111827 !important;
  vertical-align: middle;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table tbody tr:last-child td {
  border-bottom: none !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table tbody tr:nth-child(even) td {
  background: #ffffff !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table tbody tr:hover td {
  background: #eff6ff !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table .serial-no {
  font-weight: 600 !important;
  color: #4f46e5 !important;
}

#root_staff_list #staffTable.college-table.stls-survey-table .alink-btn.btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 7px 13px;
  border-radius: 10px;
  background-color: #0ea5e9;
  color: #ffffff;
  border: none;
}

#root_staff_list #staffTable.college-table.stls-survey-table .alink-btn.btn-view:hover {
  background-color: #0284c7;
  opacity: 0.95;
}

#root_staff_list #staffTable.college-table.stls-survey-table .stls-date-cell {
  white-space: nowrap;
}

#root_staff_list #staffTable.college-table.stls-survey-table .stls-photo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
  #root_staff_list .stls-button-group {
    width: 100%;
  }

  #root_staff_list .stls-button-group .btn {
    width: 100%;
  }

  #root_staff_list .stls-button-group > a,
  #root_staff_list .stls-button-group > span {
    flex: 1 1 calc(50% - 6px);
  }
}

/* Calendar View ? medium height so month fits viewport without page scroll */
#root_calendar_view .cview-page {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
#root_calendar_view .cview-card {
  padding: 12px 16px 14px !important;
}
#root_calendar_view .cview-header {
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
}
#root_calendar_view .cview-subtitle {
  display: none;
}
#root_calendar_view .cview-calendar {
  min-height: 0 !important;
  max-height: calc(100vh - 200px);
}
#root_calendar_view .fc {
  max-height: calc(100vh - 200px);
}
#root_calendar_view .fc-view-container {
  overflow: hidden !important;
}
#root_calendar_view .fc-day-grid .fc-row {
  min-height: 52px !important;
}
#root_calendar_view .fc-day-number {
  padding: 2px 4px !important;
  font-size: 12px !important;
}
#root_calendar_view .fc-day-grid-event,
#root_calendar_view .fc-event {
  font-size: 10px !important;
  line-height: 1.2 !important;
  padding: 0 3px !important;
  margin: 1px 2px 0 !important;
}
#root_calendar_view .fc-content-skeleton td {
  vertical-align: top;
}
@media (max-width: 768px) {
  #root_calendar_view .cview-calendar,
  #root_calendar_view .fc {
    max-height: calc(100vh - 240px);
  }
  #root_calendar_view .fc-day-grid .fc-row {
    min-height: 44px !important;
  }
}

/* ------------------------ Staff Attendance Profile UX polish pass (saprof-*) ------------------------ */
#root_staff_attendance_profile .saprof-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_staff_attendance_profile .saprof-panel-header {
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

#root_staff_attendance_profile .saprof-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

#root_staff_attendance_profile .saprof-panel-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #05053d;
}

#root_staff_attendance_profile .saprof-panel-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}

#root_staff_attendance_profile .saprof-header-select {
  flex: 0 0 auto;
}

#root_staff_attendance_profile .saprof-toolbar {
  gap: 12px;
  margin-bottom: 18px;
}

#root_staff_attendance_profile .saprof-btn,
#root_staff_attendance_profile .saprof-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

#root_staff_attendance_profile .saprof-select,
#root_staff_attendance_profile .saprof-input,
#root_staff_attendance_profile .saprof-toolbar .form-control {
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  max-width: 260px;
}

#root_staff_attendance_profile .saprof-select:focus,
#root_staff_attendance_profile .saprof-input:focus,
#root_staff_attendance_profile .saprof-toolbar .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
  outline: none;
}

#root_staff_attendance_profile .saprof-date-nav {
  gap: 10px;
}

#root_staff_attendance_profile .saprof-date-label,
#root_staff_attendance_profile .saprof-toolbar .input-group-addon,
#root_staff_attendance_profile .saprof-toolbar #yearDiv,
#root_staff_attendance_profile .saprof-toolbar #yearsDiv,
#root_staff_attendance_profile .saprof-toolbar #cur {
  min-width: 148px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #05053d;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 14px;
  box-sizing: border-box;
}

#root_staff_attendance_profile .saprof-date-label .input-group-addon,
#root_staff_attendance_profile .saprof-date-label label {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 700;
  color: #05053d;
}

#root_staff_attendance_profile .saprof-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

#root_staff_attendance_profile .saprof-table,
#root_staff_attendance_profile .college-table.saprof-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
}

#root_staff_attendance_profile .saprof-table thead,
#root_staff_attendance_profile .college-table.saprof-table thead {
  background: #f8fafc;
}

#root_staff_attendance_profile .saprof-table thead th,
#root_staff_attendance_profile .college-table.saprof-table thead th,
#root_staff_attendance_profile .college-table thead th {
  background: #f8fafc;
  color: #05053d;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#root_staff_attendance_profile .saprof-table tbody td,
#root_staff_attendance_profile .college-table.saprof-table tbody td,
#root_staff_attendance_profile .college-table tbody td {
  padding: 12px 14px;
  font-size: 13px;
  color: #334155;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

#root_staff_attendance_profile .saprof-table tbody tr:nth-child(even) td,
#root_staff_attendance_profile .college-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

#root_staff_attendance_profile .saprof-table tbody tr:hover td,
#root_staff_attendance_profile .college-table tbody tr:hover td {
  background: #eff6ff;
}

#root_staff_attendance_profile .saprof-sno {
  font-weight: 600;
  color: #4f46e5;
}

#root_staff_attendance_profile .saprof-row-photo,
#root_staff_attendance_profile img.saprof-row-photo.single-img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: block;
  margin: 0 auto;
}

#root_staff_attendance_profile .saprof-status-cell {
  font-size: 13px;
  letter-spacing: 0.02em;
}

#root_staff_attendance_profile .stfAbsCls {
  color: #b91c1c;
  font-weight: 700;
}

#root_staff_attendance_profile .stfPreCls {
  color: #047857;
  font-weight: 600;
}

#root_staff_attendance_profile .saprof-empty,
#root_staff_attendance_profile .noRecFoundClass.saprof-empty,
#root_staff_attendance_profile .norecFount.saprof-empty,
#root_staff_attendance_profile .noRecordFoundCls.saprof-empty,
#root_staff_attendance_profile #noResult .saprof-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  padding: 28px 16px;
  color: #6b7280;
  font-weight: 400;
}

#root_staff_attendance_profile .saprof-empty-icon {
  font-size: 28px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_staff_attendance_profile .saprof-empty h3,
#root_staff_attendance_profile .saprof-empty .error_message {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #334155;
}

#root_staff_attendance_profile .saprof-empty p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

#root_staff_attendance_profile .pro-sidebar-title {
  padding: 16px 16px 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_attendance_profile .pro-submenu-link {
  min-height: 40px;
  border-radius: 8px;
  margin: 2px 8px;
}

#root_staff_attendance_profile .pro-main-header {
  background: linear-gradient(90deg, #05053d, #1a1a7a);
}

#root_staff_attendance_profile .pro-menu-btn {
  background: transparent;
}

#root_staff_attendance_profile .pro-menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

#root_staff_attendance_profile .modal-box {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

#root_staff_attendance_profile .modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  margin-bottom: 14px;
}

#root_staff_attendance_profile .saprof-user-info {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

#root_staff_attendance_profile .saprof-form-row label {
  color: #374151;
}

@media (max-width: 900px) {
  #root_staff_attendance_profile .saprof-layout {
    min-height: auto;
  }

  #root_staff_attendance_profile .pro-sidebar,
  #root_staff_attendance_profile .saprof-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #root_staff_attendance_profile .saprof-main {
    padding: 14px;
  }

  #root_staff_attendance_profile .saprof-page-card {
    padding: 16px;
  }

  #root_staff_attendance_profile .saprof-panel-title {
    font-size: 18px;
  }

  #root_staff_attendance_profile .saprof-toolbar {
    width: 100%;
  }

  #root_staff_attendance_profile .saprof-select,
  #root_staff_attendance_profile .saprof-input,
  #root_staff_attendance_profile .saprof-toolbar .form-control,
  #root_staff_attendance_profile .saprof-header-select,
  #root_staff_attendance_profile .saprof-header-select .saprof-select {
    max-width: 100%;
    width: 100%;
  }

  #root_staff_attendance_profile .saprof-date-nav {
    width: 100%;
  }

  #root_staff_attendance_profile .saprof-date-nav .saprof-btn,
  #root_staff_attendance_profile .saprof-date-nav .btn {
    flex: 1 1 auto;
  }

  #root_staff_attendance_profile .saprof-date-label {
    flex: 1 1 100%;
    order: -1;
  }

  #root_staff_attendance_profile .pro-header-title {
    font-size: 18px;
  }
}

/* ===== Subject Wise Attendance Report (swar-*) append only | Root: #root_sub_wise_attendance_report ===== */
#root_sub_wise_attendance_report {
  width: 100%;
  box-sizing: border-box;
}

#root_sub_wise_attendance_report .swar-page {
  color: #111827;
}

#root_sub_wise_attendance_report .swar-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_sub_wise_attendance_report .swar-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_sub_wise_attendance_report .swar-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.3;
}

#root_sub_wise_attendance_report .swar-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_sub_wise_attendance_report .swar-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.4;
}

#root_sub_wise_attendance_report .swar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

#root_sub_wise_attendance_report .swar-filter-form {
  flex: 1 1 280px;
  margin: 0;
}

#root_sub_wise_attendance_report .swar-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 640px) {
  #root_sub_wise_attendance_report .swar-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#root_sub_wise_attendance_report .swar-filter-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

#root_sub_wise_attendance_report .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

#root_sub_wise_attendance_report .form-control:focus {
  outline: none;
  border-color: #05053d;
  box-shadow: 0 0 0 3px rgba(5, 5, 61, 0.12);
}

#root_sub_wise_attendance_report .swar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#root_sub_wise_attendance_report .swar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#root_sub_wise_attendance_report .swar-btn-primary {
  background: #0369a1;
  color: #fff;
}

#root_sub_wise_attendance_report .swar-btn-primary:hover {
  background: #075985;
}

#root_sub_wise_attendance_report .swar-btn:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 2px;
}

#root_sub_wise_attendance_report .swar-report-wrap,
#root_sub_wise_attendance_report .swar-table-scroll,
#root_sub_wise_attendance_report .center-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_sub_wise_attendance_report #studentAttTbl,
#root_sub_wise_attendance_report .swar-table {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
  font-size: 13px;
}

#root_sub_wise_attendance_report .college-table .tableHeadClass th,
#root_sub_wise_attendance_report .college-table thead th,
#root_sub_wise_attendance_report #tableHeadId th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 10px 8px;
  text-align: center;
  vertical-align: bottom;
  white-space: nowrap;
  border: 1px solid #1e1e4a;
}

#root_sub_wise_attendance_report .college-table td {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
  background: #fff;
}

#root_sub_wise_attendance_report .college-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_sub_wise_attendance_report .aCenter,
#root_sub_wise_attendance_report .acenter {
  text-align: center;
}

#root_sub_wise_attendance_report .vertical-date {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#root_sub_wise_attendance_report .swar-period-badge {
  background-color: #73ee3b;
  color: #14532d;
  font-weight: 700;
  font-size: 12px;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  min-width: 28px;
}

#root_sub_wise_attendance_report .swar-present {
  color: #2342e6;
  font-weight: 700;
}

#root_sub_wise_attendance_report .swar-absent {
  color: #e62323;
  font-weight: 700;
}

#root_sub_wise_attendance_report .swar-student-name {
  font-weight: 600;
  white-space: nowrap;
}

#root_sub_wise_attendance_report .swar-no-record {
  margin: 24px auto;
  max-width: 420px;
  text-align: center;
  padding: 28px 20px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
}

#root_sub_wise_attendance_report .swar-no-record-icon {
  font-size: 28px;
  color: #9ca3af;
  margin-bottom: 8px;
}

#root_sub_wise_attendance_report .swar-no-record h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #374151;
}

#root_sub_wise_attendance_report .swar-no-record p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 640px) {
  #root_sub_wise_attendance_report .swar-page-card {
    padding: 16px;
  }

  #root_sub_wise_attendance_report .swar-page-title {
    font-size: 18px;
  }

  #root_sub_wise_attendance_report .swar-actions,
  #root_sub_wise_attendance_report .swar-btn {
    width: 100%;
  }
}

/* ------------------------ Staff Class Subject (scs-*) ------------------------ */
#root_staff_class_subject .scs-page {
  width: 100%;
  box-sizing: border-box;
}

#root_staff_class_subject .scs-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  box-sizing: border-box;
}

#root_staff_class_subject .scs-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_staff_class_subject .scs-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}

#root_staff_class_subject .scs-page-title .fa {
  color: #4f46e5;
  font-size: 20px;
}

#root_staff_class_subject .scs-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_staff_class_subject .scs-header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

#root_staff_class_subject .scs-select,
#root_staff_class_subject #academic_year_Term_ID {
  min-width: 220px;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

#root_staff_class_subject .scs-select:focus,
#root_staff_class_subject #academic_year_Term_ID:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
  outline: none;
}

#root_staff_class_subject .scs-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

#root_staff_class_subject .scs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600;
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
}

#root_staff_class_subject .scs-btn-icon {
  min-width: 36px;
  min-height: 34px;
  padding: 6px 10px !important;
}

#root_staff_class_subject .scs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#root_staff_class_subject .scs-section {
  margin-top: 22px;
}

#root_staff_class_subject .scs-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#root_staff_class_subject .scs-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_class_subject .scs-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

#root_staff_class_subject .scs-table,
#root_staff_class_subject .college-table.scs-table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
}

#root_staff_class_subject .scs-table thead th,
#root_staff_class_subject .scs-table .tableHeadClass th,
#root_staff_class_subject .college-table.scs-table thead th {
  background: #f8fafc;
  color: #05053d;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  text-align: left;
}

#root_staff_class_subject .scs-table th.aCenter,
#root_staff_class_subject .scs-table th.alignCenter,
#root_staff_class_subject .scs-table td.aCenter {
  text-align: center;
}

#root_staff_class_subject .scs-table tbody td,
#root_staff_class_subject .college-table.scs-table tbody td {
  padding: 11px 12px;
  font-size: 13px;
  color: #334155;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

#root_staff_class_subject .scs-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

#root_staff_class_subject .scs-table tbody tr:hover td {
  background: #eff6ff;
}

#root_staff_class_subject .scs-actions-cell {
  white-space: nowrap;
}

#root_staff_class_subject .scs-class-block {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: #fff;
}

#root_staff_class_subject .scs-class-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

#root_staff_class_subject .scs-class-name {
  font-size: 14px;
  color: #05053d;
}

#root_staff_class_subject .scs-class-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_staff_class_subject .scs-empty {
  display: none;
  text-align: center;
  padding: 28px 16px;
  color: #6b7280;
}

#root_staff_class_subject .scs-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#root_staff_class_subject .scs-empty-icon {
  font-size: 26px;
  color: #94a3b8;
  margin-bottom: 8px;
}

#root_staff_class_subject .scs-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #334155;
}

#root_staff_class_subject .scs-empty p {
  margin: 0;
  font-size: 13px;
}

#root_staff_class_subject .scs-report-grid,
#root_staff_class_subject .report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#root_staff_class_subject .scs-report-card,
#root_staff_class_subject .report-card.period-btn {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  text-align: left;
  box-sizing: border-box;
}

#root_staff_class_subject .seven_head {
  font-weight: 600;
  color: #05053d;
  vertical-align: top;
}

#root_staff_class_subject .period_head,
#root_staff_class_subject .sub_subject {
  font-size: 12px;
  vertical-align: top;
}

#root_staff_class_subject .scs-modal-hidden {
  display: none !important;
}

#root_staff_class_subject .scs-modal-overlay.scs-modal-open,
#root_staff_class_subject .scs-modal-overlay:not(.scs-modal-hidden) {
  display: flex;
}

#root_staff_class_subject .scs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

#root_staff_class_subject .scs-modal-dialog {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
}

#root_staff_class_subject .scs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
}

#root_staff_class_subject .scs-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_class_subject .scs-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}

#root_staff_class_subject .scs-modal-body {
  padding: 16px 18px 20px;
}

#root_staff_class_subject .scs-modal-actions {
  margin-top: 16px;
}

@media (max-width: 768px) {
  #root_staff_class_subject .scs-page-card {
    padding: 16px;
  }

  #root_staff_class_subject .scs-page-title {
    font-size: 20px;
  }

  #root_staff_class_subject .scs-header-tools,
  #root_staff_class_subject .scs-select-wrap,
  #root_staff_class_subject .scs-select,
  #root_staff_class_subject #academic_year_Term_ID,
  #root_staff_class_subject .scs-quick-actions {
    width: 100%;
  }

  #root_staff_class_subject .scs-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #root_staff_class_subject .scs-quick-actions .scs-btn {
    width: 100%;
  }

  #root_staff_class_subject .scs-table,
  #root_staff_class_subject .college-table.scs-table {
    min-width: 900px;
  }
}

/* ------------------------ Staff Internal Test (sit-*) ------------------------ */
.sit-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.sit-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.sit-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.sit-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.35;
}

.sit-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.sit-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: end;
}

@media (min-width: 640px) {
  .sit-filters {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 220px);
    max-width: 720px;
  }
}

.sit-form-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.sit-form-item-hidden {
  display: none !important;
}

#root_staff_internal_test .sit-select,
#root_staff_internal_test .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-size: 14px;
  color: #111827;
}

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

.sit-no-record {
  margin: 8px 0 12px;
  text-align: center;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 600;
  min-height: 0;
}

.sit-table-section {
  margin-top: 8px;
}

.sit-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 40px;
}

.sit-sel-choice {
  display: inline-flex;
  align-items: center;
}

.sit-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}

#root_staff_internal_test .sit-table th,
#root_staff_internal_test .sit-table td {
  vertical-align: middle;
}

#root_staff_internal_test .aCenter {
  text-align: center;
}

#root_staff_internal_test .stdName {
  font-weight: 500;
  color: #1f2937;
}

.sit-mark-cell {
  width: 140px;
  max-width: 180px;
}

#root_staff_internal_test .sit-mark-input {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.sit-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.sit-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 8px;
}

.sit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sit-modal-hidden {
  display: none !important;
}

.sit-modal-md {
  width: 100%;
  max-width: 520px;
}

.sit-modal-form .sit-form-item {
  margin-bottom: 14px;
}

.sit-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#root_staff_internal_test label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_staff_internal_test input.error,
#root_staff_internal_test select.error {
  border: 1px solid orange;
}

#root_staff_internal_test .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_staff_internal_test .btn-danger:hover {
  background-color: #b91c1c;
}

@media (max-width: 640px) {
  .sit-page-card {
    padding: 16px;
  }

  .sit-page-title {
    font-size: 18px;
  }

  .sit-mark-cell {
    width: 110px;
  }

  #root_staff_internal_test .sit-mark-input {
    max-width: 96px;
  }

  .sit-form-actions,
  .sit-modal-actions {
    justify-content: stretch;
  }

  .sit-form-actions .sit-btn,
  .sit-modal-actions .sit-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ------------------------ Subject Taught Student Mark Update (stmu-*) ------------------------ */
#root_subject_taught_student_mark_update .stmu-page {
  width: 100%;
}

.stmu-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.stmu-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.stmu-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
}

.stmu-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}

.stmu-meta-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 12px;
  align-items: center;
}

.stmu-meta-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.stmu-meta-value {
  font-size: 15px;
  color: #05053d;
  font-weight: 500;
}

.stmu-assess-form {
  display: contents;
}

.stmu-select,
#root_subject_taught_student_mark_update .form-control {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
  width: 100%;
  max-width: 320px;
}

.stmu-results-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.stmu-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

.stmu-note {
  margin: 8px 0 12px;
  color: #4b5563;
  font-size: 14px;
}

.stmu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.stmu-table-wrap {
  overflow-x: auto;
  width: 100%;
}

#root_subject_taught_student_mark_update .stmu-table {
  width: 100%;
  min-width: 640px;
}

#root_subject_taught_student_mark_update .tableHead1 {
  font-weight: 700;
  background-color: #ecfdf5;
  color: #064e3b;
}

#root_subject_taught_student_mark_update .stmu-student-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

#root_subject_taught_student_mark_update .stmu-student-name .heading_title,
#root_subject_taught_student_mark_update .heading_title {
  font-weight: 600;
  color: #05053d;
}

#root_subject_taught_student_mark_update .stmu-student-meta {
  font-size: 13px;
  color: #6b7280;
}

.stmu-add-actions,
.stmu-download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.stmu-modal-hidden {
  display: none !important;
}

.stmu-modal-md {
  max-width: 560px;
  width: 92%;
}

.stmu-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.stmu-form-row label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.stmu-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.stmu-checkbox-list {
  display: block;
  line-height: 1.8;
}

.stmu-radio-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.stmu-drop-hidden {
  display: none;
}

#root_subject_taught_student_mark_update #addStudMarkForm label.error {
  color: red;
}

#root_subject_taught_student_mark_update #addStudMarkForm input.error {
  border: 1px solid orange;
}

#root_subject_taught_student_mark_update .stmu-results-card {
  display: none;
}

@media (max-width: 768px) {
  .stmu-meta-row {
    grid-template-columns: 1fr;
  }

  .stmu-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stmu-actions,
  .stmu-download-bar,
  .stmu-add-actions {
    justify-content: stretch;
  }

  .stmu-actions .btn,
  .stmu-download-bar .btn,
  .stmu-add-actions .btn {
    width: 100%;
  }

  #root_subject_taught_student_mark_update .stmu-select,
  #root_subject_taught_student_mark_update .form-control {
    max-width: 100%;
  }
}

@media print {
  #root_subject_taught_student_mark_update .stmu-back-btn,
  #root_subject_taught_student_mark_update .print_hide,
  #root_subject_taught_student_mark_update .stmu-actions {
    display: none !important;
  }
}

/* ===== Subject Wise Attendance Report Phase-3 polish (swar-*) append only ===== */
#root_sub_wise_attendance_report .swar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 12px;
  font-size: 13px;
  color: #4b5563;
}

#root_sub_wise_attendance_report .swar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

#root_sub_wise_attendance_report .swar-legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: #f3f4f6;
}

#root_sub_wise_attendance_report .swar-legend-present {
  color: #2342e6;
}

#root_sub_wise_attendance_report .swar-legend-absent {
  color: #e62323;
}

#root_sub_wise_attendance_report .swar-legend-hint {
  margin-left: auto;
  font-weight: 500;
  color: #9ca3af;
  font-size: 12px;
}

#root_sub_wise_attendance_report #tableHeadId th {
  vertical-align: bottom;
}

#root_sub_wise_attendance_report .swar-period-badge {
  margin-top: 8px;
}

#root_sub_wise_attendance_report thead th.swar-sticky-col,
#root_sub_wise_attendance_report tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #05053d;
  min-width: 56px;
}

#root_sub_wise_attendance_report tbody td:nth-child(1) {
  background: #fff;
  z-index: 2;
  font-weight: 600;
}

#root_sub_wise_attendance_report thead th.swar-sticky-col-name,
#root_sub_wise_attendance_report tbody td:nth-child(2) {
  position: sticky;
  left: 56px;
  z-index: 3;
  background: #05053d;
  min-width: 160px;
}

#root_sub_wise_attendance_report tbody td:nth-child(2) {
  background: #fff;
  z-index: 2;
}

#root_sub_wise_attendance_report tbody tr:nth-child(even) td:nth-child(1),
#root_sub_wise_attendance_report tbody tr:nth-child(even) td:nth-child(2) {
  background: #f9fafb;
}

@media (max-width: 640px) {
  #root_sub_wise_attendance_report .swar-legend-hint {
    margin-left: 0;
    width: 100%;
  }

  #root_sub_wise_attendance_report thead th.swar-sticky-col-name,
  #root_sub_wise_attendance_report tbody td:nth-child(2) {
    left: 48px;
    min-width: 120px;
  }
}

/* ------------------------ Staff Class Subject UX polish (scs-*) ------------------------ */
#root_staff_class_subject .scs-section-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}

#root_staff_class_subject .scs-class-actions .scs-btn {
  margin: 0;
}

#root_staff_class_subject .scs-table-wrap + .scs-table-wrap {
  margin-top: 10px;
}

#root_staff_class_subject .scs-class-block .scs-table-wrap {
  border-radius: 10px;
}

@media (max-width: 768px) {
  #root_staff_class_subject .scs-class-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #root_staff_class_subject .scs-class-actions .scs-btn {
    width: 100%;
    white-space: normal;
    justify-content: center;
  }
}

#root_subject_taught_student_mark_update .stmu-table th,
#root_subject_taught_student_mark_update .stmu-table td {
  padding: 10px 12px;
  vertical-align: top;
}

#root_subject_taught_student_mark_update .stmu-table td:first-child {
  text-align: center;
  width: 64px;
}

#root_subject_taught_student_mark_update .stmu-mark-form input.mark {
  max-width: 120px;
  margin: 0 auto;
  display: block;
}

#root_subject_taught_student_mark_update .stmu-results-header .btn {
  margin-left: 8px;
}

#root_subject_taught_student_mark_update .stmu-sel-choice {
  display: inline-flex;
  align-items: center;
}

/* ------------------------ Staff Internal Test polish (sit-*) ------------------------ */
#root_staff_internal_test .sit-page-header {
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
  margin-bottom: 18px;
}

#root_staff_internal_test .sit-table-wrap.table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  padding: 0;
  background: #fff;
}

#root_staff_internal_test .sit-table thead th {
  white-space: nowrap;
}

#root_staff_internal_test .sit-mark-value {
  font-weight: 600;
  color: #111827;
}

#root_staff_internal_test .sit-mark-absent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#root_staff_internal_test .sit-mark-empty {
  color: #9ca3af;
  font-weight: 500;
}

#root_staff_internal_test .sit-footer-actions {
  border-top: 1px solid #eef2f7;
  margin-top: 18px;
  padding-top: 16px;
}

#root_staff_internal_test .sit-filters {
  padding-bottom: 4px;
}

/* ------------------------ Staff Class Subject friendly redesign (scs-*) ------------------------ */
#root_staff_class_subject {
  background:
    radial-gradient(1200px 420px at 8% -10%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(900px 380px at 92% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
    #f3f6fb;
  min-height: calc(100vh - 58px);
}

#root_staff_class_subject .scs-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#root_staff_class_subject .scs-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0b1f3a 0%, #163a63 58%, #1d4f7a 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(11, 31, 58, 0.22);
}

#root_staff_class_subject .scs-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
}

#root_staff_class_subject .scs-hero .scs-page-title {
  color: #fff;
  font-size: 28px;
  margin: 0;
}

#root_staff_class_subject .scs-hero .scs-page-title .fa {
  color: #7dd3fc;
}

#root_staff_class_subject .scs-hero .scs-page-subtitle {
  color: #dbeafe;
  margin-top: 8px;
  max-width: 42rem;
}

#root_staff_class_subject .scs-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #bfdbfe;
}

#root_staff_class_subject .scs-hero .scs-select,
#root_staff_class_subject .scs-hero #academic_year_Term_ID {
  min-width: 240px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
}

#root_staff_class_subject .scs-quick-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

#root_staff_class_subject .scs-quick-heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

#root_staff_class_subject .scs-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

#root_staff_class_subject .scs-chip {
  gap: 8px !important;
  min-height: 40px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#root_staff_class_subject .scs-chip span {
  font-size: 13px;
  font-weight: 600;
}

#root_staff_class_subject .scs-panel {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  margin-top: 0;
}

#root_staff_class_subject .scs-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#root_staff_class_subject .scs-section-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

#root_staff_class_subject .scs-badge-sky {
  background: #e0f2fe;
  color: #0369a1;
}

#root_staff_class_subject .scs-badge-teal {
  background: #ccfbf1;
  color: #0f766e;
}

#root_staff_class_subject .scs-badge-amber {
  background: #fef3c7;
  color: #b45309;
}

#root_staff_class_subject .scs-badge-rose {
  background: #ffe4e6;
  color: #be123c;
}

#root_staff_class_subject .scs-section-title {
  font-size: 18px;
  margin: 0;
}

#root_staff_class_subject .scs-section-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}

#root_staff_class_subject .scs-section-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 14px;
}

#root_staff_class_subject .scs-table-wrap {
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fcfdff;
}

#root_staff_class_subject .scs-table thead th,
#root_staff_class_subject .college-table.scs-table thead th {
  background: #f1f5f9;
  color: #0f172a;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#root_staff_class_subject .scs-soft-btn {
  border-radius: 10px !important;
  min-width: 38px;
  min-height: 36px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#root_staff_class_subject .scs-soft-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

#root_staff_class_subject .scs-class-block {
  border: 1px solid #e8eef5;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

#root_staff_class_subject .scs-class-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#root_staff_class_subject .scs-class-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#root_staff_class_subject .scs-class-name {
  font-size: 15px;
  color: #0f172a;
}

#root_staff_class_subject .scs-class-actions {
  gap: 8px;
}

#root_staff_class_subject .scs-empty {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  margin-top: 4px;
}

#root_staff_class_subject .scs-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
  font-size: 24px;
  margin-bottom: 10px;
}

#root_staff_class_subject .scs-period-card {
  display: inline-block;
  min-width: 140px;
  padding: 10px;
  margin: 4px 0;
  border-radius: 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0c4a6e;
  line-height: 1.35;
}

#root_staff_class_subject .scs-period-head {
  background: #f8fafc;
  font-weight: 600;
  color: #334155;
}

#root_staff_class_subject .scs-day-cell {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 700;
}

#root_staff_class_subject .scs-break {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}

#root_staff_class_subject .scs-dash {
  color: #94a3b8;
}

#root_staff_class_subject .scs-schedule-table td {
  padding: 10px !important;
}

@media (max-width: 768px) {
  #root_staff_class_subject .scs-hero {
    padding: 18px;
  }

  #root_staff_class_subject .scs-hero .scs-page-title {
    font-size: 22px;
  }

  #root_staff_class_subject .scs-hero .scs-select,
  #root_staff_class_subject .scs-hero #academic_year_Term_ID {
    width: 100%;
    min-width: 0;
  }

  #root_staff_class_subject .scs-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #root_staff_class_subject .scs-chip {
    width: 100%;
    justify-content: center;
  }

  #root_staff_class_subject .scs-panel {
    padding: 14px;
  }
}

/* ------------------------ Staff Class Subject chip contrast polish (scs-*) ------------------------ */
#root_staff_class_subject .scs-quick-actions {
  gap: 10px !important;
}

#root_staff_class_subject .scs-quick-actions .scs-chip.btn-warning {
  background: #f59e0b !important;
  color: #fff !important;
}

#root_staff_class_subject .scs-quick-actions .scs-chip.btn-info {
  background: #0ea5e9 !important;
  color: #fff !important;
}

#root_staff_class_subject .scs-class-actions .scs-chip.btn-warning {
  background: #f59e0b !important;
  color: #fff !important;
}

#root_staff_class_subject .scs-class-actions .scs-chip.btn-info {
  background: #0ea5e9 !important;
  color: #fff !important;
}

#root_staff_class_subject .scs-class-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
}

/* ------------------------ Staff Class Subject visible warning/info buttons (scs-*) ------------------------ */
#root_staff_class_subject .btn-warning,
#root_staff_class_subject .scs-btn.btn-warning,
#root_staff_class_subject .scs-soft-btn.btn-warning,
#root_staff_class_subject .scs-chip.btn-warning {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
}

#root_staff_class_subject .btn-warning:hover,
#root_staff_class_subject .scs-btn.btn-warning:hover,
#root_staff_class_subject .scs-soft-btn.btn-warning:hover,
#root_staff_class_subject .scs-chip.btn-warning:hover {
  background-color: #b45309 !important;
  color: #ffffff !important;
}

#root_staff_class_subject .btn-info,
#root_staff_class_subject .scs-btn.btn-info,
#root_staff_class_subject .scs-soft-btn.btn-info,
#root_staff_class_subject .scs-chip.btn-info {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
}

#root_staff_class_subject .btn-info:hover,
#root_staff_class_subject .scs-btn.btn-info:hover,
#root_staff_class_subject .scs-soft-btn.btn-info:hover,
#root_staff_class_subject .scs-chip.btn-info:hover {
  background-color: #0369a1 !important;
  color: #ffffff !important;
}

#root_staff_class_subject .btn-warning .fa,
#root_staff_class_subject .btn-info .fa,
#root_staff_class_subject .btn-warning i,
#root_staff_class_subject .btn-info i {
  color: #ffffff !important;
}

/* ------------------------ Staff Class Subject day board timetable (scs-*) ------------------------ */
#root_staff_class_subject .scs-day-board {
  margin-top: 4px;
}

#root_staff_class_subject .scs-day-block + .scs-day-block {
  margin-top: 18px;
}

#root_staff_class_subject .scs-day-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#root_staff_class_subject .scs-day-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0f2744;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#root_staff_class_subject .scs-day-banner-hint {
  color: #64748b;
  font-size: 13px;
}

#root_staff_class_subject .scs-period-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  align-items: stretch;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

#root_staff_class_subject .scs-period-col {
  flex: 1 0 210px;
  min-width: 210px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  scroll-snap-align: start;
}

#root_staff_class_subject .scs-period-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #eff6ff 0%, #e0f2fe 100%);
  border-bottom: 1px solid #bfdbfe;
}

#root_staff_class_subject .scs-period-num {
  font-size: 13px;
  font-weight: 700;
  color: #0f2744;
}

#root_staff_class_subject .scs-period-clock {
  font-size: 12px;
  color: #0369a1;
  font-weight: 600;
}

#root_staff_class_subject .scs-period-clock .fa {
  margin-right: 4px;
}

#root_staff_class_subject .scs-period-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  flex: 1 1 auto;
  min-height: 88px;
}

#root_staff_class_subject .scs-period-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.08);
  line-height: 1.4 !important;
}

#root_staff_class_subject .scs-period-class {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}

#root_staff_class_subject .scs-period-subj {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #475569;
  word-break: break-word;
}

#root_staff_class_subject .scs-period-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#root_staff_class_subject .scs-period-action {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600;
}

#root_staff_class_subject .scs-period-action span {
  line-height: 1;
}

#root_staff_class_subject .scs-period-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

#root_staff_class_subject .scs-period-col--break {
  background: #fffbeb;
  border-color: #fcd34d;
  max-width: 180px;
  flex-basis: 160px;
  min-width: 150px;
}

#root_staff_class_subject .scs-period-col--break .scs-period-col-head {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-bottom-color: #fcd34d;
}

#root_staff_class_subject .scs-period-col--break .scs-period-num,
#root_staff_class_subject .scs-period-col--break .scs-period-clock {
  color: #92400e;
}

#root_staff_class_subject .scs-period-col--break .scs-period-col-body {
  background: #fffbeb;
  align-items: center;
  justify-content: center;
}

#root_staff_class_subject .scs-period-col--break .scs-break {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 768px) {
  #root_staff_class_subject .scs-period-col {
    flex-basis: 78vw;
    min-width: 78vw;
    max-width: 78vw;
  }

  #root_staff_class_subject .scs-period-col--break {
    flex-basis: 46vw;
    min-width: 46vw;
    max-width: 46vw;
  }
}

/* ------------------------ Upload Study Materials (usm-*) ------------------------ */
#root_upload_study_materials .usm-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
}

#root_upload_study_materials .usm-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_upload_study_materials .usm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#root_upload_study_materials .usm-page-title .fa {
  color: #2563eb;
}

#root_upload_study_materials .usm-page-subtitle {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_upload_study_materials .usm-add-wrap {
  display: flex;
  align-items: center;
}

#root_upload_study_materials .usm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600;
}

#root_upload_study_materials .usm-btn-icon {
  min-width: 38px;
  min-height: 36px;
  justify-content: center;
  padding: 8px 10px !important;
}

#root_upload_study_materials .btn-info {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0369a1 !important;
}

#root_upload_study_materials .btn-info:hover {
  background-color: #0369a1 !important;
  color: #ffffff !important;
}

#root_upload_study_materials .btn-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

#root_upload_study_materials .btn-danger:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

#root_upload_study_materials .usm-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}

#root_upload_study_materials .usm-table th {
  white-space: nowrap;
}

#root_upload_study_materials .usm-author-cell {
  text-align: center;
  min-width: 130px;
}

#root_upload_study_materials .usm-author-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

#root_upload_study_materials .usm-download-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: underline;
}

#root_upload_study_materials .usm-download-link:hover {
  color: #1d4ed8;
}

#root_upload_study_materials .usm-empty {
  text-align: center;
  padding: 36px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  margin: 8px 0 16px;
}

#root_upload_study_materials .usm-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
  font-size: 24px;
}

#root_upload_study_materials .usm-empty-hint {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_upload_study_materials .usm-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 8px;
}

#root_upload_study_materials .usm-modal-hidden {
  display: none !important;
}

#root_upload_study_materials .usm-modal-md {
  width: 100%;
  max-width: 560px;
}

#root_upload_study_materials .usm-modal-lg {
  width: 100%;
  max-width: 760px;
}

#root_upload_study_materials .usm-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  #root_upload_study_materials .usm-form-row {
    flex-direction: row;
    align-items: flex-start;
  }

  #root_upload_study_materials .usm-form-row > label {
    width: 38%;
    padding-top: 8px;
    margin-bottom: 0;
    font-weight: 600;
    color: #334155;
  }

  #root_upload_study_materials .usm-form-row > .usm-form-item {
    width: 62%;
  }
}

#root_upload_study_materials .usm-form-item select,
#root_upload_study_materials .usm-form-item input[type="text"],
#root_upload_study_materials .usm-form-item input[type="file"],
#root_upload_study_materials .usm-form-item textarea,
#root_upload_study_materials .usm-inline-edit textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;
}

#root_upload_study_materials .usm-form-item select:focus,
#root_upload_study_materials .usm-form-item input:focus,
#root_upload_study_materials .usm-form-item textarea:focus,
#root_upload_study_materials .usm-inline-edit textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_upload_study_materials .usm-file-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
}

#root_upload_study_materials .usm-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 8px 0 16px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

#root_upload_study_materials .usm-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

#root_upload_study_materials .usm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

#root_upload_study_materials .usm-modal-actions-end {
  justify-content: flex-end;
}

#root_upload_study_materials .usm-video-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

#root_upload_study_materials .usm-video-frame {
  width: 100%;
  max-width: 640px;
  height: 420px;
  border: 0;
  border-radius: 12px;
  background: #0f172a;
}

#root_upload_study_materials .usm-edit-icon {
  color: #364cec;
  margin-left: 6px;
  cursor: pointer;
}

#root_upload_study_materials .hideInfo {
  display: none;
}

#root_upload_study_materials .curPointer {
  cursor: pointer;
}

#root_upload_study_materials .queckBtnCls {
  display: inline-block;
  margin-top: 6px;
  width: 28px;
  height: 28px;
  background: #16a34a;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}

#root_upload_study_materials .queckBtnCls:before {
  content: "\f00c";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  left: 7px;
  top: 5px;
  font-size: 14px;
}

#root_upload_study_materials label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_upload_study_materials select.error,
#root_upload_study_materials input.error,
#root_upload_study_materials textarea.error {
  border: 1px solid orange;
}

@media (max-width: 768px) {
  #root_upload_study_materials .usm-page-card {
    padding: 14px;
  }

  #root_upload_study_materials .usm-page-title {
    font-size: 18px;
  }

  #root_upload_study_materials .usm-video-frame {
    height: 240px;
  }

  #root_upload_study_materials .usm-add-wrap {
    width: 100%;
  }

  #root_upload_study_materials .usm-add-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Assignment list (asgn-*) append only | Root: #root_assignment ===== */
#root_assignment {
  width: 100%;
  box-sizing: border-box;
}

#root_assignment .asgn-page {
  color: #111827;
}

#root_assignment .asgn-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_assignment .asgn-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_assignment .asgn-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.3;
  flex-wrap: wrap;
}

#root_assignment .asgn-page-title .fa {
  color: #4f46e5;
}

#root_assignment .asgn-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_assignment .asgn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#root_assignment .asgn-toolbar-left,
#root_assignment .asgn-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#root_assignment .asgn-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #eef2ff;
  color: #05053d;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

#root_assignment .asgn-action-chip .fa {
  font-size: 16px;
  color: #4f46e5;
}

#root_assignment .asgn-action-chip .addIcon {
  color: #15803d;
}

#root_assignment .asgn-action-chip .reportIconBar {
  color: #0369a1;
}

#root_assignment .asgn-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_assignment .asgn-table,
#root_assignment .college-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

#root_assignment .college-table .tableHeadClass th,
#root_assignment .college-table thead th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  border: none;
}

#root_assignment .college-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
}

#root_assignment .college-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_assignment .aCenter,
#root_assignment .acenter {
  text-align: center;
}

#root_assignment .asgn-cell {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  word-break: break-word;
}

#root_assignment .editIcon,
#root_assignment .viewIcon,
#root_assignment .deleteIcon {
  cursor: pointer;
  margin-left: 4px;
}

#root_assignment .editIcon {
  color: #2563eb;
}

#root_assignment .viewIcon {
  color: #0369a1;
}

#root_assignment .deleteIcon {
  color: #dc2626;
}

#root_assignment .hideSetting {
  display: none;
}

#root_assignment .asgn-quick-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#root_assignment .asgn-quick-actions {
  display: flex;
  justify-content: flex-end;
}

#root_assignment .asgn-no-record,
#root_assignment .norecFount {
  margin: 20px auto;
  max-width: 420px;
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
}

#root_assignment .asgn-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

#root_assignment .asgn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#root_assignment .asgn-btn-primary {
  background: #0369a1;
  color: #fff;
}

#root_assignment .asgn-btn-primary:hover {
  background: #075985;
}

#root_assignment .asgn-btn-success {
  background: #15803d;
  color: #fff;
}

#root_assignment .asgn-btn-success:hover {
  background: #166534;
}

#root_assignment .asgn-btn-danger {
  background: #dc2626;
  color: #fff;
}

#root_assignment .asgn-btn-danger:hover {
  background: #b91c1c;
}

#root_assignment .asgn-btn:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 2px;
}

#root_assignment .form-control,
#root_assignment .inpBorder {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

#root_assignment textarea.form-control,
#root_assignment textarea.inpBorder {
  min-height: 96px;
  resize: vertical;
}

#root_assignment .form-control:focus,
#root_assignment .inpBorder:focus {
  outline: none;
  border-color: #05053d;
  box-shadow: 0 0 0 3px rgba(5, 5, 61, 0.12);
}

#root_assignment .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

#root_assignment .asgn-modal-hidden {
  display: none !important;
}

#root_assignment .modal-box,
#root_assignment .asgn-modal-box {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  border: 1px solid #e5e7eb;
  padding: 18px;
}

#root_assignment .asgn-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#root_assignment .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_assignment .modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}

#root_assignment .modal-close:hover {
  color: #111827;
}

#root_assignment .asgn-form-item {
  margin-bottom: 14px;
}

#root_assignment .asgn-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

#root_assignment .asgn-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

@media (max-width: 640px) {
  #root_assignment .asgn-page-card {
    padding: 16px;
  }

  #root_assignment .asgn-page-title {
    font-size: 18px;
  }

  #root_assignment .asgn-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #root_assignment .asgn-toolbar-left,
  #root_assignment .asgn-toolbar-right,
  #root_assignment .asgn-action-chip,
  #root_assignment .asgn-footer .asgn-btn,
  #root_assignment .asgn-modal-actions .asgn-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Assignment list Phase-3 polish (asgn-*) append only ===== */
#root_assignment .asgn-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_assignment .asgn-table {
  border-radius: 12px;
  overflow: hidden;
}

#root_assignment .viewIcon,
#root_assignment .deleteIcon,
#root_assignment .editIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

#root_assignment .viewIcon:hover,
#root_assignment .editIcon:hover {
  background: #e0f2fe;
}

#root_assignment .deleteIcon:hover {
  background: #fee2e2;
}

#root_assignment .asgn-action-chip:hover {
  background: #e0e7ff;
}

#root_assignment .asgn-action-chip:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 2px;
}

#root_assignment label.error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
}

/* ------------------------ Upload Study Materials polish (usm-*) ------------------------ */
#root_upload_study_materials .usm-modal-sm {
  width: 100%;
  max-width: 420px;
}

#root_upload_study_materials .usm-table th,
#root_upload_study_materials .usm-table td,
#root_upload_study_materials .usm-cell-middle {
  vertical-align: middle !important;
}

#root_upload_study_materials .usm-type-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
}

#root_upload_study_materials .usm-type-title {
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

#root_upload_study_materials .usm-desc-wrap {
  display: flex;
  align-items: center;
  min-height: 64px;
}

#root_upload_study_materials .usm-author-cell {
  text-align: center;
  min-width: 130px;
  vertical-align: middle !important;
}

#root_upload_study_materials .usm-author-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
}

#root_upload_study_materials .usm-author-photo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

#root_upload_study_materials .usm-author-name {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: #334155;
  word-break: break-word;
  max-width: 140px;
}

#root_upload_study_materials .usm-dialog-box {
  text-align: center;
  padding: 28px 24px 22px !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
  border: 1px solid #e2e8f0;
}

#root_upload_study_materials .usm-dialog-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#root_upload_study_materials .usm-dialog-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 14px;
  font-size: 28px;
}

#root_upload_study_materials .usm-dialog-icon-success {
  background: #dcfce7;
  color: #16a34a;
}

#root_upload_study_materials .usm-dialog-icon-danger {
  background: #fee2e2;
  color: #dc2626;
}

#root_upload_study_materials .usm-dialog-icon-info {
  background: #dbeafe;
  color: #2563eb;
}

#root_upload_study_materials .usm-dialog-icon-warning {
  background: #fef3c7;
  color: #d97706;
}

#root_upload_study_materials .usm-dialog-title {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

#root_upload_study_materials .usm-dialog-message {
  margin: 0 0 20px;
  color: #475569;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  max-width: 320px;
}

#root_upload_study_materials .usm-dialog-actions {
  width: 100%;
  justify-content: center;
  margin-top: 0;
}

#root_upload_study_materials .usm-dialog-ok {
  min-width: 110px;
  justify-content: center;
}

#root_upload_study_materials .usm-dialog-close {
  color: #64748b;
}

#root_upload_study_materials .usm-dialog-box[data-usm-tone="success"] .usm-dialog-ok {
  background-color: #16a34a !important;
  border-color: #15803d !important;
}

#root_upload_study_materials .usm-dialog-box[data-usm-tone="success"] .usm-dialog-ok:hover {
  background-color: #15803d !important;
}

#root_upload_study_materials .usm-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#root_upload_study_materials .usm-table {
  min-width: 760px;
}

#root_upload_study_materials .usm-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

#root_upload_study_materials .btn-default {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

#root_upload_study_materials .btn-default:hover {
  background: #cbd5e1 !important;
}

@media (max-width: 768px) {
  #root_upload_study_materials .usm-page-header {
    flex-direction: column;
  }

  #root_upload_study_materials .usm-table-wrap::after {
    content: "Swipe sideways to see all columns";
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
  }
}

/* ------------------------ Upload Question Bank (uqb-*) ------------------------ */
#root_upload_question_bank .uqb-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
}

#root_upload_question_bank .uqb-page-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_upload_question_bank .uqb-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#root_upload_question_bank .uqb-page-title .fa {
  color: #16a34a;
}

#root_upload_question_bank .uqb-page-subtitle {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_upload_question_bank .uqb-section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

#root_upload_question_bank .uqb-upload-panel {
  margin-bottom: 22px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

#root_upload_question_bank .uqb-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

@media (min-width: 768px) {
  #root_upload_question_bank .uqb-form-grid {
    grid-template-columns: 1.4fr 1.2fr auto;
  }
}

#root_upload_question_bank .uqb-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

#root_upload_question_bank .uqb-form-item input[type="text"],
#root_upload_question_bank .uqb-form-item input[type="file"] {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;
}

#root_upload_question_bank .uqb-form-item input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_upload_question_bank .uqb-form-actions {
  display: flex;
  align-items: flex-end;
}

#root_upload_question_bank .uqb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600;
}

#root_upload_question_bank .uqb-btn-icon {
  min-width: 38px;
  min-height: 36px;
  justify-content: center;
  padding: 8px 10px !important;
}

#root_upload_question_bank .btn-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

#root_upload_question_bank .btn-danger:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

#root_upload_question_bank .uqb-list-panel {
  margin-top: 8px;
}

#root_upload_question_bank .uqb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#root_upload_question_bank .uqb-table {
  min-width: 640px;
}

#root_upload_question_bank .uqb-download-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: underline;
}

#root_upload_question_bank .uqb-download-link:hover {
  color: #1d4ed8;
}

#root_upload_question_bank .uqb-empty {
  text-align: center;
  padding: 36px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  margin-top: 8px;
}

#root_upload_question_bank .uqb-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
  font-size: 24px;
}

#root_upload_question_bank .uqb-empty-hint {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_upload_question_bank .uqb-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 8px;
}

#root_upload_question_bank .uqb-modal-hidden {
  display: none !important;
}

#root_upload_question_bank .uqb-modal-sm {
  width: 100%;
  max-width: 420px;
}

#root_upload_question_bank .uqb-dialog-message {
  margin: 8px 0 18px;
  color: #334155;
  font-size: 15px;
  line-height: 1.5;
}

#root_upload_question_bank .uqb-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 768px) {
  #root_upload_question_bank .uqb-page-card {
    padding: 14px;
  }

  #root_upload_question_bank .uqb-page-title {
    font-size: 18px;
  }

  #root_upload_question_bank .uqb-form-actions .uqb-btn {
    width: 100%;
    justify-content: center;
  }

  #root_upload_question_bank .uqb-table-wrap::after {
    content: "Swipe sideways to see all columns";
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
  }
}

/* ===== View Course Subject Syllabus (vcss-*) append only | Root: #root_view_course_subject_syllabus ===== */
#root_view_course_subject_syllabus {
  min-height: 100%;
  overflow-x: hidden;
}

#root_view_course_subject_syllabus #unitHead {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#root_view_course_subject_syllabus .vcss-page {
  width: 100%;
}

#root_view_course_subject_syllabus .vcss-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
}

#root_view_course_subject_syllabus .vcss-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_view_course_subject_syllabus .vcss-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#root_view_course_subject_syllabus .vcss-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#root_view_course_subject_syllabus .vcss-actions .addIcon,
#root_view_course_subject_syllabus .vcss-actions .uploadIcon {
  cursor: pointer;
  font-size: 20px;
  color: #2563eb;
}

#root_view_course_subject_syllabus .vcss-actions .btn-primary {
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 14px;
}

#root_view_course_subject_syllabus .Hdw6tb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#root_view_course_subject_syllabus .vcss-empty,
#root_view_course_subject_syllabus #noUnitHeadAvailable {
  text-align: center;
  padding: 36px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  margin-top: 12px;
}

#root_view_course_subject_syllabus .noRecFoundsCls,
#root_view_course_subject_syllabus .norecFount {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}

#root_view_course_subject_syllabus .vcss-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 8px 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_view_course_subject_syllabus .college-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

#root_view_course_subject_syllabus .college-table .tableHeadClass th,
#root_view_course_subject_syllabus .college-table thead th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}

#root_view_course_subject_syllabus .college-table td {
  padding: 10px 12px;
  border-top: 1px solid #eef2f7;
  vertical-align: middle;
}

#root_view_course_subject_syllabus .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

.vcss-modal-hidden,
#root_view_course_subject_syllabus .vcss-modal-hidden {
  display: none !important;
}

#root_view_course_subject_syllabus .modal-box {
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  border: 1px solid #e5e7eb;
  padding: 18px;
  position: relative;
}

#root_view_course_subject_syllabus .vcss-modal-md {
  max-width: 560px;
}

#root_view_course_subject_syllabus .vcss-modal-lg {
  max-width: 900px;
}

#root_view_course_subject_syllabus .vcss-modal-xl {
  max-width: 800px;
}

#root_view_course_subject_syllabus .modal-title {
  margin: 0 28px 14px 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_view_course_subject_syllabus .modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}

#root_view_course_subject_syllabus .modal-close:hover {
  color: #111827;
}

#root_view_course_subject_syllabus .vcss-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  #root_view_course_subject_syllabus .vcss-form-row {
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 12px;
  }

  #root_view_course_subject_syllabus .vcss-form-row > label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
  }
}

#root_view_course_subject_syllabus .vcss-form-row > label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

#root_view_course_subject_syllabus .vcss-form-item {
  min-width: 0;
}

#root_view_course_subject_syllabus .vcss-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#root_view_course_subject_syllabus .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

#root_view_course_subject_syllabus .form-control:focus {
  outline: none;
  border-color: #05053d;
  box-shadow: 0 0 0 3px rgba(5, 5, 61, 0.12);
}

#root_view_course_subject_syllabus .vcss-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

#root_view_course_subject_syllabus .vcss-modal-actions-end,
#root_view_course_subject_syllabus .rightCls {
  justify-content: flex-end;
}

#root_view_course_subject_syllabus .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
}

#root_view_course_subject_syllabus .btn-success {
  background-color: #15803d !important;
  color: #ffffff !important;
  border: none;
}

#root_view_course_subject_syllabus .btn-success:hover {
  background-color: #166534 !important;
}

#root_view_course_subject_syllabus .btn-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border: none;
}

#root_view_course_subject_syllabus .btn-danger:hover {
  background-color: #b91c1c !important;
}

#root_view_course_subject_syllabus .btn-primary {
  background-color: #0369a1 !important;
  color: #ffffff !important;
  border: none;
}

#root_view_course_subject_syllabus .btn-primary:hover {
  background-color: #075985 !important;
}

#root_view_course_subject_syllabus .saveIcon,
#root_view_course_subject_syllabus .closeIcon {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

#root_view_course_subject_syllabus .saveIcon {
  color: #15803d;
}

#root_view_course_subject_syllabus .closeIcon {
  color: #dc2626;
}

#root_view_course_subject_syllabus .vcss-drop-hidden,
#root_view_course_subject_syllabus #drop.vcss-drop-hidden {
  display: none !important;
}

/* Doc card styles for #sylabusDocId */
#root_view_course_subject_syllabus #sylabusDocId {
  margin-top: 18px;
}

#root_view_course_subject_syllabus #sylabusDocId .headTitle {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

#root_view_course_subject_syllabus #sylabusDocId .borders,
#root_view_course_subject_syllabus #sylabusDocId .docPad3,
#root_view_course_subject_syllabus #StudMatSyllsDoc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

#root_view_course_subject_syllabus #sylabusDocId .docTextPad {
  flex: 1 1 180px;
  min-width: 0;
  word-break: break-word;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}

#root_view_course_subject_syllabus #sylabusDocId .docIconPad {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#root_view_course_subject_syllabus #sylabusDocId .downloadIcon,
#root_view_course_subject_syllabus #sylabusDocId .deleteIcon {
  cursor: pointer;
  font-size: 18px;
}

#root_view_course_subject_syllabus #sylabusDocId .downloadIcon {
  color: #2563eb;
}

#root_view_course_subject_syllabus #sylabusDocId .deleteIcon {
  color: #dc2626;
}

#root_view_course_subject_syllabus .vcss-image-wrap #photo,
#root_view_course_subject_syllabus #photo.height500px {
  max-width: 100%;
  max-height: 500px;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

#root_view_course_subject_syllabus .vcss-video-wrap,
#root_view_course_subject_syllabus #studMatId {
  width: 100%;
  min-height: 120px;
}

#root_view_course_subject_syllabus #myNicPanel,
#root_view_course_subject_syllabus #myInstance1 {
  margin-bottom: 10px;
}

#root_view_course_subject_syllabus #myInstance1 {
  min-height: 120px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

#root_view_course_subject_syllabus .vcss-doc-section {
  margin-top: 16px;
}

#root_view_course_subject_syllabus .vcss-doc-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

#root_view_course_subject_syllabus .vcss-doc-name {
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

#root_view_course_subject_syllabus .vcss-doc-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#root_view_course_subject_syllabus .vcss-unit-table {
  margin-bottom: 12px;
}

#root_view_course_subject_syllabus .noSubtopics {
  color: #64748b;
  font-size: 13px;
  padding: 8px 0 12px 8px;
}

/* Validation error styles */
#root_view_course_subject_syllabus label.error {
  display: block;
  margin-top: 4px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}

#root_view_course_subject_syllabus input.error,
#root_view_course_subject_syllabus select.error,
#root_view_course_subject_syllabus textarea.error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

@media (max-width: 768px) {
  #root_view_course_subject_syllabus .vcss-page-card {
    padding: 14px;
  }

  #root_view_course_subject_syllabus .vcss-page-title {
    font-size: 18px;
  }

  #root_view_course_subject_syllabus .vcss-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  #root_view_course_subject_syllabus .vcss-actions {
    width: 100%;
  }

  #root_view_course_subject_syllabus .vcss-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }

  #root_view_course_subject_syllabus .vcss-modal-actions .btn {
    width: 100%;
    justify-content: center;
  }

  #root_view_course_subject_syllabus .vcss-table-wrap::after {
    content: "Swipe sideways to see all columns";
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
  }

  #root_view_course_subject_syllabus #sylabusDocId .borders,
  #root_view_course_subject_syllabus #StudMatSyllsDoc {
    max-width: 100%;
  }
}

/* ===== Staff Question (sq-*) append only | Root: #root_staff_question ===== */
#root_staff_question {
  width: 100%;
  box-sizing: border-box;
}

#root_staff_question .sq-page {
  color: #111827;
}

#root_staff_question .sq-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_staff_question .sq-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_staff_question .sq-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}

#root_staff_question .sq-page-title .fa {
  color: #4f46e5;
}

#root_staff_question .sq-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_staff_question .sq-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  #root_staff_question .sq-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_staff_question .sq-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
}

#root_staff_question .sq-filter-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

#root_staff_question .sq-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#root_staff_question .form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
}

#root_staff_question .form-control:focus {
  outline: none;
  border-color: #05053d;
  box-shadow: 0 0 0 3px rgba(5, 5, 61, 0.12);
}

#root_staff_question .sq-btn,
#root_staff_question .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
}

#root_staff_question .sq-btn-success,
#root_staff_question .btn-success {
  background: #15803d;
}

#root_staff_question .sq-btn-success:hover,
#root_staff_question .btn-success:hover {
  background: #166534;
}

#root_staff_question .sq-btn-danger,
#root_staff_question .btn-danger {
  background: #dc2626;
}

#root_staff_question .sq-btn-danger:hover,
#root_staff_question .btn-danger:hover {
  background: #b91c1c;
}

#root_staff_question .sq-btn-primary,
#root_staff_question .btn-primary,
#root_staff_question .btn-info {
  background: #0369a1;
}

#root_staff_question .sq-btn-primary:hover,
#root_staff_question .btn-primary:hover,
#root_staff_question .btn-info:hover {
  background: #075985;
}

#root_staff_question .sq-no-record {
  margin: 24px auto;
  max-width: 420px;
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed #fecaca;
  border-radius: 12px;
  background: #fef2f2;
}

#root_staff_question .sq-no-record h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #dc2626;
}

#root_staff_question .box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 14px 16px;
  margin: 12px 0 18px;
}

#root_staff_question .box-header {
  width: 100%;
}

#root_staff_question .paddingClass {
  padding: 6px 0;
}

#root_staff_question .hrClass {
  border-top: 1px solid #e5e7eb;
  margin: 10px 0;
  height: 0;
}

#root_staff_question .labelClass {
  font-weight: 700;
  color: #374151;
  font-size: 13px;
}

#root_staff_question .pClass {
  margin: 0;
  color: #111827;
  line-height: 1.5;
  word-break: break-word;
}

#root_staff_question .col-md-12 {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

#root_staff_question .col-md-1,
#root_staff_question .col-md-2,
#root_staff_question .col-md-3,
#root_staff_question .col-md-4,
#root_staff_question .col-md-5,
#root_staff_question .col-md-6,
#root_staff_question .col-md-7,
#root_staff_question .col-md-8,
#root_staff_question .col-md-9,
#root_staff_question .col-md-10 {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding-right: 8px;
}

#root_staff_question .col-md-1 { width: 8.333%; }
#root_staff_question .col-md-2 { width: 16.666%; }
#root_staff_question .col-md-3 { width: 25%; }
#root_staff_question .col-md-4 { width: 33.333%; }
#root_staff_question .col-md-5 { width: 41.666%; }
#root_staff_question .col-md-6 { width: 50%; }
#root_staff_question .col-md-7 { width: 58.333%; }
#root_staff_question .col-md-8 { width: 66.666%; }
#root_staff_question .col-md-9 { width: 75%; }
#root_staff_question .col-md-10 { width: 83.333%; }

#root_staff_question .pull-right {
  float: right;
  margin-left: 6px;
}

#root_staff_question .pull-left {
  float: left;
}

#root_staff_question input[type='radio'] {
  transform: scale(1.35);
  margin: 0 10px;
  accent-color: #0369a1;
}

#root_staff_question .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

#root_staff_question .sq-modal-hidden {
  display: none !important;
}

#root_staff_question .modal-box {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  border: 1px solid #e5e7eb;
  padding: 18px;
}

#root_staff_question .sq-modal-xl {
  max-width: min(1100px, 96vw);
}

#root_staff_question .sq-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#root_staff_question .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_staff_question .modal-close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}

#root_staff_question .sq-form-item {
  margin-bottom: 14px;
}

#root_staff_question .sq-form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

#root_staff_question .sq-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

#root_staff_question .sq-template-download {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

#root_staff_question .download-cubutton1 {
  position: relative;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

#root_staff_question .download-cubutton1 .docs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #242a35;
}

#root_staff_question .download-cubutton1 .download {
  display: none;
}

#root_staff_question .sq-equation-editor {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #f9fafb;
  margin-bottom: 12px;
  overflow-x: auto;
}

#root_staff_question .sq-drop-zone {
  display: none;
}

#root_staff_question .sq-hidden-template {
  position: absolute;
  left: -9999px;
  top: 0;
  height: 0;
  overflow: hidden;
}

#root_staff_question .nicEdit-main {
  min-height: 120px !important;
  width: 100% !important;
  box-sizing: border-box;
}

#root_staff_question #addQuestionId {
  margin-top: 12px;
}

@media (max-width: 900px) {
  #root_staff_question .col-md-1,
  #root_staff_question .col-md-2,
  #root_staff_question .col-md-3,
  #root_staff_question .col-md-4,
  #root_staff_question .col-md-5,
  #root_staff_question .col-md-6,
  #root_staff_question .col-md-7,
  #root_staff_question .col-md-8,
  #root_staff_question .col-md-9,
  #root_staff_question .col-md-10 {
    width: 100%;
    display: block;
    padding-right: 0;
  }

  #root_staff_question .pull-right {
    float: none;
    margin: 6px 4px 0 0;
  }
}

@media (max-width: 640px) {
  #root_staff_question .sq-page-card {
    padding: 16px;
  }

  #root_staff_question .sq-page-title {
    font-size: 18px;
  }

  #root_staff_question .sq-filter-actions,
  #root_staff_question .sq-filter-actions .sq-btn,
  #root_staff_question .sq-modal-actions .sq-btn {
    width: 100%;
  }
}

/* ------------------------ Outcome Based Profile (obp-*) ------------------------ */
#root_outcome_based_profile .pro-submenu-icon.fa {
  width: auto;
  height: auto;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#root_outcome_based_profile .pro-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_outcome_based_profile .pro-sidebar::-webkit-scrollbar {
  display: none;
}

.obp-layout {
  min-height: calc(100vh - 64px);
}

.obp-sidebar {
  flex-shrink: 0;
}

.obp-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

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

.obp-menu li {
  margin: 0;
}

.obp-menu-link {
  width: 100%;
}

.obp-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.obp-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.obp-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.obp-panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
}

.obp-section-note,
#root_outcome_based_profile .term_head_title {
  margin: 6px 0 0;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

#root_outcome_based_profile #courseSubjectSpn h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

.obp-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.obp-filter-form {
  margin-bottom: 16px;
}

.obp-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
  align-items: end;
}

.obp-filter-label,
.obp-form-item > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  line-height: 1.3;
}

.obp-form-item-grow {
  min-width: 0;
}

.obp-form-item-action {
  display: flex;
  align-items: flex-end;
}

#root_outcome_based_profile .form-control,
#root_outcome_based_profile select.form-control,
#root_outcome_based_profile input.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-size: 14px;
  color: #111827;
}

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

.obp-readonly {
  display: flex;
  align-items: center;
  min-height: 40px;
  background: #f9fafb !important;
  color: #374151;
  font-weight: 500;
}

.obp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.obp-table-wrap,
#root_outcome_based_profile .center-table {
  overflow-x: auto;
  width: 100%;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
}

.obp-table,
#root_outcome_based_profile .college-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.obp-no-record {
  text-align: center;
  color: #b91c1c;
  padding: 20px 16px;
  font-weight: 600;
  font-size: 14px;
}

.obp-no-record .noRecFoundsCls {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #b91c1c;
}

.obp-dynamic-block {
  margin-top: 10px;
}

.obp-student-select {
  max-width: 280px;
  margin: 0 0 14px auto;
}

.obp-part-title .term_head_title {
  margin: 14px 0 8px;
  padding: 8px 12px;
  background: #eef2ff;
  border-radius: 8px;
  color: #3730a3;
}

.obp-submit-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.obp-inline-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
}

.obp-inline-edit .input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#root_outcome_based_profile .editIcon {
  margin-left: 8px;
  cursor: pointer;
  color: #2563eb;
}

#root_outcome_based_profile .hideInfo {
  display: none;
}

.obp-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .obp-action-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.obp-action-btn,
#root_outcome_based_profile .custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  color: #ffffff;
  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
  border: none;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.obp-action-btn:hover,
#root_outcome_based_profile .custom-button:hover {
  opacity: 0.95;
  box-shadow: 0 8px 18px rgba(15, 12, 41, 0.25);
  transform: translateY(-1px);
}

.obp-action-btn i,
#root_outcome_based_profile .custom-button i {
  font-size: 15px;
}

.obp-modal-hidden {
  display: none !important;
}

.obp-modal-md {
  width: 100%;
  max-width: 520px;
}

.obp-modal-form .obp-form-item {
  margin-bottom: 14px;
}

.obp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#root_outcome_based_profile label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_outcome_based_profile input.error,
#root_outcome_based_profile select.error {
  border: 1px solid orange;
}

#root_outcome_based_profile .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_outcome_based_profile .btn-danger:hover {
  background-color: #b91c1c;
}

#root_outcome_based_profile .aCenter {
  text-align: center;
}

@media (max-width: 900px) {
  #root_outcome_based_profile .obp-layout {
    flex-direction: column;
    min-height: auto;
  }

  #root_outcome_based_profile .pro-sidebar,
  #root_outcome_based_profile .obp-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  #root_outcome_based_profile .obp-main {
    padding: 14px;
  }

  #root_outcome_based_profile .pro-header-title {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .obp-page-card {
    padding: 16px;
  }

  .obp-panel-title {
    font-size: 18px;
  }

  .obp-form-item-action,
  .obp-modal-actions,
  .obp-submit-wrap {
    justify-content: stretch;
  }

  .obp-form-item-action .obp-btn,
  .obp-modal-actions .obp-btn,
  .obp-submit-wrap .obp-btn {
    width: 100%;
    justify-content: center;
  }

  .obp-student-select {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ------------------------ Outcome Based Profile polish (obp-*) ------------------------ */
#root_outcome_based_profile .obp-table-wrap.table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  padding: 0;
}

#root_outcome_based_profile .obp-section-note {
  margin-top: 8px;
}

#root_outcome_based_profile .admin-menu .pro-submenu-link.active {
  background-color: #e0e7ff;
  color: #3730a3;
  font-weight: 600;
}

#root_outcome_based_profile .obp-action-grid {
  max-width: 820px;
}

#root_outcome_based_profile .obp-panel-header {
  align-items: center;
}

#root_outcome_based_profile #dispQuestionAndMarksId input[type='number'] {
  max-width: 110px;
  margin: 0 auto;
  text-align: center;
}

/* ===== Staff Question Phase-3 polish (sq-*) append only ===== */
#root_staff_question .sq-question-list > div > b,
#root_staff_question .sq-question-list > div > B {
  display: inline-block;
  margin: 4px 0 2px;
  font-size: 14px;
  color: #05053d;
}

#root_staff_question .box::after {
  content: '';
  display: table;
  clear: both;
}

#root_staff_question .box .btn,
#root_staff_question .box .sq-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
}

#root_staff_question .sq-filters-wrap {
  margin-bottom: 8px;
}

#root_staff_question #addQuestionId textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

#root_staff_question .sq-add-panel {
  margin-top: 8px;
}

#root_staff_question .download-cubutton1:hover .docs {
  background: #111827;
}

#root_staff_question .modal-close:hover {
  color: #111827;
}

#root_staff_question .sq-btn:focus-visible,
#root_staff_question .btn:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 2px;
}

#root_view_course_subject_syllabus .vcss-modal-actions .saveIcon,
#root_view_course_subject_syllabus .modal-box .saveIcon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #16a34a;
  color: #fff !important;
  cursor: pointer;
  font-style: normal;
  font-weight: 600;
}

#root_view_course_subject_syllabus .vcss-modal-actions .closeIcon,
#root_view_course_subject_syllabus .modal-box .closeIcon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff !important;
  cursor: pointer;
  font-style: normal;
  font-weight: 600;
}

#root_view_course_subject_syllabus .editIcon,
#root_view_course_subject_syllabus .addIcon,
#root_view_course_subject_syllabus .deleteIcon,
#root_view_course_subject_syllabus .viewIcon,
#root_view_course_subject_syllabus .downloadIcon,
#root_view_course_subject_syllabus .uploadIcon {
  cursor: pointer;
  margin: 0 4px;
}

#root_view_course_subject_syllabus .arrowEnable {
  color: #2563eb;
  cursor: pointer;
}

#root_view_course_subject_syllabus .arrowDisable {
  color: #cbd5e1;
}

/* ------------------------ Class Test Profile staff (ctp-*) ------------------------ */
#root_class_test_profile .ctp-layout {
  min-height: calc(100vh - 80px);
}

#root_class_test_profile .ctp-sidebar {
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#root_class_test_profile .ctp-sidebar::-webkit-scrollbar {
  display: none;
}

#root_class_test_profile .ctp-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#root_class_test_profile .ctp-menu li {
  margin: 0;
}

#root_class_test_profile .ctp-menu-link {
  width: 100%;
}

#root_class_test_profile .ctp-main {
  min-width: 0;
}

#root_class_test_profile .ctp-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#root_class_test_profile .ctp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#root_class_test_profile .ctp-panel-title {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
}

#root_class_test_profile .ctp-panel-header .ctp-panel-title {
  margin-bottom: 0;
}

#root_class_test_profile .ctp-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  gap: 12px;
  margin-bottom: 16px;
}

#root_class_test_profile .ctp-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

#root_class_test_profile .ctp-select,
#root_class_test_profile .ctp-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff;
  color: #111827;
}

#root_class_test_profile .ctp-select:focus,
#root_class_test_profile .ctp-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#root_class_test_profile .ctp-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_class_test_profile .ctp-table {
  width: 100%;
  min-width: 560px;
}

#root_class_test_profile .ctp-table th,
#root_class_test_profile .ctp-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

#root_class_test_profile .ctp-empty {
  margin-top: 12px;
  text-align: center;
  color: #6b7280;
}

#root_class_test_profile .ctp-note {
  margin: 0 0 12px;
  color: #374151;
  font-size: 0.9rem;
}

#root_class_test_profile .ctp-actions-right {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

#root_class_test_profile .ctp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px !important;
  font-weight: 600;
}

#root_class_test_profile .btn-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

#root_class_test_profile .btn-danger:hover {
  background-color: #b91c1c !important;
}

#root_class_test_profile .ctp-flex-center {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

#root_class_test_profile .ctp-box-btn {
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}

#root_class_test_profile .ctp-box {
  width: 300px;
  max-width: 90vw;
  display: block;
  overflow: hidden;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  transition: 0.5s linear;
  background: transparent;
}

#root_class_test_profile .ctp-box:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(100%);
}

#root_class_test_profile .ctp-box:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  transform: translateX(-100%);
}

#root_class_test_profile .ctp-box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#root_class_test_profile .ctp-box:hover:before {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: 0.3s transform linear, 0.3s height linear 0.3s;
}

#root_class_test_profile .ctp-box:hover:after {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: 0.3s transform linear, 0.3s height linear 0.5s;
}

#root_class_test_profile .ctp-modal-hidden {
  display: none !important;
}

#root_class_test_profile .ctp-modal-box {
  width: 100%;
  max-width: 520px;
}

#root_class_test_profile .ctp-modal-sm {
  width: 100%;
  max-width: 420px;
}

#root_class_test_profile .ctp-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  #root_class_test_profile .ctp-form-row {
    flex-direction: row;
    align-items: center;
  }

  #root_class_test_profile .ctp-form-row > label {
    width: 42%;
    margin-bottom: 0;
    font-weight: 600;
  }

  #root_class_test_profile .ctp-form-row > input,
  #root_class_test_profile .ctp-form-row > select,
  #root_class_test_profile .ctp-form-row > .ctp-radio-row {
    width: 58%;
  }
}

#root_class_test_profile .ctp-radio-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

#root_class_test_profile .ctp-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #334155;
}

#root_class_test_profile .ctp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

#root_class_test_profile .ctp-dialog-message {
  margin: 8px 0 18px;
  color: #334155;
  font-size: 15px;
  line-height: 1.5;
}

#root_class_test_profile label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

@media (max-width: 900px) {
  #root_class_test_profile .ctp-layout {
    flex-direction: column;
  }

  #root_class_test_profile .ctp-sidebar {
    width: 100%;
    max-height: 240px;
  }

  #root_class_test_profile .ctp-page-card {
    padding: 14px;
  }
}

/* ------------------------ Attendance Staff (ascal-*) ------------------------ */
#root_attendance_staff {
  overflow-x: hidden;
}

#root_attendance_staff .ascal-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

#root_attendance_staff .ascal-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

#root_attendance_staff .ascal-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
}

#root_attendance_staff .ascal-calendar-wrap {
  width: 100%;
}

#root_attendance_staff .ascal-month-block {
  margin-bottom: 24px;
  text-align: center;
}

#root_attendance_staff .ascal-month-title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_attendance_staff .ascal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

#root_attendance_staff .ascal-cal-table {
  width: 100%;
  min-width: 640px;
  table-layout: fixed;
  margin-bottom: 0;
}

#root_attendance_staff .ascal-cal-table th.tablesetUp {
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 700;
  text-align: center;
  padding: 10px 6px;
  width: 14.28%;
}

#root_attendance_staff .ascal-day-cell {
  height: 88px;
  vertical-align: top;
  padding: 6px 8px;
  position: relative;
}

#root_attendance_staff .ascal-day-num {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

#root_attendance_staff .ascal-day-status {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
}

#root_attendance_staff .ascal-month-summary {
  margin-top: 10px;
  font-size: 14px;
  color: #374151;
}

#root_attendance_staff .ascal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: center;
  margin-top: 20px;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

#root_attendance_staff .ascal-stat {
  font-size: 15px;
  color: #0f172a;
}

#root_attendance_staff .ascal-empty {
  text-align: center;
  padding: 32px 16px;
  color: #64748b;
  font-weight: 600;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

@media (max-width: 768px) {
  #root_attendance_staff .ascal-page-card {
    padding: 14px;
  }

  #root_attendance_staff .ascal-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  #root_attendance_staff .ascal-back-btn {
    width: 100%;
  }

  #root_attendance_staff .ascal-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ------------------------ Leave Request (lrq-*) ------------------------ */
.lrq-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.lrq-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

.lrq-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lrq-staff-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.lrq-photo,
#root_leave_request img.img-thumbnail {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.lrq-staff-meta {
  min-width: 0;
}

.lrq-staff-name,
#root_leave_request #staffName {
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
}

.lrq-staff-role,
#root_leave_request #designation {
  margin-top: 4px;
  font-size: 14px;
  color: #6b7280;
}

.lrq-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lrq-section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #05053d;
}

.lrq-request-action {
  display: inline-flex;
}

.lrq-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}

#root_leave_request .lrq-table-wrap.table-container {
  box-shadow: none;
  border: 1px solid #e5e7eb;
  padding: 0;
}

.lrq-table {
  width: 100%;
  min-width: 640px;
}

.lrq-no-record {
  margin: 16px 0;
  text-align: center;
  color: #b91c1c;
  font-weight: 600;
}

.lrq-no-record h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #b91c1c;
}

.lrq-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.lrq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.lrq-icon-btn {
  min-width: 40px;
  justify-content: center;
}

.lrq-modal-hidden {
  display: none !important;
}

.lrq-modal-lg {
  width: 100%;
  max-width: 720px;
}

.lrq-modal-form {
  margin-top: 8px;
}

.lrq-date-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .lrq-date-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.lrq-form-item {
  margin-bottom: 12px;
}

.lrq-form-item label,
.lrq-summary-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_leave_request .form-control,
#root_leave_request input.form-control,
#root_leave_request select.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-size: 14px;
}

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

.lrq-half {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.lrq-half label {
  margin: 0;
  font-size: 13px;
}

.lrq-half select {
  min-width: 140px;
  flex: 1 1 140px;
}

.lrq-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.lrq-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .lrq-summary {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.lrq-summary-item div {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

#root_leave_request label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_leave_request input.error,
#root_leave_request select.error {
  border: 1px solid orange;
}

#root_leave_request .btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}

#root_leave_request .btn-danger:hover {
  background-color: #b91c1c;
}

#root_leave_request .aCenter {
  text-align: center;
}

@media (max-width: 640px) {
  .lrq-page-card {
    padding: 16px;
  }

  .lrq-page-title {
    font-size: 18px;
  }

  .lrq-modal-actions,
  .lrq-section-header {
    justify-content: stretch;
  }

  .lrq-modal-actions .lrq-btn,
  .lrq-request-action .lrq-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------ Staff Timetable (stt-*) ------------------------ */
#root_staff_timetable .stt-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
}

#root_staff_timetable .stt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_staff_timetable .stt-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_staff_timetable .stt-page-title .fa {
  color: #2563eb;
}

#root_staff_timetable .stt-page-subtitle {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_staff_timetable .stt-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#root_staff_timetable .stt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600;
}

#root_staff_timetable .stt-filter-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

#root_staff_timetable .stt-field {
  width: 100%;
  max-width: 320px;
}

#root_staff_timetable .stt-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

#root_staff_timetable .stt-select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;
}

#root_staff_timetable .stt-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#root_staff_timetable .stt-day-board {
  margin-top: 4px;
}

#root_staff_timetable .stt-day-block + .stt-day-block {
  margin-top: 18px;
}

#root_staff_timetable .stt-day-banner {
  margin-bottom: 10px;
}

#root_staff_timetable .stt-day-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0f2744;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#root_staff_timetable .stt-period-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  align-items: stretch;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

#root_staff_timetable .stt-period-col {
  flex: 1 0 200px;
  min-width: 200px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  scroll-snap-align: start;
}

#root_staff_timetable .stt-period-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #eff6ff 0%, #e0f2fe 100%);
  border-bottom: 1px solid #bfdbfe;
}

#root_staff_timetable .stt-period-num {
  font-size: 13px;
  font-weight: 700;
  color: #0f2744;
}

#root_staff_timetable .stt-period-clock {
  font-size: 12px;
  color: #0369a1;
  font-weight: 600;
}

#root_staff_timetable .stt-period-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  flex: 1 1 auto;
  min-height: 72px;
}

#root_staff_timetable .stt-period-card {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #bae6fd;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.08);
  line-height: 1.4;
}

#root_staff_timetable .stt-period-class {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}

#root_staff_timetable .stt-period-subj {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  word-break: break-word;
}

#root_staff_timetable .stt-period-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

#root_staff_timetable .stt-period-col--break {
  background: #fffbeb;
  border-color: #fcd34d;
  max-width: 180px;
  flex-basis: 160px;
  min-width: 150px;
}

#root_staff_timetable .stt-period-col--break .stt-period-col-head {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-bottom-color: #fcd34d;
}

#root_staff_timetable .stt-period-col--break .stt-period-num,
#root_staff_timetable .stt-period-col--break .stt-period-clock {
  color: #92400e;
}

#root_staff_timetable .stt-period-col--break .stt-period-col-body {
  background: #fffbeb;
  align-items: center;
  justify-content: center;
}

#root_staff_timetable .stt-break {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

#root_staff_timetable .stt-empty {
  text-align: center;
  padding: 36px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  margin: 8px 0 16px;
}

#root_staff_timetable .stt-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
  font-size: 24px;
}

#root_staff_timetable .stt-empty-hint {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_staff_timetable .stt-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-top: 8px;
}

@media (max-width: 768px) {
  #root_staff_timetable .stt-page-card {
    padding: 14px;
  }

  #root_staff_timetable .stt-page-title {
    font-size: 18px;
  }

  #root_staff_timetable .stt-header-actions {
    width: 100%;
  }

  #root_staff_timetable .stt-header-actions .stt-btn,
  #root_staff_timetable .stt-header-actions a {
    width: 100%;
  }

  #root_staff_timetable .stt-header-actions a .stt-btn {
    width: 100%;
    justify-content: center;
  }

  #root_staff_timetable .stt-period-col {
    flex-basis: 78vw;
    min-width: 78vw;
    max-width: 78vw;
  }

  #root_staff_timetable .stt-period-col--break {
    flex-basis: 46vw;
    min-width: 46vw;
    max-width: 46vw;
  }
}

/* Attendance Staff calendar day status colors (ascal / legacy class names scoped) */
#root_attendance_staff .presentClass {
  font-weight: 700;
  background-color: #B2FBB2 !important;
}
#root_attendance_staff .weekHolidayCal {
  font-weight: 700;
  text-align: center;
  background-color: #FAEBD7 !important;
}
#root_attendance_staff .fullAbcent {
  text-align: center;
  background-color: #F9A2A2 !important;
}
#root_attendance_staff .holidayCallist {
  text-align: center;
  background-color: #D3D3D3 !important;
}
#root_attendance_staff .halfdayCal {
  text-align: center;
  background-color: #FB9E7C !important;
}
#root_attendance_staff .ascal-cal-table.college-table thead th {
  border-bottom: 1px solid #d1d5db;
}
#root_attendance_staff .ascal-cal-table.college-table td {
  border: 1px solid #e5e7eb;
}

/* Attendance Staff UI polish */
#root_attendance_staff .ascal-day-status {
  word-break: break-word;
  line-height: 1.25;
  max-width: 100%;
}
#root_attendance_staff .ascal-day-status a,
#root_attendance_staff .ascal-day-cell a {
  color: inherit;
  text-decoration: none;
}
#root_attendance_staff .ascal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#root_attendance_staff .ascal-calendar-list:empty::before {
  content: none;
}

/* ------------------------ Leave Request polish (lrq-*) ------------------------ */
#root_leave_request .lrq-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

#root_leave_request .lrq-status-pending {
  background: #fef3c7;
  color: #92400e;
}

#root_leave_request .lrq-status-approved {
  background: #dcfce7;
  color: #166534;
}

#root_leave_request .lrq-status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

#root_leave_request .lrq-status-default {
  background: #e5e7eb;
  color: #374151;
}

#root_leave_request .lrq-section-header {
  margin-top: 4px;
}


/* ===== Staff Profile My Profile (stpr-*) append only | Root: #root_staff_profile ===== */
#root_staff_profile {
  width: 100%;
  box-sizing: border-box;
}

#root_staff_profile .stpr-page {
  color: #111827;
}

#root_staff_profile .stpr-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#root_staff_profile .stpr-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_staff_profile .stpr-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
}

#root_staff_profile .stpr-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_staff_profile .stpr-section-title {
  margin: 28px 0 12px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #05053d;
  border-radius: 10px;
  clear: both;
}

#root_staff_profile .row.col-md-12 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#root_staff_profile .stpr-photo,
#root_staff_profile img.photo {
  width: 120px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  background: #f3f4f6;
  display: block;
  margin-left: auto;
}

#root_staff_profile .upload {
  text-align: right;
  margin-top: 8px;
}

#root_staff_profile .stpr-field-row {
  border-bottom: 1px solid #f3f4f6;
  padding: 10px 0;
}

#root_staff_profile .stpr-field-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
}

#root_staff_profile .stpr-field-label,
#root_staff_profile .bordalng {
  flex: 0 0 200px;
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin: 0;
}

#root_staff_profile .stpr-field-value,
#root_staff_profile .bordalng1 {
  flex: 1 1 220px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  word-break: break-word;
  min-height: 22px;
}

#root_staff_profile .col-md-12 {
  width: 100%;
  float: none;
  clear: both;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0 8px;
}

#root_staff_profile .stpr-table,
#root_staff_profile .college-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

#root_staff_profile .college-table .tableHeadClass th,
#root_staff_profile .college-table thead th,
#root_staff_profile .college-table tr.tableHeadClass th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  border: none;
}

#root_staff_profile .college-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
}

#root_staff_profile .college-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_staff_profile .aCenter,
#root_staff_profile .acenter,
#root_staff_profile .htdCenterCss {
  text-align: center;
}

#root_staff_profile .norecFount {
  margin: 16px auto;
  max-width: 420px;
  text-align: center;
  padding: 20px 14px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
}

#root_staff_profile .addIcon,
#root_staff_profile .editIcon,
#root_staff_profile .editBoxIcon,
#root_staff_profile .deleteIcon,
#root_staff_profile .viewIcon,
#root_staff_profile .fa-plus,
#root_staff_profile .fa-edit,
#root_staff_profile .fa-trash,
#root_staff_profile .saveIcon,
#root_staff_profile .closeIcon,
#root_staff_profile .arrowRight,
#root_staff_profile .arrowLeft {
  cursor: pointer;
}

#root_staff_profile .addIcon,
#root_staff_profile .fa-plus.addIcon {
  color: #15803d;
  font-size: 18px;
}

#root_staff_profile .editIcon,
#root_staff_profile .editBoxIcon,
#root_staff_profile .fa-edit {
  color: #2563eb;
}

#root_staff_profile .deleteIcon,
#root_staff_profile .fa-trash {
  color: #dc2626;
}

#root_staff_profile .saveIcon {
  color: #15803d;
  font-size: 22px;
}

#root_staff_profile .closeIcon {
  color: #dc2626;
  font-size: 22px;
}

#root_staff_profile .arrowRight,
#root_staff_profile .arrowLeft {
  color: #4f46e5;
  font-size: 22px;
}

#root_staff_profile .marginLeft50px {
  margin-left: 50px;
}

#root_staff_profile .stpr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

#root_staff_profile .stpr-btn-primary {
  background: #05053d;
  color: #fff;
}

#root_staff_profile .stpr-btn-primary:hover {
  background: #0b0b5c;
}

#root_staff_profile .stpr-btn-success {
  background: #15803d;
  color: #fff;
}

#root_staff_profile .stpr-btn-success:hover {
  background: #166534;
}

#root_staff_profile .stpr-btn-danger {
  background: #dc2626;
  color: #fff;
}

#root_staff_profile .stpr-btn-danger:hover {
  background: #b91c1c;
}

#root_staff_profile .stpr-btn-info {
  background: #0369a1;
  color: #fff;
}

#root_staff_profile .stpr-btn-default {
  background: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
}

#root_staff_profile .discrip_purpose4 {
  margin: 20px 0;
}

#root_staff_profile .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  overflow-y: auto;
  padding: 16px;
}

#root_staff_profile .stpr-modal-hidden {
  display: none !important;
}

#root_staff_profile .modal-box,
#root_staff_profile .stpr-modal-box {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  border: 1px solid #e5e7eb;
  padding: 0;
  margin: 24px auto;
}

#root_staff_profile .stpr-modal-box.modal-lg {
  max-width: 900px;
}

#root_staff_profile .stpr-modal-inner {
  padding: 18px;
}

#root_staff_profile .stpr-modal-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

#root_staff_profile .stpr-modal-header .close {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
  margin: 0;
  opacity: 1;
}

#root_staff_profile .stpr-modal-header .close:hover {
  color: #111827;
}

#root_staff_profile .stpr-modal-header .modal-title,
#root_staff_profile .stpr-modal-header .headTitle,
#root_staff_profile .stpr-modal-header .head_title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
  text-align: center;
}

#root_staff_profile .stpr-modal-body,
#root_staff_profile .modal-body {
  clear: both;
}

#root_staff_profile .stpr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

#root_staff_profile .form-group {
  margin-bottom: 14px;
  clear: both;
  overflow: hidden;
}

#root_staff_profile .form-control,
#root_staff_profile select.form-control,
#root_staff_profile textarea.form-control,
#root_staff_profile input.form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #fff;
}

#root_staff_profile .form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_staff_profile .control-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 6px;
}

#root_staff_profile .col-sm-4,
#root_staff_profile .col-sm-6,
#root_staff_profile .col-md-3,
#root_staff_profile .col-md-4,
#root_staff_profile .col-md-9,
#root_staff_profile .col-md-10,
#root_staff_profile .col-xs-12 {
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

#root_staff_profile .form-horizontal .form-group > div,
#root_staff_profile .form-group > .col-md-12 {
  margin-bottom: 8px;
}

#root_staff_profile .modal-footer {
  clear: both;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid #f3f4f6;
}

#root_staff_profile .additionInfoDescCls {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}

#root_staff_profile .head_title {
  font-size: 15px;
  font-weight: 700;
  color: #05053d;
  margin: 12px 0 8px;
}

#root_staff_profile .pull-right {
  float: right;
}

@media (max-width: 640px) {
  #root_staff_profile .stpr-page-card {
    padding: 16px;
  }

  #root_staff_profile .stpr-page-title {
    font-size: 18px;
  }

  #root_staff_profile .stpr-field-label,
  #root_staff_profile .bordalng {
    flex: 0 0 100%;
  }

  #root_staff_profile .stpr-photo,
  #root_staff_profile img.photo {
    width: 96px;
    height: 112px;
  }

  #root_staff_profile .stpr-btn {
    width: 100%;
  }

  #root_staff_profile .marginLeft50px {
    margin-left: 16px;
  }
}

/* ===== Staff Profile Phase-3 polish (stpr-*) append only ===== */
#root_staff_profile .hideStudent,
#root_staff_profile .hideDependant,
#root_staff_profile .hideDoc {
  display: none;
}
#root_staff_profile #viewDependantId,
#root_staff_profile #viewStaffQualId,
#root_staff_profile #viewStaffHigStudId,
#root_staff_profile #viewStaffDocId,
#root_staff_profile #employment_history {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
#root_staff_profile .stpr-change-photo {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
}
#root_staff_profile .stpr-change-photo:hover {
  text-decoration: underline;
}
#root_staff_profile .uploadIcon,
#root_staff_profile .downloadIcon,
#root_staff_profile .seditIcon {
  cursor: pointer;
}
#root_staff_profile .uploadIcon { color: #0369a1; }
#root_staff_profile .downloadIcon { color: #15803d; }
#root_staff_profile .seditIcon { color: #2563eb; margin-left: 4px; }
/* ===== Search Student (sstu-*) ===== */
#root_search_student .sstu-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

#root_search_student .sstu-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

#root_search_student .sstu-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_search_student .sstu-page-title .fa {
  color: #4f46e5;
}

#root_search_student .sstu-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_search_student .sstu-filter {
  margin-bottom: 18px;
}

#root_search_student .sstu-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 480px;
}

#root_search_student .sstu-filter-label {
  flex: 0 0 auto;
  min-width: 64px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

#root_search_student .sstu-filter-control {
  flex: 1 1 220px;
  min-width: 0;
}

#root_search_student .sstu-filter-control .form-control,
#root_search_student #class_id {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  outline: none;
  font-size: 14px;
  color: #111827;
}

#root_search_student .sstu-filter-control .form-control:focus,
#root_search_student #class_id:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#root_search_student label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
}

#root_search_student input.error,
#root_search_student select.error {
  border: 1px solid #f97316;
}

#root_search_student .sstu-section-head {
  margin-bottom: 10px;
}

#root_search_student .sstu-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

#root_search_student .sstu-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_search_student .sstu-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}

#root_search_student .sstu-table th,
#root_search_student .sstu-table td {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_search_student .sstu-table .tableHeadClass,
#root_search_student .sstu-table .tableHeadClass th {
  background: #eef2ff;
  color: #312e81;
  font-weight: 700;
  text-align: center;
}

#root_search_student .sstu-table .aCenter {
  text-align: center;
}

#root_search_student .sstu-student-photo,
#root_search_student img.single-img,
#root_search_student img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 6px;
  padding: 0;
  border: 1px solid #e5e7eb;
}

#root_search_student .btn-info {
  background-color: #0284c7;
  border-color: #0284c7;
  color: #fff;
}

#root_search_student .btn-info:hover {
  background-color: #0369a1;
  border-color: #0369a1;
  color: #fff;
}

#root_search_student .sstu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}

#root_search_student .sstu-empty {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  padding: 24px 12px;
}

#root_search_student .sstu-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 9999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 20px;
}

#root_search_student .error_message {
  color: #dc2626;
  font-weight: 600;
  margin: 0;
}

#root_search_student .sstu-footer-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  #root_search_student .sstu-page-card {
    padding: 16px;
  }

  #root_search_student .sstu-page-title {
    font-size: 18px;
  }

  #root_search_student .sstu-filter-row {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }

  #root_search_student .sstu-btn {
    width: 100%;
  }

  #root_search_student .sstu-footer-actions {
    width: 100%;
  }
}

/* ------------------------ Staff Survey (stfs-*) ------------------------ */
#root_staff_survey {
  overflow-x: hidden;
}

#root_staff_survey .stfs-page {
  width: 100%;
  box-sizing: border-box;
}

#root_staff_survey .stfs-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  min-height: 420px;
  box-sizing: border-box;
  max-width: 100%;
}

#root_staff_survey .stfs-card.checkkResultHDCls {
  visibility: hidden;
}

#root_staff_survey .stfs-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

#root_staff_survey .stfs-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}

#root_staff_survey .stfs-title .fa {
  color: #05053d;
  font-size: 20px;
}

#root_staff_survey .stfs-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_staff_survey .stfs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  #root_staff_survey .stfs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#root_staff_survey .stfs-item,
#root_staff_survey .exam_result_borders {
  min-width: 0;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#root_staff_survey .stfs-item:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

#root_staff_survey .stfs-item-head,
#root_staff_survey .exam_result_topPad1 {
  background: linear-gradient(135deg, #05053d, #1a1a7a);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 16px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#root_staff_survey .stfs-item-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#root_staff_survey .stfs-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_staff_survey .stfs-meta-label {
  width: 42%;
  padding: 8px 4px;
  color: #6b7280;
  font-weight: 600;
  border: none;
  vertical-align: top;
}

#root_staff_survey .stfs-meta-value {
  padding: 8px 4px;
  color: #111827;
  font-weight: 600;
  border: none;
  word-break: break-word;
  text-align: right;
}

#root_staff_survey .stfs-item-actions {
  text-align: center;
  margin-top: auto;
  border-top: 1px solid #f3f4f6;
  padding-top: 14px;
  border: none;
}

#root_staff_survey .stfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#root_staff_survey .stfs-btn-primary {
  background: #05053d;
  color: #fff;
}

#root_staff_survey .stfs-btn-primary:hover {
  background: #0b0b5c;
}

#root_staff_survey .stfs-btn-done {
  background: #e0e7ff;
  color: #312e81;
  cursor: default;
  border: 1px solid #c7d2fe;
}

#root_staff_survey .stfs-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

#root_staff_survey .stfs-empty {
  margin: 24px auto;
  max-width: 420px;
  text-align: center;
  padding: 28px 18px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
}

#root_staff_survey .stfs-empty[hidden] {
  display: none !important;
}

#root_staff_survey .stfs-empty-icon {
  font-size: 28px;
  color: #9ca3af;
  margin-bottom: 8px;
}

#root_staff_survey .stfs-empty h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #374151;
}

#root_staff_survey .stfs-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 640px) {
  #root_staff_survey .stfs-card {
    padding: 16px;
  }

  #root_staff_survey .stfs-title {
    font-size: 20px;
  }

  #root_staff_survey .stfs-btn {
    width: 100%;
  }
}

/* ===== Soft Ticket Request staff (strq-*) append only | Root: #root_soft_ticket_request ===== */
#root_soft_ticket_request {
  width: 100%;
  box-sizing: border-box;
}

#root_soft_ticket_request .strq-page {
  color: #111827;
}

#root_soft_ticket_request .strq-header {
  margin-bottom: 4px;
}

#root_soft_ticket_request .strq-page-subtitle {
  margin: -8px 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_soft_ticket_request .tableHeadClass1 {
  font-weight: bold;
  text-align: center;
  background-color: #05053d !important;
  color: #fff;
}

#root_soft_ticket_request .college-table,
#root_soft_ticket_request .strq-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

#root_soft_ticket_request .college-table .tableHeadClass1 th,
#root_soft_ticket_request .college-table thead th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: center;
  white-space: nowrap;
  border: none;
}

#root_soft_ticket_request .college-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
}

#root_soft_ticket_request .college-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_soft_ticket_request .aCenter {
  text-align: center;
}

#root_soft_ticket_request .strq-table-wrap,
#root_soft_ticket_request .table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_soft_ticket_request #ticketTblId a {
  color: #2563eb;
  font-weight: 600;
}

#root_soft_ticket_request #ticketTblId a:hover {
  text-decoration: underline;
}

#root_soft_ticket_request .strq-no-record,
#root_soft_ticket_request .norecFount {
  margin: 16px auto;
  max-width: 420px;
  text-align: center;
  padding: 20px 14px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #b91c1c;
  font-weight: 600;
}

#root_soft_ticket_request .strq-modal-hidden,
#root_soft_ticket_request .sftk-modal-hidden {
  display: none !important;
}

#root_soft_ticket_request .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow-y: auto;
  padding: 16px;
}

#root_soft_ticket_request label.error,
#root_soft_ticket_request #softTicketModal label.error {
  color: #fca5a5;
  font-size: 12px;
}

#root_soft_ticket_request input.error,
#root_soft_ticket_request textarea.error,
#root_soft_ticket_request #softTicketModal input.error,
#root_soft_ticket_request #softTicketModal textarea.error {
  border: 1px solid orange !important;
}

@media (max-width: 640px) {
  #root_soft_ticket_request .sftk-page-card,
  #root_soft_ticket_request .strq-page-card {
    padding: 16px;
  }

  #root_soft_ticket_request .sftk-page-title,
  #root_soft_ticket_request .strq-page-title {
    font-size: 18px;
  }

  #root_soft_ticket_request .sftk-fancy,
  #root_soft_ticket_request .strq-fancy {
    width: 100%;
    text-align: center;
  }
}

/* ------------------------ Change Password (cpwd-*) ------------------------ */
.cpwd-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px 22px 28px;
  margin-bottom: 20px;
}

.cpwd-form-wrap {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.cpwd-page-title,
#root_change_password #text {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  text-align: center;
  line-height: 1.3;
}

.cpwd-page-subtitle {
  margin: 6px 0 20px;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.cpwd-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .cpwd-form-row {
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: start;
  }
}

.cpwd-label-wrap label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-top: 10px;
  line-height: 1.3;
}

.cpwd-email,
#root_change_password #email {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  width: 100%;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}

#root_change_password .form-control,
#root_change_password input.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-size: 14px;
  color: #111827;
}

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

.cpwd-actions {
  margin-top: 8px;
}

@media (min-width: 640px) {
  .cpwd-actions .cpwd-submit-wrap {
    grid-column: 2;
  }
}

.cpwd-btn,
#root_change_password #saveButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

#root_change_password label.error {
  color: #dc2626;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

#root_change_password input.error {
  border: 1px solid orange;
}

@media (max-width: 640px) {
  .cpwd-page-card {
    padding: 18px 16px 22px;
  }

  .cpwd-page-title,
  #root_change_password #text {
    font-size: 18px;
  }

  .cpwd-label-wrap label {
    margin-top: 0;
  }

  .cpwd-btn,
  #root_change_password #saveButton {
    width: 100%;
  }
}

/* Staff Survey polish (stfs-*) */
#root_staff_survey .stfs-item-actions {
  border: none;
  border-top: 1px solid #f3f4f6;
}
#root_staff_survey .stfs-meta-table tr + tr .stfs-meta-label,
#root_staff_survey .stfs-meta-table tr + tr .stfs-meta-value {
  padding-top: 4px;
}
#root_staff_survey .stfs-item-body .stfs-meta-table {
  margin-bottom: 4px;
}

/* ===== Search Student Phase-3 polish (sstu-*) ===== */
#root_search_student .sstu-page,
#root_search_student .sstu-page-card {
  max-width: 100%;
  min-width: 0;
}

#root_search_student .sstu-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_search_student .sstu-table {
  min-width: 720px;
}

#root_search_student .sstu-table tbody tr:hover td,
#root_search_student .sstu-table tr:hover td {
  background-color: #f8fafc;
}

#root_search_student .sstu-table td.aCenter {
  text-align: center;
  vertical-align: middle;
}

#root_search_student .sstu-table td.aCenter .sstu-btn {
  margin: 0 auto;
}

#root_search_student .sstu-btn .fa {
  margin-right: 4px;
  line-height: 1;
}

#root_search_student .btn-primary.sstu-btn {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
  padding: 8px 14px;
}

#root_search_student .btn-primary.sstu-btn:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

#root_search_student .btn-info.sstu-btn {
  padding: 6px 12px;
  font-size: 13px;
}

@media (max-width: 640px) {
  #root_search_student .sstu-table {
    min-width: 640px;
    font-size: 13px;
  }

  #root_search_student .sstu-table th,
  #root_search_student .sstu-table td {
    padding: 8px 10px;
  }
}

/* ===== Soft Ticket Request staff Phase-3 polish (strq-*) append only ===== */
#root_soft_ticket_request .strq-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  background: #f3f4f6;
  color: #374151;
}
#root_soft_ticket_request .strq-status-pending {
  background: #fef3c7;
  color: #92400e;
}
#root_soft_ticket_request .strq-status-completed {
  background: #dcfce7;
  color: #166534;
}
#root_soft_ticket_request .strq-status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}
#root_soft_ticket_request .strq-filters.sftk-filters {
  margin-bottom: 16px;
}
#root_soft_ticket_request .strq-page-title .fa {
  color: #4f46e5;
}

/* ===== My Class / Classes (mcls-*) ===== */
#root_myclass .mcls-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
  max-width: 100%;
  min-width: 0;
}

#root_myclass .mcls-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

#root_myclass .mcls-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_myclass .mcls-page-title .fa {
  color: #4f46e5;
}

#root_myclass .mcls-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_myclass .mcls-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_myclass .mcls-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 420px;
}

#root_myclass .mcls-table th,
#root_myclass .mcls-table td {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
  text-align: center;
}

#root_myclass .mcls-table .tableHeadClass,
#root_myclass .mcls-table .tableHeadClass th,
#root_myclass .mcls-table thead th {
  background: #eef2ff;
  color: #312e81;
  font-weight: 700;
  text-align: center;
}

#root_myclass .mcls-table .aCenter {
  text-align: center;
}

#root_myclass .mcls-table tbody tr:hover td,
#root_myclass .mcls-table tr:hover td {
  background-color: #f8fafc;
}

#root_myclass .btn-success {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

#root_myclass .btn-success:hover {
  background-color: #15803d;
  border-color: #15803d;
  color: #fff;
}

#root_myclass .mcls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
}

#root_myclass .mcls-btn .fa {
  margin-right: 4px;
  line-height: 1;
}

#root_myclass .mcls-empty {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  padding: 28px 12px;
}

#root_myclass .mcls-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 9999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 20px;
}

#root_myclass .error_message,
#root_myclass .noRecordFoundCls h3 {
  color: #dc2626;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 640px) {
  #root_myclass .mcls-page-card {
    padding: 16px;
  }

  #root_myclass .mcls-page-title {
    font-size: 18px;
  }

  #root_myclass .mcls-btn {
    width: 100%;
  }

  #root_myclass .mcls-table {
    min-width: 360px;
    font-size: 13px;
  }
}

/* ===== College Election list (celec-*) append only | Root: #root_college_election ===== */
#root_college_election {
  width: 100%;
  box-sizing: border-box;
}

#root_college_election .celec-page {
  color: #111827;
}

#root_college_election .celec-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_college_election .celec-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_college_election .celec-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.3;
  flex-wrap: wrap;
}

#root_college_election .celec-page-title .fa {
  color: #4f46e5;
}

#root_college_election .celec-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_college_election .celec-table-wrap,
#root_college_election .table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_college_election .college-table,
#root_college_election .celec-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14px;
}

#root_college_election .college-table .tableHeadClass th,
#root_college_election .college-table thead th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  border: none;
}

#root_college_election .college-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
  word-break: break-word;
}

#root_college_election .college-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_college_election .centerCls,
#root_college_election .aCenter {
  text-align: center;
}

#root_college_election .celec-no-record {
  margin: 20px auto;
  max-width: 420px;
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
}

#root_college_election .celec-empty-title,
#root_college_election .error_message {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #b91c1c;
}

#root_college_election .celec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

#root_college_election .celec-btn-info {
  background: #0369a1;
  color: #fff;
}

#root_college_election .celec-btn-info:hover {
  background: #075985;
}

#root_college_election .celec-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

#root_college_election .celec-badge-closed {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 640px) {
  #root_college_election .celec-page-card {
    padding: 16px;
  }

  #root_college_election .celec-page-title {
    font-size: 18px;
  }

  #root_college_election .celec-btn {
    width: 100%;
  }
}

/* ------------------------ Change Password polish (cpwd-*) ------------------------ */
#root_change_password .cpwd-page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#root_change_password .cpwd-hint {
  margin: -8px 0 18px;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.4;
}

#root_change_password .cpwd-btn:hover,
#root_change_password #saveButton:hover {
  background-color: #15803d;
}

/* ===== My Class Phase-3 polish (mcls-*) ===== */
#root_myclass .mcls-table td[align="center"],
#root_myclass .mcls-table td.aCenter {
  text-align: center;
}

#root_myclass .mcls-table td .mcls-btn {
  margin-left: auto;
  margin-right: auto;
}

#root_myclass .mcls-table th:last-child,
#root_myclass .mcls-table td:last-child {
  min-width: 110px;
  white-space: nowrap;
}

#root_myclass .mcls-table-wrap {
  overflow-x: auto;
}

@media (max-width: 640px) {
  #root_myclass .mcls-btn {
    width: auto;
    max-width: 100%;
  }

  #root_myclass .mcls-table {
    min-width: 320px;
  }
}

/* ------------------------ Send SMS Class Incharge (ssici-*) ------------------------ */
#root_send_sms_to_class_Incharge {
  overflow-x: hidden;
}

#root_send_sms_to_class_Incharge .ssici-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

#root_send_sms_to_class_Incharge .ssici-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_send_sms_to_class_Incharge .ssici-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
}

#root_send_sms_to_class_Incharge .ssici-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#root_send_sms_to_class_Incharge .ssici-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#root_send_sms_to_class_Incharge .ssici-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #05053d;
}

#root_send_sms_to_class_Incharge .ssici-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_send_sms_to_class_Incharge .ssici-table {
  margin: 0;
  min-width: 720px;
}

#root_send_sms_to_class_Incharge .ssici-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}

#root_send_sms_to_class_Incharge .ssici-send-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

#root_send_sms_to_class_Incharge .ssici-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-weight: 600;
  background: #f8fafc;
}

#root_send_sms_to_class_Incharge .ssici-compose-panel {
  margin-top: 8px;
}

#root_send_sms_to_class_Incharge .ssici-compose-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

#root_send_sms_to_class_Incharge .ssici-compose-header {
  background: linear-gradient(135deg, #05053d, #1a1a7a);
  color: #fff;
  padding: 14px 16px;
}

#root_send_sms_to_class_Incharge .ssici-compose-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

#root_send_sms_to_class_Incharge .ssici-form {
  padding: 16px;
}

#root_send_sms_to_class_Incharge .ssici-field,
#root_send_sms_to_class_Incharge .ssici-field-row {
  margin-bottom: 14px;
}

#root_send_sms_to_class_Incharge .ssici-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_send_sms_to_class_Incharge .ssici-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

#root_send_sms_to_class_Incharge .ssici-to-value {
  font-weight: 700;
  color: #05053d;
}

#root_send_sms_to_class_Incharge .ssici-note {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 8px;
}

#root_send_sms_to_class_Incharge .ssici-char-count {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  text-align: right;
}

#root_send_sms_to_class_Incharge .ssici-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

@media (min-width: 768px) {
  #root_send_sms_to_class_Incharge .ssici-schedule {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

#root_send_sms_to_class_Incharge .ssici-now {
  display: flex;
  align-items: center;
  min-height: 40px;
}

#root_send_sms_to_class_Incharge .ssici-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

#root_send_sms_to_class_Incharge .ssici-instruction {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

#root_send_sms_to_class_Incharge .ssici-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

#root_send_sms_to_class_Incharge .ssici-footer-actions {
  margin-top: 20px;
  text-align: center;
}

#root_send_sms_to_class_Incharge .ssici-modal-hidden {
  display: none !important;
}

#root_send_sms_to_class_Incharge .ssici-modal-box {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 640px) {
  #root_send_sms_to_class_Incharge .ssici-page-card {
    padding: 14px;
  }

  #root_send_sms_to_class_Incharge .ssici-header-actions,
  #root_send_sms_to_class_Incharge .ssici-action-btn,
  #root_send_sms_to_class_Incharge .ssici-send-btn,
  #root_send_sms_to_class_Incharge .ssici-form-actions .btn,
  #root_send_sms_to_class_Incharge .ssici-form-actions input[type="button"] {
    width: 100%;
  }

  #root_send_sms_to_class_Incharge .ssici-send-row {
    justify-content: stretch;
  }
}

/* Send SMS Class Incharge polish */
#root_send_sms_to_class_Incharge .ssici-form .form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#root_send_sms_to_class_Incharge .ssici-form textarea.form-control {
  min-height: 96px;
  resize: vertical;
}
#root_send_sms_to_class_Incharge .ssici-modal-box .ssici-form {
  padding: 8px 0 0;
}
#root_send_sms_to_class_Incharge .ssici-table thead th {
  white-space: nowrap;
}
#root_send_sms_to_class_Incharge .ssici-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
/* ===== Class Timetable (ctt-*) ===== */
#root_class_timetable .ctt-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
  max-width: 100%;
  min-width: 0;
}

#root_class_timetable .ctt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_class_timetable .ctt-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#root_class_timetable .ctt-page-title .fa {
  color: #2563eb;
}

#root_class_timetable .ctt-page-subtitle {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

#root_class_timetable .ctt-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#root_class_timetable .ctt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600;
  white-space: nowrap;
}

#root_class_timetable .ctt-day-board {
  margin-top: 4px;
}

#root_class_timetable .ctt-day-block + .ctt-day-block {
  margin-top: 18px;
}

#root_class_timetable .ctt-day-banner {
  margin-bottom: 10px;
}

#root_class_timetable .ctt-day-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #0f2744;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#root_class_timetable .ctt-period-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  align-items: stretch;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

#root_class_timetable .ctt-period-col {
  flex: 0 0 168px;
  max-width: 180px;
  min-height: 140px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  overflow: hidden;
}

#root_class_timetable .ctt-period-col-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

#root_class_timetable .ctt-period-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

#root_class_timetable .ctt-period-clock {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
}

#root_class_timetable .ctt-period-col-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#root_class_timetable .ctt-period-card {
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_class_timetable .ctt-period-subj {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  line-height: 1.3;
  word-break: break-word;
}

#root_class_timetable .ctt-period-staff {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
}

#root_class_timetable .ctt-period-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

#root_class_timetable .ctt-dash {
  color: #94a3b8;
  font-weight: 600;
}

#root_class_timetable .ctt-period-col--break {
  background: #fff7ed;
  border-color: #fed7aa;
}

#root_class_timetable .ctt-period-col--break .ctt-period-col-head {
  background: #ffedd5;
  border-bottom-color: #fed7aa;
}

#root_class_timetable .ctt-period-col--break .ctt-period-num,
#root_class_timetable .ctt-period-col--break .ctt-period-clock {
  color: #9a3412;
}

#root_class_timetable .ctt-period-col--break .ctt-period-col-body {
  align-items: center;
  justify-content: center;
}

#root_class_timetable .ctt-break {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fdba74;
  color: #7c2d12;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#root_class_timetable .ctt-empty {
  text-align: center;
  padding: 36px 16px;
  color: #b91c1c;
}

#root_class_timetable .ctt-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 9999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 22px;
}

#root_class_timetable .ctt-empty h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #b91c1c;
}

#root_class_timetable .ctt-empty-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: #64748b;
}

#root_class_timetable .ctt-footer-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
}

#root_class_timetable .ctt-table-wrap {
  display: none;
}

#root_class_timetable .pull-right {
  float: none;
}

@media (max-width: 640px) {
  #root_class_timetable .ctt-page-card {
    padding: 16px;
  }

  #root_class_timetable .ctt-page-title {
    font-size: 18px;
  }

  #root_class_timetable .ctt-header-actions {
    width: 100%;
  }

  #root_class_timetable .ctt-header-actions .ctt-btn,
  #root_class_timetable .ctt-header-actions a {
    width: 100%;
  }

  #root_class_timetable .ctt-header-actions a .ctt-btn {
    width: 100%;
    justify-content: center;
  }

  #root_class_timetable .ctt-period-col {
    flex-basis: 150px;
  }

  #root_class_timetable .ctt-footer-actions .ctt-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------ Class Survey Report (csr-*) ------------------------ */
#root_class_survey_report .csr-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 20px 22px 24px;
}

#root_class_survey_report .csr-page-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}

#root_class_survey_report .csr-page-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_class_survey_report .csr-page-title .fa {
  color: #2563eb;
}

#root_class_survey_report .csr-page-subtitle {
  margin: 6px 0 0;
  font-size: 0.925rem;
  color: #6b7280;
  line-height: 1.45;
}

#root_class_survey_report .csr-table-wrap.table-container {
  margin-top: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_class_survey_report .csr-table {
  width: 100%;
  min-width: 480px;
  margin: 0;
}

#root_class_survey_report .csr-table th,
#root_class_survey_report .csr-table td {
  vertical-align: middle;
}

#root_class_survey_report .csr-report-cell {
  text-align: right;
}

#root_class_survey_report .csr-download-link {
  display: inline-block;
  text-decoration: none;
}

#root_class_survey_report .csr-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#root_class_survey_report .csr-download-btn:hover {
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

#root_class_survey_report .csr-no-record {
  margin-top: 16px;
  padding: 28px 16px;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
}

#root_class_survey_report .csr-no-record h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #374151;
}

#root_class_survey_report .csr-no-record p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

@media (max-width: 640px) {
  #root_class_survey_report .csr-page-card {
    padding: 14px;
  }

  #root_class_survey_report .csr-page-title {
    font-size: 1.15rem;
  }

  #root_class_survey_report .csr-report-cell {
    text-align: left;
  }

  #root_class_survey_report .csr-download-btn {
    width: 100%;
    justify-content: center;
  }

  #root_class_survey_report .csr-download-link {
    width: 100%;
  }
}

/* ===== Class Timetable Phase-3 polish (ctt-*) ===== */
#root_class_timetable .btn-primary.ctt-btn {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

#root_class_timetable .btn-primary.ctt-btn:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

#root_class_timetable .ctt-period-clock .fa {
  margin-right: 3px;
}

#root_class_timetable .ctt-period-staff .fa {
  margin-right: 4px;
  color: #64748b;
}

#root_class_timetable .ctt-download-wrap a {
  text-decoration: none;
}

/* ------------------------ Student Group List (stgl-*) ------------------------ */
#root_Student_group_list {
  overflow-x: hidden;
}

#root_Student_group_list .stgl-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

#root_Student_group_list .stgl-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}

#root_Student_group_list .stgl-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}

#root_Student_group_list .stgl-page-title .fa {
  color: #05053d;
}

#root_Student_group_list .stgl-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#root_Student_group_list .stgl-group-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_Student_group_list .stgl-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #05053d, #1a1a7a);
  color: #fff;
}

#root_Student_group_list .stgl-group-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

#root_Student_group_list .stgl-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_Student_group_list .stgl-group-body {
  padding: 0;
}

#root_Student_group_list .stgl-group-empty:empty {
  display: none;
}

#root_Student_group_list .stgl-group-empty:not(:empty) {
  padding: 16px;
  text-align: center;
  color: #64748b;
  font-weight: 600;
}

#root_Student_group_list .stgl-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_Student_group_list .stgl-table {
  margin: 0;
  min-width: 520px;
  width: 100%;
}

#root_Student_group_list .stgl-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}

#root_Student_group_list .stgl-empty {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-weight: 600;
  background: #f8fafc;
}

#root_Student_group_list .stgl-footer {
  margin-top: 20px;
  text-align: center;
}

#root_Student_group_list .stgl-modal-hidden {
  display: none !important;
}

#root_Student_group_list .stgl-modal-box {
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}

#root_Student_group_list .stgl-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0 16px;
}

#root_Student_group_list .stgl-search-row .form-control {
  flex: 1;
  min-width: 180px;
}

#root_Student_group_list .stgl-list-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

#root_Student_group_list .stgl-search-table {
  width: 100%;
  min-width: 480px;
}

@media (max-width: 640px) {
  #root_Student_group_list .stgl-page-card {
    padding: 14px;
  }

  #root_Student_group_list .stgl-group-head {
    flex-direction: column;
    align-items: stretch;
  }

  #root_Student_group_list .stgl-group-actions,
  #root_Student_group_list .stgl-btn,
  #root_Student_group_list .stgl-search-row .btn {
    width: 100%;
  }
}

/* legacy star colors from old inline style */
#root_Student_group_list .checked {
  color: orange;
}
#root_Student_group_list .checked1 {
  color: red;
}

/* ------------------------ Class Survey Report polish (csr-*) ------------------------ */
#root_class_survey_report .csr-page-card {
  overflow: visible;
}

#root_class_survey_report .csr-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

#root_class_survey_report .csr-table th.csr-col-sno,
#root_class_survey_report .csr-table td.tableLeftContent {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

#root_class_survey_report .csr-table th.csr-col-name,
#root_class_survey_report .csr-table td:nth-child(2) {
  text-align: left;
}

#root_class_survey_report .csr-table th.csr-col-report {
  text-align: right;
}

#root_class_survey_report .csr-table tbody tr:last-child {
  border-bottom: none;
}

#root_class_survey_report .csr-download-btn:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  #root_class_survey_report .csr-table {
    min-width: 100%;
  }

  #root_class_survey_report .csr-table th,
  #root_class_survey_report .csr-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  #root_class_survey_report .csr-table th.csr-col-report,
  #root_class_survey_report .csr-report-cell {
    text-align: left;
  }

  #root_class_survey_report .csr-no-record {
    padding: 22px 12px;
  }
}

/* ===== Student Classwise Detail (scw-*) ===== */
#root_student_classwise .scw-page-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
  max-width: 100%;
  min-width: 0;
}

#root_student_classwise .scw-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

#root_student_classwise .scw-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 10px;
}

#root_student_classwise .scw-page-title .fa {
  color: #4f46e5;
}

#root_student_classwise .scw-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

#root_student_classwise .scw-filter {
  margin-bottom: 16px;
}

#root_student_classwise .scw-order-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}

#root_student_classwise .scw-filter-label {
  flex: 0 0 auto;
  min-width: 72px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

#root_student_classwise .scw-filter-control {
  flex: 1 1 200px;
  min-width: 0;
}

#root_student_classwise #orderBy,
#root_student_classwise .scw-filter-control .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  outline: none;
  font-size: 14px;
  color: #111827;
  margin-top: 0 !important;
}

#root_student_classwise #orderBy:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#root_student_classwise .scw-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_student_classwise .scw-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

#root_student_classwise .scw-table th,
#root_student_classwise .scw-table td {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  vertical-align: middle;
}

#root_student_classwise .scw-table .tableHeadClass,
#root_student_classwise .scw-table .tableHeadClass th {
  background: #eef2ff;
  color: #312e81;
  font-weight: 700;
  text-align: center;
}

#root_student_classwise .scw-table .aCenter {
  text-align: center;
}

#root_student_classwise .scw-table tbody tr:hover td,
#root_student_classwise .scw-table tr:hover td {
  background-color: #f8fafc;
}

#root_student_classwise .scw-student-photo,
#root_student_classwise img.single-img,
#root_student_classwise img.img-thumbnail {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 6px;
  padding: 0;
  border: 1px solid #e5e7eb;
}

#root_student_classwise .btn-warning {
  background-color: #d97706;
  border-color: #d97706;
  color: #fff;
}

#root_student_classwise .btn-warning:hover {
  background-color: #b45309;
  border-color: #b45309;
  color: #fff;
}

#root_student_classwise .scw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
}

#root_student_classwise .scw-btn .fa {
  margin-right: 4px;
  line-height: 1;
}

#root_student_classwise .scw-empty {
  margin-top: 16px;
  text-align: center;
  color: #b91c1c;
  padding: 28px 12px;
}

#root_student_classwise .scw-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 9999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 20px;
}

#root_student_classwise .error_message {
  color: #dc2626;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 640px) {
  #root_student_classwise .scw-page-card {
    padding: 16px;
  }

  #root_student_classwise .scw-page-title {
    font-size: 18px;
  }

  #root_student_classwise .scw-order-by {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }

  #root_student_classwise .scw-table {
    min-width: 520px;
    font-size: 13px;
  }

  #root_student_classwise .scw-btn {
    width: auto;
  }
}

/* Student Group List polish */
#root_Student_group_list .stgl-table td {
  vertical-align: middle;
}
#root_Student_group_list .stgl-table td:nth-child(3) {
  line-height: 1.35;
  font-weight: 600;
  color: #111827;
}
#root_Student_group_list .stgl-group-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#root_Student_group_list .stgl-modal-box .stgl-empty {
  margin-top: 12px;
}

/* ===== Student Classwise Phase-3 polish (scw-*) ===== */
#root_student_classwise .scw-page,
#root_student_classwise .scw-page-card {
  max-width: 100%;
  min-width: 0;
}

#root_student_classwise .scw-table-wrap {
  overflow-x: auto;
}

#root_student_classwise .scw-table td.aCenter .scw-btn {
  margin: 0 auto;
}

#root_student_classwise .scw-btn .fa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 0;
}

@media (max-width: 640px) {
  #root_student_classwise .scw-table {
    min-width: 480px;
  }
}

/* ===== Staff Class Subject – disabled Full Attendance button ===== */
#root_staff_class_subject .scs-btn:disabled,
#root_staff_class_subject .scs-soft-btn:disabled,
#root_staff_class_subject .scs-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* ===== Class Reports (crep-*) append only | Root: #root_class_reports ===== */
#root_class_reports {
  width: 100%;
  box-sizing: border-box;
}

#root_class_reports .crep-page {
  color: #111827;
}

#root_class_reports .crep-page-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 24px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#root_class_reports .crep-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
}

#root_class_reports .crep-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #05053d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.3;
}

#root_class_reports .crep-page-title .fa {
  color: #4f46e5;
}

#root_class_reports .crep-page-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

#root_class_reports .crep-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f3f4f6;
}

#root_class_reports .crep-section:last-of-type {
  border-bottom: none;
}

#root_class_reports .crep-section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #05053d;
}

#root_class_reports .crep-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#root_class_reports .college-table,
#root_class_reports .crep-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

#root_class_reports .college-table .tableHeadClass th,
#root_class_reports .college-table thead th {
  background: #05053d;
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  border: none;
}

#root_class_reports .college-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #111827;
}

#root_class_reports .college-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}

#root_class_reports .aCenter {
  text-align: center;
}

#root_class_reports .crep-no-record,
#root_class_reports .norecFount {
  margin: 12px auto 0;
  max-width: 420px;
  text-align: center;
  padding: 16px;
  color: #b91c1c;
  font-weight: 600;
}

#root_class_reports .crep-empty-title,
#root_class_reports .noRecFoundsCls {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #b91c1c;
}

#root_class_reports .crep-btn-row,
#root_class_reports .crep-attend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#root_class_reports .crep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

#root_class_reports .crep-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

#root_class_reports .crep-btn-primary {
  background: #05053d;
  color: #fff;
}

#root_class_reports .crep-btn-primary:hover {
  background: #0b0b5c;
}

#root_class_reports .crep-btn-info {
  background: #0369a1;
  color: #fff;
}

#root_class_reports .crep-btn-info:hover {
  background: #075985;
}

#root_class_reports .crep-btn-success {
  background: #15803d;
  color: #fff;
}

#root_class_reports .crep-btn-success:hover {
  background: #166534;
}

#root_class_reports .crep-attend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#root_class_reports .crep-attend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

#root_class_reports .crep-attend-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  min-width: 200px;
}

#root_class_reports .crep-lib-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
  margin-bottom: 14px;
}

#root_class_reports .crep-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
}

#root_class_reports .crep-select,
#root_class_reports select.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}

#root_class_reports .crep-select:focus,
#root_class_reports select.form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#root_class_reports .crep-lib-report {
  margin-top: 8px;
}

#root_class_reports .crep-footer {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding-top: 16px;
}

#root_class_reports label.error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 640px) {
  #root_class_reports .crep-page-card {
    padding: 16px;
  }

  #root_class_reports .crep-page-title {
    font-size: 18px;
  }

  #root_class_reports .crep-attend-row {
    flex-direction: column;
    align-items: stretch;
  }

  #root_class_reports .crep-btn-row .crep-btn,
  #root_class_reports .crep-attend-actions .crep-btn,
  #root_class_reports .crep-footer .crep-btn {
    width: 100%;
  }
}

/* ===== Class Reports Phase-3 polish (crep-*) append only ===== */
#root_class_reports .crep-no-record:empty,
#root_class_reports .norecFount:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
}
#root_class_reports .crep-section-title {
  padding-left: 2px;
}
#root_class_reports .crep-table-wrap + .crep-no-record:not(:empty) {
  margin-top: 14px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
}

/* ===== Staff Class Subject – reference design refresh (scs2-*) append only | Root: #root_staff_class_subject ===== */
#root_staff_class_subject .scs2-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e8eef5;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

#root_staff_class_subject .scs2-header-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

#root_staff_class_subject .scs2-header-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  box-shadow: 0 6px 14px rgba(67, 56, 202, 0.28);
}

#root_staff_class_subject .scs2-header-copy {
  min-width: 0;
}

#root_staff_class_subject .scs2-header-copy .scs-page-title {
  font-size: 24px;
}

#root_staff_class_subject .scs2-header-copy .scs-page-subtitle {
  max-width: 34rem;
}

#root_staff_class_subject .scs2-header-side {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  justify-content: flex-end;
}

#root_staff_class_subject .scs2-year-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#root_staff_class_subject .scs2-year-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

#root_staff_class_subject .scs2-year-select {
  min-width: 200px;
  border: 1px solid #d8dee8;
  background: #f8fafc;
  color: #0f172a;
}

#root_staff_class_subject .scs2-icon-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 320px;
}

#root_staff_class_subject .scs2-icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#root_staff_class_subject .scs2-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
}

#root_staff_class_subject .scs2-icon-green {
  background: #16a34a;
}

#root_staff_class_subject .scs2-icon-blue {
  background: #2563eb;
}

#root_staff_class_subject .scs2-icon-amber {
  background: #d97706;
}

#root_staff_class_subject .scs2-icon-sky {
  background: #0284c7;
}

#root_staff_class_subject .scs2-icon-teal {
  background: #0f766e;
}

#root_staff_class_subject .scs2-icon-violet {
  background: #7c3aed;
}

#root_staff_class_subject .scs2-icon-rose {
  background: #e11d48;
}

#root_staff_class_subject .scs2-icon-emerald {
  background: #059669;
}

#root_staff_class_subject .scs2-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
}

#root_staff_class_subject .scs2-banner-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.65);
}

#root_staff_class_subject .scs2-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

#root_staff_class_subject .scs2-banner-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

#root_staff_class_subject .scs2-banner-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: #475569;
}

#root_staff_class_subject .scs2-banner-action {
  flex-shrink: 0;
}

#root_staff_class_subject .scs2-banner-sky {
  background: #e0f2fe;
}

#root_staff_class_subject .scs2-banner-teal {
  background: #ccfbf1;
}

#root_staff_class_subject .scs2-banner-amber {
  background: #fef3c7;
}

#root_staff_class_subject .scs2-banner-rose {
  background: #ffe4e6;
}

#root_staff_class_subject .scs2-banner-sky .scs2-banner-icon {
  color: #0369a1;
}

#root_staff_class_subject .scs2-banner-teal .scs2-banner-icon {
  color: #0f766e;
}

#root_staff_class_subject .scs2-banner-amber .scs2-banner-icon {
  color: #b45309;
}

#root_staff_class_subject .scs2-banner-rose .scs2-banner-icon {
  color: #be123c;
}

#root_staff_class_subject .scs2-table-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14px;
  transition: filter 0.15s ease, transform 0.15s ease;
}

#root_staff_class_subject .scs2-table-btn span {
  display: none;
}

#root_staff_class_subject .scs2-table-btn:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

#root_staff_class_subject .scs2-table-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
  transform: none;
}

@media (max-width: 768px) {
  #root_staff_class_subject .scs2-header {
    padding: 18px;
  }

  #root_staff_class_subject .scs2-header-side {
    width: 100%;
    justify-content: flex-start;
  }

  #root_staff_class_subject .scs2-year-block {
    width: 100%;
  }

  #root_staff_class_subject .scs2-year-select {
    width: 100%;
    min-width: 0;
  }

  #root_staff_class_subject .scs2-icon-rail {
    max-width: none;
    width: 100%;
  }

  #root_staff_class_subject .scs2-banner {
    padding: 12px;
  }
}

/* View College Event page */
#root_view_college_event .hideInfo {
  display: none;
}
#root_view_college_event .curPointer {
  cursor: pointer;
}
#root_view_college_event .editIcon {
  margin-left: 6px;
  cursor: pointer;
  color: #4f46e5;
}
#root_view_college_event .editIcon:hover {
  color: #3730a3;
}
#root_view_college_event .vce-invite-img {
  min-height: 120px;
  min-width: 120px;
  background: #fff;
}