/* ===============================
   Cortex LMS – My Account (HARD FIX)
   Force 2-col layout + active colors
================================= */

:root{
  --acc-brand:#1954e1; --acc-ink:#0b1f3b; --acc-ring:#e7e9f0;
}

/* 1) FORCE LAYOUT: two columns via flex (override theme) */
body.woocommerce-account .entry-content > .woocommerce,
body.woocommerce-account .woocommerce{
  max-width:1200px; margin:0 auto !important;
  display:flex !important; flex-wrap:nowrap; align-items:flex-start;
  gap:32px;
}

/* left column (nav) fixed width */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  flex:0 0 280px !important; width:280px !important; min-width:240px;
  margin:0 !important; text-align:left !important;
}

/* right column (content) fluid */
body.woocommerce-account .woocommerce-MyAccount-content{
  flex:1 1 auto !important; min-width:0; margin:0 !important;
}

/* 2) NAV styling */
.woocommerce-MyAccount-navigation ul{
  display:flex; flex-direction:column; gap:10px; margin:0; padding:0; width:100%;
}
.woocommerce-MyAccount-navigation li{ list-style:none }

.woocommerce-MyAccount-navigation li a{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border:1px solid var(--acc-ring); border-radius:12px;
  background:#fff; color:#1f2937; font-weight:700; text-decoration:none;
  box-shadow:0 6px 14px rgba(2,6,23,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover{
  transform:translateY(-1px);
  border-color:color-mix(in oklab,var(--acc-brand) 28%, var(--acc-ring));
  box-shadow:0 12px 28px rgba(25,84,225,.18);
}

/* ✅ ACTIVE tab – force white text/icons */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a[aria-current="page"],
.woocommerce-MyAccount-navigation li a:focus-visible{
  background:var(--acc-brand) !important;
  border-color:var(--acc-brand) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(25,84,225,.28);
}
.woocommerce-MyAccount-navigation li.is-active a *,
.woocommerce-MyAccount-navigation li a[aria-current="page"] *{ color:#fff !important }

/* dashicons follow text color */
.woocommerce-MyAccount-navigation li a:before{ color:currentColor }

/* 3) CONTENT card */
.woocommerce-MyAccount-content{
  background:#fff; border:1px solid var(--acc-ring); border-radius:16px;
  padding:22px; box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.woocommerce-MyAccount-content h2{
  color:var(--acc-ink); font-weight:800; font-size:28px; margin:0 0 14px; position:relative;
}
.woocommerce-MyAccount-content h2::after{
  content:""; position:absolute; left:0; bottom:-8px; width:70px; height:4px; border-radius:999px;
  background:linear-gradient(90deg,var(--acc-brand),#3b82f6); opacity:.22;
}

/* 4) Woo tables (orders) – native classes */
.woocommerce-orders-table{ width:100%; border:1px solid var(--acc-ring); border-radius:12px; overflow:hidden; border-collapse:separate; border-spacing:0; margin-top:10px }
.woocommerce-orders-table thead th{ background:#f3f5f9; padding:12px 14px; font-weight:700; color:#0b1f3b }
.woocommerce-orders-table tbody td{ padding:12px 14px }
.woocommerce-orders-table tbody tr:nth-child(even){ background:#fbfcfe }
.woocommerce-orders-table .button{ background:var(--acc-brand); color:#fff; border:0; border-radius:10px; padding:8px 12px; font-weight:800 }
.woocommerce-orders-table .button:hover{ filter:brightness(.95) }

/* 5) Mobile: stack */
@media (max-width: 980px){
  body.woocommerce-account .entry-content > .woocommerce,
  body.woocommerce-account .woocommerce{ flex-direction:column !important; gap:16px }
  body.woocommerce-account .woocommerce-MyAccount-navigation{ width:100% !important; flex:0 0 auto !important }
}

/* 6) Safety resets (themes sometimes center things) */
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content{ text-align:left }

/* ===== Student Dashboard – polish ===== */
.cortex-student-dash{ --cx-brand:#1954e1; --cx-ink:#0b1f3b; --cx-ring:#e7e9f0 }

/* toolbar */
.cortex-student-dash .cxd-toolbar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px;
}
.cortex-student-dash .cx-section-title{ margin:0 }

/* search */
.cortex-student-dash .cxd-search{
  width:min(320px,60vw); background:#fff; border:1px solid var(--cx-ring); border-radius:10px;
  padding:10px 12px; font-weight:600;
  box-shadow:0 8px 18px rgba(2,6,23,.06);
}
.cortex-student-dash .cxd-search:focus{ outline:3px solid color-mix(in oklab,var(--cx-brand) 20%, #fff) }

/* grid safety: if your shortcode already builds a grid, this won’t fight it */
.cortex-student-dash .courses,        /* fallback selector */
.cortex-student-dash .cxlms-cards,    /* if plugin uses this */
.cortex-student-dash .cxlms-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
@media (max-width:920px){
  .cortex-student-dash .courses,
  .cortex-student-dash .cxlms-cards,
  .cortex-student-dash .cxlms-grid{ grid-template-columns:1fr }
}

/* course card */
.cortex-student-dash .course-card,
.cortex-student-dash [data-course-card]{
  background:#fff; border:1px solid var(--cx-ring); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 28px rgba(2,6,23,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cortex-student-dash .course-card:hover,
.cortex-student-dash [data-course-card]:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(25,84,225,.18);
  border-color:color-mix(in oklab, var(--cx-brand) 26%, var(--cx-ring));
}

/* image ratio safety if the markup has plain <img> */
.cortex-student-dash .course-card img,
.cortex-student-dash [data-course-card] img{
  width:100%; height:auto; display:block; aspect-ratio: 16/9; object-fit: cover;
}

/* title + meta */
.cortex-student-dash .course-card h3,
.cortex-student-dash [data-course-card] h3{
  font-size:18px; margin:10px 0 4px; color:var(--cx-ink); font-weight:900;
}
.cortex-student-dash .course-card .meta,
.cortex-student-dash [data-course-card] .meta{
  color:#64748b; font-weight:700; font-size:13px;
}

/* progressbar */
.cortex-student-dash .progressbar{ height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; margin:8px 0 12px }
.cortex-student-dash .progressbar > span{ display:block; height:100%; background:linear-gradient(90deg,#1954e1,#3b82f6) }

/* buttons row */
.cortex-student-dash .actions{ display:flex; gap:10px; flex-wrap:wrap }
.cortex-student-dash .actions .button{
  border-radius:10px; font-weight:800; padding:10px 14px; border:0; color:#fff;
  background:#1954e1; box-shadow:0 10px 22px rgba(25,84,225,.18);
  transition:transform .15s ease, filter .15s ease;
}
.cortex-student-dash .actions .button:hover{ transform:translateY(-1px); filter:brightness(.96) }
/* ghost/secondary (e.g., Zoom) */
.cortex-student-dash .actions .button.is-ghost{ background:#eef2ff; color:#0f172a; box-shadow:none }

/* status chips – if your markup has .chip or data attributes */
.cortex-student-dash .chip{
  display:inline-flex; align-items:center; gap:6px; padding:.35rem .6rem; border-radius:999px;
  font-weight:800; font-size:12px; background:#eef2ff; color:#0f172a; border:1px solid #e5e7eb;
}
.cortex-student-dash .chip.ok{ background:color-mix(in oklab, #22c55e 18%, #fff); border-color:color-mix(in oklab, #22c55e 28%, #fff); color:#0b5321 }

/* small fade-in for content */
.cortex-student-dash{ animation: cxdFade .45s ease both }
@keyframes cxdFade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }