/* ============================================================
   LG Dashboard — Premium UI (Scoped + Theme Override Safe)
   Replace the entire assets/lg-dashboard.css with this file.
   ============================================================ */

/* ---------- Design Tokens ---------- */
.lg-dashboard{
  --lg-bg: #f6f8fc;
  --lg-card-solid:#ffffff;
  --lg-ink:#0b1220;
  --lg-muted:#5b6b82;

  --lg-border: rgba(15,23,42,.10);
  --lg-border2: rgba(15,23,42,.07);

  --lg-primary:#2563eb;
  --lg-primary2:#1d4ed8;

  --lg-r: 18px;
  --lg-r2: 14px;

  --lg-shadow: 0 18px 60px rgba(2,6,23,.10);
  --lg-shadow-soft: 0 10px 30px rgba(2,6,23,.08);
  --lg-shadow-tiny: 0 6px 16px rgba(2,6,23,.08);

  --lg-ring: 0 0 0 4px rgba(37,99,235,.18);

  --lg-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --lg-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  font-family: var(--lg-font) !important;
  color: var(--lg-ink) !important;
  line-height: 1.35 !important;

  width: 100% !important;
  max-width: 100% !important;
}

/* Hard scoped reset */
.lg-dashboard, .lg-dashboard *{ box-sizing:border-box !important; }
.lg-dashboard :where(h1,h2,h3,h4,p){ margin:0 !important; }
.lg-dashboard :where(a){ text-decoration:none !important; color:inherit !important; }
.lg-dashboard img{ max-width:100% !important; height:auto !important; }

/* Prevent page-level horizontal scroll without breaking inside table-wrap */
html, body{ overflow-x:hidden; }




/* ---------- Header (Centered Premium) ---------- */
.lg-dashboard .lg-pagehead{
  display:flex !important;
  flex-direction: column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap: 10px !important;
  margin: 4px 0 16px !important;
}

.lg-dashboard .lg-title{
  font-size: clamp(28px, 3.2vw, 40px) !important;
  letter-spacing: -0.05em !important;
  font-weight: 980 !important;
}

.lg-dashboard .lg-kicker{
  margin-top: 2px !important;
  font-size: 13px !important;
  color: var(--lg-muted) !important;
  max-width: 92ch !important;
}

/* Add breathing room between major sections */
.lg-dashboard .lg-card-learners{ margin-top: 14px !important; }
.lg-dashboard #lg-reports{ margin-top: 18px !important; }
.lg-dashboard #lg-reass-ui{ margin-top: 16px !important; }

/* ---------- Cards ---------- */
.lg-dashboard .lg-card{
  border-radius: var(--lg-r) !important;
  border: 1px solid var(--lg-border) !important;
  background: var(--lg-card-solid) !important;
  box-shadow: var(--lg-shadow-soft) !important;
  padding: 16px !important;
}

.lg-dashboard .lg-card-learners{
  border-radius: var(--lg-r) !important;
  padding: 16px !important;
  box-shadow: var(--lg-shadow) !important;
}

/* ---------- Learners header bar ---------- */
.lg-dashboard .lg-headerbar{
  display:flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.lg-dashboard .lg-headerbar h3{
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.lg-dashboard .lg-meta{
  color: var(--lg-muted) !important;
  font-size: 13px !important;
}
.lg-dashboard .lg-meta strong{ color: var(--lg-ink) !important; font-weight: 900 !important; }

/* ============================================================
   FILTER BAR (Premium + Safe Wrap)
   ============================================================ */
.lg-dashboard .lg-filter{
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;

  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: end !important;

  padding: 12px !important;
  border-radius: var(--lg-r) !important;
  border: 1px solid rgba(15,23,42,.12) !important;

  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  box-shadow: 0 14px 40px rgba(2,6,23,.10) !important;
}

/* Each field wrapper: override inline min-widths safely */
.lg-dashboard .lg-filter > div{
  min-width: 0 !important;
  flex: 1 1 220px !important;
}

/* Make specific ones behave nicely */
.lg-dashboard .lg-filter > div:nth-child(1){ flex: 0 1 220px !important; } /* Status */
.lg-dashboard .lg-filter > div:nth-child(2){ flex: 1 1 420px !important; } /* Course */
.lg-dashboard .lg-filter > div:nth-child(3){ flex: 0 1 280px !important; } /* Group */
.lg-dashboard .lg-filter > div:nth-child(4){ flex: 1 1 320px !important; } /* Search */
.lg-dashboard .lg-filter > div:nth-child(5){ flex: 0 1 190px !important; } /* Date from */
.lg-dashboard .lg-filter > div:nth-child(6){ flex: 0 1 190px !important; } /* Date to */
.lg-dashboard .lg-filter > div:nth-child(7){ flex: 0 0 auto !important; }  /* Apply */
.lg-dashboard .lg-filter > div:nth-child(8){ flex: 0 0 auto !important; }  /* Go to reports */

/* Labels */
.lg-dashboard .lg-filter label{
  display:block !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.72) !important;
  margin: 0 0 7px !important;
  white-space: nowrap !important;
}

/* Inputs */
.lg-dashboard :where(input[type="text"], input[type="search"], input[type="date"], select, .lg-input){
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--lg-ink) !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.04) !important;
  font-size: 14px !important;
}

.lg-dashboard :where(input,select):focus{
  border-color: rgba(37,99,235,.65) !important;
  box-shadow: var(--lg-ring) !important;
}
.lg-dashboard input::placeholder{ color: rgba(15,23,42,.45) !important; }

/* Filter actions align perfectly */
.lg-dashboard .lg-filter button,
.lg-dashboard .lg-filter a.lg-btn{ height: 44px !important; }

/* Sticky filter elevated state (JS toggles this) */
.lg-dashboard .lg-filter.lg-is-stuck{
  box-shadow: 0 18px 56px rgba(2,6,23,.14) !important;
  border-color: rgba(37,99,235,.18) !important;
}

@media (max-width: 760px){
  .lg-dashboard .lg-filter{
    position: static !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
  }
}

/* ---------- Buttons ---------- */
.lg-dashboard .lg-btn{
  appearance:none !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  height: 44px !important;

  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;

  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  color: var(--lg-ink) !important;

  box-shadow: var(--lg-shadow-tiny) !important;
  transition: transform .10s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease !important;

  cursor: pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  user-select:none !important;
}

.lg-dashboard .lg-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 34px rgba(2,6,23,.12) !important;
}
.lg-dashboard .lg-btn:active{
  transform: translateY(0) !important;
  box-shadow: var(--lg-shadow-tiny) !important;
}
.lg-dashboard .lg-btn:disabled,
.lg-dashboard .lg-btn[disabled]{
  opacity: .65 !important;
  cursor: not-allowed !important;
  transform:none !important;
}

.lg-dashboard .lg-btn-primary{
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--lg-primary), var(--lg-primary2)) !important;
  box-shadow: 0 18px 44px rgba(37,99,235,.20) !important;
}
.lg-dashboard .lg-btn-primary:hover{ filter: brightness(1.05) !important; }

.lg-dashboard .lg-btn-ghost{
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.14) !important;
}
.lg-dashboard .lg-btn-ghost:hover{
  background: rgba(37,99,235,.06) !important;
  border-color: rgba(37,99,235,.22) !important;
}

.lg-dashboard .lg-btn-tests{
  border: 0 !important;
  background: linear-gradient(180deg, #0b1220, #111b33) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.22) !important;
}
.lg-dashboard .lg-btn-tests:hover{ filter: brightness(1.06) !important; }

.lg-dashboard .lg-btn-sm{
  height: 38px !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

/* Loading shimmer for buttons (JS adds .is-loading) */
.lg-dashboard .lg-btn.is-loading{
  position: relative !important;
  overflow: hidden !important;
}
.lg-dashboard .lg-btn.is-loading::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.25), transparent) !important;
  transform: translateX(-60%) !important;
  animation: lgShimmer 1.1s ease-in-out infinite !important;
}
@keyframes lgShimmer{ to{ transform: translateX(60%); } }

/* ---------- Table containers (no clipping) ---------- */
.lg-dashboard,
.lg-dashboard .lg-surface,
.lg-dashboard .lg-card{ overflow: visible !important; }

/* The scroll MUST happen here */
.lg-dashboard .lg-table-wrap{
  display:block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling: touch !important;

  border-radius: var(--lg-r2) !important;
  border: 1px solid var(--lg-border2) !important;
  background: #fff !important;
  box-shadow: none !important;

  margin-top: 10px !important;
}

/* Scrollbar polish */
.lg-dashboard .lg-table-wrap::-webkit-scrollbar{ height: 10px; }
.lg-dashboard .lg-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
}
.lg-dashboard .lg-table-wrap::-webkit-scrollbar-track{ background: rgba(15,23,42,.05); }

/* ============================================================
   TABLE (Theme-safe reset WITHOUT breaking expandable rows)
   ============================================================ */
.lg-dashboard table.lg-table{ display: table !important; width:100% !important; table-layout: fixed !important; min-width:0 !important; }
.lg-dashboard table.lg-table thead{ display: table-header-group !important; }
.lg-dashboard table.lg-table tbody{ display: table-row-group !important; }
.lg-dashboard table.lg-table thead tr{ display: table-row !important; }

/* Force normal body rows to be real table rows, but EXCLUDE expandable rows */
.lg-dashboard table.lg-table tbody tr:not(.lg-tests-row):not(.lg-details-row){
  display: table-row !important;
}

/* Details row controllable */
.lg-dashboard table.lg-table tbody tr.lg-details-row{ display: none !important; }
.lg-dashboard table.lg-table tbody tr.lg-details-row.lg-open{ display: table-row !important; }

/* Cells */
.lg-dashboard table.lg-table th,
.lg-dashboard table.lg-table td{ display: table-cell !important; }

/* Header */
.lg-dashboard .lg-table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;

  background: linear-gradient(180deg, #f8fbff, #eef4ff) !important;
  color: rgba(15,23,42,.80) !important;

  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;

  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Body cells */
.lg-dashboard .lg-table tbody td{
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  font-size: 14px !important;
  color: var(--lg-ink) !important;
  background: #fff !important;

  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.lg-dashboard .lg-table tbody tr:nth-child(even) td{ background: #fbfdff !important; }

.lg-dashboard .lg-table tbody tr:hover td{
  background:
    radial-gradient(900px 240px at 10% 50%, rgba(37,99,235,.06), transparent 60%),
    #f8fbff !important;
}

/* Column widths (YOUR CURRENT TABLE = 6 columns) */
.lg-dashboard .lg-table th:nth-child(1){ width: 120px !important; }  /* Enrolled */
.lg-dashboard .lg-table th:nth-child(2){ width: 150px !important; }  /* Name */
.lg-dashboard .lg-table th:nth-child(3){ width: 160px !important; }  /* Surname */
.lg-dashboard .lg-table th:nth-child(4){ width: auto !important; }   /* Course */
.lg-dashboard .lg-table th:nth-child(5){ width: 160px !important; }  /* Status */
.lg-dashboard .lg-table th:nth-child(6){ width: 110px !important; }  /* View */

/* Course wrap nicely */
.lg-dashboard .lg-table td:nth-child(4){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

/* Helpers */
.lg-dashboard .lg-cell-mono{ font-family: var(--lg-mono) !important; font-size: 13px !important; }
.lg-dashboard .lg-cell-strong{ font-weight: 900 !important; }

/* Status pills (your inline HTML uses style attr; normalize it) */
.lg-dashboard td span[style*="border-radius:999px"]{
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 10px 20px rgba(2,6,23,.08) !important;
  line-height: 1 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* View column right aligned */
.lg-dashboard .lg-table td:nth-child(6){ text-align:right !important; }
.lg-dashboard .lg-table td:nth-child(6) .lg-btn{
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
.lg-dashboard .lg-table td:nth-child(6) .lg-btn:hover{
  box-shadow: 0 10px 22px rgba(2,6,23,.10) !important;
}

/* ---------- Details row panel (Spacing + Premium) ---------- */
.lg-dashboard .lg-details-row td{
  background: linear-gradient(180deg, #f8fafc, #f6f9ff) !important;
  padding: 16px !important;
}

.lg-dashboard .lg-details{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 14px !important;
  box-shadow: var(--lg-shadow-tiny) !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 900px){
  .lg-dashboard .lg-details{ grid-template-columns: 1fr !important; }
}

.lg-dashboard .lg-details-item{
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background: #ffffff !important;
}

.lg-dashboard .lg-details-label{
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  color: rgba(15,23,42,.65) !important;
  margin-bottom: 6px !important;
}

.lg-dashboard .lg-details-value{ color: var(--lg-ink) !important; }
.lg-dashboard .lg-muted{ color: rgba(15,23,42,.42) !important; }
.lg-dashboard .lg-subtle{ color: var(--lg-muted) !important; }

/* ---------- Tests panel (Perfect alignment, single source of truth) ---------- */
.lg-dashboard .lg-tests-panel{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 12px !important;
  box-shadow: var(--lg-shadow-tiny) !important;
  color: var(--lg-muted) !important;
  min-height: 52px !important;

  overflow: hidden !important;
}

/* Module tables inside tests panel */
.lg-dashboard .lg-tests-panel table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

/* Columns */
.lg-dashboard .lg-tests-panel th:nth-child(2),
.lg-dashboard .lg-tests-panel td:nth-child(2){
  width: 120px !important;
  text-align:left !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.lg-dashboard .lg-tests-panel th:nth-child(3),
.lg-dashboard .lg-tests-panel td:nth-child(3){
  width: 160px !important;
  text-align:left !important;
  white-space: nowrap !important;
}

/* Header */
.lg-dashboard .lg-tests-panel th{
  vertical-align: middle !important;
  padding: 10px 10px !important;
  line-height: 1.15 !important;
  background: #f8fbff !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;

  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.70) !important;
}

/* Body */
.lg-dashboard .lg-tests-panel td{
  vertical-align: middle !important;
  padding: 10px 10px !important;
  line-height: 1.25 !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  color: var(--lg-ink) !important;
}

/* Quiz column wraps; prevents pushing other columns */
.lg-dashboard .lg-tests-panel td:nth-child(1){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Status pill vertical centering */
.lg-dashboard .lg-tests-panel td:nth-child(3) span{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* Space between module blocks (your markup uses <div> wrappers) */
.lg-dashboard .lg-tests-panel > div{
  margin-top: 12px !important;
}
.lg-dashboard .lg-tests-panel > div:first-child{
  margin-top: 0 !important;
}

/* ---------- Reports (Premium look) ---------- */
.lg-dashboard #lg-reports .lg-card{
  box-shadow: var(--lg-shadow-soft) !important;
  border-radius: calc(var(--lg-r) + 2px) !important;
}

/* Make the inline “tiles” wrap nicer on smaller widths */
.lg-dashboard #lg-reports .lg-card > div[style*="grid-template-columns"]{
  gap: 10px !important;
}

@media (max-width: 980px){
  /* When the report tile grid is too wide, give it a cleaner wrap */
  .lg-dashboard #lg-reports .lg-card > div[style*="grid-template-columns"]{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px){
  .lg-dashboard #lg-reports .lg-card > div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}

/* Progress breakdown table inside reports */
.lg-dashboard #lg-reports table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.lg-dashboard #lg-reports table td{
  padding: 10px 10px !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
.lg-dashboard #lg-reports table tr:last-child td{ border-bottom: 0 !important; }

/* ---------- Reassessment (Premium + aligned controls) ---------- */
.lg-dashboard #lg-reass-ui{
  box-shadow: var(--lg-shadow-soft) !important;
  border-radius: calc(var(--lg-r) + 2px) !important;
}

/* Multi-select */
.lg-dashboard #lg-reass-learners{
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.04) !important;
}
.lg-dashboard #lg-reass-learners:focus{
  box-shadow: var(--lg-ring) !important;
  outline: none !important;
}

/* Make reassessment action buttons match your premium buttons */
.lg-dashboard #lg-reass-ui button{
  border-radius: 14px !important;
}

/* Ensure bottom hint aligns nicely and doesn’t look “lost” */
.lg-dashboard #lg-reass-msg{
  margin-top: 10px !important;
  font-weight: 800 !important;
}

/* ---------- Spacing + overall rhythm ---------- */
.lg-dashboard{ padding-bottom: 30px !important; }

@media (max-width: 760px){
  .lg-dashboard .lg-surface.lg-surface-wide{ padding: 16px !important; }
  .lg-dashboard .lg-headerbar{ margin-bottom: 10px !important; }
}

/* ============================================================
   Premium polish: filter bar + learners table (2nd screenshot)
   ============================================================ */

/* Filter bar: crisper, less “puffy”, better separation */
.lg-dashboard .lg-filter{
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: #ffffff !important;                /* remove glassy look */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.08) !important;
  padding: 14px !important;
}

/* Inputs/selects: slightly cleaner + consistent */
.lg-dashboard :where(input[type="text"], input[type="search"], input[type="date"], select, .lg-input){
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.03) !important;
}

/* Learners card: stronger separation from filter */
.lg-dashboard .lg-card-learners{
  margin-top: 16px !important;
  box-shadow: 0 16px 46px rgba(2,6,23,.10) !important;
}

/* Table wrap: looks like a contained “data sheet” */
.lg-dashboard .lg-table-wrap{
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.06) !important;
}

/* Table header: slightly bolder + clearer */
.lg-dashboard .lg-table thead th{
  background: linear-gradient(180deg, #f9fbff, #eef4ff) !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
}

/* Rows: softer zebra + better hover */
.lg-dashboard .lg-table tbody tr:nth-child(even) td{
  background: #fcfdff !important;
}
.lg-dashboard .lg-table tbody tr:hover td{
  background: #f6f9ff !important;
}

/* Tighten column rhythm on smaller screens */
@media (max-width: 760px){
  .lg-dashboard .lg-card-learners{ padding: 14px !important; }
  .lg-dashboard .lg-table tbody td{ padding: 10px 10px !important; }
}

/* ============================================================
   Learners header: hide Group/Course meta + center title (premium)
   ============================================================ */

/* 1) Remove the right-side meta entirely */
.lg-dashboard .lg-headerbar .lg-meta{
  display: none !important;
}

/* 2) Center "Learners" and make it feel premium */
.lg-dashboard .lg-headerbar{
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}

/* Make the title look like a centered section header */
.lg-dashboard .lg-headerbar h3{
  font-size: 18px !important;
  font-weight: 980 !important;
  letter-spacing: -.02em !important;
  position: relative !important;
  padding-bottom: 10px !important;
}

/* Subtle centered accent line */
.lg-dashboard .lg-headerbar h3::after{
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 4px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.85), rgba(37,99,235,.25)) !important;
}
/* ============================================================
   Premium section headers: Reports + Reassessment
   - Centers the section titles
   - Converts right-side meta into a centered "badge row"
   ============================================================ */

/* ---------- MANAGEMENT REPORTS ---------- */

/* Make the reports card header feel like a centered section header */
.lg-dashboard #lg-reports .lg-card{
  position: relative !important;
}

/* If your reports title is an h3/h2, center it */
.lg-dashboard #lg-reports .lg-card :where(h2,h3):first-child{
  text-align: center !important;
  font-weight: 980 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 8px !important;
}

/* Catch common “top-right meta” patterns and restyle them as a centered badge */
.lg-dashboard #lg-reports .lg-card :where(div,span,p)[style*="float:right"],
.lg-dashboard #lg-reports .lg-card :where(div,span,p)[style*="text-align:right"]{
  float: none !important;
  text-align: center !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg, #ffffff, #f7faff) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  color: rgba(15,23,42,.75) !important;

  margin: 0 auto 12px !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* Give the KPI tiles a bit more breathing room under the badge */
.lg-dashboard #lg-reports .lg-card > div[style*="grid-template-columns"]{
  margin-top: 8px !important;
}

/* ---------- SEND LEARNERS FOR REASSESSMENT ---------- */

.lg-dashboard #lg-reass-ui{
  position: relative !important;
}

/* Center the reassessment title */
.lg-dashboard #lg-reass-ui .lg-card :where(h2,h3):first-child,
.lg-dashboard #lg-reass-ui :where(h2,h3):first-child{
  text-align: center !important;
  font-weight: 980 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 6px !important;
}

/* Center + restyle the explanatory line under the title */
.lg-dashboard #lg-reass-ui :where(p,div,span){
  /* only affect the intro-ish text blocks near the top; keep controls unchanged */
}
.lg-dashboard #lg-reass-ui :where(p,div,span)[style*="color"],
.lg-dashboard #lg-reass-ui :where(p,div,span)[style*="font-size"]{
  text-align: center !important;
  color: rgba(15,23,42,.70) !important;
}

/* Turn the “Select failed learners…” sentence into a centered subtle badge if it’s a <p> */
.lg-dashboard #lg-reass-ui p{
  max-width: 92ch !important;
  margin: 0 auto 12px !important;
}

/* Make the “Learners” label look like a small section tag */
.lg-dashboard #lg-reass-ui :where(label,h4,div)[class*="Learners"],
.lg-dashboard #lg-reass-ui :where(h4){
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: rgba(15,23,42,.65) !important;
}

/* Buttons row inside reassessment: align nicely and look premium */
.lg-dashboard #lg-reass-ui :where(button,.lg-btn){
  box-shadow: 0 10px 22px rgba(2,6,23,.08) !important;
}
.lg-dashboard #lg-reass-ui :where(button,.lg-btn):hover{
  box-shadow: 0 16px 32px rgba(2,6,23,.12) !important;
}

/* Mobile: keep badge rows readable */
@media (max-width: 520px){
  .lg-dashboard #lg-reports .lg-card :where(div,span,p)[style*="float:right"],
  .lg-dashboard #lg-reports .lg-card :where(div,span,p)[style*="text-align:right"]{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
}
/* ============================================================
   Reports + Reassessment: premium centered headers + badge meta
   Matches YOUR current PHP markup (div[style] + .lg-subtle)
   ============================================================ */

/* ---------- MANAGEMENT REPORTS ---------- */

/* The first child div inside the reports card is your header row */
.lg-dashboard #lg-reports .lg-card > div:first-child{
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

/* "Management Reports" (first div inside that header row) */
.lg-dashboard #lg-reports .lg-card > div:first-child > div:first-child{
  font-weight: 980 !important;
  letter-spacing: -0.02em !important;
  font-size: 18px !important;
  position: relative !important;
  padding-bottom: 10px !important;
}

/* Premium accent line under the title */
.lg-dashboard #lg-reports .lg-card > div:first-child > div:first-child::after{
  content: "" !important;
  display: block !important;
  width: 72px !important;
  height: 4px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.85), rgba(37,99,235,.25)) !important;
}

/* Completion/Pass rate line (this is your .lg-subtle div in the header row) */
.lg-dashboard #lg-reports .lg-card > div:first-child > .lg-subtle{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;

  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg, #ffffff, #f7faff) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  color: rgba(15,23,42,.72) !important;

  margin: 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* Make the strong values pop a bit more */
.lg-dashboard #lg-reports .lg-card > div:first-child > .lg-subtle strong{
  color: rgba(15,23,42,.92) !important;
  font-weight: 950 !important;
}

/* ---------- SEND LEARNERS FOR REASSESSMENT ---------- */

