/* ==========================================================================
   Landbiz Mobile-first Design System v0.1 (foundation)
   --------------------------------------------------------------------------
   - All custom properties use the `--lb-` prefix.
   - All component classes use the `lb-` prefix.
   - Loaded AFTER Bootstrap on every page. Must not change the current UI
     for elements that do not opt in via an `.lb-*` class.
   - This file is additive: existing per-page `<style>` blocks and classes
     (`.feature-card`, `.paid-lead-card`, `.view-mode-btn`, ...) are left
     untouched and continue to work as-is.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  /* Typography - fluid via clamp(min, preferred, max), always bounded */
  --lb-font-size-xs:   clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  --lb-font-size-sm:   clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --lb-font-size-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --lb-font-size-lg:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --lb-font-size-xl:   clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --lb-font-size-2xl:  clamp(1.7rem, 1.4rem + 1.6vw, 2.4rem);

  /* Spacing scale */
  --lb-space-1: 0.25rem;
  --lb-space-2: 0.5rem;
  --lb-space-3: 0.75rem;
  --lb-space-4: 1rem;
  --lb-space-5: 1.5rem;
  --lb-space-6: 2rem;

  /* Semantic color tokens */
  --lb-color-primary: #0d4fc7;
  --lb-color-accent:  #f6c343;
  --lb-color-success: #16a34a;
  --lb-color-muted:   #64748b;
  --lb-color-surface: #ffffff;
  --lb-color-bg:      #f7f7fb;
  --lb-color-border:  #e2e8f0;
  --lb-color-text:    #1f2937;

  /* Tinted surfaces (for callouts / search-panel shells) */
  --lb-color-primary-soft: #eaf1fd;
  --lb-color-primary-border: #c7dafc;

  /* Source badge colors (lead card source taxonomy) */
  --lb-color-source-chotot-bg: #fffbeb;
  --lb-color-source-chotot-border: #fde68a;
  --lb-color-source-chotot-text: #b45309;
  --lb-color-source-batdongsan-bg: #fef2f2;
  --lb-color-source-batdongsan-border: #fecaca;
  --lb-color-source-batdongsan-text: #dc2626;

  /* Lead action accordion colors (Slice 1D-3) */
  --lb-color-action-bg: #fef9c3;
  --lb-color-action-border: #fde68a;
  --lb-color-action-text: #1f2937;
  --lb-color-action-selected-bg: #dcfce7;
  --lb-color-action-selected-border: #bbf7d0;
  --lb-color-action-selected-text: #1f2937;

  /* Lead notes & follow-up panel colors (Slice 1D-4) */
  --lb-color-followup-bg: #eff6ff;
  --lb-color-followup-border: #bfdbfe;
  --lb-color-followup-text: #1d4ed8;
  --lb-color-followup-border-active: #f97316;

  /* Reusable admin work-card / compact review surfaces (M1A foundation) */
  --lb-work-card-bg: #ffffff;
  --lb-work-card-border: #d9e2ef;
  --lb-work-card-radius: 18px;
  --lb-work-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --lb-work-card-gap: 0.9rem;
  --lb-work-card-header-bg: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  --lb-review-zone-bg: #f8fbff;
  --lb-owner-soft-bg: #ecfdf3;
  --lb-owner-soft-border: #b7ebcb;
  --lb-owner-text: #166534;
  --lb-broker-soft-bg: #fff1f2;
  --lb-broker-soft-border: #fecdd3;
  --lb-broker-text: #be123c;
  --lb-advisory-soft-bg: #fff7db;
  --lb-advisory-soft-border: #facc15;
  --lb-advisory-text: #92400e;
  --lb-unclear-soft-bg: #f3f4f6;
  --lb-unclear-soft-border: #d1d5db;
  --lb-unclear-text: #4b5563;
  --lb-unreviewed-soft-bg: #fff9db;
  --lb-unreviewed-soft-border: #fde68a;
  --lb-unreviewed-text: #92400e;
  --lb-details-summary-bg: #eef4fb;
  --lb-details-summary-border: #d5e2f2;
  --lb-details-summary-text: #334155;
  --lb-stat-panel-bg: #f8fbff;
  --lb-stat-panel-border: #d6e4f5;
  --lb-stat-card-bg: #ffffff;
  --lb-stat-card-border: #dde7f2;
  --lb-stat-card-label: #64748b;
  --lb-stat-card-value: #0f172a;
  --lb-admin-nav-bg: #f0f4fa;
  --lb-admin-nav-border: #d8e3f0;
  --lb-admin-nav-text: #374151;
  --lb-admin-nav-hover-bg: #dbeafe;
  --lb-admin-nav-hover-text: #1d4ed8;
  --lb-admin-nav-active-bg: #1d4ed8;
  --lb-admin-nav-active-text: #ffffff;
  --lb-admin-nav-primary-bg: #ecfdf5;
  --lb-admin-nav-primary-border: #6ee7b7;
  --lb-admin-nav-primary-text: #047857;
  --lb-admin-nav-review-bg: #eff6ff;
  --lb-admin-nav-review-border: #bfdbfe;
  --lb-admin-nav-review-text: #1d4ed8;
  --lb-admin-nav-queue-bg: #fff7ed;
  --lb-admin-nav-queue-border: #fdba74;
  --lb-admin-nav-queue-text: #c2410c;
  --lb-admin-nav-admin-bg: #f8fafc;
  --lb-admin-nav-admin-border: #cbd5e1;
  --lb-admin-nav-admin-text: #334155;

  /* Radius / shadow */
  --lb-radius-sm: 8px;
  --lb-radius-md: 12px;
  --lb-radius-lg: 16px;
  --lb-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
  --lb-shadow-md: 0 6px 20px rgba(0, 0, 0, .08);

  /* Container / breakpoints / touch target */
  --lb-container-max: 1200px;
  --lb-bp-sm: 576px;
  --lb-bp-md: 768px;
  --lb-bp-lg: 992px;
  --lb-touch-min: 44px;
}


/* ==========================================================================
   2. UI settings hooks
   --------------------------------------------------------------------------
   These rules read `data-font-scale` / `data-density` attributes set on
   <body> from `apps.web.services.ui_settings.get_ui_settings()`.

   v0.1 ships with hard-coded defaults (font_scale="normal",
   density="comfortable") so these overrides are currently inert. They exist
   so that `.lb-*` components built in later slices can consume the tokens
   below without any further wiring once Super Admin UI Settings (v0.2)
   starts returning non-default values.
   ========================================================================== */
body[data-font-scale="compact"]{
  --lb-font-size-xs:   clamp(0.7rem, 0.68rem + 0.12vw, 0.76rem);
  --lb-font-size-sm:   clamp(0.76rem, 0.73rem + 0.16vw, 0.84rem);
  --lb-font-size-base: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem);
  --lb-font-size-lg:   clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  --lb-font-size-xl:   clamp(1.25rem, 1.1rem + 0.8vw, 1.65rem);
  --lb-font-size-2xl:  clamp(1.5rem, 1.25rem + 1.3vw, 2.1rem);
}

body[data-font-scale="large"]{
  --lb-font-size-xs:   clamp(0.78rem, 0.75rem + 0.18vw, 0.88rem);
  --lb-font-size-sm:   clamp(0.86rem, 0.82rem + 0.22vw, 0.98rem);
  --lb-font-size-base: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  --lb-font-size-lg:   clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --lb-font-size-xl:   clamp(1.5rem, 1.3rem + 1.2vw, 2.1rem);
  --lb-font-size-2xl:  clamp(1.85rem, 1.5rem + 1.9vw, 2.7rem);
}

