/* ==========================================================================
   LIST PAGES STYLESHEET
   Shared by: credit_list.html, cosco_viplist.html, oocl_viplist.html,
   hlc_viplist.html, overdue_list.html, no_sstlist.html, and the four
   manage/login pages (credit_login.html, cosco_login.html, oocl_login.html,
   hlc_login.html — which reuse this exact table/search UI and add their
   own admin-only styling from auth.css on top).

   Loaded after common.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Header + search wrapper
   --------------------------------------------------------------------------
   Wraps the title banner and the search/filter bar. It sticks just below
   the fixed navbar so the search box stays reachable while the *table*
   scrolls in its own box further down the page (see section 3) — the two
   no longer share a scroll context, so there's nothing here for them to
   collide over.
   -------------------------------------------------------------------------- */
.sticky-container {
  position: sticky;
  top: var(--navbar-height);
  z-index: 900;
  background: var(--white);
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   1. Page title banner
   -------------------------------------------------------------------------- */
.header-first {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(11px, 2vw, 15px) 0 clamp(2px, 0.5vw, 4px);
  /* Was a busy, animated 6-stop rainbow gradient (tomato/indigo/blue/
     orange/teal). Replaced with a calm, on-brand navy gradient — still
     has a very subtle shimmer, but nothing distracting. */
  background: linear-gradient(135deg, var(--primary) 0%, #001c4d 50%, var(--primary) 100%);
  background-size: 200% 200%;
  animation: gradientAnimation 18s ease infinite;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

.header-first h1 {
  font-size: clamp(0.95rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  margin-top: clamp(4px, 0.8vw, 6px);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.blow-effect {
  font-size: clamp(0.8rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: clamp(0.5px, 0.4vw, 4px);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.blow-effect span {
  display: inline-block;
  animation: fadeSlide 0.5s ease-out forwards;
  animation-delay: calc(0.08s * var(--n, 0));
  transition: transform 0.3s, color 0.3s, text-shadow 0.3s;
}

.blow-effect span:hover {
  transform: scale(1.15) translateY(-3px);
  color: var(--white);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: wave 0.6s infinite;
}

/* --------------------------------------------------------------------------
   2. Filter / search bar
   -------------------------------------------------------------------------- */
.filter-section {
  max-width: 1100px;
  width: 100%;
  margin: 10px auto 0;
  padding-bottom: 20px;
  text-align: center;
}

.search-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-top: 10px;
}

.search-container {
  position: relative;
  width: 100%;
  max-width: clamp(250px, 50vw, 360px);
  background: var(--white);
  border: 1.5px solid #e1e5ea;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-container:hover {
  border-color: #c7ced6;
}

.search-container:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 48, 135, 0.12);
}

.search-container input {
  width: 100%;
  padding: clamp(0.85rem, 2.2vw, 1.05rem) clamp(2.2rem, 5vw, 2.6rem) clamp(0.85rem, 2.2vw, 1.05rem) clamp(2.2rem, 5vw, 2.7rem);
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--dark);
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  font-weight: 500;
}

.search-container input:focus {
  outline: 0;
}

.search-container input::placeholder {
  color: #98a2ae;
  font-style: normal;
  transition: 0.3s;
}

.search-icon {
  position: absolute;
  left: clamp(0.8rem, 2vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  transition: color 0.25s ease;
  pointer-events: none;
}

.search-container:focus-within .search-icon {
  color: var(--primary);
}

.search-clear-btn {
  position: absolute;
  right: clamp(0.5rem, 1.5vw, 0.7rem);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: #e7eaee;
  color: #5a6472;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, color 0.2s;
}

.search-clear-btn:hover {
  background: var(--secondary);
  color: var(--white);
}

.alphabet-filter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  justify-content: center;
  margin: clamp(0.75rem, 2vw, 1.25rem) 0;
}

.alphabet-filter button {
  padding: clamp(0.15rem, 1vw, 0.2rem) clamp(0.5rem, 2vw, 0.7rem);
  background-color: var(--primary);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(0.8rem, 2vw, 1rem);
  border: 2px solid transparent;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  min-width: clamp(1.75rem, 4vw, 2.5rem);
  cursor: pointer;
}

.alphabet-filter button:hover {
  border: 2px solid var(--primary);
  background: var(--white);
  color: var(--primary);
  transform: translateY(-2px);
}

.alphabet-filter button.active {
  background: var(--secondary);
}

/* --------------------------------------------------------------------------
   3. Table + the independent-scroll sticky header
   --------------------------------------------------------------------------
   Previously the table header used `position: sticky` relative to the
   *whole page*, with JavaScript recalculating its offset on every scroll
   event. That's what caused the header (and the last couple of rows) to
   jump and overlap the navbar near the bottom of the page, or after a
   search narrowed the list down to only a few rows.

   The fix: give the table its own small scrolling area. The header then
   only ever needs to stick to the top of *that* box — never the page,
   never the navbar — so there's nothing left to recalculate and nothing
   for it to collide with, however few or many rows are visible.
   -------------------------------------------------------------------------- */
.table-scroll {
  width: 100%;
  max-width: 1200px;
  margin: 16px auto 0;
  /* Leaves room for navbar + header + filters above, footer below */
  max-height: min(72vh, 760px);
  min-height: 220px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}

#myTable,
.table-scroll table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#myTable th,
#myTable td,
* ,
td {
  box-sizing: border-box;
}

#myTable td,
#myTable th {
  padding: clamp(0.5rem, 1vw, 0.8rem);
  border: 1px solid #e0e0e0;
  font-size: clamp(0.8rem, 2vw, 1rem);
  overflow: hidden;
  white-space: nowrap;
}

#myTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--primary);
  color: var(--white);
  padding: clamp(8px, 2vw, 10px) clamp(0.5rem, 1vw, 0.8rem);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  cursor: default;
}

#myTable td:first-child,
#myTable th:first-child {
  text-align: center;
  width: 10%;
}