/* Reassessment card title (your first div inside #lg-reass-ui) */
.lg-dashboard #lg-reass-ui > div:first-child{
  text-align: center !important;
  font-weight: 980 !important;
  letter-spacing: -0.02em !important;
  font-size: 18px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
}

/* Accent line under reassessment title */
.lg-dashboard #lg-reass-ui > div:first-child::after{
  content: "" !important;
  display: block !important;
  width: 86px !important;
  height: 4px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.85), rgba(37,99,235,.25)) !important;
}

/* The explanatory line under the title (your .lg-subtle right after it) */
.lg-dashboard #lg-reass-ui > .lg-subtle{
  text-align: center !important;

  display: inline-block !important;
  margin: 0 auto 14px !important;

  max-width: 92ch !important;
  padding: 10px 12px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: #fbfdff !important;
  color: rgba(15,23,42,.70) !important;

  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;
}

/* Make sure the badge centers correctly (block formatting context) */
.lg-dashboard #lg-reass-ui{
  text-align: center !important;
}
.lg-dashboard #lg-reass-ui > :not(.lg-subtle){
  text-align: left !important; /* keep the form controls normal */
}

/* Buttons row spacing inside reassessment */
.lg-dashboard #lg-reass-ui #lg-reass-select-all,
.lg-dashboard #lg-reass-ui #lg-reass-clear,
.lg-dashboard #lg-reass-ui #lg-send-reass-btn{
  margin-top: 10px !important;
}

/* Mobile: keep the badge lines readable */
@media (max-width: 520px){
  .lg-dashboard #lg-reports .lg-card > div:first-child > .lg-subtle{
    width: 100% !important;
    justify-content: center !important;
  }

  .lg-dashboard #lg-reass-ui > .lg-subtle{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   FINAL OVERRIDES (uses your new PHP classes)
   Put this at the very bottom of lg-dashboard.css
   ============================================================ */

/* ========== MANAGEMENT REPORTS header ========== */
.lg-dashboard #lg-reports .lg-reports-head{
  /* override inline flex layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.lg-dashboard #lg-reports .lg-reports-title{
  font-size: 18px !important;
  font-weight: 980 !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
  padding-bottom: 10px !important;
}

/* premium accent line */
.lg-dashboard #lg-reports .lg-reports-title::after{
  content: "" !important;
  display: block !important;
  width: 72px !important;
  height: 4px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.85), rgba(37,99,235,.25)) !important;
}

.lg-dashboard #lg-reports .lg-reports-rates{
  /* becomes a centered badge under title */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;

  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg, #ffffff, #f7faff) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  color: rgba(15,23,42,.72) !important;

  width: fit-content !important;
  max-width: 100% !important;
}

.lg-dashboard #lg-reports .lg-reports-rates strong{
  color: rgba(15,23,42,.92) !important;
  font-weight: 950 !important;
}

/* ========== REASSESSMENT header ========== */
.lg-dashboard #lg-reass-ui .lg-reass-title{
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 980 !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
}

.lg-dashboard #lg-reass-ui .lg-reass-title::after{
  content: "" !important;
  display: block !important;
  width: 92px !important;
  height: 4px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.85), rgba(37,99,235,.25)) !important;
}

.lg-dashboard #lg-reass-ui .lg-reass-sub{
  text-align: center !important;
  display: block !important;
  max-width: 92ch !important;
  margin: 0 auto 14px !important;

  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: #fbfdff !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;
  color: rgba(15,23,42,.70) !important;
}
/* ============================================================
   Reassessment picker: premium checkbox list UI
   ============================================================ */

.lg-dashboard .lg-reass-picker{
  position: relative !important;
}

/* Hide the native multi-select (keep it in DOM for form + JS) */
.lg-dashboard .lg-reass-select-native{
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The new UI container */
.lg-dashboard .lg-reass-picker-ui{
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.06) !important;
  overflow: hidden !important;
}

/* Search bar */
.lg-dashboard .lg-reass-picker-ui .lg-reass-search{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
}

.lg-dashboard .lg-reass-picker-ui .lg-reass-search input{
  width: 100% !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  outline: none !important;
}
.lg-dashboard .lg-reass-picker-ui .lg-reass-search input:focus{
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* Scroll list */
.lg-dashboard .lg-reass-picker-ui .lg-reass-list{
  max-height: 220px !important;
  overflow: auto !important;
  padding: 8px !important;
}

/* Item row */
.lg-dashboard .lg-reass-picker-ui .lg-reass-item{
  display: grid !important;
  grid-template-columns: 20px 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;

  padding: 10px 10px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: #fff !important;
  cursor: pointer !important;

  transition: background .15s ease, border-color .15s ease, transform .12s ease !important;
}

.lg-dashboard .lg-reass-picker-ui .lg-reass-item:hover{
  border-color: rgba(37,99,235,.18) !important;
  background: rgba(37,99,235,.04) !important;
}

.lg-dashboard .lg-reass-picker-ui .lg-reass-item.is-checked{
  border-color: rgba(37,99,235,.35) !important;
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.03)) !important;
}

/* Checkbox look */
.lg-dashboard .lg-reass-picker-ui .lg-reass-box{
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(15,23,42,.25) !important;
  background: #fff !important;
  display: inline-block !important;
  position: relative !important;
}

.lg-dashboard .lg-reass-picker-ui .lg-reass-item.is-checked .lg-reass-box{
  border-color: rgba(37,99,235,.9) !important;
  background: rgba(37,99,235,.95) !important;
}
.lg-dashboard .lg-reass-picker-ui .lg-reass-item.is-checked .lg-reass-box::after{
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Main text */
.lg-dashboard .lg-reass-picker-ui .lg-reass-label{
  font-weight: 850 !important;
  color: rgba(15,23,42,.88) !important;
  line-height: 1.2 !important;
}

/* Small status tag */
.lg-dashboard .lg-reass-picker-ui .lg-reass-tag{
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.65) !important;
  background: #fff !important;
}

.lg-dashboard .lg-reass-picker-ui .lg-reass-tag.is-failed{
  background: #fff5f5 !important;
  border-color: rgba(180,35,24,.18) !important;
  color: #b42318 !important;
}
.lg-dashboard .lg-reass-picker-ui .lg-reass-tag.is-reass{
  background: #fffbeb !important;
  border-color: rgba(180,83,9,.18) !important;
  color: #b45309 !important;
}
/* Reports: chart + table layout (premium + uses the empty space nicely) */
.lg-dashboard .lg-report-grid{
  display: grid !important;
  grid-template-columns: 1.4fr .9fr !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.lg-dashboard .lg-report-chart{
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.05) !important;
  padding: 12px !important;
  min-height: 220px !important;
}

.lg-dashboard .lg-report-chart canvas{
  width: 100% !important;
  height: 100% !important;
}

.lg-dashboard .lg-report-table{
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 10px !important;
}

@media (max-width: 980px){
  .lg-dashboard .lg-report-grid{
    grid-template-columns: 1fr !important;
  }
  .lg-dashboard .lg-report-chart{
    min-height: 200px !important;
  }
}
/* ============================================================
   Reassessment: full-width layout + premium actions + hint
   ============================================================ */

/* Make the reassessment card span the full usable width */
.lg-dashboard #lg-reass-ui{
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure the learner picker area uses the full row */
.lg-dashboard #lg-reass-ui .lg-reass-picker{
  width: 100% !important;
}

/* Make the picker UI taller so it feels like a “proper panel” */
.lg-dashboard .lg-reass-picker-ui .lg-reass-list{
  max-height: 320px !important; /* was 220 */
}

/* Premium action bar: left controls + right primary action */
.lg-dashboard #lg-reass-ui .lg-reass-actions{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;

  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

/* Group left buttons nicely */
.lg-dashboard #lg-reass-ui .lg-reass-actions-left{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Make buttons feel more premium here (slightly tighter + consistent) */
.lg-dashboard #lg-reass-ui .lg-reass-actions .lg-btn{
  height: 42px !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.08) !important;
}

