/* BuildWebAI Core by Chetsarhit Phanitanongkrit */
    :root{
      --sidebar-width: 270px;
    }
  /* removed collapsed layout; using show/hide model */
    .sidebar .nav-link i { width: 1.5rem; text-align: center; }
    html, body { height: 100%; }
    body { overflow: hidden; }
    .app-wrapper { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: auto 1fr auto; height: 100%; }
    .app-header { grid-column: 1 / -1; }
  /* Sidebar is overlayed (fixed); do not place it in the grid */
  .app-sidebar { overflow-y: auto; border-right: 1px solid #e9ecef; }
  /* Content should span full width of the grid (one column) */
  .app-content { grid-row: 2 / span 1; grid-column: 1 / -1; overflow: auto; }
    .app-footer { grid-column: 1 / -1; border-top: 1px solid #e9ecef; }
    .sidebar-brand { font-weight: 700; letter-spacing: .3px; }
    .sidebar .nav-link{ color:#333; }
    .sidebar .nav-link.active{ background:#0d6efd; color:#fff; }
    .badge-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
    .cursor-pointer{ cursor:pointer; }
    @media (max-width: 992px){
      body { overflow: auto; }
      .app-wrapper { grid-template-columns: 1fr; }
      .app-sidebar { position: fixed; top: 0; bottom: 0; left: -100%; width: var(--sidebar-width); background: #fff; z-index: 1040; transition: left .2s ease; }
      .app-sidebar.open { left: 0; }
      .backdrop { display:none; position: fixed; inset:0; background: rgba(0,0,0,.35); z-index:1035; }
      .backdrop.show{ display:block; }
    }

    /* Ensure backdrop and sidebar behave on very small devices */
    @media (max-width: 576px){
      :root { --sidebar-width: 240px; }
      .app-sidebar { width: var(--sidebar-width); }
      /* header toggle is visible by default */
      .app-header .btn { display: inline-block; }
    }

    /* small polish: smooth transitions and pointer behavior */
    .app-sidebar, .backdrop { will-change: transform, opacity; }

  /* Show/hide sidebar instead of collapsed state */
  .app-wrapper { transition: grid-template-columns .2s ease; }
  /* Keep main content full width; sidebar will be an overlay */
  .app-wrapper { grid-template-columns: 1fr; }
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    z-index: 1040;
    transition: left .22s ease, opacity .18s ease, transform .18s ease;
    box-shadow: 0 6px 18px rgba(2,6,23,0.12);
    overflow-y: auto;
  }
  .app-sidebar.open { left: 0; }
  .app-sidebar.hidden { left: -100%; opacity: 0; pointer-events: none; }
  .app-sidebar .nav-link .text { display: inline; }
  /* Keep header above overlaying sidebar */
  .app-header { position: relative; z-index: 1050; }
  /* on desktop, keep hover-open behaviour removed (no collapsed logic) */

    /* THEME: Light (default) / Dark overrides */
    :root, :root[data-bs-theme="light"]{
      /* Modern Light Theme */
      --app-bg: #f8fafc;              /* slate-50 */
      --app-fg: #0f172a;              /* slate-900 */
      --app-muted: #64748b;           /* slate-500 */
      --card-bg: #ffffff;             /* white */
      --border: #e5e7eb;              /* gray-200 */
      --sidebar-bg: #f3f4f6;          /* gray-100 */
      --sidebar-link: #334155;        /* slate-700 */
      --sidebar-link-active-bg: #3b82f6; /* blue-500 */
      --sidebar-link-active-fg: #ffffff; /* white */
    }
    :root[data-bs-theme="dark"]{
      /* Modern Dark Theme */
      color: #fff;
      --app-bg: #0b1220;                 /* deep space */
      --app-fg: rgba(248,250,252,0.92);  /* near-white */
      --app-muted: #94a3b8;              /* slate-400 */
      --card-bg: #131b2f;                 /* slate-900 */
      --border: #273244;                  /* subtle border */
      --sidebar-bg: #0f172a;              /* slate-950 */
      --sidebar-link: #cbd5e1;            /* slate-300 */
      --sidebar-link-active-bg: #60a5fa;  /* blue-400 */
      --sidebar-link-active-fg: #0b1220;  /* dark text on bright chip */
    }
    body{ background: var(--app-bg); color: var(--app-fg); }
    /* link no underline */
    a.no-underline{ text-decoration: none; }
    .app-header, .app-footer{ background: var(--card-bg) !important; border-color: var(--border) !important; }
    .app-sidebar{ background: var(--sidebar-bg); border-color: var(--border) !important; }
    .sidebar .nav-link{ color: var(--sidebar-link); }
    .sidebar .nav-link.active{ background: var(--sidebar-link-active-bg); color: var(--sidebar-link-active-fg); }
    .card{ background: var(--card-bg); border-color: var(--border); }
    .form-control, .form-select{ background: var(--card-bg); color: var(--app-fg); border-color: var(--border); }
    .dropdown-menu{ background: var(--card-bg); color: var(--app-fg); border-color: var(--border); }
    .alert{ background: var(--card-bg); color: var(--app-fg); border-color: var(--border); }
    .text-muted{ color: var(--app-muted) !important; }
    .sidebar-theme { position: sticky; bottom: 0; padding-top: .5rem; background: var(--sidebar-bg); border-top: 1px solid var(--border); }

/* Ideas list: pastel alternating card rows and hover state */
:root{
  /* darkened ~15% from previous palette to increase contrast */
  --pastel-1: #e6ccff; /* darker lavender */
  --pastel-2: #cfeee6; /* darker mint */
  --pastel-3: #ffe6cc; /* darker warm cream */
  --pastel-hover: #e0ecff; /* slightly deeper hover blue */
}
.ideas-list { display: block; }
.ideas-list .idea-card { border-radius: 8px; overflow: visible; transition: margin .12s ease, box-shadow .12s ease, background-color .12s ease; border: 1px solid var(--border); position: relative; z-index: 0; }
.ideas-list .idea-card .card-body { padding: 12px 14px; }
.ideas-list .idea-card + .idea-card { margin-top: 10px; }
/* alternating backgrounds */
.ideas-list .idea-card:nth-child(3n+1) { background: var(--pastel-1); }
.ideas-list .idea-card:nth-child(3n+2) { background: var(--pastel-2); }
.ideas-list .idea-card:nth-child(3n)   { background: var(--pastel-3); }
.ideas-list .idea-card:hover { /* avoid transform to prevent creating a stacking context that clips dropdowns */ margin-top: -4px; box-shadow: 0 10px 30px rgba(20,30,60,0.08); background: var(--pastel-hover); }
.ideas-list .idea-card .card-footer { padding: 8px 12px; }
.idea-card a.no-underline { color: inherit; text-decoration: none; }
.idea-card a.no-underline strong { color: #0b1220; }

@media (prefers-reduced-motion: reduce){
  .ideas-list .idea-card { transition: none; }
}


/* Responsive grid view for ideas (three across on desktop, two on tablet, one on mobile) */
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.ideas-grid .idea-card { border-radius: 10px; overflow: visible; padding: 0; display: flex; flex-direction: column; min-height: 120px; border: 1px solid rgba(0,0,0,0.06); position: relative; z-index: 0; }
.ideas-grid .idea-card .card-body { padding: 12px; flex: 1 1 auto; }
.ideas-grid .idea-card .card-footer { padding: 8px 12px; }

@media (max-width: 992px) {
  .ideas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .ideas-grid { grid-template-columns: 1fr; }
}

/* Keep hover effect visible for grid cards */
.ideas-grid .idea-card:hover { /* avoid transform to prevent stacking context issues */ margin-top: -6px; box-shadow: 0 14px 40px rgba(20,30,60,0.08); background: var(--pastel-hover); }

/* Compact title style */
.ideas-grid .idea-card a.no-underline strong { display: block; font-size: 1rem; line-height: 1.1; }
.ideas-grid .idea-card .text-muted.small { font-size: 0.82rem; }

/* idea icon: small round emoji with pastel chip */
.idea-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 10px;
  flex: 0 0 44px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.idea-icon.icon-1 { background: rgba(251,232,255,0.7); }
.idea-icon.icon-2 { background: rgba(232,255,246,0.7); }
.idea-icon.icon-3 { background: rgba(255,245,230,0.7); }

/* compact header row inside card */
.idea-card .card-body .card-header-row { display: flex; align-items: center; gap: 8px; }
.idea-card .card-body .card-header-row .title { flex: 1 1 auto; }

/* Make dropdowns inside idea cards appear above other elements. When a dropdown is shown we also add .dropdown-open to the card so it stacks above siblings. */
.idea-card .dropdown-menu { position: absolute; z-index: 4000; }
.idea-card.dropdown-open { z-index: 4100; }