/* ==========================================================================
   SOLID COLORS CSS (Anomaly Design System)
   Strictly Zero Transparency - Strictly 100% Solid Colors - High Contrast
   ========================================================================== */

/* Google Fonts Typography System: Fredoka (Display) & Plus Jakarta Sans (Body UI) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Fredoka', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Base Body Font (Default to Plus Jakarta Sans for UI readability) */
html,
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 1. Fredoka Utility Classes & Targeted Selectors (Weights: 600, 700, Tight Letter Spacing) */
.font-fredoka,
.font-display,
.font-brand,
h1,
h2,
h3,
.hero-title,
.section-title,
.modal-title,
[id*="Title"],
[id*="title"],
[id*="ModalTitle"],
[id*="modalTitle"],
.package-card-title,
.service-name,
.card-service-title,
.price-display,
.price-tag,
.price-amount,
.wallet-balance-value,
.total-price,
.rating-score,
.rating-val,
#avgRatingScore,
[id*="avgRating"],
[id*="RatingScore"],
button,
.btn,
.nav-link,
header nav a,
header nav button,
header button,
header a,
.badge,
.pill,
.duration-badge,
.comic-tag,
.comic-pill,
.status-pill,
.stop-motion-pill,
[class*="badge"],
[class*="pill"] {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.018em;
}

/* Fredoka font weight definition */
.font-fredoka,
.font-display,
h1, h2, h3,
button,
.badge,
.pill {
  font-weight: 600;
}
h1, h2, h3, .price-display, .price-tag, .total-price, .font-black {
  font-weight: 600 !important;
}

/* 2. Plus Jakarta Sans Utility Classes & Targeted Selectors (Weights: 400, 500, 600, 700) */
.font-jakarta,
.font-body,
p,
span.desc,
.card-desc,
.service-desc,
.package-desc,
label,
input,
textarea,
select,
::placeholder,
.form-input,
.form-label,
.form-desc,
.faq-desc,
.faq-text,
#faqAccordion,
#faqAccordion div,
#faqAccordion p,
#faqAccordion span,
.review-comment,
.review-desc,
.review-text,
.testimonial-text,
.testimonial-comment,
.policy-text,
.policy-content,
#policyTermsModalBox p,
#policyTermsModalBox li,
#policyTermsModalBox ul,
#policyTermsModalBox div:not(:first-child),
.track-notes,
.task-instructions,
.instruction-box {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: normal;
}

/* 3. Explicit Protection: Buttons, Badges, and Modal Titles inside any body containers keep Fredoka */
button,
button span,
button div,
.btn,
.btn span,
.badge,
.badge span,
.pill,
.pill span,
#policyTermsModalBox h2,
#policyTermsModalBox h3,
#policyTermsModalBox button,
#policyTermsModalBox button span,
#policyTermsModalBox span.uppercase,
#waitlistModalBox h3,
#waitlistModalBox button,
#trackOrderModal h3,
#trackOrderModal button {
  font-family: 'Fredoka', sans-serif !important;
  letter-spacing: -0.015em;
}

/* 1. Global Reset of Fuzzy Shadows and Text-Shadows */
*,
*::before,
*::after {
  text-shadow: none !important;
}

/* ==========================================================================
   NEO-BRUTALIST COMIC DESIGN SYSTEM (Lively, Natural & Tactile)
   Thick Ink Borders (2px/3px #000), 4px Hard Drop Shadows, Pop-Art Contrasts
   ========================================================================== */

/* 1. All Cards, Sections, Summary Boxes */
.service-card,
.comic-card,
.neo-card,
#catalogSection,
#checkoutSummaryBar,
#opStatusBox,
.order-summary-card,
.payment-channel-card,
.review-card,
[data-service-card],
article.service-item,
#priceGrid > div {
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 3px 3px 0px #1c1c1e !important;
  border-radius: 1.15rem !important;
  background-color: #ffffff !important;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.service-card:hover,
.comic-card:hover,
.neo-card:hover,
#priceGrid > div:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c1c1e !important;
}

/* 2. All Buttons (Hard Shadow 2.5px, Hover -1px, Click/Active translate 1.5px, 1.5px & shadow 1px) */
button:not(.star-btn):not(.no-brutalist):not(.nav-segment button):not(.nav-segment *):not(.admin-filter-btn):not(.member-filter-btn),
.btn,
.neo-btn,
.comic-btn,
a[role="button"],
.tab-btn,
#goToOrderBtn,
#submitOrderBtn,
#submitPaymentBtn,
#trackSearchBtn,
#downloadTopBtn {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 2.5px 2.5px 0px #1c1c1e !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease !important;
}

button:not(.star-btn):not(.no-brutalist):not(.nav-segment button):not(.nav-segment *):not(.admin-filter-btn):not(.member-filter-btn):hover,
.btn:hover,
.neo-btn:hover,
.comic-btn:hover,
#goToOrderBtn:hover,
#submitOrderBtn:hover,
#submitPaymentBtn:hover,
#trackSearchBtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3.5px 3.5px 0px #1c1c1e !important;
}

button:not(.star-btn):not(.no-brutalist):not(.nav-segment button):not(.nav-segment *):not(.admin-filter-btn):not(.member-filter-btn):active,
.btn:active,
.neo-btn:active,
.comic-btn:active,
#goToOrderBtn:active,
#submitOrderBtn:active,
#submitPaymentBtn:active,
#trackSearchBtn:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 1px 1px 0px #1c1c1e !important;
}

/* ==========================================================================
   SEGMENTED NAVIGATION BAR (CAPSULE NAVBAR)
   Consistent Neo-Brutalist Outer Capsule with Harmonious Internal Tab Items
   ========================================================================== */