.lg-dashboard #lg-reass-ui .lg-reass-actions .lg-btn-ghost{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
}

.lg-dashboard #lg-reass-ui .lg-reass-actions .lg-btn-ghost:hover{
  border-color: rgba(37,99,235,.28) !important;
  background: rgba(37,99,235,.04) !important;
}

.lg-dashboard #lg-reass-ui .lg-reass-actions .lg-btn-primary{
  min-width: 170px !important;
}

/* The “Select 50 more…” hint: turn it into a proper status pill area */
.lg-dashboard #lg-reass-ui #lg-reass-msg.lg-reass-hint{
  margin-top: 12px !important;

  display: flex !important;
  align-items: center !important;
    justify-content: center !important;
  text-align: center !important;

 /* Premium paired actions row in filter */
.lg-dashboard .lg-field-actions{
  grid-column: span 10 !important;              /* sits next to "Show" (span 2) */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  align-items: end !important;
}

/* Unify CTA button sizes */
.lg-dashboard .lg-btn-cta{
  height: 48px !important;
  border-radius: 16px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
}

/* Premium outline button */
.lg-dashboard .lg-btn-outline{
  background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  box-shadow: 0 14px 28px rgba(2,6,23,.08) !important;
}

.lg-dashboard .lg-btn-outline:hover{
  border-color: rgba(37,99,235,.30) !important;
  background: rgba(37,99,235,.04) !important;
}

/* Make Apply look more “premium” */
.lg-dashboard .lg-btn-primary.lg-btn-cta{
  box-shadow: 0 20px 46px rgba(37,99,235,.24) !important;
}

/* Mobile: stack the two buttons */
@media (max-width: 760px){
  .lg-dashboard .lg-field-actions{
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
  }
}


  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;

  font-weight: 900 !important;
  color: rgba(15,23,42,.78) !important;
}

/* If your JS sets red/green via inline styles, keep it but improve the look */
.lg-dashboard #lg-reass-ui #lg-reass-msg.lg-reass-hint[style*="color: #b42318"],
.lg-dashboard #lg-reass-ui #lg-reass-msg.lg-reass-hint[style*="color:#b42318"]{
  border-color: rgba(180,35,24,.18) !important;
  background: linear-gradient(180deg,#fff7f7,#ffffff) !important;
}

.lg-dashboard #lg-reass-ui #lg-reass-msg.lg-reass-hint[style*="color: #1a7f37"],
.lg-dashboard #lg-reass-ui #lg-reass-msg.lg-reass-hint[style*="color:#1a7f37"]{
  border-color: rgba(2,122,72,.18) !important;
  background: linear-gradient(180deg,#f0fdf4,#ffffff) !important;
}
/* Premium details panel layout + tiles */
.lg-dashboard .lg-details{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

@media (max-width: 980px){
  .lg-dashboard .lg-details{
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .lg-dashboard .lg-details{
    grid-template-columns: 1fr !important;
  }
}

.lg-dashboard .lg-details-item{
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg,#ffffff,#fbfdff) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.06) !important;
}

.lg-dashboard .lg-details-label{
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(100,116,139,.95) !important;
  font-weight: 950 !important;
  margin-bottom: 6px !important;
}

.lg-dashboard .lg-details-value{
  color: #0f172a !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

.lg-dashboard .lg-details-value strong{
  font-weight: 950 !important;
}

/* Make long emails wrap nicely instead of stretching */
.lg-dashboard .lg-details-value{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Keep the Test results panel full width (your existing behavior) */
.lg-dashboard .lg-details-item[style*="grid-column: 1 / -1"]{
  grid-column: 1 / -1 !important;
}
/* ============================
   PREMIUM HEADER: TITLE LEFT + LOGO RIGHT
   Put at VERY BOTTOM of lg-dashboard.css
   ============================ */

.lg-dashboard .lg-pagehead{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;

  text-align: left !important;

  padding: 18px 16px 10px !important;
  margin: 6px 0 14px !important;
}

.lg-dashboard .lg-pagehead-left{
  min-width: 0 !important;
}

.lg-dashboard .lg-pagehead-right{
  justify-self: end !important;
  align-self: start !important; /* makes it feel “top-right” */
}

.lg-dashboard .lg-brandmark{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 44px rgba(2,6,23,.10) !important;

  max-width: 240px !important;
}

.lg-dashboard .lg-brandmark-img{
  display: block !important;
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Mobile: stack nicely */
@media (max-width: 720px){
  .lg-dashboard .lg-pagehead{
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }
  .lg-dashboard .lg-pagehead-right{
    justify-self: center !important;
    align-self: center !important;
  }
}

/* Mobile: stack nicely */
@media (max-width: 720px){
  .lg-dashboard #lg-reass-ui .lg-reass-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .lg-dashboard #lg-reass-ui .lg-reass-actions-left{
    width: 100% !important;
    justify-content: space-between !important;
  }

  .lg-dashboard #lg-reass-ui .lg-reass-actions-right{
    width: 100% !important;
  }

  .lg-dashboard #lg-reass-ui .lg-reass-actions .lg-btn-primary{
    width: 100% !important;
  }

  .lg-dashboard #lg-reass-ui #lg-reass-msg.lg-reass-hint{
    justify-content: center !important;
    text-align: center !important;
  }
}
/* ============================================================
   TOP SECTION: Premium page header + premium filter bar
   (drop-in overrides)
   ============================================================ */


.lg-dashboard .lg-title{
  font-size: clamp(30px, 3.3vw, 44px) !important;
  font-weight: 1000 !important;
  letter-spacing: -0.055em !important;
  line-height: 1.05 !important;
  color: #0b1220 !important;
  margin-bottom: 6px !important;
}

.lg-dashboard .lg-kicker{
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: rgba(15,23,42,.62) !important;
  max-width: 92ch !important;
  margin: 0 auto !important;
}

/* Subtle accent line under title */
.lg-dashboard .lg-pagehead .lg-title{
  position: relative !important;
  padding-bottom: 14px !important;
}
.lg-dashboard .lg-pagehead .lg-title::after{
  content:"" !important;
  display:block !important;
  width: 88px !important;
  height: 5px !important;
  margin: 12px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.15), rgba(37,99,235,.95), rgba(37,99,235,.15)) !important;
}

/* --- Filter bar: convert to a clean responsive grid --- */
.lg-dashboard .lg-filter{
  /* kill the “row of boxes” look */
  border-radius: 22px !important;
  padding: 16px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.10) !important;

  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;

  position: sticky !important;
  top: 12px !important;
}

/* Each direct child div becomes a grid item (override earlier flex rules) */
.lg-dashboard .lg-filter > div{
  min-width: 0 !important;
  flex: none !important;
}

/* Map your 8 fields to a premium grid */
.lg-dashboard .lg-filter > div:nth-child(1){ grid-column: span 2 !important; }  /* Status */
.lg-dashboard .lg-filter > div:nth-child(2){ grid-column: span 5 !important; }  /* Course */
.lg-dashboard .lg-filter > div:nth-child(3){ grid-column: span 2 !important; }  /* Group */
.lg-dashboard .lg-filter > div:nth-child(4){ grid-column: span 3 !important; }  /* Search */
.lg-dashboard .lg-filter > div:nth-child(5){ grid-column: span 2 !important; }  /* Date from */
.lg-dashboard .lg-filter > div:nth-child(6){ grid-column: span 2 !important; }  /* Date to */
.lg-dashboard .lg-filter > div:nth-child(7){ grid-column: span 1 !important; align-self: end !important; } /* Apply */
.lg-dashboard .lg-filter > div:nth-child(8){ grid-column: span 2 !important; align-self: end !important; } /* Go to reports */

/* Labels: sharper and more “UI” */
.lg-dashboard .lg-filter label{
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.68) !important;
  margin: 0 0 8px !important;
}