#myTable tbody td {
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}

#myTable tr:nth-child(odd) {
  background-color: #e6f0fa;
}

#myTable tr:nth-child(2n) {
  background-color: #f5f7f2;
}

#myTable tr:not(.bg-overdue):hover {
  background-color: #c9e1f5;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 123, 255, 0.3);
  transition: background-color 0.3s, box-shadow 0.3s;
}

#myTable tr.bg-overdue,
.bg-overdue {
  background-color: var(--table-overdue);
  color: var(--secondary);
  font-weight: 700;
  box-shadow: inset 0 0 5px rgba(181, 247, 0, 0.3);
}

#myTable tr.bg-overdue:hover {
  background-color: var(--table-overdue-hover);
  color: var(--white);
  box-shadow: inset 0 0 8px rgba(227, 6, 19, 0.4), 0 0 0 1px #e0e0e0;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.no-results {
  text-align: center;
}

.no-results {
  display: none;
  color: var(--secondary);
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

.riyad-message {
  text-align: center;
  margin-top: clamp(10px, 2vw, 15px);
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 600;
  color: var(--primary);
  background: linear-gradient(135deg, #eef4ff 0%, #ffffff 100%);
  padding: clamp(10px, 2vw, 14px) clamp(14px, 3vw, 18px);
  border-radius: 10px;
  border: 1px solid rgba(0, 48, 135, 0.15);
  box-shadow: 0 2px 10px rgba(0, 48, 135, 0.08);
  animation: fadeSlide 0.4s ease-out;
}


.tooltip-inner {
  font-size: clamp(0.8rem, 2vw, 1rem);
  background-color: #333;
  color: var(--white);
  border-radius: 5px;
  padding: 6px 10px;
}

.tooltip .tooltip-arrow::before {
  border-top-color: #333;
}

@media (max-width: 576px) {
  #myTable th,
  #myTable td {
    font-size: 0.8rem;
  }

  .no-results,
  .riyad-message,
  .tooltip-inner {
    font-size: 0.8rem;
    padding: 6px;
  }

  .table-scroll {
    max-height: 60vh;
  }
}

/* --------------------------------------------------------------------------
   4. Shared modals: login gate, logout confirm, toast, confirm dialog
   --------------------------------------------------------------------------
   These were previously copy-pasted, near-identically, into the inline
   <style> block of every single list and login page. They now live here
   once.
   -------------------------------------------------------------------------- */
.login-modal,
.logout-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.login-modal.show,
.logout-modal[style*="flex"] {
  display: flex;
}

.login-box,
.logout-box {
  background: linear-gradient(135deg, #ffffff, #d9d9ff);
  padding: 50px 40px;
  border-radius: 40px 12px 12px 20px;
  width: 480px;
  max-width: 90vw;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.logout-box {
  text-align: center;
}

.login-box h2,
.logout-box h2 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 600;
  color: #333;
}

.login-box input[type="text"],
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%;
  padding: 14px 15px;
  margin-bottom: 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  background: linear-gradient(135deg, #ece9e6, #ffffff);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.login-box input:focus {
  outline: none;
  background: linear-gradient(135deg, #e0e0ff, #ffffff);
}

.login-box label {
  font-size: 14px;
  color: #333;
}

.login-box button,
.logout-box button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(to right, var(--admin-accent-2), var(--admin-accent));
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.logout-box button {
  width: 45%;
  margin: 10px;
}

.login-box button::before,
.logout-box button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--admin-accent), var(--admin-accent-2));
  transition: 0.4s;
  z-index: -1;
}

.login-box button:hover::before,
.logout-box button:hover::before {
  left: 0;
}

.login-box button:hover,
.logout-box button:hover {
  color: #fff;
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  background: linear-gradient(to right, var(--admin-accent), var(--admin-accent-2));
}

.close-icon:hover {
  transform: rotate(360deg);
  background: linear-gradient(to right, var(--admin-accent-2), var(--admin-accent));
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  font-size: 16px;
  max-width: 80%;
  text-align: center;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
}

.custom-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  position: relative;
  background: white;
  padding: 25px 30px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.modal-content::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(to right, var(--admin-accent-2), var(--admin-accent));
  border-radius: 10px;
  z-index: -1;
}

.modal-content p {
  color: #1a2526;
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 20px 0;
}

.modal-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.modal-buttons .btn {
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(to right, var(--danger), var(--danger-dark));
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.modal-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.92;
}

.modal-buttons .btn-cancel {
  background: linear-gradient(to right, var(--admin-accent), #1a5bc4);
}

/* Login nav pill states (yellow "Login" / green "Manage List" / red "Logout") */
#login-nav-item {
  background-color: var(--warning);
  border-radius: 5px;
}

#login-nav-item .nav-link {
  font-weight: bold;
}

#manage-nav-item {
  display: none;
  background-color: var(--success);
  border-radius: 5px;
}

#manage-nav-item .nav-link {
  font-weight: bold;
  color: #fff;
}

#logout-nav-item {
  display: none;
  background-color: var(--danger);
  border-radius: 5px;
}

#logout-nav-item a.nav-link {
  color: #fff;
}

#logout-nav-item a.nav-link:hover {
  color: #f8f9fa;
}