.nav-segment {
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  background-color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* Strictly normalize all tabs inside .nav-segment (both <a> and <button>) */
.nav-segment a,
.nav-segment button {
  height: 28px !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  border-radius: 9999px !important;
  padding: 0 0.85rem !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.nav-segment a:hover,
.nav-segment button:hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-segment a:active,
.nav-segment button:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Active tab state (solid black pill with crisp white text) */
.nav-segment a.active,
.nav-segment a.bg-\[\#1c1c1e\],
.nav-segment a.bg-black,
.nav-segment a[class~="bg-[#1c1c1e]"],
.nav-segment a[class~="bg-black"],
.nav-segment button.active,
.nav-segment button.bg-\[\#1c1c1e\],
.nav-segment button.bg-black,
.nav-segment button[class~="bg-[#1c1c1e]"],
.nav-segment button[class~="bg-black"] {
  height: 28px !important;
  box-sizing: border-box !important;
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-segment a.active *,
.nav-segment a.bg-\[\#1c1c1e\] *,
.nav-segment a.bg-black *,
.nav-segment a[class~="bg-[#1c1c1e]"] *,
.nav-segment a[class~="bg-black"] *,
.nav-segment button.active *,
.nav-segment button.bg-\[\#1c1c1e\] *,
.nav-segment button.bg-black *,
.nav-segment button[class~="bg-[#1c1c1e]"] *,
.nav-segment button[class~="bg-black"] * {
  color: #ffffff !important;
  stroke: #ffffff;
}

/* Special highlighted action tabs inside .nav-segment (e.g. List Harga amber badge with white text) */
.nav-segment button.bg-\[\#ffd224\],
.nav-segment button[class~="bg-[#ffd224]"],
.nav-segment a.bg-\[\#ffd224\],
.nav-segment a[class~="bg-[#ffd224]"],
.nav-segment button[onclick*="PriceTransparency"],
.nav-segment a[onclick*="PriceTransparency"] {
  height: 28px !important;
  box-sizing: border-box !important;
  background-color: #d97706 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  transform: none !important;
  padding: 0 0.85rem !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.nav-segment button.bg-\[\#ffd224\]:hover,
.nav-segment button[class~="bg-[#ffd224]"]:hover,
.nav-segment a.bg-\[\#ffd224\]:hover,
.nav-segment a[class~="bg-[#ffd224]"]:hover,
.nav-segment button[onclick*="PriceTransparency"]:hover,
.nav-segment a[onclick*="PriceTransparency"]:hover {
  background-color: #b45309 !important;
  color: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  transform: none !important;
}

.nav-segment button.bg-\[\#ffd224\] *,
.nav-segment button[class~="bg-[#ffd224]"] *,
.nav-segment a.bg-\[\#ffd224\] *,
.nav-segment a[class~="bg-[#ffd224]"] *,
.nav-segment button[onclick*="PriceTransparency"] *,
.nav-segment a[onclick*="PriceTransparency"] * {
  color: #ffffff !important;
}

/* SVG icons inside tabs */

/* Admin & Member Logout Button in Navbar */
.nav-segment a#adminLogout,
.nav-segment a#memberLogout,
#adminLogout,
#memberLogout {
  height: 28px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0 0.85rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  background-color: #c8102e !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 3px 3px 0 #1c1c1e !important;
  transform: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

.nav-segment a#adminLogout:hover,
.nav-segment a#memberLogout:hover,
#adminLogout:hover,
#memberLogout:hover {
  background-color: #a80f26 !important;
  color: #ffffff !important;
  border-color: #1c1c1e !important;
  box-shadow: 3px 3px 0 #1c1c1e !important;
  transform: none !important;
}

/* Red Exit Icon inside Logout Button */
.nav-segment a#adminLogout svg,
.nav-segment a#memberLogout svg,
#adminLogout svg,
#memberLogout svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
}

.nav-segment a#adminLogout:hover svg,
.nav-segment a#memberLogout:hover svg,
#adminLogout:hover svg,
#memberLogout:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.nav-segment svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
  flex-shrink: 0 !important;
}

#loginMenu {
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 2.5px 2.5px 0px #1c1c1e !important;
  background-color: #ffffff !important;
  border-radius: 0.75rem !important;
}

#loginMenu a {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  color: #1c1c1e !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
}

#loginMenu a:hover {
  background-color: #f1f5f9 !important;
}

/* 3. Form Inputs, Textarea, Select */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
textarea,
select {
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  border-radius: 0.75rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #1c1c1e !important;
  box-shadow: 3px 3px 0px #1c1c1e !important;
}

/* Keep every native dropdown consistent across user, admin, and member pages. */
select:not([multiple]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1c1e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.7rem center !important;
  background-size: 14px 14px !important;
  padding-right: 2.25rem !important;
  color: #1c1c1e !important;
  cursor: pointer;
}

select:not([multiple]):disabled {
  background-color: #e2e8f0 !important;
  color: #475569 !important;
  cursor: not-allowed;
}

select option,
select optgroup {
  background-color: #ffffff;
  color: #1c1c1e;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}

select option:checked {
  background-color: #ffd224;
  color: #1c1c1e;
}

/* 4. Pop-Art Badges & Status Pills */
.badge,
.pill,
.status-pill,
.comic-pill,
.duration-badge,
[class*="badge"],
[class*="pill"] {
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Pop Art Colors - Pure Black Text */
.badge-yellow,
.comic-badge-yellow,
.bg-yellow-pop,
.bg-\[\#ffd224\],
[class~="bg-[#ffd224]"] {
  color: #000000 !important;
}

.badge-pink,
.comic-badge-pink,
.bg-\[\#fe38ad\],
[class~="bg-[#fe38ad]"],
.bg-\[\#ff66b2\],
[class~="bg-[#ff66b2]"] {
  color: #000000 !important;
}

.badge-mint,
.comic-badge-lime,
.bg-\[\#ace120\],
[class~="bg-[#ace120]"],
.bg-\[\#2dd4bf\],
[class~="bg-[#2dd4bf]"] {
  color: #000000 !important;
}

.badge-cyan,
.comic-badge-cyan,
.bg-\[\#01c6b7\],
[class~="bg-[#01c6b7]"] {
  color: #000000 !important;
}

html {
  color: #0f172a !important;
  background-color: #f5f5f7 !important;
}

body {
  color: #0f172a !important;
  min-height: 100vh;
}

/* ==========================================================================
   COMIC BOOK DESIGN SYSTEM & POP-ART HALFTONE THEMES
   Authentic Ben-Day Dots, Vibrant Comic Swatches & Solid Ink Panel Borders
   ========================================================================== */

:root {
  /* Authentic Comic Swatches from Reference Panels */
  --comic-pink: #fe38ad;      /* Hot Comic Magenta / Pink */
  --comic-cyan: #01c6b7;      /* Vibrant Comic Cyan / Teal */
  --comic-lime: #ace120;      /* Electric Comic Lime Green */
  --comic-yellow: #ffd224;    /* Comic Pop Sun Yellow */
  --comic-amber: #f28500;     /* Comic Warm Amber / Orange */
  --comic-red: #ed0323;       /* Vibrant Comic Crimson Red */
  --comic-blue: #0080bf;      /* Comic Pop Cobalt Blue */
  --comic-purple: #7b2cbf;    /* Comic Royal Purple / Indigo */
  --comic-ink: #1c1c1e;       /* Solid Comic Ink Black */
  --comic-paper: #ffffff;     /* Pure Solid White Card Panel */
  --comic-newsprint: #f7f8fa; /* Light Comic Page Tone */
}

/* Comic Book Panel Framing: Crisp Solid White Card with Bold Ink Border & Tactile Drop Shadow */
#adminDashboardShell,
#memberDashboardShell,
main.max-w-3xl,
body.theme-admin main,
body.theme-member main,
body.theme-user main,
body.theme-admin .max-w-sm,
body.theme-member .max-w-sm {
  border: 2px solid #1c1c1e !important;
  box-shadow: 3.5px 3.5px 0px #1c1c1e !important;
  background-color: #ffffff !important;
}

/* Graph-paper backgrounds use opaque SVG tiles so the grid stays crisp. */
/* 1. USER / CLIENT THEME */
body.theme-user,
body[data-theme="user"] {
  background-color: #fafaf5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23fafaf5'/%3E%3Cpath d='M0 0H48M0 0V48' fill='none' stroke='%23deded9' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 48px 48px !important;
  background-attachment: fixed !important;
}

/* 2. ADMIN THEME */
body.theme-admin,
body[data-theme="admin"] {
  background-color: #f6f7fb !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23f6f7fb'/%3E%3Cpath d='M0 0H48M0 0V48' fill='none' stroke='%23dfe2e9' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 48px 48px !important;
  background-attachment: fixed !important;
}

/* 3. MEMBER THEME */
body.theme-member,
body[data-theme="member"] {
  background-color: #f7faf7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23f7faf7'/%3E%3Cpath d='M0 0H48M0 0V48' fill='none' stroke='%23e0e7df' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 48px 48px !important;
  background-attachment: fixed !important;
}

/* Fallback for unclassified pages */
body:not(.theme-user):not(.theme-admin):not(.theme-member):not([data-theme]) {
  background-color: #fafaf5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23fafaf5'/%3E%3Cpath d='M0 0H48M0 0V48' fill='none' stroke='%23deded9' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 48px 48px !important;
  background-attachment: fixed !important;
}

::selection {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
}

#circuit-bg-canvas {
  display: none !important;
}

/* ==========================================================================
   2. TEXT COLOR RULES - GUARANTEED HIGH CONTRAST & LEGIBILITY
   ========================================================================== */

/* Exact class .text-white gets pure solid white */
.text-white {
  color: #ffffff !important;
}

/* Dark Buttons, Links, and Badges (Active State) */
.admin-page-link.active,
.admin-page-link.bg-\[\#1c1c1e\],
.member-page-link.active,
.member-page-link.bg-\[\#1c1c1e\],
.admin-filter-btn.active,
.admin-filter-btn.bg-\[\#1c1c1e\],
.member-filter-btn.active,
.member-filter-btn.bg-\[\#1c1c1e\],
.tab-btn.active,
.tab-btn.bg-\[\#1c1c1e\],
button.bg-\[\#1c1c1e\],
button.bg-black,
button.bg-\[\#15803d\],
button.bg-\[\#6366f1\],
button.bg-\[\#b91c1c\],
a.bg-\[\#1c1c1e\],
a.bg-black,
a.bg-\[\#15803d\],
a.bg-\[\#6366f1\],
a.bg-\[\#b91c1c\] {
  color: #ffffff !important;
}

/* Children (icons/spans) strictly inside these dark buttons are pure white in normal state UNLESS they have their own background/explicit colors */
.admin-page-link.active:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.admin-page-link.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.member-page-link.active:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.member-page-link.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.admin-filter-btn.active:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.admin-filter-btn.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.member-filter-btn.active:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.member-filter-btn.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.tab-btn.active:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
.tab-btn.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
button.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
button.bg-black:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
button.bg-\[\#15803d\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
button.bg-\[\#6366f1\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
button.bg-\[\#b91c1c\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
a.bg-\[\#1c1c1e\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
a.bg-black:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
a.bg-\[\#15803d\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
a.bg-\[\#6366f1\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]),
a.bg-\[\#b91c1c\]:not(:hover) *:not([class*="bg-white"]):not([class*="bg-slate"]):not([class*="bg-[#ffd224]"]):not([class*="bg-yellow"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not(.count-badge):not([id*="Count"]):not([id*="Badge"]):not([class*="text-[#ffd224]"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="text-rose"]):not([class*="text-red"]):not([class*="text-emerald"]):not([class*="text-green"]) {
  color: #ffffff !important;
}

/* Universal Counter Badges High Contrast System */
.count-badge,
#tabCountMembers,
#tabCountAdmins,
[id^="tabCount"],
[id^="memberCount"],
[id^="adminCount"],
button.bg-\[\#1c1c1e\] span.bg-white,
button.bg-black span.bg-white,
button.bg-\[\#1c1c1e\] .count-badge,
button.bg-black .count-badge,
button.bg-\[\#1c1c1e\] .bg-white,
button.bg-black .bg-white,
.tab-btn.active .count-badge,
.tab-btn.active [id*="Count"],
.admin-filter-btn.active .count-badge,
.member-filter-btn.active .count-badge,
#tabBtnMembers #tabCountMembers,
#tabBtnAdmins #tabCountAdmins {
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  font-weight: 900 !important;
}

/* Tab & Filter Button Inactive Badges */
.admin-filter-btn:not(.active) .count-badge,
.member-filter-btn:not(.active) .count-badge,
.tab-btn:not(.active) .count-badge {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* All Yellow Elements Strictly High-Contrast Dark Text */
.bg-\[\#ffd224\],
[class~="bg-[#ffd224]"],
button.bg-\[\#ffd224\],
button[class~="bg-[#ffd224]"],
a.bg-\[\#ffd224\],
a[class~="bg-[#ffd224]"],
.bg-yellow-400,
.bg-yellow-300 {
  color: #1c1c1e !important;
}

/* Children directly on yellow background keep black text UNLESS they have their own dark/accent styling */
.bg-\[\#ffd224\] *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-slate-900"]):not([class*="bg-slate-800"]):not([class*="bg-emerald"]):not([class*="bg-[#15803d]"]):not([class*="bg-rose"]):not([class*="bg-[#b91c1c]"]):not([class*="bg-amber"]):not([class*="bg-[#6366f1]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]):not(#priceModalBadge):not(#priceModalBadge *):not(.count-badge),
[class~="bg-[#ffd224]"] *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-slate-900"]):not([class*="bg-slate-800"]):not([class*="bg-emerald"]):not([class*="bg-[#15803d]"]):not([class*="bg-rose"]):not([class*="bg-[#b91c1c]"]):not([class*="bg-amber"]):not([class*="bg-[#6366f1]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]):not(#priceModalBadge):not(#priceModalBadge *):not(.count-badge),
button.bg-\[\#ffd224\] *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]),
button[class~="bg-[#ffd224]"] *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]),
a.bg-\[\#ffd224\] *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]),
a[class~="bg-[#ffd224]"] *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]),
.bg-yellow-400 *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]),
.bg-yellow-300 *:not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="text-[#ffd224]"]):not([class*="text-white"]) {
  color: #1c1c1e !important;
}

/* Dark badges, pills, and chips inside yellow containers STRICTLY have white or yellow text */
.bg-\[\#ffd224\] .bg-black,
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\],
.bg-\[\#ffd224\] [class~="bg-black"],
.bg-\[\#ffd224\] [class~="bg-[#1c1c1e]"],
.bg-\[\#ffd224\] .bg-slate-900,
.bg-\[\#ffd224\] .bg-slate-800,
.bg-\[\#ffd224\] #priceModalBadge,
[class~="bg-[#ffd224]"] .bg-black,
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\],
[class~="bg-[#ffd224]"] [class~="bg-black"],
[class~="bg-[#ffd224]"] [class~="bg-[#1c1c1e]"],
[class~="bg-[#ffd224]"] .bg-slate-900,
[class~="bg-[#ffd224]"] .bg-slate-800,
[class~="bg-[#ffd224]"] #priceModalBadge,
#priceModalBadge {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.bg-\[\#ffd224\] .bg-black,
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\],
.bg-\[\#ffd224\] [class~="bg-black"],
.bg-\[\#ffd224\] [class~="bg-[#1c1c1e]"],
.bg-\[\#ffd224\] #priceModalBadge,
[class~="bg-[#ffd224]"] .bg-black,
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\],
[class~="bg-[#ffd224]"] [class~="bg-black"],
[class~="bg-[#ffd224]"] [class~="bg-[#1c1c1e]"],
[class~="bg-[#ffd224]"] #priceModalBadge {
  border-color: #000000 !important;
}

.bg-\[\#ffd224\] .bg-black *:not([class*="text-[#ffd224]"]),
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] *:not([class*="text-[#ffd224]"]),
.bg-\[\#ffd224\] [class~="bg-black"] *:not([class*="text-[#ffd224]"]),
.bg-\[\#ffd224\] [class~="bg-[#1c1c1e]"] *:not([class*="text-[#ffd224]"]),
.bg-\[\#ffd224\] .bg-slate-900 *:not([class*="text-[#ffd224]"]),
.bg-\[\#ffd224\] .bg-slate-800 *:not([class*="text-[#ffd224]"]),
.bg-\[\#ffd224\] #priceModalBadge *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] .bg-black *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] [class~="bg-black"] *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] [class~="bg-[#1c1c1e]"] *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] .bg-slate-900 *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] .bg-slate-800 *:not([class*="text-[#ffd224]"]),
[class~="bg-[#ffd224]"] #priceModalBadge *:not([class*="text-[#ffd224]"]) {
  color: #ffffff !important;
}

/* Yellow accent text and SVG crown icons inside dark badges inside yellow containers */
.bg-\[\#ffd224\] .text-\[\#ffd224\],
.bg-\[\#ffd224\] [class~="text-[#ffd224]"],
.bg-\[\#ffd224\] .bg-black .text-\[\#ffd224\],
.bg-\[\#ffd224\] .bg-black [class~="text-[#ffd224]"],
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] .text-\[\#ffd224\],
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] [class~="text-[#ffd224]"],
[class~="bg-[#ffd224]"] .text-\[\#ffd224\],
[class~="bg-[#ffd224]"] [class~="text-[#ffd224]"],
[class~="bg-[#ffd224]"] .bg-black .text-\[\#ffd224\],
[class~="bg-[#ffd224]"] .bg-black [class~="text-[#ffd224]"],
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] .text-\[\#ffd224\],
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] [class~="text-[#ffd224]"] {
  color: #ffd224 !important;
}

/* Filled SVGs with text-[#ffd224] */
.bg-\[\#ffd224\] .bg-black svg.text-\[\#ffd224\]:not([fill="none"]),
.bg-\[\#ffd224\] .bg-black svg[class~="text-[#ffd224]"]:not([fill="none"]),
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] svg.text-\[\#ffd224\]:not([fill="none"]),
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] svg[class~="text-[#ffd224]"]:not([fill="none"]),
[class~="bg-[#ffd224]"] .bg-black svg.text-\[\#ffd224\]:not([fill="none"]),
[class~="bg-[#ffd224]"] .bg-black svg[class~="text-[#ffd224]"]:not([fill="none"]),
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] svg.text-\[\#ffd224\]:not([fill="none"]),
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] svg[class~="text-[#ffd224]"]:not([fill="none"]) {
  color: #ffd224 !important;
  fill: currentColor !important;
}

/* Outline SVGs with text-[#ffd224] or fill="none" (preserve stroke, no fill) */
.bg-\[\#ffd224\] .bg-black svg.text-\[\#ffd224\][fill="none"],
.bg-\[\#ffd224\] .bg-black svg.text-\[\#ffd224\][fill="none"] path,
.bg-\[\#ffd224\] .bg-black svg[class~="text-[#ffd224]"][fill="none"],
.bg-\[\#ffd224\] .bg-black svg[class~="text-[#ffd224]"][fill="none"] path,
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] svg.text-\[\#ffd224\][fill="none"],
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] svg.text-\[\#ffd224\][fill="none"] path,
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] svg[class~="text-[#ffd224]"][fill="none"],
.bg-\[\#ffd224\] .bg-\[\#1c1c1e\] svg[class~="text-[#ffd224]"][fill="none"] path,
[class~="bg-[#ffd224]"] .bg-black svg.text-\[\#ffd224\][fill="none"],
[class~="bg-[#ffd224]"] .bg-black svg.text-\[\#ffd224\][fill="none"] path,
[class~="bg-[#ffd224]"] .bg-black svg[class~="text-[#ffd224]"][fill="none"],
[class~="bg-[#ffd224]"] .bg-black svg[class~="text-[#ffd224]"][fill="none"] path,
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] svg.text-\[\#ffd224\][fill="none"],
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] svg.text-\[\#ffd224\][fill="none"] path,
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] svg[class~="text-[#ffd224]"][fill="none"],
[class~="bg-[#ffd224]"] .bg-\[\#1c1c1e\] svg[class~="text-[#ffd224]"][fill="none"] path {
  color: #ffd224 !important;
  stroke: #ffd224 !important;
  fill: none !important;
}

/* Explicit Modal Badge Protection (Client icon & Member/Admin text guaranteed high contrast) */
#priceModalBadge,
.bg-\[\#ffd224\] #priceModalBadge,
[class~="bg-[#ffd224]"] #priceModalBadge {
  background-color: #000000 !important;
  color: #ffd224 !important;
  border-color: #000000 !important;
}

#priceModalBadge *,
.bg-\[\#ffd224\] #priceModalBadge *,
[class~="bg-[#ffd224]"] #priceModalBadge * {
  color: #ffd224 !important;
}

#priceModalBadge svg,
#priceModalBadge svg path,
.bg-\[\#ffd224\] #priceModalBadge svg,
.bg-\[\#ffd224\] #priceModalBadge svg path,
[class~="bg-[#ffd224]"] #priceModalBadge svg,
[class~="bg-[#ffd224]"] #priceModalBadge svg path {
  color: #ffd224 !important;
  stroke: #ffd224 !important;
}

#priceModalBadge svg[fill="none"],
#priceModalBadge svg[fill="none"] path,
.bg-\[\#ffd224\] #priceModalBadge svg[fill="none"],
.bg-\[\#ffd224\] #priceModalBadge svg[fill="none"] path,
[class~="bg-[#ffd224]"] #priceModalBadge svg[fill="none"],
[class~="bg-[#ffd224]"] #priceModalBadge svg[fill="none"] path {
  fill: none !important;
}

/* ==========================================================================
   SOLID DARK BUTTONS & LINKS (Guaranteed Pure White Text & Icons in Normal State)
   ========================================================================== */
a.bg-black:not(:hover),
a.bg-\[\#1c1c1e\]:not(:hover),
button.bg-black:not(:hover),
button.bg-\[\#1c1c1e\]:not(:hover) {
  color: #ffffff !important;
}

a.bg-black:not(:hover) > span,
a.bg-black:not(:hover) span,
a.bg-\[\#1c1c1e\]:not(:hover) > span,
a.bg-\[\#1c1c1e\]:not(:hover) span,
button.bg-black:not(:hover) > span,
button.bg-black:not(:hover) span,
button.bg-\[\#1c1c1e\]:not(:hover) > span,
button.bg-\[\#1c1c1e\]:not(:hover) span,
a.bg-black:not(:hover) > svg,
a.bg-black:not(:hover) svg,
a.bg-\[\#1c1c1e\]:not(:hover) > svg,
a.bg-\[\#1c1c1e\]:not(:hover) svg,
button.bg-black:not(:hover) > svg,
button.bg-black:not(:hover) svg,
button.bg-\[\#1c1c1e\]:not(:hover) > svg,
button.bg-\[\#1c1c1e\]:not(:hover) svg {
  color: #ffffff !important;
  stroke: currentColor;
}

/* When dark buttons hover to yellow: Crisp black text and black stroke */
a.bg-black[class*="hover:bg-[#ffd224]"]:hover,
a.bg-black[class*="hover:text-black"]:hover,
a.bg-\[\#1c1c1e\][class*="hover:bg-[#ffd224]"]:hover,
a.bg-\[\#1c1c1e\][class*="hover:text-black"]:hover,
button.bg-black[class*="hover:bg-[#ffd224]"]:hover,
button.bg-black[class*="hover:text-black"]:hover,
button.bg-\[\#1c1c1e\][class*="hover:bg-[#ffd224]"]:hover,
button.bg-\[\#1c1c1e\][class*="hover:text-black"]:hover {
  background-color: #ffd224 !important;
  color: #000000 !important;
}

a.bg-black[class*="hover:bg-[#ffd224]"]:hover > span,
a.bg-black[class*="hover:bg-[#ffd224]"]:hover span,
a.bg-black[class*="hover:text-black"]:hover > span,
a.bg-black[class*="hover:text-black"]:hover span,
button.bg-black[class*="hover:bg-[#ffd224]"]:hover > span,
button.bg-black[class*="hover:bg-[#ffd224]"]:hover span,
button.bg-black[class*="hover:text-black"]:hover > span,
button.bg-black[class*="hover:text-black"]:hover span,
a.bg-black[class*="hover:bg-[#ffd224]"]:hover > svg,
a.bg-black[class*="hover:bg-[#ffd224]"]:hover svg,
a.bg-black[class*="hover:text-black"]:hover > svg,
a.bg-black[class*="hover:text-black"]:hover svg,
button.bg-black[class*="hover:bg-[#ffd224]"]:hover > svg,
button.bg-black[class*="hover:bg-[#ffd224]"]:hover svg,
button.bg-black[class*="hover:text-black"]:hover > svg,
button.bg-black[class*="hover:text-black"]:hover svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* ==========================================================================
   SOLID BUTTON ACTION OVERRIDES (100% Solid Fills - Strictly No Outlines)
   ========================================================================== */

/* 1. Oper Tugas Buttons - Solid Amber Fill */
.open-transfer-modal-btn,
button.open-transfer-modal-btn,
.claim-transfer-btn,
button.claim-transfer-btn {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border: 2px solid #78350f !important;
  font-weight: 900 !important;
}
.open-transfer-modal-btn *,
button.open-transfer-modal-btn *,
.claim-transfer-btn *,
button.claim-transfer-btn * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.open-transfer-modal-btn:hover,
button.open-transfer-modal-btn:hover,
.claim-transfer-btn:hover,
button.claim-transfer-btn:hover {
  background-color: #92400e !important;
  color: #ffffff !important;
}

/* 2. Apply Task / Ambil Tugas - Solid Emerald Fill */
.apply-task-btn,
button.apply-task-btn {
  background-color: #15803d !important;
  color: #ffffff !important;
  border: 2px solid #14532d !important;
  font-weight: 900 !important;
}
.apply-task-btn *,
button.apply-task-btn * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.apply-task-btn:hover,
button.apply-task-btn:hover {
  background-color: #166534 !important;
  color: #ffffff !important;
}

/* 3. Simpan Progres - Solid Dark Fill */
.save-progress-btn,
button.save-progress-btn {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  font-weight: 900 !important;
}
.save-progress-btn *,
button.save-progress-btn * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.save-progress-btn:hover,
button.save-progress-btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* 4. Payment Verification, QC & Transfer Review Buttons */
.verify-pay-btn[data-approved="true"],
.qc-review-btn[data-approved="true"],
.admin-review-transfer-btn[data-approved="true"],
.app-approve-btn {
  background-color: #15803d !important;
  color: #ffffff !important;
  border: 2px solid #14532d !important;
  font-weight: 900 !important;
}
.verify-pay-btn[data-approved="true"]:hover,
.qc-review-btn[data-approved="true"]:hover,
.admin-review-transfer-btn[data-approved="true"]:hover,
.app-approve-btn:hover {
  background-color: #166534 !important;
  color: #ffffff !important;
}

.verify-pay-btn[data-approved="false"],
.qc-review-btn[data-approved="false"],
.admin-review-transfer-btn[data-approved="false"],
.app-reject-btn {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  border: 2px solid #7f1d1d !important;
  font-weight: 900 !important;
}
.verify-pay-btn[data-approved="false"]:hover,
.qc-review-btn[data-approved="false"]:hover,
.admin-review-transfer-btn[data-approved="false"]:hover,
.app-reject-btn:hover {
  background-color: #991b1b !important;
  color: #ffffff !important;
}

/* 5. View & Download File Buttons */
.view-file-btn {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  font-weight: 800 !important;
}
.view-file-btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.download-file-btn {
  background-color: #0369a1 !important;
  color: #ffffff !important;
  border: 2px solid #0369a1 !important;
  font-weight: 800 !important;
}
.download-file-btn:hover {
  background-color: #0369a1 !important;
  color: #ffffff !important;
}

/* Inactive nav links */
.admin-page-link:not(.active):not(.bg-\[\#1c1c1e\]),
.member-page-link:not(.active):not(.bg-\[\#1c1c1e\]) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Status Filter Buttons (Admin & Member Dashboards) - Strictly Uniform & Zero White-on-White */
.admin-filter-btn,
.member-filter-btn {
  height: 32px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0.75rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.15s ease !important;
}

.admin-filter-btn.active,
.admin-filter-btn.bg-\[\#1c1c1e\],
.member-filter-btn.active,
.member-filter-btn.bg-\[\#1c1c1e\] {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 1.5px solid #1c1c1e !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-filter-btn.active:hover,
.admin-filter-btn.bg-\[\#1c1c1e\]:hover,
.member-filter-btn.active:hover,
.member-filter-btn.bg-\[\#1c1c1e\]:hover {
  background-color: #2c2c2e !important;
  color: #ffffff !important;
  border: 1.5px solid #2c2c2e !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-filter-btn.active *:not(.count-badge):not([id*="Count"]):not([class*="count-badge"]):not([class*="bg-white"]),
.admin-filter-btn.bg-\[\#1c1c1e\] *:not(.count-badge):not([id*="Count"]):not([class*="count-badge"]):not([class*="bg-white"]),
.member-filter-btn.active *:not(.count-badge):not([id*="Count"]):not([class*="count-badge"]):not([class*="bg-white"]),
.member-filter-btn.bg-\[\#1c1c1e\] *:not(.count-badge):not([id*="Count"]):not([class*="count-badge"]):not([class*="bg-white"]) {
  color: #ffffff !important;
}

.admin-filter-btn.active .count-badge,
.admin-filter-btn.bg-\[\#1c1c1e\] .count-badge,
.member-filter-btn.active .count-badge,
.member-filter-btn.bg-\[\#1c1c1e\] .count-badge,
.admin-filter-btn.active [id*="Count"],
.member-filter-btn.active [id*="Count"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  font-weight: 900 !important;
}

.admin-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]),
.member-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]),
.tab-btn:not(.active):not(.bg-\[\#1c1c1e\]) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]):hover,
.member-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]):hover,
.tab-btn:not(.active):not(.bg-\[\#1c1c1e\]):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]) *,
.member-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]) * {
  color: #0f172a !important;
}

.admin-filter-btn:not(.active) .count-badge,
.member-filter-btn:not(.active) .count-badge {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* STRICTLY NO FADED / MUTED GRAY TEXT - 100% SOLID HIGH CONTRAST & VISIBILITY */
.text-slate-400:not(.text-white),
.text-slate-500:not(.text-white),
.text-slate-600:not(.text-white),
.text-slate-700:not(.text-white),
.text-slate-800:not(.text-white),
.text-gray-400:not(.text-white),
.text-gray-500:not(.text-white),
.text-gray-600:not(.text-white),
.text-gray-700:not(.text-white),
.text-zinc-400:not(.text-white),
.text-zinc-500:not(.text-white),
.text-zinc-600:not(.text-white),
.text-zinc-700:not(.text-white),
.text-neutral-400:not(.text-white),
.text-neutral-500:not(.text-white),
.text-neutral-600:not(.text-white),
.text-neutral-700:not(.text-white),
.text-\[\#8e8e93\]:not(.text-white),
.text-\[\#6e6e73\]:not(.text-white),
.text-muted:not(.text-white) {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* SVG icons that used gray classes become solid dark */
svg.text-slate-400,
svg.text-slate-500,
svg.text-slate-600,
svg.text-slate-700,
svg.text-gray-400,
svg.text-gray-500 {
  color: #0f172a !important;
}

/* Close buttons (X) on modals and dialogs */
button.text-slate-400,
button.text-slate-500,
button.text-slate-600 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

/* Inside dark elements/cards, text is strictly 100% solid pure white */
.bg-\[\#1c1c1e\] > .text-slate-300,
.bg-\[\#1c1c1e\] > .text-slate-400,
.bg-\[\#1c1c1e\] > .text-slate-500,
.bg-\[\#1c1c1e\] > .text-slate-600,
.bg-\[\#1c1c1e\] > .text-slate-700,
.bg-\[\#1c1c1e\] > p,
.bg-black > .text-slate-300,
.bg-black > .text-slate-400,
.bg-black > .text-slate-500,
.bg-slate-900 > .text-slate-300,
.bg-slate-900 > .text-slate-400,
.bg-slate-900 > .text-slate-500,
.bg-slate-800 > .text-slate-300,
.bg-slate-800 > .text-slate-400,
.bg-slate-800 > .text-slate-500 {
  color: #ffffff !important;
}

/* ==========================================================================
   3. NAVIGATION CAPSULES & CONTAINERS (100% SOLID OPAQUE)
   ========================================================================== */

.nav-segment,
#adminPageNav,
#memberPageNav,
#memberTaskFilterBar,
#adminProjectFilterBar,
.bg-\[\#e5e5ea\] {
  background-color: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
}

.member-task-instructions {
  background-color: #ffd224 !important;
  color: #1c1c1e !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0 #1c1c1e !important;
}

.member-task-instructions > *,
.member-task-instructions [class*="text-"] {
  color: #1c1c1e !important;
}

/* Clean White Containers - No Washed Out Tints */
.bg-\[\#f9f9fb\],
.bg-slate-50,
.bg-\[\#f2f2f7\] {
  background-color: #ffffff !important;
}

/* ==========================================================================
   4. SOLID BADGES & ALERTS (ELIMINATE ALL PASTEL WASHES)
   ========================================================================== */

/* Emerald / Green: Convert all pastel green to Deep Solid Emerald */
.bg-emerald-50,
.bg-emerald-100,
.bg-\[\#dcfce7\],
.bg-green-50,
.bg-green-100,
#memberWorkflowMessage:not(.bg-\[\#b91c1c\]) {
  background-color: #15803d !important;
  color: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  font-weight: 800 !important;
}
.bg-emerald-50 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-emerald-100 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-\[\#dcfce7\] *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-green-50 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-green-100 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a) {
  color: #ffffff !important;
}

/* Amber / Yellow: Convert all pastel yellow to Deep Solid Amber */
.bg-amber-50,
.bg-amber-100,
.bg-\[\#fef3c7\],
.bg-yellow-50,
.bg-yellow-100 {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  font-weight: 800 !important;
}
.bg-amber-50 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-amber-100 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-\[\#fef3c7\] *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-yellow-50 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-yellow-100 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-amber-50 div,
.bg-amber-50 p,
.bg-amber-50 span:not(.count-badge),
.bg-amber-50 svg,
.bg-amber-50 svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Rose / Red: Convert all pastel red to Deep Solid Red */
.bg-rose-50,
.bg-rose-100,
.bg-red-50,
.bg-red-100 {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  border: 2px solid #7f1d1d !important;
  font-weight: 800 !important;
}
.bg-rose-50 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-rose-100 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-red-50 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a),
.bg-red-100 *:not([class*="bg-"]):not(.count-badge):not([id*="Count"]):not([class*="text-"]):not(input):not(select):not(textarea):not(button):not(a) {
  color: #ffffff !important;
}

/* Sub-kotak putih atau abu di dalam banner solid emerald/amber/rose */
.bg-emerald-50 [class*="text-emerald-"],
.bg-emerald-100 [class*="text-emerald-"],
.bg-\[\#dcfce7\] [class*="text-emerald-"],
.bg-green-50 [class*="text-green-"],
.bg-green-100 [class*="text-green-"],
.bg-amber-50 [class*="text-amber-"],
.bg-amber-100 [class*="text-amber-"],
.bg-\[\#fef3c7\] [class*="text-amber-"],
.bg-yellow-50 [class*="text-yellow-"],
.bg-yellow-100 [class*="text-yellow-"],
.bg-rose-50 [class*="text-rose-"],
.bg-rose-100 [class*="text-rose-"],
.bg-red-50 [class*="text-red-"],
.bg-red-100 [class*="text-red-"] {
  color: #ffffff !important;
}

.bg-emerald-50 .bg-white,
.bg-emerald-50 .bg-white *,
.bg-amber-50 .bg-white,
.bg-amber-50 .bg-white *,
.bg-rose-50 .bg-white,
.bg-rose-50 .bg-white *,
.bg-emerald-50 [class*="bg-slate"],
.bg-emerald-50 [class*="bg-slate"] *,
.bg-amber-50 [class*="bg-slate"],
.bg-amber-50 [class*="bg-slate"] *,
.bg-rose-50 [class*="bg-slate"],
.bg-rose-50 [class*="bg-slate"] * {
  color: #0f172a !important;
}
.bg-emerald-50 .bg-white [class*="text-emerald-"],
.bg-emerald-100 .bg-white [class*="text-emerald-"],
.bg-emerald-50 .bg-white .text-emerald-700,
.bg-emerald-50 .bg-white .text-emerald-800 {
  color: #15803d !important;
}
.bg-amber-50 .bg-white [class*="text-amber-"],
.bg-amber-100 .bg-white [class*="text-amber-"] {
  color: #4f46e5 !important;
}
.bg-rose-50 .bg-white [class*="text-rose-"],
.bg-rose-100 .bg-white [class*="text-rose-"] {
  color: #b91c1c !important;
}
.bg-emerald-50 .bg-white .text-slate-500,
.bg-amber-50 .bg-white .text-slate-500 {
  color: #0f172a !important;
}

/* Nonaktif / Inactive / Default Badges - High-Contrast Pure White with Solid Dark Border (NO Gray) */
.bg-slate-100:not(input):not(select):not(textarea):not(button):not(a):not(.admin-page-link):not(.member-page-link):not(.duration-badge),
.bg-slate-200:not(input):not(select):not(textarea):not(button):not(a):not(#trackOrderModal):not(#clientFilePreviewModal):not(#filePreviewModal):not(#transferModal):not(#customDialogModal),
.bg-gray-100:not(input):not(select):not(textarea):not(button):not(a),
.bg-gray-200:not(input):not(select):not(textarea):not(button):not(a) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #0f172a !important;
  font-weight: 800 !important;
}

/* Duration Badge (High-Contrast Solid Light Pill - Ditukar agar Jelas & Bersih) */
.duration-badge {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #0f172a !important;
  font-weight: 900 !important;
}
.duration-badge * {
  color: #0f172a !important;
}
.duration-badge svg {
  color: #0f172a !important;
}

/* ==========================================================================
   5. BORDERS & FORM INPUTS (100% SHARP & SOLID)
   ========================================================================== */

.border-slate-200,
.border-slate-300,
.border-slate-400,
.border-gray-200,
.border-gray-300 {
  border-color: #475569 !important;
}

/* Inputs, Selects, Textareas - Bold High-Contrast Border & Text */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  background-color: #ffffff !important;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #1c1c1e !important;
  outline: none !important;
}

input:disabled,
select:disabled {
  background-color: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* High-Contrast Placeholders (Slate-500, ratio > 4.5:1 on pure white) */
::placeholder,
input::placeholder,
textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* File Inputs */
input[type="file"] {
  background-color: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 0.75rem;
  color: #0f172a !important;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  appearance: none;
  background-color: #1c1c1e !important;
  border: 0 !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
}

/* Neo-Brutalist Comic Custom Range Slider (Zero soft/native OS blobs) */
input[type="range"],
.member-progress-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 12px !important;
  background-color: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  border-radius: 9999px !important;
  outline: none !important;
  cursor: pointer !important;
  margin: 6px 0 !important;
}

input[type="range"]::-webkit-slider-thumb,
.member-progress-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  background-color: #ffd224 !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  border-radius: 9999px !important;
  cursor: grab !important;
  transition: transform 0.12s ease !important;
}

input[type="range"]::-webkit-slider-thumb:hover,
.member-progress-range::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
  background-color: #ace120 !important;
}

input[type="range"]::-webkit-slider-thumb:active,
.member-progress-range::-webkit-slider-thumb:active {
  cursor: grabbing !important;
  transform: scale(0.95) !important;
  background-color: #fe38ad !important;
}

input[type="range"]::-moz-range-thumb,
.member-progress-range::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  background-color: #ffd224 !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  border-radius: 9999px !important;
  cursor: grab !important;
}

/* Enforce solid borders and shadows on all status dots and window controls */
span.rounded-full[class*="w-2"],
span.rounded-full[class*="w-3"],
div.rounded-full[class*="w-2"],
div.rounded-full[class*="w-3"] {
  border: 1px solid #1c1c1e !important;
  box-shadow: 1px 1px 0px #1c1c1e !important;
}

/* Dropdown Menu */
#loginMenu {
  background-color: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
}

#loginMenu a:hover {
  background-color: #f1f5f9 !important;
}

/* Counter Badges on Tabs */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 9999px;
  line-height: 1;
}

.admin-filter-btn.active .count-badge,
.member-filter-btn.active .count-badge {
  background-color: #ffffff !important;
  color: #1c1c1e !important;
  font-weight: 900 !important;
}

.admin-filter-btn:not(.active) .count-badge,
.member-filter-btn:not(.active) .count-badge {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* Date Filter Buttons - Clean Solid Styling */
.admin-date-filter-btn.active,
.member-date-filter-btn.active,
.admin-comm-group-btn.active,
.admin-comm-date-btn.active {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 1.5px solid #1c1c1e !important;
  font-weight: 900 !important;
}

.admin-date-filter-btn:not(.active),
.member-date-filter-btn:not(.active),
.admin-comm-group-btn:not(.active),
.admin-comm-date-btn:not(.active) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

.admin-date-filter-btn:not(.active):hover,
.member-date-filter-btn:not(.active):hover,
.admin-comm-group-btn:not(.active):hover,
.admin-comm-date-btn:not(.active):hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #1c1c1e !important;
}

/* Date Pill Group - Sleek Segmented Capsule */
.date-pill-group .admin-date-filter-btn.active,
.date-pill-group .member-date-filter-btn.active {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 0 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px #000000 !important;
}

.date-pill-group .admin-date-filter-btn:not(.active),
.date-pill-group .member-date-filter-btn:not(.active) {
  background-color: #ffffff !important;
  color: #475569 !important;
  border: 0 !important;
  font-weight: 700 !important;
}

.date-pill-group .admin-date-filter-btn:not(.active):hover,
.date-pill-group .member-date-filter-btn:not(.active):hover {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Commission Group & Date Filter Buttons - Crisp Black & White (NO Gray) */
.commission-group-btn.active,
.commission-date-btn.active,
.admin-comm-group-btn.active,
.admin-comm-date-btn.active,
.member-comm-status-btn.active,
.member-comm-date-btn.active {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  font-weight: 800 !important;
}

.commission-group-btn:not(.active),
.commission-date-btn:not(.active),
.admin-comm-group-btn:not(.active),
.admin-comm-date-btn:not(.active),
.member-comm-status-btn:not(.active),
.member-comm-date-btn:not(.active) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #0f172a !important;
  font-weight: 800 !important;
}

.commission-group-btn:not(.active):hover,
.commission-date-btn:not(.active):hover,
.admin-comm-group-btn:not(.active):hover,
.admin-comm-date-btn:not(.active):hover,
.member-comm-status-btn:not(.active):hover,
.member-comm-date-btn:not(.active):hover {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* ==========================================================================
   MODAL & BACKDROP OVERRIDES - 100% TRANSPARAN TANPA BACKGROUND
   ========================================================================== */
.fixed.inset-0.z-50,
.fixed.inset-0.z-\[100\],
.fixed.inset-0.z-\[200\],
.fixed.inset-0.z-\[210\],
.fixed.inset-0.z-\[220\],
.fixed.inset-0.z-\[300\],
.fixed.inset-0.z-\[999\],
.fixed.inset-0.z-\[1000\],
.modal-overlay,
.modal-backdrop,
#trackOrderModal,
#clientFilePreviewModal,
#waitlistModal,
#filePreviewModal,
#transferModal,
#createMemberModal,
#createAdminModal,
#editMemberModal,
#editAdminModal,
#serviceCrudModal,
#serviceCrudModal.fixed,
div#serviceCrudModal,
#elegantModalOverlay,
#tierDetailModalOverlay,
#policyTermsModalOverlay,
#copySuccessModal,
#catLoadingModal,
#financeTransactionModal,
#editWithdrawalModal,
#jhidanWithdrawModal,
#systemExpenseModal,
#createOrderModal,
#editOrderModal,
#reviewCrudModal,
#ratingModal,
#customDialogModal,
#customDialogModal.fixed,
div#customDialogModal,
[id*="ModalOverlay"],
[id*="Modal"].fixed,
div[id*="Modal"].fixed {
  --tw-bg-opacity: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the cat loader visible as a card without blacking out the page. */
#globalCatLoadingOverlay {
  background-color: #f5f5f7 !important;
}

.comic-bg-motion-layer {
  background: none !important;
  background-color: initial !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#trackOrderModal > div,
#clientFilePreviewModal > div,
#waitlistModal > div,
#filePreviewModal > div,
#transferModal > div,
#createMemberModal > div,
#serviceCrudModal > div,
#createAdminModal > div,
#editMemberModal > div,
#editAdminModal > div,
#customDialogModal > div,
#elegantModalOverlay > div,
#tierDetailModalOverlay > div,
#policyTermsModalOverlay > div,
#policyTermsModalBox,
#copySuccessModal > div,
#catLoadingModal > div,
#globalCatLoadingOverlay > div,
#financeTransactionModal > div,
#editWithdrawalModal > div,
#ratingModal > div {
  background-color: #ffffff !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

/* Modal Close Buttons */
#trackOrderModal button[onclick*="close"],
#clientFilePreviewModal button[onclick*="close"],
#waitlistModal button[onclick*="close"],
#policyTermsModalBox button[onclick*="close"],
#copySuccessModal button[aria-label="Tutup"],
#copySuccessModal #copySuccessCloseBtn,
.modal-close-btn {
  width: 2.5rem !important;
  height: 2.5rem !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#trackOrderModal button[onclick*="close"]:hover,
#clientFilePreviewModal button[onclick*="close"]:hover,
#waitlistModal button[onclick*="close"]:hover,
#policyTermsModalBox button[onclick*="close"]:hover,
#copySuccessModal button[aria-label="Tutup"]:hover,
#copySuccessModal #copySuccessCloseBtn:hover,
.modal-close-btn:hover {
  background-color: #ed0323 !important;
  color: #ffffff !important;
  transform: translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
}

/* Copy Success Modal Action Confirmation Button */
#copySuccessConfirmBtn {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0.75rem 1rem !important;
  background-color: #ffd224 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

#copySuccessConfirmBtn:hover {
  background-color: #ffc800 !important;
  color: #000000 !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

#copySuccessConfirmBtn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0px #000000 !important;
}

/* ==========================================================================
   SCROLLBAR UTILITIES - HIDE UGLY GREY TRACKS
   ========================================================================== */
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar,
.hide-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ==========================================================================
   STOP MOTION ANIMATION SYSTEM (SUBTLE & TASTEFUL MICRO-MOVEMENTS)
   Calm, discrete stepped movements that feel tactile and charming, never frantic
   ========================================================================== */

/* 1. Subtle Stop Motion Avatar Idle: Gentle, relaxed micro-breathe */
@keyframes stop-motion-idle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(-1px) rotate(0.5deg);
  }
}

/* 2. Calm Hover Effect: Tasteful, steady micro-lift without chaotic jitter */
@keyframes stop-motion-excited {
  0%, 100% {
    transform: translateY(-2px) scale(1.025);
  }
}

/* 3. Subtle Float for Badges / Stickers: Very gentle, relaxed breathing */
@keyframes stop-motion-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

/* 4. Subtle Pulse for Status Badge: Rock-solid stability without size twitching */
@keyframes stop-motion-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
  }
}

/* Utility Classes */
.stop-motion-avatar {
  display: inline-block;
  animation: stop-motion-idle 4.8s ease-in-out infinite !important;
  transform-origin: center bottom;
  will-change: transform;
  transition: transform 0.2s ease !important;
}

/* Neo-Brutalist Rigid Avatar System (Anti-Pill & Perfect Ratio) */
.neo-avatar-wrapper {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  max-width: 76px !important;
  max-height: 76px !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: 2.5px solid #1c1c1e !important;
  box-shadow: 3px 3px 0px #1c1c1e !important;
  position: relative !important;
  overflow: visible !important;
}

.neo-avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  display: block !important;
}

/* Admin Header Action Buttons Toolbar (No Collision / Clean Flow) */
#adminHeaderActionButtons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

#adminHeaderActionButtons button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.stop-motion-avatar:hover {
  animation: none !important;
  transform: translateY(-2.5px) scale(1.025) !important;
  cursor: pointer;
}

.stop-motion-pill {
  display: inline-block;
  animation: stop-motion-float 5s ease-in-out infinite !important;
  will-change: transform;
}

.stop-motion-badge {
  animation: stop-motion-pulse 3s ease-in-out infinite !important;
  display: inline-block;
}

.stop-motion-hover {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.stop-motion-hover:hover {
  animation: none !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 4px 4px 0px #1c1c1e !important;
}

/* ==========================================================================
   COMIC COMPONENT STYLES & RETRO POP-ART UTILITIES
   ========================================================================== */

/* Comic Book Card & Panel Styling */
.comic-card {
  border: 2px solid #1c1c1e !important;
  box-shadow: 2.5px 2.5px 0px #cbd5e1 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  background-color: #ffffff !important;
}

.comic-card:hover {
  border-color: #1c1c1e !important;
  box-shadow: 3.5px 3.5px 0px #1c1c1e !important;
  transform: translateY(-1.5px) !important;
}

.comic-card-selected {
  border: 2px solid #1c1c1e !important;
  box-shadow: 4px 4px 0px #1c1c1e !important;
  background-color: #ffffff !important;
}

/* Comic Pop Color Badges (100% Solid Fills with Bold Ink Outlines) */
.comic-badge-pink {
  background-color: #fe38ad !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-cyan {
  background-color: #01c6b7 !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-lime {
  background-color: #ace120 !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-yellow {
  background-color: #ffd224 !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-amber {
  background-color: #f28500 !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-red {
  background-color: #ed0323 !important;
  color: #ffffff !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-blue {
  background-color: #0080bf !important;
  color: #1c1c1e !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-purple {
  background-color: #7b2cbf !important;
  color: #ffffff !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

.comic-badge-ink {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  border: 1.5px solid #1c1c1e !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
  font-weight: 900 !important;
}

/* Comic Interactive Button */
.comic-btn {
  border: 2px solid #1c1c1e !important;
  box-shadow: 3px 3px 0px #1c1c1e !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  font-weight: 900 !important;
}

.comic-btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px #1c1c1e !important;
}

.comic-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
}

/* ==========================================================================
   MOTION GRAPHICS DESIGN SYSTEM (COMIC VECTOR & KINETIC MICRO-ACCENTS)
   Smooth, tasteful vector motion graphics that bring comic art to life
   ========================================================================== */

/* 1. Kinetic Rotating Circular Stamp Seal */
@keyframes mg-stamp-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mg-rotating-stamp {
  animation: mg-stamp-rotate 18s linear infinite !important;
  transform-origin: center center;
  will-change: transform;
}

/* 2. Motion Graphic Vector Sparkles (Pulsating & Floating Smoothly) */
@keyframes mg-sparkle-pulse {
  0%, 100% {
    transform: scale(0.9) rotate(0deg);
  }
  50% {
    transform: scale(1.15) rotate(12deg);
    opacity: 1;
  }
}

@keyframes mg-sparkle-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-3.5px) rotate(-12deg);
    opacity: 1;
  }
}

.mg-sparkle-pink {
  animation: mg-sparkle-pulse 3.4s ease-in-out infinite !important;
  transform-origin: center center;
  will-change: transform;
}

.mg-sparkle-cyan {
  animation: mg-sparkle-float 4.2s ease-in-out infinite !important;
  transform-origin: center center;
  will-change: transform;
}

.mg-sparkle-yellow {
  animation: mg-sparkle-pulse 2.9s ease-in-out infinite 0.7s !important;
  transform-origin: center center;
  will-change: transform;
}

/* 3. Subtle Comic Action Sunburst (Rotating Background Rays) */
@keyframes mg-sunburst-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mg-sunburst {
  animation: mg-sunburst-spin 50s linear infinite !important;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}

/* 4. Motion Graphic Badge Ping (Subtle Comic Radar Ping) */
@keyframes mg-badge-ring {
  0% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(0.96);
  }
}

.mg-ring-ping {
  animation: mg-badge-ring 2.8s ease-in-out infinite !important;
  pointer-events: none;
}

/* ==========================================================================
   5. BACKGROUND MOTION GRAPHIC KINETIC SYSTEM
   Hypnotic, mesmerizing, tasteful floating comic vector accents
   ========================================================================== */

/* Animated Halftone Mesh Pan */
@keyframes comic-bg-drift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0px 0px;
  }
  50% {
    background-position: 8% 6%, 92% 8%, 46% 94%, 18px 18px;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0px 0px;
  }
}

body.theme-user,
body[data-theme="user"] {
  animation: comic-bg-drift 18s ease-in-out infinite !important;
}

/* Kinetic Floating Pop-Art Comic Elements - Energetic & Clearly Visible */
@keyframes mg-float-vibrant-1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-24px) rotate(14deg) scale(1.08);
  }
}

@keyframes mg-float-vibrant-2 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(22px) rotate(-16deg) scale(0.95);
  }
}

@keyframes mg-float-vibrant-3 {
  0%, 100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(14px, -18px) rotate(12deg);
  }
  66% {
    transform: translate(-12px, 14px) rotate(-10deg);
  }
}

@keyframes mg-float-vibrant-4 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(-12deg);
  }
}

@keyframes mg-spin-vibrant {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mg-float-1 {
  animation: mg-float-vibrant-1 5.5s ease-in-out infinite !important;
  will-change: transform;
}

.mg-float-2 {
  animation: mg-float-vibrant-2 6.5s ease-in-out infinite !important;
  will-change: transform;
}

.mg-float-3 {
  animation: mg-float-vibrant-3 7.5s ease-in-out infinite !important;
  will-change: transform;
}

.mg-float-4 {
  animation: mg-float-vibrant-4 6s ease-in-out infinite 1s !important;
  will-change: transform;
}

.mg-float-5 {
  animation: mg-float-vibrant-2 5.8s ease-in-out infinite 0.5s !important;
  will-change: transform;
}

.mg-spin-slow {
  animation: mg-spin-vibrant 20s linear infinite !important;
  will-change: transform;
}

/* Comic Cat Loading Overlay Animation */
@keyframes comic-bar-fill-fast {
  0% {
    width: 0%;
  }
  25% {
    width: 35%;
  }
  60% {
    width: 75%;
  }
  85% {
    width: 92%;
  }
  100% {
    width: 100%;
  }
}

@keyframes comic-bar-fill-4s {
  0% {
    width: 0%;
  }
  20% {
    width: 28%;
  }
  50% {
    width: 65%;
  }
  80% {
    width: 88%;
  }
  100% {
    width: 100%;
  }
}

.comic-loading-bar-fill {
  width: 0%;
  background-image: none !important;
  cursor: grabbing !important;
}

.wa-floating-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  animation: waComicFloat 3s ease-in-out infinite !important;
  cursor: grab !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.wa-floating-btn:hover {
  animation-play-state: paused !important;
  transform: translateY(-4px) scale(1.06) !important;
}

.wa-floating-btn:active {
  cursor: grabbing !important;
  transform: translateY(2px) scale(0.98) !important;
}

.wa-callout-top {
  color: #ffd224 !important;
  font-weight: 900 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-align: center !important;
  display: block !important;
  paint-order: stroke fill !important;
  -webkit-text-stroke: 2.8px #1c1c1e !important;
  filter: drop-shadow(1.5px 1.5px 0px #1c1c1e) !important;
}

.wa-callout-bottom {
  color: #ffffff !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  transform: rotate(-1.5deg) !important;
  text-align: center !important;
  margin-top: 1px !important;
  margin-bottom: 2px !important;
  display: block !important;
  paint-order: stroke fill !important;
  -webkit-text-stroke: 3.2px #1c1c1e !important;
  filter: drop-shadow(2px 2px 0px #1c1c1e) !important;
}

.wa-bubble-wrap {
  position: relative !important;
  width: 82px !important;
  height: 94px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 8px !important;
  box-sizing: border-box !important;
}

.wa-bubble-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.wa-bubble-inner-card {
  position: relative !important;
  z-index: 10 !important;
  width: 62px !important;
  height: 62px !important;
  background-color: #25D366 !important;
  border-radius: 16px !important;
  border: 2px solid #1c1c1e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 2px 4px #ffffff !important;
}

.wa-badge-ringing {
  position: absolute !important;
  top: 2px !important;
  right: 0px !important;
  z-index: 25 !important;
  width: 26px !important;
  height: 26px !important;
  background-color: #ff4757 !important;
  color: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  border-radius: 9999px !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: waPulseBadge 1.8s ease-in-out infinite !important;
}

@keyframes waPulseBadge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* ==========================================================================
   INTERACTIVE POP-UP CHAT CARD (OPSI 3 - WHATSAPP LIVE WIDGET)
   ========================================================================== */
.wa-chat-popup-widget {
  position: fixed !important;
  bottom: 22px !important;
  right: 22px !important;
  z-index: 180 !important;
  width: 255px !important;
  max-width: calc(100vw - 28px) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
  cursor: grab !important;
  pointer-events: auto !important;
}

.wa-chat-popup-widget.is-dragging {
  cursor: grabbing !important;
  z-index: 250 !important;
}

.wa-chat-popup-card {
  background: #ffffff !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 3.5px 3.5px 0px #1c1c1e !important;
  border-radius: 20px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
  animation: waComicCardFloat 4s ease-in-out infinite !important;
}

.wa-chat-popup-widget:hover .wa-chat-popup-card {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0px #1c1c1e !important;
}

.wa-chat-popup-widget.is-dragging .wa-chat-popup-card {
  animation: none !important;
  transform: scale(1.03) !important;
  box-shadow: 7px 7px 0px #1c1c1e !important;
  cursor: grabbing !important;
}

@keyframes waComicCardFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

.wa-chat-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 9px !important;
  margin-bottom: 9px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.wa-avatar-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}

.wa-avatar-icon {
  width: 38px !important;
  height: 38px !important;
  background-color: #25D366 !important;
  border: 2px solid #1c1c1e !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 2px 0px #1c1c1e !important;
}

.wa-online-pulse {
  position: absolute !important;
  bottom: -1px !important;
  right: -1px !important;
  width: 11px !important;
  height: 11px !important;
  background-color: #27c93f !important;
  border: 2px solid #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 0 1px #1c1c1e !important;
}

.wa-header-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex-grow: 1 !important;
}

.wa-header-title {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #1c1c1e !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wa-header-subtitle {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #27c93f !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 1px !important;
  line-height: 1 !important;
}

.wa-status-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #27c93f !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.wa-drag-hint {
  flex-shrink: 0 !important;
  cursor: grab !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
}

.wa-drag-hint:hover {
}

.wa-chat-body-text {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  line-height: 1.4 !important;
  margin: 0 0 11px 0 !important;
}

.wa-chat-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  background-color: #1c1c1e !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  border: 2px solid #1c1c1e !important;
  text-decoration: none !important;
  box-shadow: 2.5px 2.5px 0px #1c1c1e !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.wa-chat-cta-btn:hover {
  background-color: #ffd224 !important;
  color: #1c1c1e !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 3.5px 3.5px 0px #1c1c1e !important;
}

.wa-chat-cta-btn:active {
  transform: translateY(1.5px) !important;
  box-shadow: 1px 1px 0px #1c1c1e !important;
}

/* ==========================================================================
   SIMPLE WHATSAPP FLOATING BUTTON (CLEAN & COMPACT FAB)
   ========================================================================== */
.wa-simple-widget {
  position: fixed !important;
  bottom: 24px;
  right: 24px;
  z-index: 180 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
  touch-action: none !important;
  cursor: grab !important;
  pointer-events: auto !important;
}

.wa-simple-widget.is-dragging {
  cursor: grabbing !important;
  z-index: 250 !important;
  transition: none !important;
}

.wa-simple-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
}

.wa-circle-btn {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  background-color: #25D366 !important;
  border: 2.5px solid #1c1c1e !important;
  box-shadow: 4px 4px 0px #1c1c1e !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: grab !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
  animation: waComicPulse 3s ease-in-out infinite !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

.wa-circle-btn svg,
.wa-circle-btn svg * {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.wa-simple-widget:hover .wa-circle-btn {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 5px 5px 0px #1c1c1e !important;
}

.wa-simple-widget.is-dragging .wa-circle-btn {
  animation: none !important;
  transition: none !important;
  transform: scale(1.06) !important;
  cursor: grabbing !important;
  box-shadow: 6px 6px 0px #1c1c1e !important;
}

@keyframes waComicPulse {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.03);
  }
}

.wa-badge-unread {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: #ed0323 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border: 2px solid #1c1c1e !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 1.5px 1.5px 0px #1c1c1e !important;
}

@media (max-width: 640px) {
  .wa-simple-widget {
    bottom: 16px !important;
    right: 16px !important;
  }
  .wa-circle-btn {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0px #1c1c1e !important;
  }
  .wa-circle-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
  .wa-floating-container {
    bottom: 16px !important;
    right: 16px !important;
  }
  .wa-chat-popup-widget {
    bottom: 16px !important;
    right: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ==========================================================================
   HERO MASCOT COMIC STICKER FRAMING
   Die-Cut Pop-Art Comic Sticker Style (Harmonized with 2D Vectors)
   ========================================================================== */
.hero-mascot-sticker,
.hero-mascot-vanellope {
  filter: 
    drop-shadow(2px 0 0 #ffffff) 
    drop-shadow(-2px 0 0 #ffffff) 
    drop-shadow(0 2px 0 #ffffff) 
    drop-shadow(0 -2px 0 #ffffff)
    drop-shadow(2.5px 2.5px 0 #1c1c1e)
    drop-shadow(-2px -2px 0 #1c1c1e)
    drop-shadow(4px 4px 0 #1c1c1e) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.hero-mascot-sticker:hover,
.hero-mascot-vanellope:hover {
  transform: scale(1.05) rotate(-2deg) !important;
}

/* ==========================================================================
   NEO-BRUTALIST TRUST RIBBON (STUDENT ACADEMIC TRUST SIGNALS)
   ========================================================================== */
.trust-badge-card {
  border: 2px solid #1c1c1e !important;
  box-shadow: 3px 3px 0px #1c1c1e !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.trust-badge-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4px 4px 0px #1c1c1e !important;
}

/* ==========================================================================
   SI KUCING ANOMALY (SUHU SKS) HERO MASCOT COMIC SVG
   Retro Pop-Art Comic / Neo-Brutalist 2D Vector with 12 FPS Stepped Stop-Motion
   ========================================================================== */
.anomaly-mascot-wrapper {
  display: inline-block;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anomaly-mascot-wrapper:hover {
  transform: scale(1.04) rotate(-1.5deg);
}

.anomaly-mascot-svg {
  filter: drop-shadow(5px 5px 0px #1c1c1e);
  overflow: visible;
}

/* Stepped Animation (12 FPS Stop-Motion Boiling & Twitches) */
.mascot-wiggle-slow {
  transform-origin: center bottom;
  animation: mascotBoil 0.5s steps(3, end) infinite alternate;
}

.mascot-ear-twitch {
  transform-origin: 75px 62px;
  animation: earTwitch 1.6s steps(2, end) infinite;
}

.mascot-glasses-shine {
  animation: glassesFlash 1.2s steps(2, end) infinite;
}

.mascot-Float-badge {
  animation: badgeBounce 0.8s steps(4, end) infinite alternate;
}

@keyframes mascotBoil {
  0%   { transform: rotate(-1.2deg) scale(1); }
  50%  { transform: rotate(1.2deg) scale(1.01, 0.99); }
  100% { transform: rotate(-0.5deg) scale(0.99, 1.01); }
}

@keyframes earTwitch {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(-10deg); }
  92% { transform: rotate(6deg); }
}

@keyframes glassesFlash {
  0%, 70%, 100% { opacity: 1; }
  75%, 90% { opacity: 1; }
}

@keyframes badgeBounce {
  0%   { transform: translateY(0px) rotate(-6deg); }
  100% { transform: translateY(-6px) rotate(4deg); }
}

/* ==========================================================================
   OWL ACADEMIC MASCOT ("SI PINTAR SIAP MEMBANTU")
   Smooth 60 FPS Gentle Float Animation - Bebas Patah-Patah & Rapi Bersih
   ========================================================================== */
.owl-smooth-float {
  animation: owlFloatSmooth 3s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes owlFloatSmooth {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(1.2deg);
  }
  100% {
    transform: translateY(0px) rotate(-1.2deg);
  }
}

.owl-mascot-sticker {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.owl-mascot-sticker:hover {
  transform: scale(1.05);
}

#heroMascotImg,
.owl-mascot-sticker,
.stop-motion-avatar {
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TOUCH TARGET OPTIMIZATIONS (Smartphones / HP)
   1-Col Grid below md, Min 16px Input Font-Size, 44-48px Touch Targets,
   92-95% Centered Modals & Smooth Horizontal Navigation Scroll
   ========================================================================== */

/* 1. Universal Grid Card Layanan (Single Column below md breakpoint < 768px) */
@media (max-width: 767px) {
  #priceGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  .service-card,
  #priceGrid > div {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 2. Mobile Page Edge Padding (Min 16px = 1rem on Left & Right) */
@media (max-width: 640px) {
  body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }

  main,
  .main-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 3. Input Font-Size (Strictly Min 16px to Prevent iOS/Android Auto-Zoom) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="datetime-local"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Compact toolbar selects: preserve clean proportional padding on mobile */
  #adminOrderSortSelect,
  #adminOrderMemberSelect,
  #memberTaskSortSelect,
  #memberTaskFilterSelect,
  #adminPageSizeSelect {
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    height: 36px !important;
  }

  /* 4. Large Thumb Touch Targets (Min Height 44px - 48px) */
  #submitBtn,
  #submitPaymentBtn,
  #goToOrderBtn,
  #trackSearchBtn,
  .hero-wa-btn,
  .order-cta-btn,
  button[type="submit"],
  .comic-btn-lg {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
  }

  /* Card Action Buttons (Detail & + Pilih) */
  .service-card button,
  #priceGrid button:not(.counter-btn) {
    min-height: 44px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. Modal Boxes on Mobile (92% - 95% Width Centered, Easy Close X) */
  #trackOrderModal > div,
  #clientFilePreviewModal > div,
  #waitlistModal > div,
  #policyTermsModalBox,
  #ratingModal > div,
  #copySuccessModal > div,
  .modal-box-responsive {
    width: 94% !important;
    max-width: 94% !important;
    margin: auto !important;
    padding: 1.1rem !important;
    max-height: 90vh !important;
    box-sizing: border-box !important;
  }

  /* Modal Close Button Accessible Touch Target */
  #trackOrderModal button[onclick*="close"],
  #clientFilePreviewModal button[onclick*="close"],
  #waitlistModal button[onclick*="close"],
  #policyTermsModalBox button[onclick*="close"],
  #copySuccessModal button[aria-label="Tutup"],
  #copySuccessModal #copySuccessCloseBtn,
  #ratingModal button[onclick*="close"] {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* 6. Top Navigation Horizontal Scroll (No Overlap, Smooth Swipe) */
  .nav-segment {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border: 1.5px solid #1c1c1e !important;
    box-shadow: 2px 2px 0px #1c1c1e !important;
  }

  .nav-segment::-webkit-scrollbar {
    display: none !important;
  }

  .nav-segment a,
  .nav-segment button {
    padding: 0 0.65rem !important;
    font-size: 0.72rem !important;
    height: 36px !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
  }

  .nav-segment a.active,
  .nav-segment a.bg-\[\#1c1c1e\],
  .nav-segment a.bg-black,
  .nav-segment a[class~="bg-[#1c1c1e]"],
  .nav-segment a[class~="bg-black"],
  .nav-segment button.active,
  .nav-segment button.bg-\[\#1c1c1e\],
  .nav-segment button.bg-black,
  .nav-segment button[class~="bg-[#1c1c1e]"],
  .nav-segment button[class~="bg-black"] {
    font-weight: 600 !important;
  }

  
/* Admin & Member Logout Button in Navbar */
.nav-segment a#adminLogout,
.nav-segment a#memberLogout,
#adminLogout,
#memberLogout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  background-color: #c8102e !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: 3px 3px 0 #1c1c1e !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.nav-segment a#adminLogout:hover,
.nav-segment a#memberLogout:hover,
#adminLogout:hover,
#memberLogout:hover {
  background-color: #a80f26 !important;
  color: #ffffff !important;
  border-color: #1c1c1e !important;
  box-shadow: 3px 3px 0 #1c1c1e !important;
}

/* Red Exit Icon inside Logout Button */
.nav-segment a#adminLogout svg,
.nav-segment a#memberLogout svg,
#adminLogout svg,
#memberLogout svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
}

.nav-segment a#adminLogout:hover svg,
.nav-segment a#memberLogout:hover svg,
#adminLogout:hover svg,
#memberLogout:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.nav-segment svg {
    width: 0.85rem !important;
    height: 0.85rem !important;
    flex-shrink: 0 !important;
  }
}

/* Keep long action copy readable on desktop and compact on phones. */
.responsive-label-short { display: none !important; }

@media (max-width: 640px) {
  .responsive-label-full { display: none !important; }
  .responsive-label-short { display: inline !important; }
}

/* Symmetric mobile layout: wrap controls instead of clipping them off-screen. */
.nav-label-mobile {
  display: none;
}

@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    padding-left: clamp(8px, 3.5vw, 16px) !important;
    padding-right: clamp(8px, 3.5vw, 16px) !important;
  }

  #adminHeaderActionButtons {
    justify-content: center !important;
  }

  #adminHeaderActionButtons > button {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body > main,
  body main,
  .main-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(10px, 3.5vw, 16px) !important;
    padding-right: clamp(10px, 3.5vw, 16px) !important;
  }

  body main > *,
  .main-container > * {
    min-width: 0;
    max-width: 100%;
  }

  #heroConsultBtn {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 32rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #heroConsultBtn .responsive-label-short {
    flex: 0 1 auto !important;
    text-align: center !important;
  }

  #heroConsultBtn svg {
    display: block !important;
    flex: 0 0 1rem !important;
    margin: 0 !important;
  }

  .nav-segment {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0.25rem !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
  }

  .nav-segment > a,
  .nav-segment > button,
  .nav-segment a#adminLogout,
  .nav-segment a#memberLogout {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 0.45rem 0.3rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    line-height: 1.2 !important;
    flex-shrink: 1 !important;
    font-size: 0.7rem !important;
  }

  .nav-segment > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .nav-segment > div > button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: normal !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }

  .nav-segment .nav-label-full {
    display: none !important;
  }

  .nav-segment .nav-label-mobile {
    display: inline !important;
  }

  #adminProjectFilterBar,
  #memberTaskFilterBar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #adminProjectFilterBar > button,
  #memberTaskFilterBar > button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 0.4rem 0.35rem !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  #memberCatFilterWrap {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #memberCatFilterWrap > div {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  #memberCatFilterBar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #memberCatFilterBar > button {
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 0.45rem 0.3rem !important;
  }

  #adminOrderActionButtons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #adminOrderActionButtons > button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    white-space: normal !important;
  }

  .date-pill-group {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  .date-pill-group > button {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    font-size: 0.68rem !important;
  }

  #memberTaskToolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  #memberTaskToolbar > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
  }

  #memberTaskToolbar > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
  }

  #memberTaskToolbar > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    justify-content: center !important;
  }

  #adminDashboardShell,
  #memberDashboardShell,
  #adminFinanceShell,
  #adminMembersShell,
  #adminServicesShell,
  #adminReviewsShell,
  #adminSettingsShell,
  #memberFinanceShell,
  #memberProfileShell,
  #viewerContainer {
    border-radius: clamp(16px, 5vw, 24px) !important;
  }
}

@media (max-width: 360px) {
  .nav-segment {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main {
    border-radius: 16px !important;
  }

  button,
  select {
    max-width: 100%;
  }
}

/* ==========================================================================
   STRICT DUAL RULE (SELURUH SISTEM TANPA TERKECUALI):
   1. APABILA BACKGROUND WARNA SOLID (hitam, kuning, biru, hijau, merah, pink, ungu, abu, oranye, dsb.)
      -> TEKS TULISAN WAJIB PUTIH (color: #ffffff !important)
   2. APABILA BACKGROUND WARNA PUTIH (bg-white, bg-[#ffffff], bg-[#fff])
      -> TEKS TULISAN WAJIB HITAM (color: #000000 !important)
   Mencegah segala bentuk teks tidak terlihat / putih di atas putih.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ATURAN 1: BACKGROUND WARNA SOLID (Whole-word selectors only, NO substring match)
   -------------------------------------------------------------------------- */
.bg-black,
.bg-\[\#1c1c1e\],
.bg-\[\#000000\],
.bg-\[\#ffd224\],
.bg-\[\#fe38ad\],
.bg-\[\#ed0323\],
.bg-\[\#15803d\],
.bg-\[\#16a34a\],
.bg-\[\#059669\],
.bg-\[\#0d9488\],
.bg-\[\#0284c7\],
.bg-\[\#0080bf\],
.bg-\[\#2563eb\],
.bg-\[\#1d4ed8\],
.bg-\[\#4f46e5\],
.bg-\[\#7c3aed\],
.bg-\[\#9333ea\],
.bg-\[\#db2777\],
.bg-\[\#e11d48\],
.bg-\[\#b91c1c\],
.bg-\[\#ea580c\],
.bg-\[\#d97706\],
.bg-\[\#9a3412\],
.bg-\[\#475569\],
.bg-\[\#334155\],
[class~="bg-black"],
[class~="bg-[#1c1c1e]"],
[class~="bg-[#ffd224]"],
[class~="bg-[#fe38ad]"],
[class~="bg-[#ed0323]"],
[class~="bg-[#15803d]"],
[class~="bg-[#16a34a]"],
[class~="bg-[#059669]"],
[class~="bg-[#0d9488]"],
[class~="bg-[#0284c7]"],
[class~="bg-[#0080bf]"],
[class~="bg-[#2563eb]"],
[class~="bg-[#1d4ed8]"],
[class~="bg-[#4f46e5]"],
[class~="bg-[#7c3aed]"],
[class~="bg-[#9333ea]"],
[class~="bg-[#db2777]"],
[class~="bg-[#e11d48]"],
[class~="bg-[#b91c1c]"],
[class~="bg-[#ea580c]"],
[class~="bg-[#d97706]"],
[class~="bg-[#9a3412]"],
[class~="bg-[#475569]"],
[class~="bg-[#334155]"] {
  color: #ffffff !important;
}

/* ==========================================================================
   TINGKAT 1: ATURAN SOLID (BACKGROUND SOLID / WARNA-WARNI -> TEKS MUTLAK PUTIH)
   Diterapkan pertama kali pada elemen berlatar solid (menggunakan class~ agar tidak mengenai hover/backdrop)
   ========================================================================== */
.bg-black,
.bg-\[\#1c1c1e\],
[class~="bg-black"],
[class~="bg-[#1c1c1e]"],
[class~="bg-[#ed0323]"],
[class~="bg-[#15803d]"],
[class~="bg-[#16a34a]"],
[class~="bg-[#0284c7]"],
[class~="bg-[#7c3aed]"],
[class~="bg-[#fe38ad]"],
[class~="bg-[#d97706]"],
[class~="bg-[#ea580c]"],
[class~="bg-[#9a3412]"],
[class~="bg-[#475569]"],
[class~="bg-[#334155]"],
[class~="bg-[#b91c1c]"],
.marquee-container,
.marquee-content {
  color: #ffffff !important;
}

.bg-black *,
.bg-\[\#1c1c1e\] *,
[class~="bg-black"] *,
[class~="bg-[#1c1c1e]"] *,
[class~="bg-[#ed0323]"] *,
[class~="bg-[#15803d]"] *,
[class~="bg-[#16a34a]"] *,
[class~="bg-[#0284c7]"] *,
[class~="bg-[#7c3aed]"] *,
[class~="bg-[#fe38ad]"] *,
[class~="bg-[#d97706]"] *,
[class~="bg-[#ea580c]"] *,
[class~="bg-[#9a3412]"] *,
[class~="bg-[#475569]"] *,
[class~="bg-[#334155]"] *,
[class~="bg-[#b91c1c]"] *,
.marquee-container *,
.marquee-content * {
  color: #ffffff !important;
}

/* SVG di dalam background solid */
.bg-black svg,
.bg-\[\#1c1c1e\] svg,
[class~="bg-black"] svg,
[class~="bg-[#1c1c1e]"] svg,
[class~="bg-[#ffd224]"] svg,
[class~="bg-[#fe38ad]"] svg,
[class~="bg-[#ed0323]"] svg,
[class~="bg-[#15803d]"] svg,
[class~="bg-[#16a34a]"] svg,
[class~="bg-[#0284c7]"] svg,
[class~="bg-[#7c3aed]"] svg,
[class~="bg-[#d97706]"] svg,
[class~="bg-[#ea580c]"] svg,
[class~="bg-[#475569]"] svg,
[class~="bg-[#b91c1c]"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ==========================================================================
   TINGKAT 2: ATURAN BACKGROUND PUTIH (MENGALAHKAN ATURAN SOLID LELUHUR)
   Karena ditulis SETELAH aturan solid, aturan !important ini secara mutlak
   memenangkan selektor untuk seluruh elemen berlatar putih (kartu, dialog, modal, badge, tombol, avatar)
   ========================================================================== */
.bg-white,
[class~="bg-white"],
[class~="bg-[#ffffff]"],
[class~="bg-[#fff]"],
dialog,
dialog *,
form.bg-white,
form.bg-white *,
.bg-white *,
[class~="bg-white"] *,
[class~="bg-[#ffffff]"] *,
[class~="bg-[#fff]"] *,
label[for="adminPhotoUpdate"],
label[for="adminPhotoUpdate"] *,
label[for="memberPhotoUpdate"],
label[for="memberPhotoUpdate"] *,
label[for*="PhotoUpdate"],
label[for*="PhotoUpdate"] *,
.neo-avatar-wrapper label,
.neo-avatar-wrapper label *,
.count-badge,
.count-badge *,
[class*="count-badge"],
[class*="count-badge"] *,
#adminCountAll,
#tabCountMembers,
#tabCountAdmins,
.tab-btn.active .count-badge,
.tab-btn.active .count-badge *,
.admin-filter-btn.active .count-badge,
.admin-filter-btn.active .count-badge *,
.member-filter-btn.active .count-badge,
.member-filter-btn.active .count-badge * {
  color: #000000 !important;
}

/* Background putih tegas */
.bg-white,
[class~="bg-white"],
[class~="bg-[#ffffff]"],
[class~="bg-[#fff]"],
dialog,
label[for="adminPhotoUpdate"],
label[for="memberPhotoUpdate"],
label[for*="PhotoUpdate"],
.neo-avatar-wrapper label,
.tab-btn.active .count-badge,
.admin-filter-btn.active .count-badge,
.member-filter-btn.active .count-badge,
#adminCountAll,
#tabCountMembers,
#tabCountAdmins {
  background-color: #ffffff !important;
}

/* Seluruh icon SVG di dalam elemen putih mutlak berwarna hitam */
.bg-white svg,
.bg-white svg *,
[class~="bg-white"] svg,
[class~="bg-white"] svg *,
dialog svg,
dialog svg *,
label[for="adminPhotoUpdate"] svg,
label[for="adminPhotoUpdate"] svg *,
label[for="memberPhotoUpdate"] svg,
label[for="memberPhotoUpdate"] svg *,
label[for*="PhotoUpdate"] svg,
label[for*="PhotoUpdate"] svg *,
.neo-avatar-wrapper label svg,
.neo-avatar-wrapper label svg *,
button.bg-white svg,
button.bg-white svg *,
button[class~="bg-white"] svg,
button[class~="bg-white"] svg *,
a.bg-white svg,
a.bg-white svg *,
a[class~="bg-white"] svg,
a[class~="bg-white"] svg *,
.count-badge svg,
.count-badge svg * {
  color: #1c1c1e !important;
  stroke: #1c1c1e !important;
}

/* ==========================================================================
   TINGKAT 3: ELEMEN SOLID YANG BERADA DI DALAM CONTAINER PUTIH
   (Misal: tombol solid submit di dalam modal putih, badge solid di dalam card putih)
   ========================================================================== */
.bg-white [class~="bg-[#1c1c1e]"],
.bg-white [class~="bg-[#1c1c1e]"] *,
.bg-white [class~="bg-black"],
.bg-white [class~="bg-black"] *,
.bg-white [class~="bg-[#15803d]"],
.bg-white [class~="bg-[#15803d]"] *,
.bg-white [class~="bg-[#16a34a]"],
.bg-white [class~="bg-[#16a34a]"] *,
.bg-white [class~="bg-[#0284c7]"],
.bg-white [class~="bg-[#0284c7]"] *,
.bg-white [class~="bg-[#7c3aed]"],
.bg-white [class~="bg-[#7c3aed]"] *,
.bg-white [class~="bg-[#ed0323]"],
.bg-white [class~="bg-[#ed0323]"] *,
.bg-white [class~="bg-[#fe38ad]"],
.bg-white [class~="bg-[#fe38ad]"] *,
.bg-white [class~="bg-[#ea580c]"],
.bg-white [class~="bg-[#ea580c]"] *,
.bg-white [class~="bg-[#d97706]"],
.bg-white [class~="bg-[#d97706]"] *,
.bg-white [class~="bg-[#ffd224]"],
.bg-white [class~="bg-[#ffd224]"] *,
.bg-white [class~="bg-[#01c6b7]"],
.bg-white [class~="bg-[#01c6b7]"] *,
.bg-white [class~="bg-[#475569]"],
.bg-white [class~="bg-[#475569]"] *,
.bg-white [class~="bg-[#334155]"],
.bg-white [class~="bg-[#334155]"] *,
.bg-white [class~="bg-[#b91c1c]"],
.bg-white [class~="bg-[#b91c1c]"] *,
.bg-white [class~="bg-[#0d9488]"],
.bg-white [class~="bg-[#0d9488]"] *,
.bg-white [class~="bg-[#4f46e5]"],
.bg-white [class~="bg-[#4f46e5]"] *,
.bg-white [class~="bg-[#0080bf]"],
.bg-white [class~="bg-[#0080bf]"] *,
.bg-white [class~="bg-[#9a3412]"],
.bg-white [class~="bg-[#9a3412]"] *,
.bg-white [class~="bg-[#db2777]"],
.bg-white [class~="bg-[#db2777]"] *,
.bg-white [class~="bg-[#e11d48]"],
.bg-white [class~="bg-[#e11d48]"] *,
.bg-white [class~="bg-[#059669]"],
.bg-white [class~="bg-[#059669]"] *,
.bg-white [class~="bg-[#9333ea]"],
.bg-white [class~="bg-[#9333ea]"] *,
.bg-white [class~="bg-[#2563eb]"],
.bg-white [class~="bg-[#2563eb]"] *,
.bg-white [class~="bg-[#1d4ed8]"],
.bg-white [class~="bg-[#1d4ed8]"] *,
.bg-white [class~="bg-emerald-700"],
.bg-white [class~="bg-emerald-700"] *,
.bg-white [class~="bg-slate-600"],
.bg-white [class~="bg-slate-600"] *,
.bg-white [class~="bg-amber-600"],
.bg-white [class~="bg-amber-600"] *,
.bg-white [class~="bg-purple-700"],
.bg-white [class~="bg-purple-700"] *,
[class~="bg-white"] [class~="bg-[#1c1c1e]"],
[class~="bg-white"] [class~="bg-[#1c1c1e]"] *,
[class~="bg-white"] [class~="bg-black"],
[class~="bg-white"] [class~="bg-black"] *,
[class~="bg-white"] [class~="bg-[#15803d]"],
[class~="bg-white"] [class~="bg-[#15803d]"] *,
[class~="bg-white"] [class~="bg-[#16a34a]"],
[class~="bg-white"] [class~="bg-[#16a34a]"] *,
[class~="bg-white"] [class~="bg-[#0284c7]"],
[class~="bg-white"] [class~="bg-[#0284c7]"] *,
[class~="bg-white"] [class~="bg-[#7c3aed]"],
[class~="bg-white"] [class~="bg-[#7c3aed]"] *,
[class~="bg-white"] [class~="bg-[#ed0323]"],
[class~="bg-white"] [class~="bg-[#ed0323]"] *,
[class~="bg-white"] [class~="bg-[#fe38ad]"],
[class~="bg-white"] [class~="bg-[#fe38ad]"] *,
[class~="bg-white"] [class~="bg-[#ea580c]"],
[class~="bg-white"] [class~="bg-[#ea580c]"] *,
[class~="bg-white"] [class~="bg-[#d97706]"],
[class~="bg-white"] [class~="bg-[#d97706]"] *,
[class~="bg-white"] [class~="bg-[#ffd224]"],
[class~="bg-white"] [class~="bg-[#ffd224]"] *,
[class~="bg-white"] [class~="bg-[#01c6b7]"],
[class~="bg-white"] [class~="bg-[#01c6b7]"] *,
[class~="bg-white"] [class~="bg-[#475569]"],
[class~="bg-white"] [class~="bg-[#475569]"] *,
[class~="bg-white"] [class~="bg-[#334155]"],
[class~="bg-white"] [class~="bg-[#334155]"] *,
[class~="bg-white"] [class~="bg-[#b91c1c]"],
[class~="bg-white"] [class~="bg-[#b91c1c]"] *,
[class~="bg-white"] [class~="bg-[#0d9488]"],
[class~="bg-white"] [class~="bg-[#0d9488]"] *,
[class~="bg-white"] [class~="bg-[#4f46e5]"],
[class~="bg-white"] [class~="bg-[#4f46e5]"] *,
[class~="bg-white"] [class~="bg-[#0080bf]"],
[class~="bg-white"] [class~="bg-[#0080bf]"] *,
[class~="bg-white"] [class~="bg-[#9a3412]"],
[class~="bg-white"] [class~="bg-[#9a3412]"] *,
[class~="bg-white"] [class~="bg-[#db2777]"],
[class~="bg-white"] [class~="bg-[#db2777]"] *,
[class~="bg-white"] [class~="bg-[#e11d48]"],
[class~="bg-white"] [class~="bg-[#e11d48]"] *,
[class~="bg-white"] [class~="bg-[#059669]"],
[class~="bg-white"] [class~="bg-[#059669]"] *,
[class~="bg-white"] [class~="bg-[#9333ea]"],
[class~="bg-white"] [class~="bg-[#9333ea]"] *,
[class~="bg-white"] [class~="bg-[#2563eb]"],
[class~="bg-white"] [class~="bg-[#2563eb]"] *,
[class~="bg-white"] [class~="bg-[#1d4ed8]"],
[class~="bg-white"] [class~="bg-[#1d4ed8]"] *,
[class~="bg-white"] [class~="bg-emerald-700"],
[class~="bg-white"] [class~="bg-emerald-700"] *,
[class~="bg-white"] [class~="bg-slate-600"],
[class~="bg-white"] [class~="bg-slate-600"] *,
[class~="bg-white"] [class~="bg-amber-600"],
[class~="bg-white"] [class~="bg-amber-600"] *,
[class~="bg-white"] [class~="bg-purple-700"],
[class~="bg-white"] [class~="bg-purple-700"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#0d9488]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#0d9488]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#4f46e5]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#4f46e5]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#0080bf]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#0080bf]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#9a3412]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#9a3412]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#db2777]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#db2777]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#e11d48]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#e11d48]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#059669]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#059669]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#1c1c1e]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#1c1c1e]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-black"],
[class*="bg-[#fffdf5]"] [class~="bg-black"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#16a34a]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#16a34a]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#d97706]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#d97706]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#ea580c]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#ea580c]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#7c3aed]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#7c3aed]"] *,
[class*="bg-[#fffdf5]"] [class~="bg-[#475569]"],
[class*="bg-[#fffdf5]"] [class~="bg-[#475569]"] *,
.bg-white .bg-emerald-100,
.bg-white .bg-emerald-100 *,
.bg-white [class~="bg-emerald-100"],
.bg-white [class~="bg-emerald-100"] *,
.bg-white .bg-emerald-50,
.bg-white .bg-emerald-50 *,
.bg-white [class~="bg-emerald-50"],
.bg-white [class~="bg-emerald-50"] *,
.bg-white .bg-[#15803d],
.bg-white .bg-[#15803d] *,
.bg-white [class~="bg-[#15803d]"],
.bg-white [class~="bg-[#15803d]"] *,
[class~="bg-white"] .bg-emerald-100,
[class~="bg-white"] .bg-emerald-100 *,
[class~="bg-white"] [class~="bg-emerald-100"],
[class~="bg-white"] [class~="bg-emerald-100"] *,
[class~="bg-white"] .bg-emerald-50,
[class~="bg-white"] .bg-emerald-50 *,
[class~="bg-white"] [class~="bg-emerald-50"],
[class~="bg-white"] [class~="bg-emerald-50"] *,
[class~="bg-white"] .bg-[#15803d],
[class~="bg-white"] .bg-[#15803d] *,
[class~="bg-white"] [class~="bg-[#15803d]"],
[class~="bg-white"] [class~="bg-[#15803d]"] *,
.bg-white .text-white,
.bg-white [class~="text-white"],
.bg-white .text-white *,
.bg-white [class~="text-white"] *,
[class~="bg-white"] .text-white,
[class~="bg-white"] [class~="text-white"],
[class~="bg-white"] .text-white *,
[class~="bg-white"] [class~="text-white"] *,
[class*="bg-[#fffdf5]"] .text-white,
[class*="bg-[#fffdf5]"] [class~="text-white"],
[class*="bg-[#fffdf5]"] .text-white *,
[class*="bg-[#fffdf5]"] [class~="text-white"] *,
article .text-white,
article [class~="text-white"],
article .text-white *,
article [class~="text-white"] *,
#sortBtnAsc.active,
#sortBtnAsc.active *,
#sortBtnDesc.active,
#sortBtnDesc.active *,
#sortBtnDefault.active,
#sortBtnDefault.active *,
.dur-btn.active,
.dur-btn.active *,
#sortBtnAsc[style*="1c1c1e"],
#sortBtnAsc[style*="1c1c1e"] *,
#sortBtnDesc[style*="1c1c1e"],
#sortBtnDesc[style*="1c1c1e"] *,
#sortBtnDefault[style*="1c1c1e"],
#sortBtnDefault[style*="1c1c1e"] *,
.dur-btn[style*="1c1c1e"],
.dur-btn[style*="1c1c1e"] *,
#sortBtnAsc[style*="rgb(28, 28, 30)"],
#sortBtnAsc[style*="rgb(28, 28, 30)"] *,
#sortBtnDesc[style*="rgb(28, 28, 30)"],
#sortBtnDesc[style*="rgb(28, 28, 30)"] *,
#sortBtnDefault[style*="rgb(28, 28, 30)"],
#sortBtnDefault[style*="rgb(28, 28, 30)"] *,
.dur-btn[style*="rgb(28, 28, 30)"],
.dur-btn[style*="rgb(28, 28, 30)"] *,
.bg-white [style*="background:#1c1c1e"],
.bg-white [style*="background:#1c1c1e"] *,
.bg-white [style*="background: #1c1c1e"],
.bg-white [style*="background: #1c1c1e"] *,
.bg-white [style*="background-color:#1c1c1e"],
.bg-white [style*="background-color:#1c1c1e"] *,
.bg-white [style*="background-color: #1c1c1e"],
.bg-white [style*="background-color: #1c1c1e"] *,
.bg-white [style*="background: rgb(28, 28, 30)"],
.bg-white [style*="background: rgb(28, 28, 30)"] *,
.bg-white [style*="background-color: rgb(28, 28, 30)"],
.bg-white [style*="background-color: rgb(28, 28, 30)"] *,
[class~="bg-white"] [style*="background:#1c1c1e"],
[class~="bg-white"] [style*="background:#1c1c1e"] *,
[class~="bg-white"] [style*="background: #1c1c1e"],
[class~="bg-white"] [style*="background: #1c1c1e"] *,
[class~="bg-white"] [style*="background-color:#1c1c1e"],
[class~="bg-white"] [style*="background-color:#1c1c1e"] *,
[class~="bg-white"] [style*="background-color: #1c1c1e"],
[class~="bg-white"] [style*="background-color: #1c1c1e"] *,
[class~="bg-white"] [style*="background: rgb(28, 28, 30)"],
[class~="bg-white"] [style*="background: rgb(28, 28, 30)"] *,
[class~="bg-white"] [style*="background-color: rgb(28, 28, 30)"],
[class~="bg-white"] [style*="background-color: rgb(28, 28, 30)"] *,
.bg-white [class*="bg-[#1c1c1e]"],
.bg-white [class*="bg-[#1c1c1e]"] *,
.bg-white [class*="bg-black"],
.bg-white [class*="bg-black"] *,
[class~="bg-white"] [class*="bg-[#1c1c1e]"],
[class~="bg-white"] [class*="bg-[#1c1c1e]"] *,
[class~="bg-white"] [class*="bg-black"],
[class~="bg-white"] [class*="bg-black"] *,
.bg-white [class*="bg-[#ea580c]"],
.bg-white [class*="bg-[#ea580c]"] *,
[class~="bg-white"] [class*="bg-[#ea580c]"],
[class~="bg-white"] [class*="bg-[#ea580c]"] * {
  color: #ffffff !important;
}

#sortBtnAsc:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]),
#sortBtnAsc:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]) *,
#sortBtnDesc:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]),
#sortBtnDesc:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]) *,
#sortBtnDefault:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]),
#sortBtnDefault:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]) *,
.dur-btn:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]),
.dur-btn:not(.active):not([style*="1c1c1e"]):not([style*="rgb(28, 28, 30)"]) * {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #cbd5e1 !important;
}

/* SVG pada elemen solid di dalam container putih */
.bg-white [class~="bg-[#1c1c1e]"] svg,
.bg-white [class~="bg-[#1c1c1e]"] svg *,
.bg-white [class~="bg-black"] svg,
.bg-white [class~="bg-black"] svg *,
.bg-white [class~="bg-[#15803d]"] svg,
.bg-white [class~="bg-[#15803d]"] svg *,
.bg-white [class~="bg-[#16a34a]"] svg,
.bg-white [class~="bg-[#16a34a]"] svg *,
.bg-white [class~="bg-[#0284c7]"] svg,
.bg-white [class~="bg-[#0284c7]"] svg *,
.bg-white [class~="bg-[#7c3aed]"] svg,
.bg-white [class~="bg-[#7c3aed]"] svg *,
.bg-white [class~="bg-[#ed0323]"] svg,
.bg-white [class~="bg-[#ed0323]"] svg *,
.bg-white [class~="bg-[#fe38ad]"] svg,
.bg-white [class~="bg-[#fe38ad]"] svg *,
.bg-white [class~="bg-[#ea580c]"] svg,
.bg-white [class~="bg-[#ea580c]"] svg *,
.bg-white [class~="bg-[#d97706]"] svg,
.bg-white [class~="bg-[#d97706]"] svg *,
.bg-white [class~="bg-[#ffd224]"] svg,
.bg-white [class~="bg-[#ffd224]"] svg *,
.bg-white [class~="bg-[#01c6b7]"] svg,
.bg-white [class~="bg-[#01c6b7]"] svg *,
.bg-white [class~="bg-[#475569]"] svg,
.bg-white [class~="bg-[#475569]"] svg *,
.bg-white [class~="bg-[#334155]"] svg,
.bg-white [class~="bg-[#334155]"] svg *,
.bg-white [class~="bg-[#b91c1c]"] svg,
.bg-white [class~="bg-[#b91c1c]"] svg *,
.bg-white [class~="bg-[#0d9488]"] svg,
.bg-white [class~="bg-[#0d9488]"] svg *,
.bg-white [class~="bg-[#4f46e5]"] svg,
.bg-white [class~="bg-[#4f46e5]"] svg *,
.bg-white [class~="bg-[#0080bf]"] svg,
.bg-white [class~="bg-[#0080bf]"] svg *,
.bg-white [class~="bg-[#9a3412]"] svg,
.bg-white [class~="bg-[#9a3412]"] svg *,
.bg-white [class~="bg-[#db2777]"] svg,
.bg-white [class~="bg-[#db2777]"] svg *,
.bg-white [class~="bg-[#e11d48]"] svg,
.bg-white [class~="bg-[#e11d48]"] svg *,
.bg-white [class~="bg-[#059669]"] svg,
.bg-white [class~="bg-[#059669]"] svg *,
[class~="bg-white"] [class~="bg-[#1c1c1e]"] svg,
[class~="bg-white"] [class~="bg-[#1c1c1e]"] svg *,
[class~="bg-white"] [class~="bg-black"] svg,
[class~="bg-white"] [class~="bg-black"] svg *,
[class~="bg-white"] [class~="bg-[#15803d]"] svg,
[class~="bg-white"] [class~="bg-[#15803d]"] svg *,
[class~="bg-white"] [class~="bg-[#16a34a]"] svg,
[class~="bg-white"] [class~="bg-[#16a34a]"] svg *,
[class~="bg-white"] [class~="bg-[#0284c7]"] svg,
[class~="bg-white"] [class~="bg-[#0284c7]"] svg *,
[class~="bg-white"] [class~="bg-[#7c3aed]"] svg,
[class~="bg-white"] [class~="bg-[#7c3aed]"] svg *,
[class~="bg-white"] [class~="bg-[#ed0323]"] svg,
[class~="bg-white"] [class~="bg-[#ed0323]"] svg *,
[class~="bg-white"] [class~="bg-[#fe38ad]"] svg,
[class~="bg-white"] [class~="bg-[#fe38ad]"] svg *,
[class~="bg-white"] [class~="bg-[#ea580c]"] svg,
[class~="bg-white"] [class~="bg-[#ea580c]"] svg *,
[class~="bg-white"] [class~="bg-[#d97706]"] svg,
[class~="bg-white"] [class~="bg-[#d97706]"] svg *,
[class~="bg-white"] [class~="bg-[#ffd224]"] svg,
[class~="bg-white"] [class~="bg-[#ffd224]"] svg *,
[class~="bg-white"] [class~="bg-[#01c6b7]"] svg,
[class~="bg-white"] [class~="bg-[#01c6b7]"] svg *,
[class~="bg-white"] [class~="bg-[#475569]"] svg,
[class~="bg-white"] [class~="bg-[#475569]"] svg *,
[class~="bg-white"] [class~="bg-[#334155]"] svg,
[class~="bg-white"] [class~="bg-[#334155]"] svg *,
[class~="bg-white"] [class~="bg-[#b91c1c]"] svg,
[class~="bg-white"] [class~="bg-[#b91c1c]"] svg *,
[class~="bg-white"] [class~="bg-[#0d9488]"] svg,
[class~="bg-white"] [class~="bg-[#0d9488]"] svg *,
[class~="bg-white"] [class~="bg-[#4f46e5]"] svg,
[class~="bg-white"] [class~="bg-[#4f46e5]"] svg *,
[class~="bg-white"] [class~="bg-[#0080bf]"] svg,
[class~="bg-white"] [class~="bg-[#0080bf]"] svg *,
[class~="bg-white"] [class~="bg-[#9a3412]"] svg,
[class~="bg-white"] [class~="bg-[#9a3412]"] svg *,
[class~="bg-white"] [class~="bg-[#db2777]"] svg,
[class~="bg-white"] [class~="bg-[#db2777]"] svg *,
[class~="bg-white"] [class~="bg-[#e11d48]"] svg,
[class~="bg-white"] [class~="bg-[#e11d48]"] svg *,
[class~="bg-white"] [class~="bg-[#059669]"] svg,
[class~="bg-white"] [class~="bg-[#059669]"] svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Inactive button badge: bulatan gelap berteks putih */
.admin-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]) .count-badge,
.member-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]) .count-badge,
.tab-btn:not(.active):not(.bg-\[\#1c1c1e\]) .count-badge,
.admin-filter-btn.bg-white .count-badge,
.member-filter-btn.bg-white .count-badge,
.admin-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]) .count-badge *,
.member-filter-btn:not(.active):not(.bg-\[\#1c1c1e\]) .count-badge *,
.tab-btn:not(.active):not(.bg-\[\#1c1c1e\]) .count-badge * {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

/* Pagination Active state: solid black background with white text */
.anomaly-pagination button[aria-current="page"],
.anomaly-page-numbers button[aria-current="page"],
#catalogPagination button[class~="bg-[#1c1c1e]"],
#catalogPagination button.bg-\[\#1c1c1e\],
#catalogPagination button[class~="bg-black"],
#activeProcessingPagination button[aria-current="page"],
#pageWaitlistPagination button[aria-current="page"],
.anomaly-pagination button[aria-current="page"] *,
.anomaly-page-numbers button[aria-current="page"] *,
#catalogPagination button[class~="bg-[#1c1c1e]"] *,
#catalogPagination button.bg-\[\#1c1c1e\] *,
#catalogPagination button[class~="bg-black"] *,
#activeProcessingPagination button[aria-current="page"] *,
#pageWaitlistPagination button[aria-current="page"] * {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
}

/* Pagination Inactive state & White Icon Buttons: strictly black text and stroke when not hovered */
#catalogPagination button:not([class~="bg-[#1c1c1e]"]):not(.bg-\[\#1c1c1e\]):not([class~="bg-black"]):not(:hover),
#catalogPagination button[class~="bg-white"]:not(:hover),
.anomaly-pagination button:not([aria-current="page"]):not(:hover),
.anomaly-page-numbers button:not([aria-current="page"]):not(:hover),
#pageWaitlistPagination button:not([aria-current="page"]):not(:hover),
#activeProcessingPagination button:not([aria-current="page"]):not(:hover),
#closePriceTransparencyBtn:not(:hover),
#closePriceTransparencyBtn:not(:hover) svg,
#closePriceTransparencyBtn:not(:hover) svg * {
  background-color: #ffffff !important;
  color: #000000 !important;
  stroke: #000000 !important;
}

/* ==========================================================================
   TINGKAT 4: INTERAKSI HOVER
   ========================================================================== */
label[for="adminPhotoUpdate"]:hover,
label[for="memberPhotoUpdate"]:hover,
label[for*="PhotoUpdate"]:hover,
.neo-avatar-wrapper label:hover {
  background-color: #d97706 !important;
  color: #ffffff !important;
}
label[for="adminPhotoUpdate"]:hover svg,
label[for="adminPhotoUpdate"]:hover svg path,
label[for="memberPhotoUpdate"]:hover svg,
label[for="memberPhotoUpdate"]:hover svg path,
label[for*="PhotoUpdate"]:hover svg,
label[for*="PhotoUpdate"]:hover svg path,
.neo-avatar-wrapper label:hover svg,
.neo-avatar-wrapper label:hover svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

button.bg-white[class*="hover:bg-black"]:hover,
button[class~="bg-white"][class*="hover:bg-black"]:hover,
button.bg-white[class*="hover:bg-[#1c1c1e]"]:hover,
button[class~="bg-white"][class*="hover:bg-[#1c1c1e]"]:hover,
button.bg-white[class*="hover:bg-[#01c6b7]"]:hover,
button[class~="bg-white"][class*="hover:bg-[#01c6b7]"]:hover,
button.bg-white[class*="hover:bg-[#ffd224]"]:hover,
button[class~="bg-white"][class*="hover:bg-[#ffd224]"]:hover,
button[onclick*="openTierSelectionPage"]:hover {
  background-color: #1c1c1e !important;
  color: #ffffff !important;
}

button.bg-white[class*="hover:bg-black"]:hover *,
button[class~="bg-white"][class*="hover:bg-black"]:hover *,
button.bg-white[class*="hover:bg-[#1c1c1e]"]:hover *,
button[class~="bg-white"][class*="hover:bg-[#1c1c1e]"]:hover *,
button.bg-white[class*="hover:bg-[#01c6b7]"]:hover *,
button[class~="bg-white"][class*="hover:bg-[#01c6b7]"]:hover *,
button.bg-white[class*="hover:bg-[#ffd224]"]:hover *,
button[class~="bg-white"][class*="hover:bg-[#ffd224]"]:hover *,
button[onclick*="openTierSelectionPage"]:hover * {
  background-color: transparent !important;
  color: #ffffff !important;
}

button.bg-white:hover svg,
button.bg-white:hover svg path,
button[class~="bg-white"]:hover svg,
button[class~="bg-white"]:hover svg path,
button[onclick*="openTierSelectionPage"]:hover svg,
button[onclick*="openTierSelectionPage"]:hover svg *,
button[onclick*="openTierSelectionPage"]:hover svg path,
a.bg-white:hover svg,
a.bg-white:hover svg path,
a[class~="bg-white"]:hover svg,
a[class~="bg-white"]:hover svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Detail Paket Normal State */
button[onclick*="openTierSelectionPage"]:not(:hover) {
  background-color: #ffffff !important;
  color: #000000 !important;
}
button[onclick*="openTierSelectionPage"]:not(:hover) * {
  background-color: transparent !important;
  color: #000000 !important;
}
button[onclick*="openTierSelectionPage"]:not(:hover) svg,
button[onclick*="openTierSelectionPage"]:not(:hover) svg * {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Login surfaces use a restrained glass finish while preserving readable controls. */
body.theme-admin > .auth-glass-card,
body.theme-member > .auth-glass-card {
  background-color: rgba(255, 255, 255, .74) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  border-color: rgba(255, 255, 255, .88) !important;
}
body.theme-admin > .auth-glass-card input,
body.theme-member > .auth-glass-card input {
  background-color: rgba(255, 255, 255, .78) !important;
}
body.theme-user #loginMenu {
  background-color: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .2) !important;
}

/* Solid Pop-Art Comic Cat Loader - Extreme Contrast Guarantee */
#globalCatLoadingOverlay,
#globalCatLoadingOverlay.anomaly-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#globalCatLoadingOverlay .anomaly-loading-card,
.anomaly-loading-card {
  background-color: #ffffff !important;
  border: 4px solid #1c1c1e !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 0px #1c1c1e !important;
  color: #1c1c1e !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#globalCatLoadingOverlay .comic-loading-text,
#globalCatLoadingOverlay h3.comic-loading-text,
#globalCatLoadingOverlay h3,
.anomaly-loading-card .comic-loading-text,
.anomaly-loading-card h3,
.comic-loading-text {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

#globalCatLoadingOverlay .anomaly-loading-copy p,
#globalCatLoadingOverlay p,
.anomaly-loading-card .anomaly-loading-copy p,
.anomaly-loading-card p {
  color: #1c1c1e !important;
  -webkit-text-fill-color: #1c1c1e !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  margin: 6px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

/* Wallet & Finance Balance Display (Strict zero overflow, neat tabular numbers) */
.wallet-balance-value {
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: clamp(1rem, 1.25vw, 1.35rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-variant-numeric: tabular-nums !important;
  display: block !important;
}

/* ==========================================================================
   TINGKAT 5: ISOLASI KONTEN MODAL & DIALOG DI SELURUH SISTEM
   Backdrop gelap (bg-[#1c1c1e], bg-black, bg-slate-900) TIDAK BOLEH
   membocorkan warna teks putih ke dalam kotak konten modal berlatar putih.
   ========================================================================== */
#policyTermsModalBox,
#policyTermsModalBox *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]):not(.text-white):not([class*="text-white"]),
#serviceCrudModal .bg-white,
#serviceCrudModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#editMemberModal .bg-white,
#editMemberModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#createMemberModal .bg-white,
#createMemberModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#editAdminModal .bg-white,
#editAdminModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#createAdminModal .bg-white,
#createAdminModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#reviewCrudModal .bg-white,
#reviewCrudModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#customDialogModal .bg-white,
#customDialogModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#createOrderModal .bg-white,
#createOrderModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#editOrderModal .bg-white,
#editOrderModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#financeTransactionModal .bg-white,
#financeTransactionModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#editWithdrawalModal .bg-white,
#editWithdrawalModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#waitlistModal .bg-white,
#waitlistModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#transferModal .bg-white,
#transferModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
#ratingModal .bg-white,
#ratingModal .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
dialog .bg-white,
dialog .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]),
[role="dialog"] .bg-white,
[role="dialog"] .bg-white *:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]) {
  color: #000000 !important;
}

/* Modal Titles & Headings berlatar putih mutlak hitam */
#policyTermsModalBox h2,
#policyTermsModalBox h3,
#reviewCrudModal h3,
#editMemberModal h3,
#createMemberModal h3,
#editAdminModal h3,
#createAdminModal h3,
#customDialogModal h3,
#createOrderModal h3,
#editOrderModal h3,
#financeTransactionModal h3,
#editWithdrawalModal h3,
[id*="Modal"] .bg-white h1,
[id*="Modal"] .bg-white h2,
[id*="Modal"] .bg-white h3,
[id*="Modal"] .bg-white h4,
[id*="Modal"] .bg-white h5,
[id*="Modal"] .bg-white h6 {
  color: #000000 !important;
}

/* Tombol Batal & Close dalam modal (ghost/white button) */
#serviceCrudModal button[onclick*="closeServiceCrudModal"],
#reviewCrudModal button[onclick*="closeReviewCrudModal"],
#editMemberModal button[onclick*="closeEditMemberModal"],
#createMemberModal button[onclick*="closeCreateMemberModal"],
#editAdminModal button[onclick*="closeEditAdminModal"],
#createAdminModal button[onclick*="closeCreateAdminModal"],
#createOrderModal button[onclick*="closeCreateOrderModal"],
#editOrderModal button[onclick*="closeEditOrderModal"],
#financeTransactionModal button[onclick*="closeTransactionModal"],
#editWithdrawalModal button[onclick*="closeEditWithdrawalModal"],
#customDialogModal button[onclick*="closeCustomDialog"],
#customDialogModal button[id*="customDialogCancelBtn"],
[id*="Modal"] .bg-white button:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]) {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #cbd5e1 !important;
}
#serviceCrudModal button[onclick*="closeServiceCrudModal"]:hover,
#reviewCrudModal button[onclick*="closeReviewCrudModal"]:hover,
#editMemberModal button[onclick*="closeEditMemberModal"]:hover,
#createMemberModal button[onclick*="closeCreateMemberModal"]:hover,
#editAdminModal button[onclick*="closeEditAdminModal"]:hover,
#createAdminModal button[onclick*="closeCreateAdminModal"]:hover,
#createOrderModal button[onclick*="closeCreateOrderModal"]:hover,
#editOrderModal button[onclick*="closeEditOrderModal"]:hover,
#financeTransactionModal button[onclick*="closeTransactionModal"]:hover,
#editWithdrawalModal button[onclick*="closeEditWithdrawalModal"]:hover,
#customDialogModal button[onclick*="closeCustomDialog"]:hover,
#customDialogModal button[id*="customDialogCancelBtn"]:hover,
[id*="Modal"] .bg-white button:not([type="submit"]):not([id*="Submit"]):not([class*="bg-black"]):not([class*="bg-[#1c1c1e]"]):not([class*="bg-[#ffd224]"]):not([class*="bg-amber"]):not([class*="bg-[#15803d]"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-red"]):hover {
  background-color: #f1f5f9 !important;
  color: #000000 !important;
}

/* Modal Form Labels */
#serviceCrudModal label,
#reviewCrudModal label,
#editMemberModal label,
#createMemberModal label,
#editAdminModal label,
#createAdminModal label,
#createOrderModal label,
#editOrderModal label,
#financeTransactionModal label,
#editWithdrawalModal label,
[id*="Modal"] .bg-white label {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Modal Inputs, Selects, Textareas */
#serviceCrudModal input,
#serviceCrudModal select,
#serviceCrudModal textarea,
#reviewCrudModal input,
#reviewCrudModal select,
#reviewCrudModal textarea,
#editMemberModal input,
#editMemberModal select,
#editMemberModal textarea,
#createMemberModal input,
#createMemberModal select,
#createMemberModal textarea,
#createOrderModal input,
#createOrderModal select,
#createOrderModal textarea,
#editOrderModal input,
#editOrderModal select,
#editOrderModal textarea,
#financeTransactionModal input,
#financeTransactionModal select,
#financeTransactionModal textarea,
#editWithdrawalModal input,
#editWithdrawalModal select,
#editWithdrawalModal textarea,
[id*="Modal"] .bg-white input,
[id*="Modal"] .bg-white select,
[id*="Modal"] .bg-white textarea {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Modal Solid Action Buttons: Tetap pertahankan teks putih */
#serviceCrudModal button[type="submit"],
#serviceCrudModal button[type="submit"] *,
#saveServiceSubmitBtn,
#saveServiceSubmitBtn *,
#reviewCrudModal button[type="submit"],
#reviewCrudModal button[type="submit"] *,
#saveReviewSubmitBtn,
#saveReviewSubmitBtn *,
#editMemberModal button[type="submit"],
#editMemberModal button[type="submit"] *,
#saveEditMemberSubmitBtn,
#saveEditMemberSubmitBtn *,
#createMemberModal button[type="submit"],
#createMemberModal button[type="submit"] *,
#createMemberSubmitBtn,
#createMemberSubmitBtn *,
#editAdminModal button[type="submit"],
#editAdminModal button[type="submit"] *,
#saveEditAdminSubmitBtn,
#saveEditAdminSubmitBtn *,
#createAdminModal button[type="submit"],
#createAdminModal button[type="submit"] *,
#createAdminSubmitBtn,
#createAdminSubmitBtn *,
#createOrderModal button[type="submit"],
#createOrderModal button[type="submit"] *,
#editOrderModal button[type="submit"],
#editOrderModal button[type="submit"] *,
#financeTransactionModal button[type="submit"],
#financeTransactionModal button[type="submit"] *,
#editWithdrawalModal button[type="submit"],
#editWithdrawalModal button[type="submit"] *,
#customDialogConfirmBtn,
#customDialogConfirmBtn *,
#copySuccessConfirmBtn,
#copySuccessConfirmBtn *,
#policyTermsModalBox .text-white,
#policyTermsModalBox [class*="text-white"],
#policyTermsModalBox .bg-black,
#policyTermsModalBox .bg-black *,
#policyTermsModalBox .bg-\[\#1c1c1e\],
#policyTermsModalBox .bg-\[\#1c1c1e\] *,
#policyTermsModalBox [class*="bg-black"],
#policyTermsModalBox [class*="bg-black"] *,
#policyTermsModalBox [class*="bg-[#1c1c1e]"],
#policyTermsModalBox [class*="bg-[#1c1c1e]"] *,
#policyTermsModalBox button[onclick*="confirmPolicyAgreement"],
#policyTermsModalBox button[onclick*="confirmPolicyAgreement"] *,
#policyTermsModalBox button[onclick*="closePolicyModal"].bg-\[\#1c1c1e\],
#policyTermsModalBox button[onclick*="closePolicyModal"].bg-\[\#1c1c1e\] * {
  color: #ffffff !important;
}

/* ==========================================================================
   TINGKAT 6: SOLID COLOR ELEMENTS MUST ALWAYS HAVE PURE WHITE TEXT & ICONS
   (Menengah/Cepat/Kilat SLA pills, SOAL badge, BCA pill, Unduh button, Petunjuk card)
   ========================================================================== */
/* 1. BCA Pill */
[class*="bg-[#005baa]"],
[class*="bg-[#005baa]"] *,
.bg-\[\#005baa\],
.bg-\[\#005baa\] *,
.bg-white [class*="bg-[#005baa]"],
.bg-white [class*="bg-[#005baa]"] *,
[class~="bg-white"] [class*="bg-[#005baa]"],
[class~="bg-white"] [class*="bg-[#005baa]"] * {
  background-color: #005baa !important;
  color: #ffffff !important;
}

/* 2. Unduh Button */
.download-file-btn,
.download-file-btn *,
.track-dl-file,
.track-dl-file *,
.bg-white .download-file-btn,
.bg-white .download-file-btn *,
[class~="bg-white"] .download-file-btn,
[class~="bg-white"] .download-file-btn *,
[class*="bg-[#0369a1]"],
[class*="bg-[#0369a1]"] *,
.bg-\[\#0369a1\],
.bg-\[\#0369a1\] *,
.bg-white [class*="bg-[#0369a1]"],
.bg-white [class*="bg-[#0369a1]"] *,
[class~="bg-white"] [class*="bg-[#0369a1]"],
[class~="bg-white"] [class*="bg-[#0369a1]"] * {
  color: #ffffff !important;
}

/* 3. SOAL Badge */
[class*="bg-[#3730a3]"],
[class*="bg-[#3730a3]"] *,
.bg-\[\#3730a3\],
.bg-\[\#3730a3\] *,
.bg-white [class*="bg-[#3730a3]"],
.bg-white [class*="bg-[#3730a3]"] *,
[class~="bg-white"] [class*="bg-[#3730a3]"],
[class~="bg-white"] [class*="bg-[#3730a3]"] * {
  background-color: #3730a3 !important;
  color: #ffffff !important;
}

/* 4. SLA Category Badges (Menengah, Cepat, Kilat) */
.bg-purple-800,
.bg-purple-800 *,
.bg-purple-700,
.bg-purple-700 *,
[class*="bg-purple-"],
[class*="bg-purple-"] *,
.bg-blue-700,
.bg-blue-700 *,
[class*="bg-blue-"]:not(input):not(select):not(textarea),
[class*="bg-blue-"]:not(input):not(select):not(textarea) *,
.bg-rose-700,
.bg-rose-700 *,
[class*="bg-rose-"]:not(input):not(select):not(textarea),
[class*="bg-rose-"]:not(input):not(select):not(textarea) *,
.bg-white [class*="bg-purple-"],
.bg-white [class*="bg-purple-"] *,
.bg-white [class*="bg-blue-"]:not(input):not(select):not(textarea),
.bg-white [class*="bg-blue-"]:not(input):not(select):not(textarea) *,
.bg-white [class*="bg-rose-"]:not(input):not(select):not(textarea),
.bg-white [class*="bg-rose-"]:not(input):not(select):not(textarea) *,
[class~="bg-white"] [class*="bg-purple-"],
[class~="bg-white"] [class*="bg-purple-"] *,
[class~="bg-white"] [class*="bg-blue-"]:not(input):not(select):not(textarea),
[class~="bg-white"] [class*="bg-blue-"]:not(input):not(select):not(textarea) *,
[class~="bg-white"] [class*="bg-rose-"]:not(input):not(select):not(textarea),
[class~="bg-white"] [class*="bg-rose-"]:not(input):not(select):not(textarea) * {
  color: #ffffff !important;
}

/* 5. Petunjuk & Instruksi Mahasiswa Card & All Inner Text */
.bg-amber-50,
.bg-amber-50 *,
.bg-amber-100,
.bg-amber-100 *,
.bg-yellow-50,
.bg-yellow-50 *,
.bg-yellow-100,
.bg-yellow-100 *,
.bg-white .bg-amber-50,
.bg-white .bg-amber-50 *,
[class~="bg-white"] .bg-amber-50,
[class~="bg-white"] .bg-amber-50 * {
  color: #ffffff !important;
}
.bg-amber-50 svg,
.bg-amber-50 svg *,
.bg-white .bg-amber-50 svg,
.bg-white .bg-amber-50 svg * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* 5B. Inner White Cards & Content inside Amber/Yellow/Blue Containers MUST have Dark Text */
.bg-amber-50 .bg-white,
.bg-amber-50 .bg-white *:not(.text-white):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-black"]):not([class*="bg-[#"]),
.bg-amber-100 .bg-white,
.bg-amber-100 .bg-white *:not(.text-white):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-black"]):not([class*="bg-[#"]),
#adminMemberCrudRequestsContainer .bg-white,
#adminMemberCrudRequestsContainer .bg-white *:not(.text-white):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-black"]):not([class*="bg-[#"]),
#adminPriceRequestsContainer .bg-white,
#adminPriceRequestsContainer .bg-white *:not(.text-white):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-black"]):not([class*="bg-[#"]),
#adminTxCrudRequestsContainer .bg-white,
#adminTxCrudRequestsContainer .bg-white *:not(.text-white):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-emerald"]):not([class*="bg-amber"]):not([class*="bg-black"]):not([class*="bg-[#"]) {
  color: #0f172a !important;
}
#adminPriceRequestsContainer .bg-white .text-emerald-800,
#adminPriceRequestsContainer .bg-white .text-emerald-700 {
  color: #15803d !important;
}
#adminPriceRequestsContainer .bg-white .text-blue-800 {
  color: #1d4ed8 !important;
}
#adminPriceRequestsContainer .bg-white .text-slate-500,
#adminPriceRequestsContainer .bg-white .text-slate-600 {
  color: #475569 !important;
}

/* 6. Solid Dark & Black Badges & Elements inside White Containers MUST have WHITE text */
.bg-white .bg-black,
.bg-white .bg-black *,
.bg-white [class~="bg-black"],
.bg-white [class~="bg-black"] *,
.bg-white [class*="bg-black"]:not([class*="hover"]):not(button.bg-white),
.bg-white [class*="bg-black"]:not([class*="hover"]):not(button.bg-white) *,
.bg-white .text-white,
.bg-white [class~="text-white"],
.bg-white [class~="text-white"] *,
[class~="bg-white"] .bg-black,
[class~="bg-white"] .bg-black *,
[class~="bg-white"] [class~="bg-black"],
[class~="bg-white"] [class~="bg-black"] *,
[class~="bg-white"] [class*="bg-black"]:not([class*="hover"]):not(button.bg-white),
[class~="bg-white"] [class*="bg-black"]:not([class*="hover"]):not(button.bg-white) *,
[class~="bg-white"] .text-white,
[class~="bg-white"] [class~="text-white"],
[class~="bg-white"] [class~="text-white"] *,
[id*="Modal"] [class~="bg-black"],
[id*="Modal"] [class~="bg-black"] *,
[id*="Modal"] [class~="text-white"],
[id*="Modal"] [class~="text-white"] *,
#priceTransparencyModalOverlay [class~="bg-black"],
#priceTransparencyModalOverlay [class~="bg-black"] *,
#priceTransparencyModalOverlay [class~="text-white"],
#priceTransparencyModalOverlay [class~="text-white"] *,
#priceTransparencyModalOverlay .bg-black,
#priceTransparencyModalOverlay .bg-black *,
#priceTransparencyModalOverlay .text-white,
#priceTransparencyModalOverlay .text-white * {
  color: #ffffff !important;
}

/* 7. Khusus Log Member, Member Badges, & Solid Green Badges */
#adminActivityRoleBadge,
#adminActivityRoleBadge *,
.bg-white #adminActivityRoleBadge,
.bg-white #adminActivityRoleBadge *,
[class~="bg-white"] #adminActivityRoleBadge,
[class~="bg-white"] #adminActivityRoleBadge *,
#adminActivityList [class*="bg-emerald"],
#adminActivityList [class*="bg-emerald"] *,
#adminActivityList .bg-emerald-100,
#adminActivityList .bg-emerald-100 *,
#adminActivityList [class*="bg-[#15803d]"],
#adminActivityList [class*="bg-[#15803d]"] *,
#adminActivityList span[class*="uppercase"],
.bg-emerald-100,
.bg-emerald-100 *,
.bg-white .bg-emerald-100,
.bg-white .bg-emerald-100 *,
[class~="bg-white"] .bg-emerald-100,
[class~="bg-white"] .bg-emerald-100 *,
.bg-emerald-50,
.bg-emerald-50 *,
.bg-white .bg-emerald-50,
.bg-white .bg-emerald-50 *,
[class~="bg-white"] .bg-emerald-50,
[class~="bg-white"] .bg-emerald-50 *,
[class*="bg-emerald-"] [class*="text-emerald-"],
[class*="bg-[#15803d]"] [class*="text-emerald-"],
.bg-emerald-100 [class*="text-emerald-"],
.bg-white .bg-emerald-100 [class*="text-emerald-"],
[class~="bg-white"] .bg-emerald-100 [class*="text-emerald-"] {
  color: #ffffff !important;
}

/* 8. Notice Privilege Cards & Banners MUST have Solid Dark Background & Pure White Text */
#clearActivityPrivilegeNotice,
#clearActivityPrivilegeNotice *,
#restorePrivilegeNotice,
#restorePrivilegeNotice *,
#adminNotice,
#adminNotice *,
.bg-white #clearActivityPrivilegeNotice,
.bg-white #clearActivityPrivilegeNotice *,
.bg-white #restorePrivilegeNotice,
.bg-white #restorePrivilegeNotice *,
[class~="bg-white"] #clearActivityPrivilegeNotice,
[class~="bg-white"] #clearActivityPrivilegeNotice *,
[class~="bg-white"] #restorePrivilegeNotice,
[class~="bg-white"] #restorePrivilegeNotice * {
  color: #ffffff !important;
}

#clearActivityPrivilegeNotice svg,
#restorePrivilegeNotice svg,
#adminNotice svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 9. Logout SVG Icons in Nav MUST have Pure White Stroke */
#adminLogout svg,
#adminLogout svg *,
#adminLogout svg path,
#memberLogout svg,
#memberLogout svg *,
#memberLogout svg path,
.logout-link svg,
.logout-link svg *,
.logout-link svg path {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}