@import 'NomadSearch.Client.9l2ni7jh18.bundle.scp.css';

/* /Components/Layout/BottomLayout.razor.rz.scp.css */
/* ================================================================
   BOTTOM LAYOUT – scoped styles for the site footer.
   Gradient background (gold → teal), 4-column responsive grid.
   ================================================================ */

/* Brand divider line at the very top of the footer – overrides the default
   symmetric margin from .ns-divider-brand so only bottom spacing applies. */
.ns-footer-divider[b-4g6l7scgps] {
  margin: 0 0 28px 0;
}

/* Full footer wrapper – gradient background matching the brand palette */
.ns-footer[b-4g6l7scgps] {
  background: linear-gradient(
    to bottom,
    var(--footer-grad-from),
    var(--footer-grad-to)
  );
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: auto;
}

/* Centered inner wrapper with top padding for content breathing room */
.ns-footer-inner[b-4g6l7scgps] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--sp-6) 20px;
}

/* 4-column grid → 2 columns on tablet → 1 column on mobile */
.ns-footer-grid[b-4g6l7scgps] {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

@media (max-width: 992px) {
  .ns-footer-grid[b-4g6l7scgps] {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .ns-footer-grid[b-4g6l7scgps] {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* Brand logo + name link in the footer */
.ns-footer-brand[b-4g6l7scgps] {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  margin-bottom: var(--sp-3);
}

/* Circular logo mark with subtle border */
.ns-footer-logo[b-4g6l7scgps] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: white;
  padding: 3px;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

/* Brand name next to the logo */
.ns-footer-brand-name[b-4g6l7scgps] {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--clr-teal-xdark);
}

/* Short tagline below the brand name */
.ns-footer-desc[b-4g6l7scgps] {
  font-size: var(--font-size-sm);
  color: var(--clr-text-muted);
  line-height: 1.55;
}

/* Column heading – uppercase, spaced, small */
.ns-footer-heading[b-4g6l7scgps] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--clr-teal-xdark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

/* Footer navigation – vertical flex list of links */
.ns-footer-nav[b-4g6l7scgps] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Individual footer link – turns teal on hover */
.ns-footer-link[b-4g6l7scgps] {
  font-size: var(--font-size-sm);
  color: var(--clr-text-2);
  text-decoration: none;
  transition: color var(--tr-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.ns-footer-link:hover[b-4g6l7scgps] {
  color: var(--clr-teal-dark);
}

/* Author section – vertical list of social links */
.ns-footer-author[b-4g6l7scgps] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Bold author name link */
.ns-footer-author-link[b-4g6l7scgps] {
  font-weight: var(--font-weight-semibold);
}

/* Bottom copyright bar – centered, muted, small */
.ns-footer-bottom[b-4g6l7scgps] {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: var(--sp-4);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--clr-text-muted);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ================================================================
   MAIN LAYOUT – minimal shell styles.
   Primary styles live in NomadSearch.Client/wwwroot/common.css and
   in component-scoped .razor.css files.
   This file only contains the styles required for the page shell.
   ================================================================ */

/* Layout wrapper – flexbox column spanning the full viewport height */
.ns-layout[b-8uxh5hj3eu] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area – grows to fill available space between nav and footer */
.ns-main-content[b-8uxh5hj3eu] {
  flex: 1;
  padding-bottom: 24px;
}

/* ── BLAZOR ERROR UI ──────────────────────────────────────────────── */

/* Fixed bottom bar shown when the Blazor connection is lost.
   Overrides the common.css rule with Poppins font to match the
   server-side layout where common.css may not be loaded yet. */
#blazor-error-ui[b-8uxh5hj3eu] {
  background: #fbeedd;
  border-top: 1px solid #d4a852;
  bottom: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
  display: none;
  left: 0;
  padding: 10px 20px 12px 20px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}

/* Dismiss (×) button – positioned top-right within the error bar */
#blazor-error-ui .dismiss[b-8uxh5hj3eu] {
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 18px;
  opacity: 0.6;
}

#blazor-error-ui .dismiss:hover[b-8uxh5hj3eu] {
  opacity: 1;
}
/* /Components/Layout/NsErrorBoundary.razor.rz.scp.css */
/* =====================================================================
   NS ERROR BOUNDARY – Scoped styles for the error UI overlay.
   Displayed when an unhandled exception is caught during rendering.
   ===================================================================== */

/* Centered card with warning styling */
.ns-eb-wrap[b-b9mxqu3hfy] {
  max-width: 640px;
  margin: 60px auto;
  padding: 40px;
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-danger-muted, #f8d7da);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

/* Large warning icon */
.ns-eb-icon[b-b9mxqu3hfy] {
  font-size: 48px;
  margin-bottom: 16px;
}

/* Main heading */
.ns-eb-title[b-b9mxqu3hfy] {
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 8px;
}

/* Exception type label – subtle muted text above the message */
.ns-eb-type[b-b9mxqu3hfy] {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-danger, #dc3545);
  margin-bottom: 4px;
  font-family: var(--font-mono, monospace);
}

/* Exception message */
.ns-eb-message[b-b9mxqu3hfy] {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Action buttons row */
.ns-eb-actions[b-b9mxqu3hfy] {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Collapsible stack trace */
.ns-eb-trace[b-b9mxqu3hfy] {
  text-align: left;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  background: var(--clr-surface-2, #f8f9fa);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-danger, #dc3545);
  border-radius: var(--radius-sm);
  padding: 16px;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--clr-text-2);
}
/* /Components/Layout/TopLayout.razor.rz.scp.css */
/* ================================================================
   TOP LAYOUT (TopNav) – scoped styles for the sticky navigation bar.
   Fixed header with brand gradient, desktop nav links, user auth
   section, hamburger button, and animated mobile dropdown menu.
   ================================================================ */

/* ── HEADER CONTAINER ─────────────────────────────────────────────── */

/* Sticky header fixed to the top; brand gradient left → right */
.ns-topnav[b-qvy3dsi3mt] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: linear-gradient(to right, var(--clr-gold), var(--clr-teal));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Inner flex row constraining content to max-width */
.ns-topnav-inner[b-qvy3dsi3mt] {
  display: flex;
  align-items: center;
  height: var(--header-h); /* 64px from CSS variables */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  gap: var(--sp-4);
}

/* ── LOGO ─────────────────────────────────────────────────────────── */

/* Brand logo + name link – shrinks when space is tight */
.ns-topnav-brand[b-qvy3dsi3mt] {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--tr-fast);
}

.ns-topnav-brand:hover[b-qvy3dsi3mt] {
  opacity: 0.9;
}

/* Circular logo mark – rotates and scales on brand hover */
.ns-topnav-logo[b-qvy3dsi3mt] {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: white;
  padding: 2px;
  transition: transform var(--tr-normal);
}

.ns-topnav-brand:hover .ns-topnav-logo[b-qvy3dsi3mt] {
  transform: rotate(-5deg) scale(1.08);
}

/* App name displayed next to the logo */
.ns-topnav-title[b-qvy3dsi3mt] {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--clr-text-inverse);
  letter-spacing: -0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ── DESKTOP NAVIGATION ───────────────────────────────────────────── */

/* Centered flex row of desktop nav links */
.ns-topnav-nav[b-qvy3dsi3mt] {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  justify-content: center;
}

/* Individual navigation link – pill shape on hover/active */
.ns-nav-link[b-qvy3dsi3mt] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background var(--tr-fast),
    color var(--tr-fast);
  text-decoration: none;
  white-space: nowrap;
}

.ns-nav-link:hover[b-qvy3dsi3mt],
.ns-nav-link.active[b-qvy3dsi3mt] {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

/* Active link has slightly heavier background */
.ns-nav-link.active[b-qvy3dsi3mt] {
  font-weight: var(--font-weight-semibold);
  background: rgba(255, 255, 255, 0.28);
}

/* ── AUTH ACTION BUTTONS ──────────────────────────────────────────── */

/* Login / Register buttons – add an outline border */
.ns-nav-btn[b-qvy3dsi3mt] {
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  padding: 6px 16px !important;
}

.ns-nav-btn:hover[b-qvy3dsi3mt] {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: white !important;
}

/* Gold-tinted Register button */
.ns-nav-btn-gold[b-qvy3dsi3mt] {
  background: rgba(237, 205, 148, 0.35) !important;
  border-color: rgba(237, 205, 148, 0.7) !important;
  color: white !important;
}

.ns-nav-btn-gold:hover[b-qvy3dsi3mt] {
  background: var(--clr-gold) !important;
  color: var(--clr-text) !important;
}

/* ── USER AVATAR LINK ─────────────────────────────────────────────── */

/* Flex row: avatar ring + username text */
.ns-user-link[b-qvy3dsi3mt] {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Circular ring around the user avatar emoji */
.ns-user-avatar-ring[b-qvy3dsi3mt] {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  border: 2px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  font-size: 14px;
}

/* Admin link – red-tinted to signal elevated access */
.ns-admin-link[b-qvy3dsi3mt] {
  background: rgba(220, 53, 69, 0.25) !important;
  border: 1px solid rgba(220, 53, 69, 0.5) !important;
}

.ns-admin-link:hover[b-qvy3dsi3mt] {
  background: rgba(220, 53, 69, 0.45) !important;
}

/* Logout button inherits nav-link appearance via .ns-nav-link */
.ns-logout-btn[b-qvy3dsi3mt] {
  background: none;
  font-family: var(--font-primary);
}

/* ── RIGHT SECTION (auth + hamburger) ────────────────────────────── */

/* Right-side flex cluster containing auth links and the hamburger */
.ns-topnav-actions[b-qvy3dsi3mt] {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  margin-left: auto;
}

/* ── HAMBURGER BUTTON ─────────────────────────────────────────────── */

/* Hidden on desktop; shown on mobile as three-bar icon */
.ns-hamburger[b-qvy3dsi3mt] {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  transition: background var(--tr-fast);
  flex-shrink: 0;
}

.ns-hamburger:hover[b-qvy3dsi3mt] {
  background: rgba(255, 255, 255, 0.28);
}

/* Individual bar of the hamburger icon */
.ns-ham-bar[b-qvy3dsi3mt] {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all var(--tr-normal);
  transform-origin: center;
}

/* Animates the three bars into an ✕ when the menu is open */
.ns-hamburger.open .ns-ham-bar:nth-child(1)[b-qvy3dsi3mt] {
  transform: rotate(45deg) translate(5px, 5px);
}

.ns-hamburger.open .ns-ham-bar:nth-child(2)[b-qvy3dsi3mt] {
  opacity: 0;
  transform: scaleX(0);
}

.ns-hamburger.open .ns-ham-bar:nth-child(3)[b-qvy3dsi3mt] {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── MOBILE MENU ──────────────────────────────────────────────────── */

/* Dropdown drawn below the header; collapsed by default */
.ns-mobile-menu[b-qvy3dsi3mt] {
  display: none;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(237, 205, 148, 0.97),
    rgba(44, 174, 187, 0.97)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  max-height: 0;
  transition: max-height var(--tr-slow);
}

/* Expanded state toggled by JS */
.ns-mobile-menu.open[b-qvy3dsi3mt] {
  display: block;
  max-height: 600px;
}

/* Vertical nav column inside the dropdown */
.ns-mobile-nav[b-qvy3dsi3mt] {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  gap: var(--sp-1);
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual mobile menu link – full-width, pill hover */
.ns-mobile-link[b-qvy3dsi3mt] {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-primary);
  transition: background var(--tr-fast);
}

.ns-mobile-link:hover[b-qvy3dsi3mt],
.ns-mobile-link.active[b-qvy3dsi3mt] {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Gold-tinted mobile Register link */
.ns-mobile-register[b-qvy3dsi3mt] {
  background: rgba(237, 205, 148, 0.3);
}

/* Mobile logout – reddish text, danger hover */
.ns-mobile-logout[b-qvy3dsi3mt] {
  color: rgba(255, 200, 200, 0.9);
}

.ns-mobile-logout:hover[b-qvy3dsi3mt] {
  background: rgba(220, 53, 69, 0.2);
  color: white;
}

/* Horizontal rule between navigation and auth sections */
.ns-mobile-divider[b-qvy3dsi3mt] {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: var(--sp-3) 0;
}

/* ── SPACER ───────────────────────────────────────────────────────── */

/* Pushes page content below the fixed header (mirrors header height) */
.ns-topnav-spacer[b-qvy3dsi3mt] {
  height: var(--header-h); /* Same height as the header */
}

/* ── SMALL SCREEN TEXT ────────────────────────────────────────────── */

/* Username text shown next to the avatar ring on wider screens */
.ns-hide-sm[b-qvy3dsi3mt] {
  display: inline;
}

/* ================================================================
   RESPONSIVENESS
   ================================================================ */

/* On tablets and phones: hide desktop nav, show hamburger */
@media (max-width: 991px) {
  .ns-topnav-nav[b-qvy3dsi3mt] {
    display: none;
  }

  .ns-hamburger[b-qvy3dsi3mt] {
    display: flex;
  }

  /* Desktop auth buttons are in the hamburger menu on mobile */
  .ns-topnav-actions > .ns-nav-link:not(.ns-user-link)[b-qvy3dsi3mt],
  .ns-topnav-actions > form[b-qvy3dsi3mt] {
    display: none;
  }
}

@media (max-width: 576px) {
  .ns-topnav-title[b-qvy3dsi3mt] {
    font-size: 15px;
  }

  .ns-topnav-logo[b-qvy3dsi3mt] {
    width: 36px;
    height: 36px;
  }

  /* Username text hidden on very small screens to save space */
  .ns-hide-sm[b-qvy3dsi3mt] {
    display: none;
  }
}
/* /Components/Pages/Admin.razor.rz.scp.css */
/* ================================================================
   ADMIN PANEL – scoped CSS for the /admin page.
   Dark hero, tabbed interface, submission cards, statistics table,
   filter buttons, and error log table.
   ================================================================ */

/* ── HERO ─────────────────────────────────────────────────────────── */

/* Dark gradient hero banner specific to the admin page */
.ap-hero[b-pguuuquy1r] {
  background: linear-gradient(
    135deg,
    #1a1a2e 0%,
    #16213e 50%,
    var(--clr-teal-xdark) 100%
  );
}

/* White text overrides for the dark admin hero */
.ap-hero .ns-hero-title[b-pguuuquy1r],
.ap-hero .ns-hero-sub[b-pguuuquy1r] {
  color: rgba(255, 255, 255, 0.95);
}

.ap-hero .ns-hero-title[b-pguuuquy1r] {
  margin: 0; /* Collapses margin within the flex header row */
}

.ap-hero .ns-hero-sub[b-pguuuquy1r] {
  color: rgba(255, 255, 255, 0.7);
}

/* ── PAGE CONTENT ─────────────────────────────────────────────────── */

/* Spacious padding for the main admin content area */
.ap-content[b-pguuuquy1r] {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* ── STATS GRID ──────────────────────────────────────────────────── */

/* Auto-fill stat card grid; wraps gracefully for 5+ cards */
.ap-stats-grid[b-pguuuquy1r] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 480px) {
  .ap-stats-grid[b-pguuuquy1r] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Booking click count highlighted in gold */
.ap-stat-highlight[b-pguuuquy1r] {
  color: #f59e0b;
}

/* ── TABS ─────────────────────────────────────────────────────────── */

/* Tab bar with bottom border acting as the underline indicator track */
.ap-tabs[b-pguuuquy1r] {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--clr-border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* Individual tab button – no background, underline on active */
.ap-tab[b-pguuuquy1r] {
  padding: 10px 18px;
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--tr-fast);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.ap-tab:hover[b-pguuuquy1r] {
  color: var(--clr-teal-dark);
  background: var(--clr-surface-2);
}

/* Active tab – teal underline and text color */
.ap-tab.active[b-pguuuquy1r] {
  color: var(--clr-teal);
  border-bottom-color: var(--clr-teal);
  font-weight: 600;
}

/* ── SECTION ──────────────────────────────────────────────────────── */

/* Bold section heading above each tab panel */
.ap-section-title[b-pguuuquy1r] {
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 20px;
}

/* ── SUBMISSION CARDS ─────────────────────────────────────────────── */

/* Card container for a single pending submission */
.ap-submission-card[b-pguuuquy1r] {
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--clr-border);
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

/* Top row: title + status badge side by side */
.ap-sub-header[b-pguuuquy1r] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Hotel name in the submission card */
.ap-sub-title[b-pguuuquy1r] {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-teal-xdark);
  margin-bottom: 6px;
}

/* Row of meta info pills (city, type, stars, email, date) */
.ap-sub-meta[b-pguuuquy1r] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--clr-text-muted);
}

/* Submitted-by email address – teal for emphasis */
.ap-sub-email[b-pguuuquy1r] {
  color: var(--clr-teal-dark);
}

/* Submission timestamp – italicised */
.ap-sub-date[b-pguuuquy1r] {
  font-style: italic;
}

/* Preview image inside the submission card */
.ap-sub-img[b-pguuuquy1r] {
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  width: 100%;
}

/* Booking URL link below the image */
.ap-sub-link[b-pguuuquy1r] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--clr-teal-dark);
  text-decoration: none;
  margin-bottom: 12px;
}

/* Admin note input row – extra top spacing to separate from the image/link */
.ap-note-input[b-pguuuquy1r] {
  margin-top: 12px;
}

/* Action buttons row (Approve / Reject) */
.ap-sub-actions[b-pguuuquy1r] {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ── STATUS BADGES ────────────────────────────────────────────────── */

/* Shared capsule for Pending / Approved / Rejected status labels */
.ap-sub-status-badge[b-pguuuquy1r] {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Yellow-tinted badge – awaiting review */
.ap-status-pending[b-pguuuquy1r] {
  background: #fff8e1;
  color: #856404;
}

/* Green-tinted badge – approved and live */
.ap-status-approved[b-pguuuquy1r] {
  background: #d4edda;
  color: #155724;
}

/* Red-tinted badge – rejected submission */
.ap-status-rejected[b-pguuuquy1r] {
  background: #f8d7da;
  color: #721c24;
}

/* ── EMPTY STATE ──────────────────────────────────────────────────── */

/* Centered placeholder shown when a tab has no data */
.ap-empty[b-pguuuquy1r] {
  text-align: center;
  padding: 40px;
  color: var(--clr-text-muted);
  font-size: 16px;
}

/* Large emoji icon above the empty message */
.ap-empty span[b-pguuuquy1r] {
  font-size: 40px;
  display: block;
  margin-bottom: 8px;
}

/* ── STATISTICS TABLE ─────────────────────────────────────────────── */

/* Scrollable wrapper with rounded border for the stats table */
.ap-stats-table-wrap[b-pguuuquy1r] {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
}

/* Center-align data columns; left-align the label column */
.ap-stats-table th[b-pguuuquy1r],
.ap-stats-table td[b-pguuuquy1r] {
  text-align: center;
}

.ap-stats-table th:first-child[b-pguuuquy1r],
.ap-stats-table td:first-child[b-pguuuquy1r] {
  text-align: left;
}

/* Small footnote below the table */
.ap-stats-note[b-pguuuquy1r] {
  font-size: 12px;
  color: var(--clr-text-muted);
  margin-top: 8px;
}

/* ── FILTER BUTTONS ───────────────────────────────────────────────── */

/* Pill-filter row for the All Submissions tab */
.ap-filter-row[b-pguuuquy1r] {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Individual filter pill – fills teal when active */
.ap-filter-btn[b-pguuuquy1r] {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
  cursor: pointer;
  transition: all var(--tr-fast);
  font-family: var(--font-primary);
}

.ap-filter-btn:hover[b-pguuuquy1r],
.ap-filter-btn.active[b-pguuuquy1r] {
  background: var(--clr-teal);
  border-color: var(--clr-teal);
  color: white;
}

/* ── ALL SUBMISSIONS LIST ─────────────────────────────────────────── */

/* Vertical list of compact submission rows */
.ap-submissions-list[b-pguuuquy1r] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Single submission row – pill with flex layout */
.ap-sub-row[b-pguuuquy1r] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  flex-wrap: wrap;
}

/* Left info block: title, city, email, date */
.ap-sub-row-info[b-pguuuquy1r] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 13px;
  flex-wrap: wrap;
}

/* Admin note shown below the row info */
.ap-sub-note[b-pguuuquy1r] {
  font-size: 12px;
  color: var(--clr-text-muted);
  font-style: italic;
  width: 100%;
}

/* ── ERROR LOG TABLE ──────────────────────────────────────────────── */

/* Left-align and top-align all error log cells */
.ap-error-table th[b-pguuuquy1r],
.ap-error-table td[b-pguuuquy1r] {
  text-align: left;
  vertical-align: top;
}

/* Timestamp column – compact and muted */
.ap-err-time[b-pguuuquy1r] {
  font-size: 12px;
  color: var(--clr-text-muted);
  white-space: nowrap;
  width: 130px;
}

/* Exception type – monospace badge with danger tint */
.ap-err-type[b-pguuuquy1r] {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-danger, #dc3545);
  background: rgba(220, 53, 69, 0.08);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Error message – wraps, max-width to keep table readable */
.ap-err-msg[b-pguuuquy1r] {
  font-size: 13px;
  color: var(--clr-text-2);
  max-width: 300px;
  word-break: break-word;
}

/* Page path – small monospace, no wrap */
.ap-err-path[b-pguuuquy1r] {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--clr-text-muted);
  white-space: nowrap;
}

/* Stack trace expand/collapse toggle */
.ap-err-trace-toggle[b-pguuuquy1r] {
  font-size: 12px;
  color: var(--clr-teal-dark);
  cursor: pointer;
  user-select: none;
}

/* Stack trace pre block – scrollable, left danger border */
.ap-err-trace[b-pguuuquy1r] {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  background: var(--clr-surface-2, #f8f9fa);
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-danger, #dc3545);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--clr-text-2);
}

/* ── ERROR BOUNDARY TEST CARD ─────────────────────────────────────── */

/* Developer testing card placed below the error log table */
.ap-error-test-card[b-pguuuquy1r] {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.04);
}

/* Bold label for the test card */
.ap-error-test-title[b-pguuuquy1r] {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 6px;
}

/* Explanatory text below the title */
.ap-error-test-desc[b-pguuuquy1r] {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
}