/* Inputs/selects: premium, consistent, better focus ring */
.lg-dashboard .lg-filter :where(select, input[type="text"], input[type="search"], input[type="date"], .lg-input){
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.03) !important;
  font-weight: 800 !important;
  color: rgba(15,23,42,.92) !important;
}

.lg-dashboard .lg-filter :where(select, input, .lg-input):focus{
  outline: none !important;
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* Search placeholder tone */
.lg-dashboard .lg-filter input::placeholder{
  color: rgba(15,23,42,.42) !important;
  font-weight: 700 !important;
}

/* Buttons in filter row: premium sizing + alignment */
.lg-dashboard .lg-filter .lg-btn{
  height: 46px !important;
  border-radius: 16px !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 32px rgba(2,6,23,.10) !important;
}

/* Make Apply feel like the “primary CTA” */
.lg-dashboard .lg-filter .lg-btn-primary{
  width: 100% !important;
  border: 0 !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 18px 44px rgba(37,99,235,.22) !important;
}

/* Make “Go to reports” look like a secondary pill */
.lg-dashboard .lg-filter a.lg-btn{
  width: 100% !important;
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
}

/* Sticky state polish */
.lg-dashboard .lg-filter.lg-is-stuck{
  box-shadow: 0 22px 70px rgba(2,6,23,.14) !important;
  border-color: rgba(37,99,235,.14) !important;
}

/* --- Responsive --- */
@media (max-width: 1100px){
  .lg-dashboard .lg-filter{
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .lg-dashboard .lg-filter > div:nth-child(1){ grid-column: span 2 !important; }
  .lg-dashboard .lg-filter > div:nth-child(2){ grid-column: span 4 !important; }
  .lg-dashboard .lg-filter > div:nth-child(3){ grid-column: span 2 !important; }
  .lg-dashboard .lg-filter > div:nth-child(4){ grid-column: span 4 !important; }
  .lg-dashboard .lg-filter > div:nth-child(5){ grid-column: span 3 !important; }
  .lg-dashboard .lg-filter > div:nth-child(6){ grid-column: span 3 !important; }
  .lg-dashboard .lg-filter > div:nth-child(7){ grid-column: span 3 !important; }
  .lg-dashboard .lg-filter > div:nth-child(8){ grid-column: span 3 !important; }
}

@media (max-width: 720px){
  .lg-dashboard .lg-filter{
    position: static !important;
    grid-template-columns: 1fr !important;
  }
  .lg-dashboard .lg-filter > div{ grid-column: 1 / -1 !important; }
}
/* ============================================================
   FILTER BAR: 3-row premium layout (exact order requested)
   Row 1: Status | Course | Group
   Row 2: Search | Date from | Date to
   Row 3: Apply | Go to reports
   ============================================================ */

.lg-dashboard .lg-filter{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;

  grid-template-areas:
    "status status course course course course course course group group group group"
    "search search search search search search from from from to to to"
    "apply apply apply apply apply apply reports reports reports reports reports reports" !important;

  border-radius: 22px !important;
  padding: 16px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.10) !important;

  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;
}

/* Stop older flex rules from interfering */
.lg-dashboard .lg-filter > div{
  min-width: 0 !important;
  flex: none !important;
}

/* Map your existing 8 children to grid areas */
.lg-dashboard .lg-filter > div:nth-child(1){ grid-area: status !important; } /* Status */
.lg-dashboard .lg-filter > div:nth-child(2){ grid-area: course !important; } /* Course */
.lg-dashboard .lg-filter > div:nth-child(3){ grid-area: group  !important; } /* Group */
.lg-dashboard .lg-filter > div:nth-child(4){ grid-area: search !important; } /* Search */
.lg-dashboard .lg-filter > div:nth-child(5){ grid-area: from   !important; } /* Date from */
.lg-dashboard .lg-filter > div:nth-child(6){ grid-area: to     !important; } /* Date to */
.lg-dashboard .lg-filter > div:nth-child(7){ grid-area: apply  !important; align-self:end !important; }   /* Apply */
.lg-dashboard .lg-filter > div:nth-child(8){ grid-area: reports!important; align-self:end !important; }   /* Go to reports */

/* Make bottom buttons full-width in their half-row */
.lg-dashboard .lg-filter > div:nth-child(7) .lg-btn,
.lg-dashboard .lg-filter > div:nth-child(8) .lg-btn{
  width: 100% !important;
  height: 46px !important;
  border-radius: 16px !important;
}

/* Inputs: consistent premium sizing */
.lg-dashboard .lg-filter :where(select, input[type="text"], input[type="search"], input[type="date"], .lg-input){
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.03) !important;
  font-weight: 800 !important;
}

/* Responsive: stack cleanly on smaller screens */
@media (max-width: 980px){
  .lg-dashboard .lg-filter{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "status"
      "course"
      "group"
      "search"
      "from"
      "to"
      "apply"
      "reports" !important;
    position: static !important;
  }
}
.lg-filter .lg-perpage label{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: #64748b;
}

.lg-filter .lg-perpage select{
  height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  max-width: 140px;
}
/* ============================
   PREMIUM TOP (Header + Filter)
   Put at VERY BOTTOM
   ============================ */

/* Page header: premium + tighter rhythm */
.lg-dashboard .lg-pagehead{
  padding: 18px 14px 10px !important;
  margin: 6px 0 14px !important;
  text-align: center !important;
}

.lg-dashboard .lg-title{
  font-size: clamp(30px, 3.2vw, 44px) !important;
  font-weight: 1000 !important;
  letter-spacing: -0.055em !important;
  line-height: 1.05 !important;
  margin: 0 0 6px !important;
  color: #0b1220 !important;
  position: relative !important;
  padding-bottom: 12px !important;
}

.lg-dashboard .lg-title::after{
  content:"" !important;
  display:block !important;
  width: 92px !important;
  height: 5px !important;
  margin: 12px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(37,99,235,.95), rgba(37,99,235,.12)) !important;
}

.lg-dashboard .lg-kicker{
  color: rgba(15,23,42,.62) !important;
  max-width: 92ch !important;
  margin: 0 auto !important;
}

/* Filter bar: stable grid + premium surface */
.lg-dashboard .lg-filter{
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;

  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;

  padding: 16px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  box-shadow: 0 18px 55px rgba(2,6,23,.10) !important;

  /* kill earlier flex settings */
  align-items: end !important;
}

/* Grid placement (desktop) */
.lg-dashboard .lg-field{ min-width: 0 !important; }

/* Row 1 */
.lg-dashboard .lg-field-status{ grid-column: span 2 !important; }
.lg-dashboard .lg-field-course{ grid-column: span 6 !important; }
.lg-dashboard .lg-field-group { grid-column: span 4 !important; }

/* Row 2 */
.lg-dashboard .lg-field-search{ grid-column: span 6 !important; }
.lg-dashboard .lg-field-from  { grid-column: span 3 !important; }
.lg-dashboard .lg-field-to    { grid-column: span 3 !important; }

/* Row 3 */
.lg-dashboard .lg-field-perpage{ grid-column: span 2 !important; }
.lg-dashboard .lg-field-apply  { grid-column: span 5 !important; }
.lg-dashboard .lg-field-reports{ grid-column: span 5 !important; }

/* Labels: crisp + consistent */
.lg-dashboard .lg-filter label{
  display:block !important;
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.68) !important;
  white-space: nowrap !important;
}

/* Inputs: premium */
.lg-dashboard .lg-filter :where(select,input[type="text"],input[type="search"],input[type="date"],.lg-input){
  height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.03) !important;
  font-weight: 800 !important;
  color: rgba(15,23,42,.92) !important;
}

