/* Clean, minimal support styles to match the white support page (centered hero, subtle bordered cards).
   These override app container widths and remove heavy boxed layouts while keeping the sidebar intact. */

/* Narrow the main content container for support pages and add generous vertical spacing */
.main-content {
  /* On help pages we want the main area content to sit to the left (next to the sidebar)
     instead of centered. This only applies when support.css is loaded. */
  align-items: flex-start !important;
}

.main-content > .container {
  max-width: 1100px;
  padding: 56px 24px;
  background: transparent !important; /* allow app background to show */
  margin: 0 !important; /* remove auto centering so it sits flush to the left of main-content */
  box-shadow: none !important; /* remove box-shadow so container blends with main background */
}
/* Support UI variables */
:root {
  --support-border: rgba(0,0,0,0.08); /* slightly darker light border for visibility */
  --support-radius: 14px; /* rounded corners for cards and containers */
}

/* Dark theme: use a dark-gray border to suit the dark background */
[data-theme="dark"] {
  --support-border: #2b2b2b;
}

/* Hero */
.support-hero {
  background: transparent;
  padding: 40px 0 20px;
  margin-top: 4px;
}
.support-hero h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.support-hero { text-align: center; }
.support-hero .container { margin: 0 auto !important; }
.support-hero .lead { color: var(--text-main); max-width: 760px; margin: 0 auto 18px; }

/* Search input: center the form and make input larger on desktop */
.support-hero form { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
.support-hero .form-control { height: 44px; border-radius: 6px; display: inline-block; min-width: 220px; max-width: 100%; }
.support-hero .btn { height: 44px; }

/* On larger screens, give the search input a minimum width to match support page styling */
@media (min-width: 992px) {
  .support-hero form { gap:16px; }
  .support-hero .form-control { min-width: 600px; width: 600px; }
}

/* Article cards: subtle border and rounded corners (no large panels) */
.card.h-100 {
  border: 1px solid var(--support-border) !important;
  border-radius: var(--support-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: none !important;
}
.card .card-body { padding: 18px; }
.card.h-100:hover { transform: none; box-shadow: none !important; }

/* Categories: inline links with subtle spacing */
.category-card { background: transparent; border: none; padding: 0; }
.category-card h5 { color: var(--chart-blue); margin-bottom: 6px; font-size: 1.05rem; }
.category-card p { color: var(--text-main); margin-bottom: 0; }

.main-section-heading { font-size: 1.6rem; font-weight: 700; margin-top: 8px; }

/* Breadcrumb minimal */
.breadcrumb { background: transparent; padding: 0; margin-bottom: 14px; }

/* Article page spacing */
.article-header .heading-level-1 { font-size: 2rem; margin-bottom: 6px; }
.article-header .lead { color: var(--text-main); }

/* Related list */
.article-list .list-item { padding: 10px 0; border-bottom: 1px dashed transparent; }

@media (max-width: 767px) {
  .main-content > .container { padding: 28px 16px; }
  .support-hero h1 { font-size: 1.8rem; }
}

/* Popular Articles grid when Bootstrap isn't present: enforce columns and spacing */
.popular-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .popular-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .popular-grid { grid-template-columns: repeat(4, 1fr); }
}

.popular-grid .col { display: block; }
.popular-grid .card { height: 100%; display: block; }
.popular-grid .card a, .popular-grid a { color: inherit; }

/* Categories: 3 columns on desktop */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.4rem;
}
@media (min-width: 768px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
}

.categories-grid .category-card { padding: 0; }
.categories-grid .category-card h5 { margin-bottom: 6px; }

/* Ensure anchor boxes don't inherit unwanted list markers */
.category-card, .card { list-style: none; }

/* Strong, high-specificity overrides to ensure support styles win over global app CSS */
/* These rules remove shadows and enforce a thin border on the main container and all cards
   when support.css is loaded for help pages. They use !important to take precedence. */
.main-layout .main-content .container,
.main-layout .main-content > .container,
.main-content .container,
.container.support-override {
  box-shadow: none !important;
  background: transparent !important;
  border: 1px solid var(--support-border) !important;
  margin: 0 !important;
  border-radius: calc(var(--support-radius) + 2px) !important;
}

/* Help-specific container override
   The main app `.container` sets `height: 100%` which conflicts with the
   support index layout (causes unwanted bottom spacing). Use `.container-help`
   alongside `.container` on help pages to remove full-height behavior. */
.container-help {
  height: auto !important;
  min-height: 0 !important;
  /* keep normal padding but ensure no forced bottom margin from height rules */
  margin-bottom: 0 !important;
}

/* Remove shadows from common card-like elements in main content */
.main-content .card,
.main-content .chart-card,
.main-content .prompt-card,
.main-content .kpi-card,
.main-content .metric-card,
.main-content .topic-card,
.main-content footer {
  box-shadow: none !important;
  background: transparent !important;
  border: 0px solid var(--support-border) !important;
}

