/**
 * Himalayan White Cloud — Common Components Stylesheet (common.css)
 * Single source of truth for frequently reused UI components:
 * 1. Unified Table System (responsive wrappers, headers, rows, action buttons)
 * 2. Unified Bullet Points & Lists (glowing dots, tick checkmarks, checklists)
 * 3. Unified Badges & Status Pills (role pills, status badges, stage tags)
 * 4. Unified Toolbars & Filter Bars (search, filter dropdowns, actions)
 * 5. Unified Sleek Scrollbar Utilities
 */

/* ==========================================================================
   1. UNIFIED TABLE SYSTEM
   ========================================================================== */

/* Responsive & Scrollable Table Containers */
.table-container,
.table-responsive,
.data-table-wrap,
.hwc-table-wrap,
.user-table-wrap,
.signed-docs-table-wrap,
.sent-invoices-table-wrap,
.forms-table-responsive {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.45) rgba(0, 0, 0, 0.2);
}

/* Light mode table container scrollbar */
html.light-mode .table-container,
html.light-mode .table-responsive,
html.light-mode .data-table-wrap,
html.light-mode .hwc-table-wrap,
html.light-mode .user-table-wrap,
html.light-mode .signed-docs-table-wrap,
html.light-mode .sent-invoices-table-wrap,
html.light-mode .forms-table-responsive {
  scrollbar-color: rgba(28, 62, 201, 0.4) rgba(0, 0, 0, 0.05);
}

/* Container Scrollbar Webkit Styling */
.table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.data-table-wrap::-webkit-scrollbar,
.hwc-table-wrap::-webkit-scrollbar,
.user-table-wrap::-webkit-scrollbar,
.signed-docs-table-wrap::-webkit-scrollbar,
.sent-invoices-table-wrap::-webkit-scrollbar,
.forms-table-responsive::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.data-table-wrap::-webkit-scrollbar-track,
.hwc-table-wrap::-webkit-scrollbar-track,
.user-table-wrap::-webkit-scrollbar-track,
.signed-docs-table-wrap::-webkit-scrollbar-track,
.sent-invoices-table-wrap::-webkit-scrollbar-track,
.forms-table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.data-table-wrap::-webkit-scrollbar-thumb,
.hwc-table-wrap::-webkit-scrollbar-thumb,
.user-table-wrap::-webkit-scrollbar-thumb,
.signed-docs-table-wrap::-webkit-scrollbar-thumb,
.sent-invoices-table-wrap::-webkit-scrollbar-thumb,
.forms-table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.45);
  border-radius: 8px;
}

.table-container::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.data-table-wrap::-webkit-scrollbar-thumb:hover,
.hwc-table-wrap::-webkit-scrollbar-thumb:hover,
.user-table-wrap::-webkit-scrollbar-thumb:hover,
.signed-docs-table-wrap::-webkit-scrollbar-thumb:hover,
.sent-invoices-table-wrap::-webkit-scrollbar-thumb:hover,
.forms-table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.75);
}

/* Light mode container scrollbar tracks & thumbs */
html.light-mode .table-container::-webkit-scrollbar-track,
html.light-mode .table-responsive::-webkit-scrollbar-track,
html.light-mode .data-table-wrap::-webkit-scrollbar-track,
html.light-mode .hwc-table-wrap::-webkit-scrollbar-track,
html.light-mode .user-table-wrap::-webkit-scrollbar-track,
html.light-mode .signed-docs-table-wrap::-webkit-scrollbar-track,
html.light-mode .sent-invoices-table-wrap::-webkit-scrollbar-track,
html.light-mode .forms-table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

html.light-mode .table-container::-webkit-scrollbar-thumb,
html.light-mode .table-responsive::-webkit-scrollbar-thumb,
html.light-mode .data-table-wrap::-webkit-scrollbar-thumb,
html.light-mode .hwc-table-wrap::-webkit-scrollbar-thumb,
html.light-mode .user-table-wrap::-webkit-scrollbar-thumb,
html.light-mode .signed-docs-table-wrap::-webkit-scrollbar-thumb,
html.light-mode .sent-invoices-table-wrap::-webkit-scrollbar-thumb,
html.light-mode .forms-table-responsive::-webkit-scrollbar-thumb {
  background: rgba(28, 62, 201, 0.35);
}

html.light-mode .table-container::-webkit-scrollbar-thumb:hover,
html.light-mode .table-responsive::-webkit-scrollbar-thumb:hover,
html.light-mode .data-table-wrap::-webkit-scrollbar-thumb:hover,
html.light-mode .hwc-table-wrap::-webkit-scrollbar-thumb:hover,
html.light-mode .user-table-wrap::-webkit-scrollbar-thumb:hover,
html.light-mode .signed-docs-table-wrap::-webkit-scrollbar-thumb:hover,
html.light-mode .sent-invoices-table-wrap::-webkit-scrollbar-thumb:hover,
html.light-mode .forms-table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(28, 62, 201, 0.65);
}

/* Sticky Header Behavior */
.table-container thead th,
.table-responsive thead th,
.data-table-wrap thead th,
.hwc-table-wrap thead th,
.user-table-wrapper table thead th,
.signed-docs-table-wrap table thead th,
.sent-invoices-table-wrap table thead th,
.forms-received-table thead th,
.requests-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cardSolid, #0c2440);
  box-shadow: 0 1px 0 var(--line, rgba(255, 255, 255, 0.14));
}

html.light-mode .table-container thead th,
html.light-mode .table-responsive thead th,
html.light-mode .data-table-wrap thead th,
html.light-mode .hwc-table-wrap thead th,
html.light-mode .user-table-wrapper table thead th,
html.light-mode .signed-docs-table-wrap table thead th,
html.light-mode .sent-invoices-table-wrap table thead th,
html.light-mode .forms-received-table thead th,
html.light-mode .requests-table thead th {
  background: #ffffff !important;
  border-bottom: 2px solid rgba(28, 62, 201, 0.15) !important;
  color: #1c3ec9 !important;
}

/* Common Table Structure */
table.data-table,
table.hwc-table,
table.requests-table,
table.agent-table,
.table-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  box-sizing: border-box;
}

table.data-table th,
table.hwc-table th,
table.requests-table th,
table.agent-table th,
.table-container th {
  padding: 10px 12px;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted, #bcd0f5);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  vertical-align: middle;
}

table.data-table td,
table.hwc-table td,
table.requests-table td,
table.agent-table td,
.table-container td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  text-align: left;
  vertical-align: middle;
  font-size: 0.88rem;
  color: var(--text, #eaf2ff);
}

table.data-table tr:hover td,
table.hwc-table tr:hover td,
table.requests-table tr:hover td,
table.agent-table tr:hover td,
.table-container tr:hover td {
  background: rgba(0, 229, 255, 0.05);
}

html.light-mode table.data-table tr:hover td,
html.light-mode table.hwc-table tr:hover td,
html.light-mode table.requests-table tr:hover td,
html.light-mode table.agent-table tr:hover td,
html.light-mode .table-container tr:hover td,
html.light-mode tr:hover td {
  background: rgba(28, 62, 201, 0.04) !important;
}

html.light-mode table.data-table th,
html.light-mode table.hwc-table th,
html.light-mode table.requests-table th,
html.light-mode table.agent-table th,
html.light-mode .table-container th {
  background: #ffffff;
  color: #1c3ec9;
  border-bottom-color: rgba(28, 62, 201, 0.18);
}

html.light-mode table.data-table td,
html.light-mode table.hwc-table td,
html.light-mode table.requests-table td,
html.light-mode table.agent-table td,
html.light-mode .table-container td {
  color: #0f172a;
  border-bottom-color: rgba(28, 62, 201, 0.08);
}

/* Table Actions Cell & Icon Buttons */
.table-actions-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.action-icon-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(0, 229, 255, 0.1) !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  color: #00e5ff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.action-icon-btn:hover {
  background: rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
  transform: translateY(-1px);
}

.action-icon-btn:active {
  transform: translateY(0);
}

.action-icon-btn svg {
  display: block;
  pointer-events: none;
}

.action-icon-btn.is-protected {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

html.light-mode .action-icon-btn {
  background: rgba(28, 62, 201, 0.08) !important;
  border-color: rgba(28, 62, 201, 0.25) !important;
  color: #1c3ec9 !important;
}

html.light-mode .action-icon-btn:hover {
  background: rgba(28, 62, 201, 0.18) !important;
  box-shadow: 0 0 10px rgba(28, 62, 201, 0.25) !important;
}


/* ==========================================================================
   2. UNIFIED BULLET POINTS & LISTS
   ========================================================================== */

/* Modern Glowing Dot Bullet Lists */
ul.bullet-list,
.bullet-list,
.bullet-points,
.content-bullets {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 14px 0 18px 0;
}

ul.bullet-list > li,
.bullet-list > li,
.bullet-points > li,
.content-bullets > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

ul.bullet-list > li::before,
.bullet-list > li::before,
.bullet-points > li::before,
.content-bullets > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e5ff, #0077ff);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

/* Light Mode Glowing Dot Bullets */
html.light-mode ul.bullet-list > li,
html.light-mode .bullet-list > li,
html.light-mode .bullet-points > li,
html.light-mode .content-bullets > li {
  color: #334155 !important;
}

html.light-mode ul.bullet-list > li::before,
html.light-mode .bullet-list > li::before,
html.light-mode .bullet-points > li::before,
html.light-mode .content-bullets > li::before {
  background: linear-gradient(135deg, #1c3ec9, #4a72fa) !important;
  box-shadow: 0 0 8px rgba(28, 62, 201, 0.3) !important;
}

/* Modern Checkmark / Tick Bullet Lists */
ul.tick-list,
.tick-list,
.check-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 16px 0;
}

ul.tick-list > li,
.tick-list > li,
.check-list > li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

ul.tick-list > li::before,
.tick-list > li::before,
.check-list > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: #00e5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
  box-sizing: border-box;
}

/* Light Mode Tick / Checkmark Lists */
html.light-mode ul.tick-list > li,
html.light-mode .tick-list > li,
html.light-mode .check-list > li {
  color: #334155 !important;
}

html.light-mode ul.tick-list > li::before,
html.light-mode .tick-list > li::before,
html.light-mode .check-list > li::before {
  background: rgba(28, 62, 201, 0.1) !important;
  border-color: rgba(28, 62, 201, 0.3) !important;
  color: #1c3ec9 !important;
  box-shadow: none !important;
}

/* Clean List Resets (Prevent stray browser bullets) */
.reset-list,
.no-bullets,
.portal-menu,
.sidebar-nav {
  list-style: none;
  padding-left: 0;
  margin: 0;
}


/* ==========================================================================
   3. UNIFIED BADGES & STATUS PILLS
   ========================================================================== */

/* Base Role & Status Pill */
.role-pill,
.status-pill,
.status-badge,
.badge-pill,
.sa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: var(--text, #eaf2ff);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Variant: Customer / Client / Info */
.role-pill.customer,
.status-pill.customer,
.status-badge.info {
  background: rgba(28, 62, 201, 0.18);
  border-color: rgba(28, 62, 201, 0.35);
  color: #72a4fe;
}

/* Variant: Super Admin / Success / Paid */
.role-pill.super_admin,
.status-pill.success,
.status-badge.paid,
.status-pill.paid {
  background: rgba(46, 204, 113, 0.16);
  border-color: rgba(46, 204, 113, 0.35);
  color: #2ecc71;
}

/* Variant: Admin / Agent / Warning / Review */
.role-pill.admin,
.role-pill.agent,
.status-pill.warning,
.status-badge.review {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* Variant: Danger / Unpaid / Rejected */
.role-pill.danger,
.status-pill.danger,
.status-badge.unpaid,
.status-pill.rejected {
  background: rgba(229, 57, 53, 0.16);
  border-color: rgba(229, 57, 53, 0.4);
  color: #f87171;
}

/* Light Mode Overrides for Pills */
html.light-mode .role-pill,
html.light-mode .status-pill,
html.light-mode .status-badge,
html.light-mode .badge-pill,
html.light-mode .sa-badge {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light-mode .role-pill.customer,
html.light-mode .status-pill.customer,
html.light-mode .status-badge.info {
  background: rgba(28, 62, 201, 0.08) !important;
  color: #1c3ec9 !important;
  border-color: rgba(28, 62, 201, 0.25) !important;
}

html.light-mode .role-pill.super_admin,
html.light-mode .status-pill.success,
html.light-mode .status-badge.paid,
html.light-mode .status-pill.paid {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html.light-mode .role-pill.admin,
html.light-mode .role-pill.agent,
html.light-mode .status-pill.warning,
html.light-mode .status-badge.review {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #f59e0b !important;
}

html.light-mode .role-pill.danger,
html.light-mode .status-pill.danger,
html.light-mode .status-badge.unpaid,
html.light-mode .status-pill.rejected {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}


/* ==========================================================================
   4. UNIFIED TOOLBAR & FILTER ROW
   ========================================================================== */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

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

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


/* ==========================================================================
   5. UNIFIED SLEEK SCROLLBAR UTILITIES
   ========================================================================== */

.custom-scrollbar,
.slim-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.45) rgba(0, 0, 0, 0.2);
}

.custom-scrollbar::-webkit-scrollbar,
.slim-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.slim-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.slim-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.45);
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.slim-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.75);
}

html.light-mode .custom-scrollbar,
html.light-mode .slim-scrollbar {
  scrollbar-color: rgba(28, 62, 201, 0.4) rgba(0, 0, 0, 0.05);
}

html.light-mode .custom-scrollbar::-webkit-scrollbar-track,
html.light-mode .slim-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

html.light-mode .custom-scrollbar::-webkit-scrollbar-thumb,
html.light-mode .slim-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(28, 62, 201, 0.35);
}

html.light-mode .custom-scrollbar::-webkit-scrollbar-thumb:hover,
html.light-mode .slim-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(28, 62, 201, 0.65);
}

/* ==========================================================================
   UNIFIED SKELETON / GHOST LOADING UI (INSTAGRAM-STYLE SHIMMER)
   ========================================================================== */
.skeleton {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px;
  display: inline-block;
  line-height: 1;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.18) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: hwcGhostShimmer 1.5s infinite linear;
}

@keyframes hwcGhostShimmer {
  100% {
    transform: translateX(100%);
  }
}

html.light-mode .skeleton {
  background: rgba(0, 0, 0, 0.07) !important;
}

html.light-mode .skeleton::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 35%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.6) 65%,
    rgba(255, 255, 255, 0) 100%
  );
}

.skeleton-text {
  height: 16px;
  width: 140px;
  display: block;
  border-radius: 4px;
}

.skeleton-text.short {
  width: 90px;
  height: 14px;
}

.skeleton-num {
  width: 38px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
}

.skeleton-pill {
  width: 54px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 99px;
}

.skeleton-circle {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  display: inline-block;
}

.skeleton-line {
  height: 12px;
  width: 100%;
  display: block;
  border-radius: 4px;
  margin: 6px 0;
}

.skeleton-card {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.light-mode .skeleton-card {
  background: #ffffff;
  border-color: rgba(28, 62, 201, 0.12);
  box-shadow: 0 4px 14px rgba(19, 42, 93, 0.04);
}