.lg-dashboard .lg-filter :where(select,input,.lg-input):focus{
  outline: none !important;
  border-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

/* Buttons: fill their grid cells */
.lg-dashboard .lg-field-apply .lg-btn,
.lg-dashboard .lg-field-reports .lg-btn{
  width: 100% !important;
  height: 46px !important;
  border-radius: 16px !important;
}

/* Make Apply look like a real CTA */
.lg-dashboard .lg-field-apply .lg-btn-primary{
  box-shadow: 0 18px 44px rgba(37,99,235,.22) !important;
}

/* Sticky state */
.lg-dashboard .lg-filter.lg-is-stuck{
  box-shadow: 0 24px 75px rgba(2,6,23,.14) !important;
  border-color: rgba(37,99,235,.14) !important;
}

/* Responsive: stack cleanly */
@media (max-width: 1100px){
  .lg-dashboard .lg-filter{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
  .lg-dashboard .lg-field-status{ grid-column: span 2 !important; }
  .lg-dashboard .lg-field-course{ grid-column: span 4 !important; }
  .lg-dashboard .lg-field-group { grid-column: span 3 !important; }
  .lg-dashboard .lg-field-search{ grid-column: span 3 !important; }
  .lg-dashboard .lg-field-from  { grid-column: span 3 !important; }
  .lg-dashboard .lg-field-to    { grid-column: span 3 !important; }
  .lg-dashboard .lg-field-perpage{ grid-column: span 2 !important; }
  .lg-dashboard .lg-field-apply  { grid-column: span 2 !important; }
  .lg-dashboard .lg-field-reports{ grid-column: span 2 !important; }
}

@media (max-width: 760px){
  .lg-dashboard .lg-filter{
    position: static !important;
    grid-template-columns: 1fr !important;
  }
  .lg-dashboard .lg-field{ grid-column: 1 / -1 !important; }
}
/* ============================================================
   ASC LOGIN — Website-matched (Maroon header + Green band)
   Drop-in replacement for your login styles
   Targets: body.lg-login-blank + .lg-auth2 wrapper
   ============================================================ */

:root{
  --asc-maroon: #6b1f1f;
  --asc-maroon-2: #7d2a2a;
  --asc-maroon-ink: #4f1515;

  --asc-green: #79c143;
  --asc-green-2: #5aa92f;

  --asc-bg: #f5f7fb;
  --asc-card: #ffffff;
  --asc-ink: #0b1220;
  --asc-muted: rgba(15,23,42,.64);
  --asc-border: rgba(15,23,42,.12);

  --asc-shadow: 0 22px 65px rgba(2,6,23,.14);
  --asc-shadow-soft: 0 10px 30px rgba(2,6,23,.10);

  --asc-r: 18px;
  --asc-r2: 14px;

  --asc-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Blank login template base */
html, body{ height:100%; }
body.lg-login-blank{
  margin:0 !important;
  background: var(--asc-bg) !important;
  font-family: var(--asc-font) !important;
  color: var(--asc-ink) !important;
}
.lg-login-blank-wrap{ min-height:100vh; }

/* ============================================================
   Overall page layout: looks like your website
   ============================================================ */
.lg-auth2{
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* top bar | content | green band */
  background:
    radial-gradient(900px 520px at 10% 18%, rgba(121,193,67,.16), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(107,31,31,.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--asc-bg) 55%, #ffffff 100%);
}

/* ============================================================
   Top brand bar (maroon like your header)
   ============================================================ */
.lg-auth2::before{
  content:"";
  display:block;
  height: 8px;
  background: linear-gradient(90deg, var(--asc-maroon), var(--asc-maroon-2));
}

/* A clean white "header strip" under the maroon line */
.lg-auth2-topbar{
  background: #fff;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.lg-auth2-topbar-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}

.lg-auth2-topbar-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.lg-auth2-topbar-mark{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--asc-maroon), #8a2e2e 55%, var(--asc-green));
  box-shadow: 0 10px 22px rgba(107,31,31,.14);
  flex: 0 0 auto;
}

.lg-auth2-topbar-title{
  font-weight: 1000;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--asc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-auth2-topbar-sub{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* Optional right-side link area */
.lg-auth2-topbar-links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.lg-auth2-topbar-links a{
  font-weight: 900;
  color: var(--asc-maroon);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(107,31,31,.06);
  border: 1px solid rgba(107,31,31,.12);
}
.lg-auth2-topbar-links a:hover{
  background: rgba(107,31,31,.10);
  border-color: rgba(107,31,31,.18);
}

/* ============================================================
   Main content: two-column like your hero sections
   ============================================================ */
.lg-auth2-main{
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(22px, 4vw, 54px) 18px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 26px;
}

/* Left “hero” matches your site tone (less techy, more training hub) */
.lg-auth2-left{
  padding: 0;
}

.lg-auth2-badge{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(107,31,31,.06);
  border: 1px solid rgba(107,31,31,.14);
  color: rgba(107,31,31,.92);
  font-weight: 1000;
  letter-spacing: .01em;
}

.lg-auth2-hero{
  margin: 14px 0 8px;
  font-size: clamp(34px, 4.1vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 1100;
  color: #0b1220;
}

.lg-auth2-hero-sub{
  margin: 0;
  max-width: 64ch;
  color: rgba(15,23,42,.70);
  font-weight: 700;
  line-height: 1.55;
  font-size: 15px;
}

.lg-auth2-pills{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.lg-auth2-pills span{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(121,193,67,.12);
  border: 1px solid rgba(121,193,67,.22);
  font-weight: 950;
  color: rgba(15,23,42,.78);
}

/* ============================================================
   Login card: more “website” and less “app template”
   ============================================================ */
.lg-auth2-right{
  display:block;
}

.lg-auth2-card{
  width: 100%;
  background: var(--asc-card);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--asc-shadow);
}

/* Smaller brand row inside card (optional) */
.lg-auth2-brandrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}
.lg-auth2-mark{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--asc-maroon), #8a2e2e 55%, var(--asc-green));
  box-shadow: 0 10px 22px rgba(107,31,31,.14);
}
.lg-auth2-brand{
  font-weight: 1000;
  letter-spacing: -.02em;
  color: var(--asc-ink);
}
.lg-auth2-brandsub{
  font-weight: 850;
  color: rgba(15,23,42,.58);
  font-size: 12.5px;
  margin-top: 2px;
}

.lg-auth2-title{
  margin: 10px 0 6px;
  font-size: 26px;
  font-weight: 1100;
  letter-spacing: -0.03em;
}
.lg-auth2-subtitle{
  margin: 0 0 14px;
  color: rgba(15,23,42,.68);
  font-weight: 700;
  line-height: 1.45;
}

/* wp_login_form styling (strong selectors) */
.lg-auth2 #lg-loginform{ margin:0; }
.lg-auth2 #lg-loginform p{ margin: 12px 0; }

.lg-auth2 #lg-loginform label{
  display:block;
  margin-bottom: 7px;
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,.86);
}

/* inputs */
.lg-auth2 #lg-loginform input[type="text"],
.lg-auth2 #lg-loginform input[type="password"]{
  width:100%;
  box-sizing:border-box;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  color: var(--asc-ink);
  outline:none;
  font-weight: 750;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.lg-auth2 #lg-loginform input[type="text"]:focus,
.lg-auth2 #lg-loginform input[type="password"]:focus{
  border-color: rgba(107,31,31,.35);
  box-shadow: 0 0 0 6px rgba(107,31,31,.10);
  transform: translateY(-1px);
}

/* remember */
.lg-auth2 #lg-loginform .login-remember label{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 850;
  color: rgba(15,23,42,.70);
}
.lg-auth2 #lg-loginform input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--asc-green);
}

/* submit button: maroon, full width, premium */
.lg-auth2 #lg-loginform input[type="submit"]{
  width:100%;
  border: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--asc-maroon), var(--asc-maroon-2));
  color:#fff;
  font-weight: 1050;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(107,31,31,.20);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.lg-auth2 #lg-loginform input[type="submit"]:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 20px 52px rgba(107,31,31,.24);
}
.lg-auth2 #lg-loginform input[type="submit"]:active{
  transform: translateY(0);
}

/* links */
.lg-auth2-links{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  flex-wrap: wrap;
}
.lg-auth2-link{
  color: var(--asc-maroon);
  font-weight: 950;
  text-decoration:none;
}
.lg-auth2-link:hover{
  text-decoration: underline;
  color: var(--asc-maroon-2);
}

/* WP messages/errors */
.lg-auth2 #login_error,
.lg-auth2 .message{
  border: 1px solid rgba(220,38,38,.18);
  border-left: 5px solid #dc2626;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(220,38,38,.06);
  color: rgba(15,23,42,.86);
  font-weight: 850;
  margin: 10px 0 14px;
}

/* ============================================================
   Bottom green band like your site
   ============================================================ */
.lg-auth2-bottomband{
  height: 46px;
  background: linear-gradient(90deg, var(--asc-green), var(--asc-green-2));
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .lg-auth2-main{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 760px){
  .lg-auth2-topbar-links{ display:none; } /* keep it clean on mobile */
  .lg-auth2-hero{ font-size: 36px; }
}

/* Safety reset */
body.lg-login-blank *{ box-sizing:border-box; }
/* Force full-bleed login even if theme wrappers exist */
body.lg-login-blank #page,
body.lg-login-blank .site,
body.lg-login-blank .site-content,
body.lg-login-blank main,
body.lg-login-blank article,
body.lg-login-blank .entry-content,
body.lg-login-blank .wp-site-blocks{
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* If a theme centers content with a container, break out */
body.lg-login-blank .lg-auth2{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* ===== Login spacing fix: remove big gap under topbar ===== */
body.lg-login-blank .lg-auth2{
  /* keep your grid, but make content start at the top */
  align-content: start !important;
}

body.lg-login-blank .lg-auth2-main{
  /* stop vertical centering */
  align-items: start !important;

  /* tighten vertical spacing */
  padding-top: 18px !important;
  padding-bottom: 24px !important;
}

/* optional: slightly tighten the topbar itself */
body.lg-login-blank .lg-auth2-topbar-inner{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* ===== LOGIN: remove the giant vertical gap ===== */

/* Stop the middle row from expanding */
body.lg-login-blank .lg-auth2{
  grid-template-rows: auto auto auto !important; /* was auto 1fr auto */
  min-height: 0 !important;                      /* optional: don’t force tall layout */
}

/* Tighten the spacing under the header */
body.lg-login-blank .lg-auth2-main{
  padding: 18px 18px 26px !important;            /* replace clamp(...) */
  align-items: start !important;
}

/* If you want it even tighter */
@media (min-width: 981px){
  body.lg-login-blank .lg-auth2-main{
    padding-top: 12px !important;
  }
}

/* Certificate row (button left, enrollment right) */
.lg-cert-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.lg-cert-meta{
  text-align:right;
  line-height:1.1;
  padding:6px 10px;
  border:1px solid #eef2f7;
  border-radius:12px;
  background:#fff;
}

.lg-cert-meta-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
  font-weight:900;
}

.lg-cert-meta-value{
  font-weight:950;
  color:#0f172a;
  font-variant-numeric: tabular-nums;
}

/* ===== Disable sticky filter bar ===== */
.lg-dashboard .lg-filter{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}
/* ===== Disable sticky table header ===== */
.lg-dashboard .lg-table thead th{
  position: static !important;
  top: auto !important;
}


/* ===== 3-column header: Logout | Title | Logo ===== */
.lg-dashboard .lg-pagehead.lg-pagehead-3col{
  display: grid !important;
  grid-template-columns: 1fr minmax(320px, 2fr) 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: center !important;
  padding: 18px 16px 10px !important;
  margin: 6px 0 14px !important;
}

.lg-dashboard .lg-pagehead-3col .lg-pagehead-left{
  justify-self: start !important;
  text-align: left !important;
}

.lg-dashboard .lg-pagehead-3col .lg-pagehead-center{
  justify-self: center !important;
  text-align: center !important;
}

.lg-dashboard .lg-pagehead-3col .lg-pagehead-right{
  justify-self: end !important;
  text-align: right !important;
}

/* Make logout look like a “header control” */
.lg-dashboard .lg-logout-btn{
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.10) !important;
}
.lg-dashboard .lg-logout-btn:hover{
  background: rgba(37,99,235,.05) !important;
  border-color: rgba(37,99,235,.22) !important;
}

/* Mobile: stack nicely */
@media (max-width: 720px){
  .lg-dashboard .lg-pagehead.lg-pagehead-3col{
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }
  .lg-dashboard .lg-pagehead-3col .lg-pagehead-left,
  .lg-dashboard .lg-pagehead-3col .lg-pagehead-right{
    justify-self: center !important;
    text-align: center !important;
  }
}
/* ===== Login page: center card, remove 2-column layout ===== */
body.lg-login-blank {
  background: radial-gradient(900px 500px at 50% 0%, #f6f7fb 0%, #eef2f7 55%, #e9eef6 100%);
  min-height: 100vh;
}

.lg-login-blank-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* Make main a centered single column */
.lg-auth2-main {
  width: 100%;
  max-width: 520px;
  display: block !important;
}

/* Ensure no leftover spacing from old layout */
.lg-auth2-right {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Card polish */
.lg-auth2-card {
  width: 100%;
  border-radius: 18px;
  padding: 22px 22px 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 20px 60px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
}

/* Nicer error */
.lg-auth2-error {
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(254,242,242,.9);
  color: #991b1b;
}

/* Form spacing improvements (works even with inline styles removed later) */
#lg-loginform p { margin: 12px 0; }
#lg-loginform label { font-size: 13px; color: rgba(15,23,42,.75); }
#lg-loginform input[type="text"],
#lg-loginform input[type="password"]{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}
#lg-loginform input[type="text"]:focus,
#lg-loginform input[type="password"]:focus{
  border-color: rgba(16,185,129,.45);
  box-shadow: 0 0 0 4px rgba(16,185,129,.18);
}
#lg-loginform button[type="submit"]{
  height: 44px;
  border-radius: 12px;
}
/* =========================
   Modern login look & feel
   ========================= */

/* page background */
body.lg-login-blank{
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(16,185,129,.18) 0%, rgba(16,185,129,0) 55%),
    radial-gradient(900px 500px at 0% 100%, rgba(59,130,246,.14) 0%, rgba(59,130,246,0) 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.lg-login-blank-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 36px 16px;
}

/* center card */
.lg-auth2-main{ width: 100%; max-width: 520px; }
.lg-auth2-right{ width: 100%; display:flex; justify-content:center; }

/* card */
.lg-auth2-card{
  width: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 28px 80px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
}

/* brand header */
.lg-auth2-brandrow{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
.lg-auth2-brand{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.lg-auth2-brandsub{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  margin-top: 2px;
}

/* titles */
.lg-auth2-title{
  margin: 10px 0 4px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.lg-auth2-subtitle{
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.60);
}

/* error */
.lg-auth2-error{
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(254,242,242,.9);
  color: #991b1b;
  font-weight: 800;
}

/* form */
#lg-loginform{ margin-top: 6px; }
#lg-loginform p{ margin: 12px 0; }
#lg-loginform label{
  display:block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.70);
}

#lg-loginform input[type="text"],
#lg-loginform input[type="password"]{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.95);
  padding: 0 12px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

#lg-loginform input[type="text"]:focus,
#lg-loginform input[type="password"]:focus{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 5px rgba(16,185,129,.18);
}

#lg-loginform button[type="submit"]{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 14px 30px rgba(34,197,94,.25);
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}

#lg-loginform button[type="submit"]:hover{ filter: brightness(1.03); }
#lg-loginform button[type="submit"]:active{ transform: translateY(1px); }

.lg-auth2-links{
  margin-top: 14px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.lg-auth2-link{
  color: rgba(15,23,42,.70);
  font-weight: 800;
  text-decoration: none;
}
.lg-auth2-link:hover{ text-decoration: underline; }