/* Ensure the breadcrumb and small panels are flat */
.main-content .breadcrumb,
.main-content .alert,
.main-content .flash-container {
  box-shadow: none !important;
  background: transparent !important;
}

/* Article page typography and layout improvements */
.main-content article {
  width: 100%;
  padding: 22px 18px 28px 18px;
  box-sizing: border-box;
}
.article-header .heading-level-1 {
  font-size: 2.2rem;
  margin: 6px 0 10px 0;
  color: var(--text);
}
.article-header .lead { font-size: 1rem; color: var(--text-main); margin-bottom: 18px; }

/* Breadcrumbs */
.breadcrumb { font-size: 0.95rem; color: var(--text-main); margin-bottom: 18px; }
.breadcrumb a { color: var(--accent-2); }

/* Headings inside article */
.main-content article h2 { color: var(--accent-1); margin-top: 18px; margin-bottom: 8px; }
.main-content article h3 { margin-top: 14px; margin-bottom: 6px; }

/* Code blocks */
.main-content pre, .main-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
}
.main-content pre {
  background: rgba(0,0,0,0.04);
  padding: 12px 14px;
  border-radius: 8px;
  overflow: auto;
  color: var(--text-main);
}
[data-theme="dark"] .main-content pre {
  background: rgba(255,255,255,0.03);
}

/* Lists and related */
.main-content ul { padding-left: 1.25rem; margin-bottom: 12px; }
.main-content li { margin-bottom: 8px; }

/* Sidebar menu tweaks (only on help pages) */
.sidebar { padding-top: 18px; }
.sidebar .sidebar-header { padding: 18px; }
.sidebar .sidebar-logo { height: 36px; }
.sidebar .sidebar-title { font-weight:700; color: var(--accent-2); }
.sidebar .sidebar-nav { padding: 8px 6px 22px 6px; gap: 1px;}
.sidebar .sidebar-section { margin-bottom: 8px; }
.sidebar .sidebar-section-title { padding: 12px 14px; border-radius: 8px; font-weight:600; }
.sidebar .collapsible-content a { display:block; padding: 10px 14px; border-radius: 8px; color: var(--text-main); margin: 4px 6px; }
.sidebar .collapsible-content a:hover { background: rgba(0,0,0,0.03); color: var(--text); text-decoration:none; }
[data-theme="dark"] .sidebar .collapsible-content a:hover { background: rgba(255,255,255,0.02); }

/* Make links clearer in article */
.main-content a { color: var(--accent-2); }

/* Top-right help quick links */
.help-top-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 12px; }
.help-top-menu { list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.help-top-menu li { display:inline-block; }
.help-top-menu a {
  display:inline-block; padding:8px 12px; border-radius:999px; font-weight:600; color: var(--accent-2);
  border: 1px solid transparent; background: transparent; text-decoration:none;
}
.help-top-menu a:hover { background: rgba(0,0,0,0.03); color: var(--text); text-decoration:none; }
.help-top-menu li.active a { background: var(--accent-2); color: #fff; }

@media (max-width: 767px) {
  .help-top-row { flex-direction: column; align-items: flex-start; }
  .help-top-menu { width: 100%; justify-content: flex-start; overflow:auto; }
  .help-top-menu a { white-space:nowrap; }
}

/* Small breadcrumb under pills */
.help-breadcrumb-small { display:flex; align-items:center; gap:8px; }
.help-breadcrumb-small a, .help-breadcrumb-small span { color: var(--text-main); font-size: 0.9rem; }

/* Table styles for articles index */
.table-responsive .table { background: transparent; border: 1px solid var(--support-border); border-radius: 10px; }
.table-responsive .table tbody tr:hover { background: rgba(0,0,0,0.02); }
.table-responsive .table td, .table-responsive .table th { vertical-align: middle; }

/* Editor UI (admin) */
.editor-section { border: 1px solid rgba(0,0,0,0.06); padding: 18px; border-radius: 10px; background: transparent; margin-bottom: 18px; }
.editor-section h3 { margin-top: 0; color: var(--accent-2); }
.editor-hint { font-size: 0.9rem; color: var(--text-main); margin-bottom: 12px; }
.editor-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.editor-toolbar button { background:transparent; border:1px solid rgba(0,0,0,0.06); padding:6px 8px; border-radius:6px; cursor:pointer; color:var(--text); }
.editor-toolbar button.active { background:var(--accent-2); color:#fff; }
.editor-toggle { display:flex; gap:10px; margin-bottom:10px; }
.editor-toggle button { padding:6px 10px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.editor-toggle button.active { background:var(--accent-2); color:#fff; }
.editor-area { border:1px solid var(--support-border); min-height:240px; border-radius:8px; padding:12px; background:transparent; color:var(--text-main); overflow:auto; }
.editor-html { width:100%; min-height:240px; border-radius:8px; padding:10px; border:1px solid var(--support-border); background:transparent; color:var(--text-main); }
.editor-meta { display:flex; gap:16px; flex-wrap:wrap; }
.editor-meta .form-control { min-width: 260px; }

@media (min-width: 992px) {
  .editor-layout { display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start; }
}