/* ===== React Dashboard Isolation (scoped to #dashboard-root) ===== */

#dashboard-root{
  --rd-bg:#f6f7fb;
  --rd-fg:#0f172a;
  --rd-line:#e5e7eb;
  color:var(--rd-fg);
  background:transparent;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;

  /* used for “full-bleed” math below (scrollbar-compensated) */
  --sbw: calc(100vw - 100%);
}

/* Kill theme leaks */
#dashboard-root *{ box-sizing:border-box }
#dashboard-root img{ max-width:100%; height:auto; display:block }
#dashboard-root h1,#dashboard-root h2,#dashboard-root h3,#dashboard-root h4,#dashboard-root h5,#dashboard-root h6{ margin:0; font:inherit }
#dashboard-root p,#dashboard-root ul,#dashboard-root ol{ margin:0; padding:0 }
#dashboard-root a{ color:inherit; text-decoration:none }
#dashboard-root button,#dashboard-root input,#dashboard-root select{ font:inherit; color:inherit }
#dashboard-root .wp-block{ all:unset }

/* Reset the classes we rely on so they beat the host theme */
#dashboard-root .shell,
#dashboard-root .sidebar,
#dashboard-root .main,
#dashboard-root .topbar,
#dashboard-root .search,
#dashboard-root .user,
#dashboard-root .grid-hero,
#dashboard-root .hero-left,
#dashboard-root .hero-right,
#dashboard-root .stack-2col,
#dashboard-root .welcome-hero,
#dashboard-root .welcome-row,
#dashboard-root .card,
#dashboard-root .card-head,
#dashboard-root .card-title,
#dashboard-root .list,
#dashboard-root .center,
#dashboard-root .cal{ all:revert }

/* Cards */
#dashboard-root .card{
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
#dashboard-root .card-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--rd-line) }
#dashboard-root .card-body{ padding:14px 16px }
#dashboard-root .card-title{ font-weight:700; letter-spacing:.2px }

/* Layout inside the app */
#dashboard-root .shell{ display:grid; grid-template-columns:240px 1fr; min-height:100vh }
#dashboard-root .sidebar{ background:#0f172a; color:#dbeafe; padding:16px; display:flex; flex-direction:column }
#dashboard-root .sidebar a{ padding:10px 12px; border-radius:8px; color:#cbd5e1; display:block }
#dashboard-root .sidebar a.active,#dashboard-root .sidebar a:hover{ background:#1e293b; color:#fff }

#dashboard-root .topbar{ display:flex; gap:12px; align-items:center; padding:16px }
#dashboard-root .search{ flex:1; padding:10px 12px; border:1px solid var(--rd-line); border-radius:10px; background:#fff }
#dashboard-root .user{ display:flex; align-items:center; gap:8px; margin-left:auto }
#dashboard-root .user img{ width:28px; height:28px; border-radius:50% }

/* Grid */
#dashboard-root .grid-hero{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:0 16px 24px 16px;
  margin:0 auto;
}
#dashboard-root .hero-left,#dashboard-root .hero-right{ display:flex; flex-direction:column; gap:18px }
#dashboard-root .stack-2col{ display:grid; grid-template-columns:1fr 1.15fr; grid-auto-rows:minmax(160px,auto); gap:18px }

/* Welcome hero */
#dashboard-root .p0 .card-body{ padding:0 }
#dashboard-root .welcome-hero{ background:linear-gradient(120deg, rgba(0,122,255,.12), rgba(0,200,255,.12)); border:1px solid rgba(0,0,0,.06) }
#dashboard-root .welcome-row{ padding:20px 22px; min-height:140px }
#dashboard-root .welcome-title{ margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:.2px }
#dashboard-root .welcome-title .accent{ color:#0ea5e9 }
#dashboard-root .welcome-cta{ display:flex; gap:10px; margin:14px 0 }
#dashboard-root .btn{ appearance:none; border:1px solid transparent; border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer }
#dashboard-root .btn-primary{ background:#2563eb; color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.25) }
#dashboard-root .btn-primary:hover{ filter:brightness(1.05) }
#dashboard-root .btn-ghost{ background:transparent; border-color:rgba(0,0,0,.08); color:#111 }
#dashboard-root .btn-ghost:hover{ background:rgba(0,0,0,.03) }

/* Calendar quirks */
#dashboard-root .cal .cal-cell{ border:1px solid transparent }

/* Responsive + container queries parity */
@media (max-width:1100px){
  #dashboard-root .welcome-illustration{ display:none }
  #dashboard-root .stack-2col{ grid-template-columns:1fr }
}
#dashboard-root{ container-type:inline-size }
@container (min-width:980px){
  #dashboard-root .grid-hero{ grid-template-columns:1.6fr 1fr }
}

/* Minor polish */
#dashboard-root ul{ list-style:none }
#dashboard-root a{ text-decoration:none; color:inherit }

/* ===== Full-bleed mode (used by shortcode’s “rd-full”) ===== */
.rd-full#dashboard-root{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  left:auto !important;
  right:auto !important;
  position:relative;
  overflow:visible;
}

/* Make the dashboard header span the full viewport inside WordPress */
.rd-full#dashboard-root > .site-header{
  position: relative;
  /* viewport width minus scrollbar (same var we already use on the root) */
  width: calc(100vw - var(--sbw)) !important;
  max-width: none !important;
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw + var(--sbw)/2);
  margin-right: calc(-50vw + var(--sbw)/2);
}


/* === Mobile nav + no-horizontal-scroll (scoped) === */
#dashboard-root .hamburger{ 
  display:none; width:48px; height:42px; border:1px solid var(--rd-line);
  border-radius:8px; background:#fff; align-items:center; justify-content:center;
  gap:3px; padding:0 6px; cursor:pointer;
}
#dashboard-root .hamburger span{ display:block; width:18px; height:2px; background:#0f172a; }

/* overlay for off-canvas menu */
#dashboard-root .overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:9999;
}

/* small close button area inside sidebar */
#dashboard-root .sidebar-head{ display:none; align-items:center; justify-content:space-between; margin-bottom:8px; }
#dashboard-root .sidebar-close{ appearance:none; background:transparent; color:#cbd5e1; border:0; font-size:26px; line-height:1; padding:4px 8px; cursor:pointer; }

/* ====== Mobile / tablet breakpoint ====== */
@media (max-width: 1024px){
  /* collapse grid (sidebar becomes off-canvas) */
  #dashboard-root .shell{ grid-template-columns: 1fr !important; }

  #dashboard-root .sidebar{
    position:fixed; inset:0 auto 0 0; width:280px; z-index:10000;
    transform:translateX(-100%); transition:transform .25s ease;
    padding:14px; background:#0f172a;
  }
  #dashboard-root .sidebar.open{ transform:translateX(0); }
  #dashboard-root .sidebar-head{ display:flex; }
  #dashboard-root .brand{ margin:0; }

  /* sticky top bar and show hamburger */
  #dashboard-root .topbar{ position:sticky; top:0; z-index:500; background:var(--bg, #f6f7fb); }
  #dashboard-root .hamburger{ display:inline-flex; }

  /* turn on overlay when nav is open (class sits on .shell) */
  #dashboard-root .nav-open .overlay{ opacity:1; pointer-events:auto; }

  /* stack content to one column on small screens */
  #dashboard-root .grid-hero{ grid-template-columns:1fr !important; padding:0 12px 20px; gap:14px; }
  #dashboard-root .stack-2col{ grid-template-columns:1fr !important; }

  /* keep cards comfy on phones */
  #dashboard-root .card{ border-radius:12px; }
}