body[data-density="compact"]{
  --lb-space-2: 0.375rem;
  --lb-space-3: 0.625rem;
  --lb-space-4: 0.875rem;
  --lb-space-5: 1.25rem;
  --lb-space-6: 1.5rem;
}

body[data-density="comfortable"]{
  /* Matches the base tokens above; declared explicitly so the attribute is
     a documented, always-valid value rather than "anything but compact". */
  --lb-space-2: 0.5rem;
  --lb-space-3: 0.75rem;
  --lb-space-4: 1rem;
  --lb-space-5: 1.5rem;
  --lb-space-6: 2rem;
}


/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.lb-page{
  max-width: var(--lb-container-max);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 4vw, 2rem);
}

.lb-page-header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
}

.lb-page-header h1,
.lb-page-header h2{
  font-size: var(--lb-font-size-xl);
  margin: 0;
}

.lb-section{
  margin-bottom: var(--lb-space-5);
}

.lb-section-title{
  font-size: var(--lb-font-size-lg);
  font-weight: 600;
  margin-bottom: var(--lb-space-3);
  color: var(--lb-color-muted);
}

.lb-mobile-stack{
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}

@media (min-width: 768px){
  .lb-mobile-stack{
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Cards --- */
.lb-card{
  background: var(--lb-color-surface);
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-shadow-sm);
  padding: var(--lb-space-4);
}

.lb-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lb-space-4);
}

/* --- Buttons --- */
.lb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-2);
  min-height: var(--lb-touch-min);
  padding: 0 var(--lb-space-4);
  font-size: var(--lb-font-size-base);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--lb-radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

.lb-btn-primary{
  background: var(--lb-color-primary);
  border-color: var(--lb-color-primary);
  color: #fff;
}

.lb-btn-secondary{
  background: var(--lb-color-surface);
  border-color: var(--lb-color-border);
  color: var(--lb-color-primary);
}

.lb-btn-home{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-2);
  min-height: var(--lb-touch-min);
  background: var(--lb-color-accent);
  border-color: var(--lb-color-accent);
  color: #fff;
}

.lb-btn-home:hover,
.lb-btn-home:focus{
  background: #f1b81f;
  border-color: #f1b81f;
  color: #fff;
}

.lb-btn-home:focus-visible{
  outline: 2px solid var(--lb-color-primary);
  outline-offset: 2px;
}

/* --- Tabs --- */
.lb-tab-group{
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.lb-tab{
  display: inline-flex;
  align-items: center;
  min-height: var(--lb-touch-min);
  padding: var(--lb-space-2) var(--lb-space-3);
  font-size: var(--lb-font-size-base);
  font-weight: 600;
  border-radius: var(--lb-radius-md);
  border: 1px solid var(--lb-color-border);
  color: var(--lb-color-muted);
  text-decoration: none;
}

.lb-tab.is-active,
.lb-tab[aria-selected="true"]{
  background: var(--lb-color-primary);
  border-color: var(--lb-color-primary);
  color: #fff;
}

/* --- Badges --- */
.lb-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  padding: var(--lb-space-1) var(--lb-space-2);
  font-size: var(--lb-font-size-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--lb-color-bg);
  color: var(--lb-color-muted);
  border: 1px solid var(--lb-color-border);
}

/* --- Filters --- */
.lb-filter-panel{
  background: var(--lb-color-surface);
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
}

.lb-filter-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lb-space-2);
}

.lb-filter-grid select,
.lb-filter-grid input,
.lb-filter-grid button{
  min-height: var(--lb-touch-min);
  font-size: var(--lb-font-size-base);
}

.lb-filter-panel__group{
  background: var(--lb-color-surface);
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-2) var(--lb-space-3);
}

.lb-filter-panel__group + .lb-filter-panel__group{
  margin-top: var(--lb-space-3);
}

.lb-filter-panel__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
  min-height: var(--lb-touch-min);
  font-weight: 700;
  color: var(--lb-color-primary);
  font-size: var(--lb-font-size-base);
  cursor: pointer;
  list-style: none;
}

.lb-filter-panel__summary::-webkit-details-marker{
  display: none;
}

.lb-filter-panel__summary::after{
  content: "\25BE";
  font-size: var(--lb-font-size-lg);
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.lb-filter-panel__group[open] > .lb-filter-panel__summary::after{
  transform: rotate(180deg);
}

.lb-filter-grid--primary,
.lb-filter-grid--advanced{
  margin-top: var(--lb-space-2);
}

@media (min-width: 576px){
  .lb-filter-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* --- Filter accordion (collapsible filter panel) --- */
.lb-filter-accordion{
  background: var(--lb-color-primary-soft);
  border: 1px solid var(--lb-color-primary-border);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-shadow-md);
  padding: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.lb-filter-accordion-summary,
.lb-filter-group-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
  min-height: var(--lb-touch-min);
  font-weight: 600;
  font-size: var(--lb-font-size-base);
  cursor: pointer;
  list-style: none;
}

.lb-filter-accordion-summary::-webkit-details-marker,
.lb-filter-group-summary::-webkit-details-marker{
  display: none;
}

.lb-filter-accordion-summary::after,
.lb-filter-group-summary::after{
  content: "\25BE";
  font-size: var(--lb-font-size-lg);
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.lb-filter-accordion[open] > .lb-filter-accordion-summary::after,
.lb-filter-group[open] > .lb-filter-group-summary::after{
  transform: rotate(180deg);
}

.lb-filter-accordion-summary{
  font-size: var(--lb-font-size-lg);
  color: var(--lb-color-primary);
}

.lb-filter-group-summary{
  color: var(--lb-color-primary);
}

.lb-filter-accordion-form{
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-3);
}

.lb-filter-group{
  background: var(--lb-color-surface);
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-2) var(--lb-space-3);
}

.lb-filter-group-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lb-space-2);
  margin-top: var(--lb-space-2);
}

@media (min-width: 576px){
  .lb-filter-group-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.lb-filter-actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.lb-filter-actions .lb-btn{
  flex: 1 1 160px;
}

/* --- Compact stats panels --- */
.lb-stats-panel{
  background: var(--lb-stat-panel-bg);
  border: 1px solid var(--lb-stat-panel-border);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
}

.lb-stats-panel__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
  min-height: var(--lb-touch-min);
  color: var(--lb-color-primary);
  font-size: var(--lb-font-size-base);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.lb-stats-panel__summary::-webkit-details-marker{
  display: none;
}

.lb-stats-panel__summary::after{
  content: "\25BE";
  font-size: var(--lb-font-size-lg);
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.lb-stats-panel[open] > .lb-stats-panel__summary::after{
  transform: rotate(180deg);
}

.lb-stats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-3);
}

.lb-stat-card{
  background: var(--lb-stat-card-bg);
  border: 1px solid var(--lb-stat-card-border);
  border-radius: var(--lb-radius-md);
  padding: var(--lb-space-3);
  min-width: 0;
}

.lb-stat-card__label{
  color: var(--lb-stat-card-label);
  font-size: var(--lb-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lb-stat-card__value{
  color: var(--lb-stat-card-value);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
  font-weight: 800;
  line-height: 1.15;
  margin-top: var(--lb-space-2);
}

@media (min-width: 992px){
  .lb-stats-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Shared admin nav shell emphasis --- */
.lb-admin-nav{
  background: var(--lb-admin-nav-bg);
  border: 1px solid var(--lb-admin-nav-border);
  border-radius: 0.65rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.lb-admin-nav__inner{
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.15rem;
  align-items: center;
}

.lb-admin-nav__item{
  display: inline-block;
  padding: 0.22rem 0.52rem;
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  color: var(--lb-admin-nav-text);
  text-decoration: none;
  border-radius: 0.35rem;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  border: 1px solid transparent;
}

.lb-admin-nav__item:hover{
  background: var(--lb-admin-nav-hover-bg);
  color: var(--lb-admin-nav-hover-text);
  text-decoration: none;
}

.lb-admin-nav__item--primary,
.admin-nav-primary{
  background: var(--lb-admin-nav-primary-bg);
  color: var(--lb-admin-nav-primary-text);
  border-color: var(--lb-admin-nav-primary-border);
  font-weight: 700;
}

.lb-admin-nav__item--primary:hover,
.admin-nav-primary:hover{
  background: #d1fae5;
  color: #065f46;
}

.lb-admin-nav__item--review{
  background: var(--lb-admin-nav-review-bg);
  color: var(--lb-admin-nav-review-text);
  border-color: var(--lb-admin-nav-review-border);
  font-weight: 700;
}

.lb-admin-nav__item--queue{
  background: var(--lb-admin-nav-queue-bg);
  color: var(--lb-admin-nav-queue-text);
  border-color: var(--lb-admin-nav-queue-border);
  font-weight: 700;
}

.lb-admin-nav__item--admin{
  background: var(--lb-admin-nav-admin-bg);
  color: var(--lb-admin-nav-admin-text);
  border-color: var(--lb-admin-nav-admin-border);
  font-weight: 700;
}

.lb-admin-nav__item--active,
.admin-nav-active{
  background: var(--lb-admin-nav-active-bg);
  color: var(--lb-admin-nav-active-text) !important;
  border-color: var(--lb-admin-nav-active-bg);
  font-weight: 700;
}

.lb-admin-nav__item--active:hover,
.admin-nav-active:hover{
  background: #1e40af;
  color: var(--lb-admin-nav-active-text);
}

.lb-admin-nav__sep{
  color: #9ca3af;
  font-size: 0.85rem;
  padding: 0 0.1rem;
  user-select: none;
  flex-shrink: 0;
}

.lb-admin-nav__group-label{
  color: #9ca3af;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 0.1rem;
  user-select: none;
  flex-shrink: 0;
}

/* --- Action grids --- */
.lb-action-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lb-space-3);
}

@media (min-width: 576px){
  .lb-action-grid{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.lb-action-grid .lb-btn,
.lb-action-grid .btn{
  width: 100%;
}

.lb-home-shell{
  display: grid;
  gap: var(--lb-space-5);
}

.lb-home-section{
  display: grid;
  gap: var(--lb-space-3);
}

.lb-home-section-title{
  margin: 0;
  font-size: var(--lb-font-size-xl);
  font-weight: 700;
  color: var(--lb-color-text);
}

.lb-home-section-desc{
  margin: 0;
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
}

.lb-home-action-grid{
  display: grid;
  gap: var(--lb-space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lb-home-action-card{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.lb-home-action-card .card{
  min-height: 100%;
}

.lb-home-action-title{
  font-size: var(--lb-font-size-base);
  font-weight: 700;
  color: var(--lb-color-text);
}

.lb-home-action-desc{
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
}

.lb-dashboard-shell{
  display: grid;
  gap: var(--lb-space-5);
  max-width: 100%;
  min-width: 0;
}

.lb-dashboard-section{
  display: grid;
  gap: var(--lb-space-3);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-section-title{
  margin: 0;
  font-size: var(--lb-font-size-xl);
  font-weight: 700;
  color: var(--lb-color-text);
}

.lb-dashboard-section-desc{
  margin: 0;
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
}

.lb-dashboard-action-grid{
  display: grid;
  gap: var(--lb-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-action-card{
  display: block;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-action-card .card{
  min-height: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-action-title{
  font-size: var(--lb-font-size-base);
  font-weight: 700;
  color: var(--lb-color-text);
}

.lb-dashboard-action-desc{
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
}

/* --- Lead cards --- */
.lb-lead-card{
  background: var(--lb-color-surface);
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-shadow-sm);
  padding: var(--lb-space-4);
  font-size: var(--lb-font-size-base);
}

.lb-lead-card + .lb-lead-card{
  margin-top: var(--lb-space-3);
}

/* Typography overrides for content inside `.lb-lead-card`. These use a
   two-class selector so they win over the page-local `.pill` /
   `.reason-chip` / `.note-entry` rules (defined in paid_leads.html)
   regardless of stylesheet order, without editing those rules. */
.lb-lead-card .lb-lead-title{
  font-size: var(--lb-font-size-lg);
}

.lb-lead-card .pill,
.lb-lead-card .reason-chip{
  font-size: var(--lb-font-size-sm);
}

.lb-lead-card .pill-confidence{
  font-size: var(--lb-font-size-xs);
}

.lb-lead-card .note-entry{
  font-size: var(--lb-font-size-sm);
}

.lb-lead-card .note-entry-time{
  font-size: var(--lb-font-size-xs);
}

/* --- Lead card badge taxonomy (Slice 1D-2) --- */
.lb-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  max-width: 100%;
  border-radius: var(--lb-radius-sm);
  padding: var(--lb-space-1) var(--lb-space-2);
  font-size: var(--lb-font-size-sm);
  border: 1px solid var(--lb-color-border);
  background: var(--lb-color-surface);
  color: var(--lb-color-muted);
  overflow-wrap: anywhere;
}

.lb-chip--signal{
  font-size: var(--lb-font-size-xs);
}

.lb-chip--source,
.lb-source-badge{
  font-weight: 700;
  border-radius: var(--lb-radius-sm);
}

.lb-source-badge--chotot{
  background: var(--lb-color-source-chotot-bg);
  border-color: var(--lb-color-source-chotot-border);
  color: var(--lb-color-source-chotot-text);
}

.lb-source-badge--batdongsan{
  background: var(--lb-color-source-batdongsan-bg);
  border-color: var(--lb-color-source-batdongsan-border);
  color: var(--lb-color-source-batdongsan-text);
}

.lb-lead-meta-row,
.lb-lead-price-row,
.lb-lead-primary-badges,
.lb-lead-signal-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lb-space-2);
  max-width: 100%;
}

.lb-lead-meta-row{
  margin-top: var(--lb-space-1);
}

.lb-lead-price-row,
.lb-lead-primary-badges{
  margin-top: var(--lb-space-2);
}

.lb-lead-signal-group{
  margin-top: var(--lb-space-2);
  padding-top: var(--lb-space-2);
  border-top: 1px solid var(--lb-color-border);
  max-width: 100%;
}

.lb-lead-signal-title{
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  font-size: var(--lb-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lb-color-text);
  margin-bottom: var(--lb-space-1);
  cursor: pointer;
  list-style: none;
}

.lb-lead-signal-title::-webkit-details-marker{
  display: none;
}

.lb-lead-signal-title::after{
  content: none;
}

.lb-lead-signal-title::before{
  content: "\25B8";
  font-size: var(--lb-font-size-base);
  line-height: 1;
  color: var(--lb-color-text);
  transition: transform 0.15s ease-in-out;
}

.lb-lead-signal-group[open] > .lb-lead-signal-title::before{
  transform: rotate(90deg);
}

.lb-lead-signal-list{
  gap: var(--lb-space-1);
}

/* --- Lead card action accordion (Slice 1D-3) --- */
.lb-lead-action-group{
  margin-top: var(--lb-space-2);
  padding-top: var(--lb-space-2);
  border-top: 1px solid var(--lb-color-border);
  max-width: 100%;
}

.lb-lead-action-title{
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  margin-bottom: var(--lb-space-1);
  cursor: pointer;
  list-style: none;
}

.lb-lead-action-title::-webkit-details-marker{
  display: none;
}

.lb-lead-action-title::before{
  content: "\25B8";
  font-size: var(--lb-font-size-base);
  line-height: 1;
  color: var(--lb-color-text);
  transition: transform 0.15s ease-in-out;
}

.lb-lead-action-group[open] > .lb-lead-action-title::before{
  transform: rotate(90deg);
}

.lb-lead-action-title-text{
  font-size: var(--lb-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lb-color-text);
}

.lb-lead-action-current{
  display: inline-flex;
  align-items: center;
}

.lb-chip--action-current{
  background: var(--lb-color-action-selected-bg);
  border-color: var(--lb-color-action-selected-border);
  color: var(--lb-color-action-selected-text);
  font-weight: 600;
  font-size: calc(var(--lb-font-size-xs) * 0.9);
}

.lb-lead-action-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lb-space-2);
  max-width: 100%;
  margin-top: var(--lb-space-1);
}

.lb-action-btn{
  display: inline-flex;
  align-items: center;
  border-radius: var(--lb-radius-sm);
  border: 1px solid var(--lb-color-action-border);
  background: var(--lb-color-action-bg);
  color: var(--lb-color-action-text);
  padding: var(--lb-space-1) var(--lb-space-2);
  font-size: var(--lb-font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.lb-action-btn.is-selected,
.lb-action-btn:disabled{
  background: var(--lb-color-action-selected-bg);
  border-color: var(--lb-color-action-selected-border);
  color: var(--lb-color-action-selected-text);
}

/* --- Lead notes & follow-up panel (Slice 1D-4) --- */
.lb-followup-panel{
  background: var(--lb-color-followup-bg);
  border-radius: var(--lb-radius-sm);
  padding: var(--lb-space-2) var(--lb-space-3);
  max-width: 100%;
  box-sizing: border-box;
}

.lb-followup-panel__summary{
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  width: fit-content;
  max-width: 100%;
  padding: var(--lb-space-1) var(--lb-space-2);
  border-radius: var(--lb-radius-sm);
  border: 2px solid var(--lb-color-followup-border);
  background: var(--lb-color-followup-bg);
  color: var(--lb-color-followup-text);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}

.lb-followup-panel__summary::-webkit-details-marker{
  display: none;
}

.lb-followup-panel__summary::before{
  content: "\25B8";
  font-size: var(--lb-font-size-base);
  line-height: 1;
  color: var(--lb-color-followup-text);
  transition: transform 0.15s ease-in-out;
}

.lb-followup-panel[open] > .lb-followup-panel__summary::before{
  transform: rotate(90deg);
}

/* Active state: at least one note or follow-up date is already set. The
   blue-orange running border lives on the summary chip only, never on the
   panel/body, so notes/history/form are never wrapped by the animation. */
.lb-followup-panel--active .lb-followup-panel__summary{
  border-color: var(--lb-color-followup-border-active);
  animation: lb-followup-summary-pulse 2.4s ease-in-out infinite;
}

@keyframes lb-followup-summary-pulse{
  0%, 100% { border-color: var(--lb-color-followup-border-active); }
  50% { border-color: var(--lb-color-followup-text); }
}

@media (prefers-reduced-motion: reduce){
  .lb-followup-panel--active .lb-followup-panel__summary{
    animation: none;
    border-color: var(--lb-color-followup-border-active);
  }
}

.lb-followup-panel__body{
  margin-top: var(--lb-space-2);
  padding: var(--lb-space-2);
  background: var(--lb-color-followup-bg);
  border-radius: var(--lb-radius-sm);
  max-width: 100%;
  box-sizing: border-box;
}

.lb-followup-panel__notes{
  max-width: 100%;
}

.lb-followup-panel__notes:not(:empty){
  margin-bottom: var(--lb-space-2);
}

.lb-followup-panel__form{
  max-width: 100%;
}

/* --- Reusable admin work cards / compact review surfaces (M1A) --- */
.lb-work-card{
  background: var(--lb-work-card-bg);
  border: 1px solid var(--lb-work-card-border);
  border-radius: var(--lb-work-card-radius);
  box-shadow: var(--lb-work-card-shadow);
}

.lb-work-card__inner{
  display: grid;
  gap: var(--lb-work-card-gap);
  padding: clamp(0.9rem, 1rem + 0.2vw, 1.25rem);
}

.lb-work-card__header{
  display: grid;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: calc(var(--lb-work-card-radius) - 6px);
  background: var(--lb-work-card-header-bg);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.lb-work-card__header-main{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--lb-space-3);
  flex-wrap: wrap;
}

.lb-work-card__title-row{
  display: flex;
  align-items: flex-start;
  gap: var(--lb-space-2);
  min-width: 0;
  flex: 1 1 18rem;
}

.lb-work-card__index{
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
  font-weight: 700;
  min-width: 2.2rem;
  padding-top: 0.1rem;
}

.lb-work-card__title{
  font-size: var(--lb-font-size-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--lb-color-text);
  text-decoration: none;
}

.lb-work-card__title:hover,
.lb-work-card__title:focus-visible{
  color: var(--lb-color-primary);
}

.lb-work-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
}

.lb-work-card__links{
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: var(--lb-font-size-sm);
}

.lb-work-card__links a{
  font-weight: 600;
}

.lb-work-card__status{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.lb-work-card__review-zone{
  display: grid;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: calc(var(--lb-work-card-radius) - 6px);
  border: 1px solid rgba(191, 219, 254, 0.9);
  background: var(--lb-review-zone-bg);
}

.lb-work-card__section-title{
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lb-color-muted);
  margin: 0;
}

.lb-work-card__quick-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lb-work-card__quick-actions .btn{
  min-height: var(--lb-touch-min);
  border-radius: 999px;
  padding-inline: 0.9rem;
  font-weight: 700;
}

.lb-work-card__details{
  display: grid;
  gap: var(--lb-space-2);
}

.lb-work-card__details-panel{
  border: 1px solid var(--lb-details-summary-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.lb-work-card__details-summary{
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  background: var(--lb-details-summary-bg);
  color: var(--lb-details-summary-text);
  font-size: var(--lb-font-size-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.lb-work-card__details-summary::-webkit-details-marker{
  display: none;
}

.lb-work-card__details-summary::before{
  content: "\25B8";
  font-size: var(--lb-font-size-base);
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.lb-work-card__details-panel[open] > .lb-work-card__details-summary::before{
  transform: rotate(90deg);
}

.lb-work-card__details-body{
  padding: 0.9rem;
}

.lb-score-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.lb-score-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--lb-font-size-sm);
  font-weight: 800;
  line-height: 1;
}

.lb-score-pill--owner{
  background: var(--lb-owner-soft-bg);
  border-color: var(--lb-owner-soft-border);
  color: var(--lb-owner-text);
}

.lb-score-pill--broker{
  background: var(--lb-broker-soft-bg);
  border-color: var(--lb-broker-soft-border);
  color: var(--lb-broker-text);
}

.lb-state-card--unreviewed{
  background:
    linear-gradient(180deg, rgba(255, 249, 219, 0.58) 0%, rgba(255, 255, 255, 0.98) 22%);
  border-color: var(--lb-unreviewed-soft-border);
}

.lb-state-card--owner{
  background:
    linear-gradient(180deg, rgba(236, 253, 243, 0.7) 0%, rgba(255, 255, 255, 0.98) 22%);
  border-color: var(--lb-owner-soft-border);
}

.lb-state-card--broker{
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 0.78) 0%, rgba(255, 255, 255, 0.98) 22%);
  border-color: var(--lb-broker-soft-border);
}

.lb-state-card--advisory{
  background:
    linear-gradient(180deg, rgba(255, 247, 219, 0.82) 0%, rgba(255, 255, 255, 0.98) 22%);
  border-color: var(--lb-advisory-soft-border);
}

.lb-state-card--unclear{
  background:
    linear-gradient(180deg, rgba(243, 244, 246, 0.86) 0%, rgba(255, 255, 255, 0.98) 22%);
  border-color: var(--lb-unclear-soft-border);
}

.lb-state-badge{
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: var(--lb-font-size-xs);
  font-weight: 800;
  border: 1px solid transparent;
}

.lb-state-badge--unreviewed{
  background: var(--lb-unreviewed-soft-bg);
  border-color: var(--lb-unreviewed-soft-border);
  color: var(--lb-unreviewed-text);
}

.lb-state-badge--owner{
  background: var(--lb-owner-soft-bg);
  border-color: var(--lb-owner-soft-border);
  color: var(--lb-owner-text);
}

.lb-state-badge--broker{
  background: var(--lb-broker-soft-bg);
  border-color: var(--lb-broker-soft-border);
  color: var(--lb-broker-text);
}

.lb-state-badge--advisory{
  background: var(--lb-advisory-soft-bg);
  border-color: var(--lb-advisory-soft-border);
  color: var(--lb-advisory-text);
}

.lb-state-badge--unclear{
  background: var(--lb-unclear-soft-bg);
  border-color: var(--lb-unclear-soft-border);
  color: var(--lb-unclear-text);
}

@media (min-width: 768px){
  .lb-work-card__header{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .lb-work-card__details{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-work-card__details-panel--wide{
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   5. Responsive helpers
   ========================================================================== */
@media (max-width: 767.98px){
  .lb-hide-mobile{
    display: none !important;
  }

  .lb-stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  .lb-hide-desktop{
    display: none !important;
  }

  .lb-stats-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==========================================================================
   6. Mobile container compaction (opt-in via `body.lb-compact-mobile`)
   --------------------------------------------------------------------------
   base.html wraps every page in `body { padding: 20px }` plus Bootstrap's
   `.container` padding. On narrow screens that stacks with a page's own
   `.lb-page` padding-inline and squeezes the readable area. Pages that
   render their main wrapper with `.lb-page` can opt in by setting
   `{% block body_class %}lb-compact-mobile{% endblock %}` in base.html -
   this only changes layout below 576px and only for pages that opt in, so
   it is safe for the other templates extending base.html.
   ========================================================================== */
@media (max-width: 576px){
  body.lb-compact-mobile{
    padding: 0;
  }

  body.lb-compact-mobile > .container{
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .lb-admin-nav__item{
    padding: 0.3rem 0.6rem;
  }

  .lb-admin-nav__group-label,
  .lb-admin-nav__sep{
    display: none;
  }
}


/* ==========================================================================
   7. Page shell + back link (reusable across lb-* pages)
   --------------------------------------------------------------------------
   `.lb-home-shell` / `.lb-home-section-card` / `.lb-home-section-header`
   mirror the values homepage.html already defines inline, so pages that
   extend base.html (which has no top spacing of its own) get the same
   "not stuck to the top edge" shell without duplicating drift-prone CSS.
   ========================================================================== */
.lb-home-shell{
  margin-top: var(--lb-space-5);
}

.lb-home-section-card{
  padding: clamp(1rem, 2.8vw, 1.5rem);
}

.lb-home-section-header{
  display: grid;
  gap: .35rem;
  margin-bottom: var(--lb-space-4);
}

.lb-page-back-link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  padding: .35rem .85rem;
  margin-bottom: var(--lb-space-3);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-color-bg);
  color: var(--lb-color-text);
  font-weight: 600;
  font-size: var(--lb-font-size-sm);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.lb-page-back-link:hover{
  background: var(--lb-color-border);
  color: var(--lb-color-text);
}

/* Modifier: tint the back link with the entertainment section's warm tones */
.lb-page-back-link--entertainment{
  background: #fff7ed;
  color: #b91c1c;
}
.lb-page-back-link--entertainment:hover{
  background: #ffedd5;
  color: #991b1b;
}

/* Base card chrome for action-grid cards (homepage + /entertainment) */
.lb-home-action-grid .feature-card{
  border-radius: var(--lb-radius-lg);
  border: 1px solid rgba(15,23,42,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lb-home-action-grid .feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.08);
}


/* ==========================================================================
   8. Entertainment hub cards
   --------------------------------------------------------------------------
   `.lb-card--entertainment-featured` carries the same warm background +
   running red border treatment as the homepage "Giải Trí" entry
   (`.homepage-card--entertainment .feature-card` in homepage.html), so the
   "Game KQXS" card on /entertainment matches it without duplicating drift.
   ========================================================================== */
.lb-card--entertainment-featured{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff7ed, #fffbeb) padding-box,
    linear-gradient(90deg, #fecaca, #dc2626, #b91c1c, #fecaca) border-box;
  background-size: 100% 100%, 260% 100%;
  animation: lb-entertainment-border-flow 4s linear infinite;
  box-shadow: 0 6px 16px rgba(220,38,38,.12);
}
@keyframes lb-entertainment-border-flow{
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 260% 50%; }
}

/* Soft-blue "coming soon" cards (Mini Game #2/#3) — calm placeholder
   styling, deliberately without the running-border animation. */
.lb-card--soft-blue{
  background: linear-gradient(var(--lb-color-followup-bg), #ffffff);
  border: 1px solid var(--lb-color-followup-border);
}

.lb-card--coming-soon{
  opacity: .97;
}

@media (prefers-reduced-motion: reduce){
  .lb-card--entertainment-featured{ animation: none; background-position: 0 0, 50% 50%; }
}


/* ==========================================================================
   9. Top navbar + brand (Landbiz.net)
   --------------------------------------------------------------------------
   Replaces the previous `navbar-dark bg-dark` shell with a light, on-brand
   gradient. `.lb-brand-link--landbiz` renders the "Landbiz.net" wordmark as
   a teal-to-amber gradient, and `.lb-brand-glow` adds a subtle pulsing glow
   in the same spirit as the dashboard "BDS credit" chip's pulse animation,
   scoped to the brand text only.
   ========================================================================== */
.lb-top-navbar{
  background: linear-gradient(135deg, #ecfeff 0%, #fff7ed 55%, #fef9c3 100%);
  border-bottom: 1px solid var(--lb-color-border);
  box-shadow: var(--lb-shadow-sm);
}

.lb-brand-link{
  text-decoration: none;
}

.lb-brand-link--landbiz{
  background: linear-gradient(90deg, #0d9488, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes lb-brand-glow-pulse{
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(245, 158, 11, .55)); }
}

.lb-brand-glow{
  animation: lb-brand-glow-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .lb-brand-glow{ animation: none; filter: drop-shadow(0 0 3px rgba(245, 158, 11, .35)); }
}

/* ==========================================================================
   9.5 Mobile First Bottom Navigation (Landbiz.net)
   --------------------------------------------------------------------------
   Shared app-style bottom nav for approved public/user shells below 992px.
   Opt-in only via `body.lb-has-mobile-bottom-nav`, so auth/admin/minimal
   surfaces stay unaffected. Safe-area padding is built into the reserved
   space token and the bar intentionally sits below Bootstrap modal layers.
   ========================================================================== */
:root{
  --lb-mobile-bottom-nav-height: 64px;
  --lb-mobile-bottom-nav-icon-size: 1.25rem;
  --lb-mobile-bottom-nav-label-size: 0.72rem;
  --lb-mobile-bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
  --lb-mobile-bottom-nav-reserved-space:
    calc(var(--lb-mobile-bottom-nav-height) + var(--lb-mobile-bottom-nav-safe-area));
}

.lb-mobile-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: none;
  border-top: 1px solid rgba(15, 23, 42, .08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.98) 100%);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lb-mobile-bottom-nav__inner{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  min-height: var(--lb-mobile-bottom-nav-height);
  padding: 0.3rem max(0.4rem, env(safe-area-inset-left, 0px))
    calc(0.3rem + var(--lb-mobile-bottom-nav-safe-area))
    max(0.4rem, env(safe-area-inset-right, 0px));
}

.lb-mobile-bottom-nav__item{
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  border-radius: var(--lb-radius-lg);
  color: #64748b;
  text-decoration: none;
  text-align: center;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.lb-mobile-bottom-nav__item:hover,
.lb-mobile-bottom-nav__item:focus-visible{
  color: #0f172a;
  background: rgba(14, 165, 233, .08);
  text-decoration: none;
}

.lb-mobile-bottom-nav__item:focus-visible{
  outline: 2px solid #0ea5e9;
  outline-offset: -2px;
}

.lb-mobile-bottom-nav__item.is-active{
  color: #0f172a;
  background: linear-gradient(180deg, rgba(219, 234, 254, .88) 0%, rgba(236, 253, 245, .92) 100%);
}

.lb-mobile-bottom-nav__icon{
  font-size: var(--lb-mobile-bottom-nav-icon-size);
  line-height: 1;
}

.lb-mobile-bottom-nav__label{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--lb-mobile-bottom-nav-label-size);
  font-weight: 700;
  line-height: 1.15;
}

@media (max-width: 991.98px){
  .lb-mobile-bottom-nav{
    display: block;
  }

  body.lb-has-mobile-bottom-nav > .container{
    padding-bottom: calc(20px + var(--lb-mobile-bottom-nav-reserved-space));
  }

  body.lb-has-mobile-bottom-nav .lb-homepage{
    padding-bottom: calc(var(--lb-mobile-bottom-nav-reserved-space) + 1rem);
  }

  body.lb-has-mobile-bottom-nav .lb-dashboard-shell-root{
    padding-bottom: calc(1.5rem + var(--lb-mobile-bottom-nav-reserved-space));
  }

  body.lb-has-mobile-bottom-nav .lb-map-shell{
    padding-bottom: calc(0.75rem + var(--lb-mobile-bottom-nav-reserved-space));
  }

  body.lb-has-mobile-bottom-nav #map{
    height: calc(100vh - 150px - var(--lb-mobile-bottom-nav-reserved-space));
    min-height: 360px;
  }
}

@media (min-width: 992px){
  .lb-mobile-bottom-nav{
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .lb-mobile-bottom-nav__item{
    transition: none;
  }
}

/* ==========================================================================
   10. Auth / login page polish (Auth UI Polish Slice 2)
   --------------------------------------------------------------------------
   Shared by login.html and login_required.html so the anonymous auth prompt
   keeps one visual language. `.lb-login-brand` reuses the brand's green->gold
   gradient-text treatment for the "Landbiz.net" highlight in the welcome
   heading; `.google-mark` paints the inline "G" wordmark in Google's brand
   colors with pure CSS (no external image/CDN), keeping the button text
   readable for screen readers.
   ========================================================================== */
.lb-login-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #14532d;            /* deep green, high contrast on light surface */
}

.lb-login-brand{
  background: linear-gradient(90deg, #16a34a 0%, #0d9488 45%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Inline, image-free Google "G" wordmark. The colored letters are decorative
   (aria-hidden in markup); the button still exposes plain "Google" text. */
.google-mark{
  font-weight: 700;
  font-family: "Segoe UI", Arial, sans-serif;
  letter-spacing: .5px;
}
.google-mark .g-b{ color: #4285F4; }  /* blue   */
.google-mark .g-r{ color: #EA4335; }  /* red    */
.google-mark .g-y{ color: #FBBC05; }  /* yellow */
.google-mark .g-g{ color: #34A853; }  /* green  */

/* Colored "Google" word used inside the button label. */
.google-word .g-b{ color: #4285F4; }
.google-word .g-r{ color: #EA4335; }
.google-word .g-y{ color: #FBBC05; }
.google-word .g-g{ color: #34A853; }


/* ==========================================================================
   10. Dashboard no-overflow contract (Slice D1)
   --------------------------------------------------------------------------
   Scoped to `.lb-dashboard-*` / `.lb-profile-*` / `.credit-chip` on
   `/dashboard`. Every rule here exists to keep the profile card from
   creating horizontal overflow on narrow viewports: flex/grid children that
   hold text get `min-width: 0`, long text wraps via `overflow-wrap`, and
   `.credit-chip` stays in normal flow (no absolute/fixed/negative margin).
   `overflow-x: clip` on the shell is a last-resort safety net only - the
   root fix is the wrapping/min-width rules below, not this clip.
   ========================================================================== */
.lb-dashboard-shell-root{
  max-width: 100%;
  overflow-x: clip;
}

.lb-dashboard-profile-card{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-profile-card .card-body{
  max-width: 100%;
  min-width: 0;
}

.lb-profile-header{
  max-width: 100%;
  min-width: 0;
}

.lb-profile-header > img,
.lb-profile-header > .avatar{
  flex-shrink: 0;
}

.lb-profile-identity{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.lb-profile-identity h4,
.lb-profile-email,
.lb-profile-phone-row .text-mono{
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.lb-profile-badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  max-width: 100%;
}

.credit-chip{
  position: static;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

.credit-chip .num{
  overflow-wrap: anywhere;
}

.lb-profile-phone-row{
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.lb-profile-phone-row > div{
  min-width: 0;
  max-width: 100%;
}

.lb-profile-action-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 575.98px){
  .lb-profile-action-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .lb-profile-action-row > .btn{
    width: 100%;
  }
}

.lb-profile-stats{
  max-width: 100%;
}

.lb-profile-stats > [class*="col-"]{
  min-width: 0;
}


/* ==========================================================================
   11. Dashboard workspace collapsible groups (Slice D2, polish D3/D3b)
   --------------------------------------------------------------------------
   Wraps each `.lb-dashboard-section` in `/dashboard` with native
   `<details class="lb-dashboard-section lb-dashboard-workspace-group">`. All
   groups (Workspace chinh, Quan tri va review, Theo doi va duy tri) render
   collapsed by default (no `open` attribute) - the user taps `<summary>` to
   expand. The chevron is a `::before` pseudo-element placed inline before
   the title text via `display:flex; gap`, not absolute-positioned at the
   right edge, and rotates 90deg when the group is `[open]`.
   Containment rules here follow the same no-overflow contract as section 10:
   max-width: 100% / min-width: 0 / box-sizing: border-box on every group,
   summary, and panel.
   ========================================================================== */
.lb-dashboard-workspace{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-workspace-group{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lb-dashboard-workspace-summary{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--lb-space-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--lb-space-2);
  border-radius: var(--lb-radius-md);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease-in-out;
}

.lb-dashboard-workspace-summary:hover,
.lb-dashboard-workspace-summary:focus-visible{
  background-color: var(--lb-color-bg);
}

.lb-dashboard-workspace-summary::-webkit-details-marker{
  display: none;
}

.lb-dashboard-workspace-summary::marker{
  content: "";
}

.lb-dashboard-workspace-summary::before{
  content: "\25B8";
  font-size: 1em;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--lb-color-muted);
  transform-origin: center;
  transition: transform 0.15s ease-in-out;
}

.lb-dashboard-workspace-group[open] > .lb-dashboard-workspace-summary::before{
  transform: rotate(90deg);
}

.lb-dashboard-workspace-summary .lb-dashboard-section-header{
  max-width: 100%;
  min-width: 0;
}

.lb-dashboard-workspace-panel{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: var(--lb-space-3);
  animation: lb-dashboard-workspace-panel-in 0.15s ease-in-out;
}

@keyframes lb-dashboard-workspace-panel-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .lb-dashboard-workspace-summary,
  .lb-dashboard-workspace-summary::before{
    transition: none;
  }

  .lb-dashboard-workspace-panel{
    animation: none;
  }
}


/* ==========================================================================
   12. Admin dashboard stats shell (Slice ADMIN-OPS-1L)
   --------------------------------------------------------------------------
   Collapsible operational metrics for `/admin`. Native `<details>/<summary>`
   only, default closed, responsive grouped stat cards, and no fixed widths.
   All rules are opt-in under `.admin-stats-*` so they do not affect the
   broader site.
   ========================================================================== */
.admin-stats-section{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-lg);
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  box-shadow: var(--lb-shadow-sm);
  padding: var(--lb-space-3);
}

.admin-stats-summary{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--lb-space-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--lb-space-2);
  border-radius: var(--lb-radius-md);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease-in-out;
}

.admin-stats-summary:hover,
.admin-stats-summary:focus-visible{
  background-color: var(--lb-color-bg);
}

.admin-stats-summary::-webkit-details-marker{
  display: none;
}

.admin-stats-summary::marker{
  content: "";
}

.admin-stats-summary::before{
  content: "\25B8";
  font-size: 1em;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--lb-color-muted);
  transition: transform 0.15s ease-in-out;
}

.admin-stats-section[open] > .admin-stats-summary::before{
  transform: rotate(90deg);
}

.admin-stats-summary-copy{
  display: grid;
  gap: var(--lb-space-1);
  min-width: 0;
}

.admin-stats-summary-title{
  color: var(--lb-color-text);
  font-size: var(--lb-font-size-base);
  font-weight: 700;
}

.admin-stats-summary-desc{
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
}

.admin-stats-groups{
  display: grid;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-3);
}

.admin-stats-group{
  display: grid;
  gap: var(--lb-space-3);
  border: 1px solid var(--lb-color-border);
  border-radius: var(--lb-radius-md);
  background: #f8fafc;
  padding: var(--lb-space-3);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.admin-stats-group-label{
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-stats-grid{
  display: grid;
  gap: var(--lb-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  max-width: 100%;
  min-width: 0;
}

.admin-stat-card{
  display: grid;
  gap: var(--lb-space-1);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--lb-radius-md);
  background: #ffffff;
  padding: var(--lb-space-3);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.admin-stat-label{
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
  overflow-wrap: anywhere;
}

.admin-stat-value{
  color: var(--lb-color-text);
  font-size: var(--lb-font-size-xl);
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce){
  .admin-stats-summary,
  .admin-stats-summary::before{
    transition: none;
  }
}


/* ==========================================================================
   13. Admin users control center
   --------------------------------------------------------------------------
   Presentation-only styles for `/admin` user list dashboard. Fully scoped
   under `.lb-admin-users-*` so other admin pages keep their current look.
   ========================================================================== */
.lb-admin-users-page{
  padding-top: var(--lb-space-4);
  padding-bottom: var(--lb-space-6);
}

.lb-admin-users-hero,
.lb-admin-users-hub-card,
.lb-admin-users-filter-card,
.lb-admin-users-table-card{
  border: 1px solid var(--lb-color-border);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.lb-admin-users-hero{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lb-space-4);
  margin-bottom: var(--lb-space-4);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background:
    radial-gradient(circle at top right, rgba(246, 195, 67, 0.18), transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.lb-admin-users-hero-copy{
  max-width: 52rem;
}

.lb-admin-users-eyebrow,
.lb-admin-users-section-eyebrow{
  color: #0f766e;
  font-size: var(--lb-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lb-admin-users-title{
  margin: 0.4rem 0 0.5rem;
  color: var(--lb-color-text);
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.2rem);
  line-height: 1.1;
}

.lb-admin-users-subtitle{
  margin: 0;
  max-width: 48rem;
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-base);
  line-height: 1.6;
}

.lb-admin-users-back-link{
  flex: 0 0 auto;
  min-height: var(--lb-touch-min);
}

.lb-admin-users-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lb-space-3);
  margin-bottom: var(--lb-space-4);
}

.lb-admin-users-section-head-tight{
  margin-bottom: var(--lb-space-3);
}

.lb-admin-users-section-title{
  margin: 0.25rem 0 0;
  color: var(--lb-color-text);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
}

.lb-admin-users-section-note{
  margin: 0;
  max-width: 28rem;
  color: var(--lb-color-muted);
  font-size: var(--lb-font-size-sm);
  line-height: 1.55;
  text-align: right;
}

.lb-admin-users-hub-card,
.lb-admin-users-filter-card,
.lb-admin-users-table-card{
  padding: clamp(1rem, 1rem + 0.6vw, 1.4rem);
  margin-bottom: var(--lb-space-4);
}

.lb-admin-users-hub-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 0.9rem;
}

.lb-admin-users-hub-group{
  display: grid;
  gap: 0.55rem;
  border: 1px solid #dde7f2;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.95rem 1rem;
}

.lb-admin-users-hub-group-label{
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-admin-users-hub-links{
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.lb-admin-users-hub-link{
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.2rem 0.45rem;
  border-radius: 10px;
  color: #1d4ed8;
  font-size: var(--lb-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.lb-admin-users-hub-link:hover,
.lb-admin-users-hub-link:focus-visible{
  background: #eff6ff;
  color: #1e3a8a;
  transform: translateY(-1px);
}

.lb-admin-users-hub-link-primary{
  border: 1px solid #99f6e4;
  background: #ecfeff;
  color: #0f766e;
}

.lb-admin-users-hub-link-primary:hover,
.lb-admin-users-hub-link-primary:focus-visible{
  background: #ccfbf1;
  color: #115e59;
}

.lb-admin-users-hub-help{
  color: #64748b;
  font-size: var(--lb-font-size-xs);
  line-height: 1.5;
}

.lb-admin-users-filter-card{
  background: linear-gradient(180deg, #f9fcff 0%, #ffffff 100%);
}

.lb-admin-users-filter-grid{
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) repeat(4, minmax(130px, 1fr));
  gap: var(--lb-space-3);
  align-items: end;
}

.lb-admin-users-filter-field .form-label{
  margin-bottom: 0.45rem;
  color: #334155;
  font-size: var(--lb-font-size-sm);
  font-weight: 700;
}

.lb-admin-users-filter-field .form-control,
.lb-admin-users-filter-field .form-select{
  min-height: 48px;
  border-radius: 14px;
  border-color: #d5dfeb;
  box-shadow: none;
}

.lb-admin-users-filter-field .form-control:focus,
.lb-admin-users-filter-field .form-select:focus{
  border-color: rgba(13, 79, 199, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(13, 79, 199, 0.12);
}

.lb-admin-users-filter-actions{
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.lb-admin-users-filter-button{
  min-width: 140px;
  min-height: 48px;
  border-radius: 14px;
  font-weight: 700;
}

.lb-admin-users-table-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid #cfe1f5;
  border-radius: 999px;
  background: #f8fbff;
  color: #0f4c81;
  font-size: var(--lb-font-size-sm);
  font-weight: 700;
}

.lb-admin-users-table-shell{
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.lb-admin-users-table-responsive{
  margin: 0;
}

.lb-admin-users-table{
  margin-bottom: 0;
  min-width: 980px;
}

.lb-admin-users-table > :not(caption) > * > *{
  padding: 0.95rem 0.9rem;
  vertical-align: top;
  border-bottom: 1px solid #e9eef5;
}

.lb-admin-users-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fbff;
  color: #475569;
  font-size: var(--lb-font-size-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.lb-admin-users-table tbody tr:nth-child(even){
  background: rgba(248, 250, 252, 0.52);
}

.lb-admin-users-table tbody tr:hover{
  background: #f4f9ff;
}

.lb-admin-users-identity{
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.lb-admin-users-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e0f2fe 0%, #eff6ff 100%);
  color: #0f4c81;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(14, 116, 144, 0.08);
}

.lb-admin-users-identity-copy{
  display: grid;
  gap: 0.25rem;
}

.lb-admin-users-identity-name{
  color: #0f172a;
  font-weight: 700;
  line-height: 1.35;
}

.lb-admin-users-inline-link{
  color: #1d4ed8;
  font-size: var(--lb-font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.lb-admin-users-inline-link:hover,
.lb-admin-users-inline-link:focus-visible{
  color: #1e3a8a;
  text-decoration: underline;
}

.lb-admin-users-contact{
  display: grid;
  gap: 0.38rem;
}

.lb-admin-users-contact-row{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #64748b;
  font-size: var(--lb-font-size-sm);
  line-height: 1.45;
}

.lb-admin-users-contact-row i{
  color: #94a3b8;
  font-size: 0.95em;
}

.lb-admin-users-contact-row-primary{
  color: #0f172a;
  font-weight: 600;
}

.lb-admin-users-contact-row-username{
  width: fit-content;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border: 1px solid #dbe6f3;
  border-radius: 999px;
  background: #f8fbff;
  color: #0f4c81;
}

.lb-admin-users-contact-row-empty{
  color: #94a3b8;
}

.lb-admin-users-auth-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lb-admin-users-auth-badge,
.lb-admin-users-role-badge,
.lb-admin-users-verified-badge,
.lb-admin-users-status-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--lb-font-size-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.lb-admin-users-auth-badge-email{
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.lb-admin-users-auth-badge-google{
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.lb-admin-users-auth-badge-facebook{
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.lb-admin-users-auth-badge-phone{
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.lb-admin-users-auth-badge-neutral{
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

.lb-admin-users-role-badge-neutral{
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

.lb-admin-users-role-badge-super{
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

.lb-admin-users-role-badge-moderator{
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #7e22ce;
}

.lb-admin-users-plan-cell{
  display: grid;
  gap: 0.38rem;
}

.lb-admin-users-meta-note{
  color: #64748b;
  font-size: var(--lb-font-size-xs);
  line-height: 1.45;
}

.lb-admin-users-meta-note-danger{
  color: #b91c1c;
}

.lb-admin-users-verified-badge-yes{
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.lb-admin-users-verified-badge-no{
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.lb-admin-users-last-seen{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #64748b;
  font-size: var(--lb-font-size-sm);
}

.lb-admin-users-status-badge-active{
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

.lb-admin-users-status-badge-blocked{
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.lb-admin-users-action-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  min-height: 2rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid #d6e4f5;
  border-radius: 999px;
  background: #ffffff;
  color: #1d4ed8;
  font-size: var(--lb-font-size-sm);
  font-weight: 700;
  text-decoration: none;
}

.lb-admin-users-action-link:hover,
.lb-admin-users-action-link:focus-visible{
  background: #eff6ff;
  color: #1e3a8a;
}

.lb-admin-users-empty-state{
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) 1rem;
  text-align: center;
}

.lb-admin-users-empty-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #f1f5f9;
  color: #0f4c81;
  font-size: 1.35rem;
}

.lb-admin-users-empty-title{
  color: #0f172a;
  font-size: var(--lb-font-size-lg);
  font-weight: 700;
}

.lb-admin-users-empty-copy{
  max-width: 34rem;
  color: #64748b;
  font-size: var(--lb-font-size-sm);
  line-height: 1.6;
}

.lb-admin-users-pagination-wrap{
  display: flex;
  justify-content: center;
}

.lb-admin-users-pagination{
  gap: 0.35rem;
  flex-wrap: wrap;
}

.lb-admin-users-pagination .page-link{
  min-width: 2.4rem;
  min-height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border-color: #d6e4f5;
  color: #1d4ed8;
  box-shadow: none;
}

.lb-admin-users-pagination .page-item.active .page-link{
  background: #0d4fc7;
  border-color: #0d4fc7;
  color: #ffffff;
}

.lb-admin-users-page a:focus-visible,
.lb-admin-users-page button:focus-visible,
.lb-admin-users-page input:focus-visible,
.lb-admin-users-page select:focus-visible,
.lb-admin-users-page summary:focus-visible{
  outline: 2px solid rgba(13, 79, 199, 0.45);
  outline-offset: 2px;
}

@media (max-width: 991.98px){
  .lb-admin-users-filter-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-admin-users-filter-field-search{
    grid-column: 1 / -1;
  }

  .lb-admin-users-filter-actions{
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .lb-admin-users-filter-button{
    width: 100%;
  }
}

@media (max-width: 767.98px){
  .lb-admin-users-page{
    padding-top: var(--lb-space-3);
  }

  .lb-admin-users-hero,
  .lb-admin-users-section-head{
    flex-direction: column;
  }

  .lb-admin-users-section-note{
    max-width: none;
    text-align: left;
  }

  .lb-admin-users-filter-grid{
    grid-template-columns: 1fr;
  }

  .lb-admin-users-table{
    min-width: 820px;
  }
}

@media (prefers-reduced-motion: reduce){
  .lb-admin-users-hub-link,
  .lb-admin-users-action-link{
    transition: none;
  }
}