.s-header-container {
  width: 100% !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
  box-sizing: border-box !important;
}

.logo-icon {
  /* width: 35px !important; */
  height: 40px !important;
  padding: 5px !important;
  /* box-sizing: border-box !important; */
  border-radius: 20% !important;
  background-color: white !important;
}

@media (max-width: 768px) {
  .s-header-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox input[type="checkbox"] + span {
  background-color: #e8e8e9;
  border: 2px solid silver;
  border-radius: 50%;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 38px;
  cursor: pointer;
}
.custom-checkbox input[type="checkbox"]:checked + span {
  background-color: #0095e8;
  color: #fff;
  border: 2px solid #00639a;
}

/* ===== Global thin scrollbar ===== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 152, 8, 0.35) transparent;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(224, 152, 8, 0.35) !important;
  border-radius: 6px;
  border: 1px solid transparent;
  background-clip: content-box;
}

/* Hover effect (optional but clean) */
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(94, 65, 6, 0.55) !important;
}

.page__container {
  width: 100%;
  box-sizing: border-box;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* Desktop only */
@media (min-width: 1024px) {
  .page__container {
    padding-left: 90px !important;
    padding-right: 90px !important;
  }
}

.auth-brand {
  display: flex;
  align-items: center;
}

.auth-brand-logo {
  height: 40px;
  width: auto;
  margin-right: 8px;
  display: block;
}

.auth-brand-text {
  font-weight: 900;
  font-size: 32px;
  color: #006227;
}

.border-primary-1 {
  border: #006227 solid 2px !important;
}

/* Table Header */
.table thead th {
  position: relative; /* for icon positioning */
  padding-right: 15px;
  cursor: pointer;
  font-weight: 500;
  color: #343a40;
}

/* Add FontAwesome filter/funnel icon to headers */
.table thead th::after {
  content: "\e152";
  font-family: "Material Icons";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #6c757d;
  pointer-events: none;
}

/* Header hover effect */
.table thead th:hover::after {
  transform: translateY(-50%) scale(1.2);
  transition: all 0.2s ease-in-out;
}

/* Table rows: alternate colors */
.table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Conditional row background example */
.table tbody tr td:nth-child(5):empty {
  background-color: #ffe5e5;
}

/* Row hover effect */
.table tbody tr:hover {
  background-color: #eef3ff;
  transition: background-color 0.2s ease-in-out;
}

/* Table cells */
.table td,
.table th {
  white-space: nowrap !important;
}

/* Pagination styling */
.pagination .page-link {
  cursor: pointer !important;
}

/* Optional: search input and records per page styling */
.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.table-controls .records-select {
  width: 150px;
}

.table-controls .search-input {
  width: 250px;
}

.pagination .page-link {
  border-radius: 50%;
  width: 40px; 
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; 
  border: 1px solid #dee2e6;
  transition: background-color 0.3s, color 0.3s;
}

.pagination .page-item.active .page-link {
  background-color: #006227; 
  color: white;
  border-color: #006227;
}

.pagination .page-link:hover {
  background-color: #e9ecef;
  color: #006227;
}


.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  line-clamp: 3;              /* Standard property */
  overflow: hidden;
}


/* .action-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.action-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
} */


.action-card {
  transition: all 0.25s ease;
}

.action-card:hover {
  background-color: #066229; /* NSS green */
  color: #ffffff;
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Force all text inside card to white on hover */
.action-card:hover h4,
.action-card:hover p,
.action-card:hover small,
.action-card:hover div {
  color: #ffffff !important;
}

/* Muted text fix */
.action-card:hover .text-muted {
  color: #e6f4ea !important;
}

/* Icon circle inversion */
.action-card:hover .rounded-circle {
  background-color: #ffffff !important;
  color: #066229 !important;
}




/* ===============================
   Animations
================================= */

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

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

@keyframes rep_slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes rep_fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===============================
   Alerts
================================= */

.rep_alert-animate {
  animation: rep_slideInRight 0.5s ease-out;
}

.rep_icon-middle {
  vertical-align: middle;
}

.rep_icon-lg {
  font-size: 32px;
}

.rep_icon-md {
  font-size: 28px;
}

.rep_icon-sm {
  font-size: 18px;
}

.rep_icon-xs {
  font-size: 16px;
}

.rep_icon-xxs {
  font-size: 14px;
}

/* ===============================
   Cards
================================= */

.rep_card-animate {
  overflow: hidden;
  animation: rep_fadeInUp 0.8s ease-out;
}

.rep_card-animate-slow {
  animation: rep_fadeInUp 1s ease-out;
}

.rep_card-header-gradient {
  background: linear-gradient(135deg, rgb(15,139,71) 0%, rgb(5,44,3) 100%);
  border: none;
}

.rep_heading-bold {
  font-weight: 600;
}

/* ===============================
   File Upload
================================= */

.rep_file-hidden {
  display: none;
}

.rep_upload-label {
  border: 2px dashed rgb(16,90,10);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.rep_upload-label:hover {
  background: rgba(11,121,20,0.1);
  border-color: #764ba2;
}

/* ===============================
   Progress Bar
================================= */

.rep_progress {
  height: 25px;
  border-radius: 12px;
}

.rep_progress-bar {
  background: linear-gradient(135deg, rgb(15,139,71) 0%, rgb(5,44,3) 100%);
  font-size: 14px;
  font-weight: 600;
}

/* ===============================
   Submit Button
================================= */

.rep_submit-btn {
  background: linear-gradient(135deg, rgb(15,139,71) 0%, rgb(5,44,3) 100%);
  border: none;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(6,83,16,0.4);
  transition: all 0.3s ease;
}

.rep_submit-btn:hover {
  transform: scale(1.05);
}

.rep_submit-btn:active {
  transform: scale(0.95);
}

/* ===============================
   Table
================================= */

.rep_table-head {
  background: #f8f9fa;
}

.rep_table-head th {
  border-top: none;
  font-weight: 600;
}

.rep_badge {
  font-size: 0.9rem;
}

.rep_row-animate {
  animation: rep_fadeIn 0.5s ease-out both;
}

.rep_remarks-cell {
  max-width: 200px;
}

/* ===============================
   Empty State
================================= */

.rep_empty-icon {
  font-size: 100px;
  color: #e0e0e0;
}


.rep_report-card {
    transition: all 0.3s ease;
    border-radius: 12px;
}

.rep_report-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}