/* ============================================================================
 * Paper theme for BaseX — clean white surfaces, red accent
 *
 * Inspired by document / dashboard interfaces. White sidebar, white cards on
 * a near-white page, multi-layer soft shadows for "paper" depth, no gradients,
 * red as the dominant brand accent.
 *
 * USAGE
 * -----
 *   1. Drop this file into your public/ folder.
 *   2. Add `<link rel="stylesheet" href="path/to/paper.css">` to index.html.
 *   3. Toggle `document.body.classList.toggle('theme-paper')` to activate.
 *
 * Like aqua.css, the few `bxs-sidebar` rules are flagged SHOWCASE-SPECIFIC
 * — they target the Nexxus-Framework showcase's sidebar component. Strip or
 * rename them when adapting to your own app.
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
 *  Tier 1 — Token overrides
 * ───────────────────────────────────────────────────────────────────────── */

body.theme-paper {
  /* Brand — red primary, dark teal secondary */
  --bx-brand-primary: #e30613;
  --bx-brand-primary-contrast: #ffffff;
  --bx-brand-secondary: #285e62;
  --bx-brand-secondary-contrast: #ffffff;

  /* Status palette */
  --bx-brand-success: #34c759;
  --bx-brand-success-contrast: #ffffff;
  --bx-brand-warning: #ff9500;
  --bx-brand-warning-contrast: #ffffff;
  --bx-brand-error: #dc2626;
  --bx-brand-error-contrast: #ffffff;
  --bx-brand-info: #2563eb;
  --bx-brand-info-contrast: #ffffff;

  /* Surfaces — paper white on near-white page */
  --bx-background-page: #f5f5f7;
  --bx-background-content: #ffffff;
  --bx-background-control: #ffffff;

  /* Borders */
  --bx-border-color: rgba(0, 0, 0, 0.08);
  --bx-border-radius: 12px;

  /* Typography */
  --bx-font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bx-font-color-dark: #1a1a1a;
  --bx-font-color-muted: #6b7280;

  /* Buttons — moderately rounded, not pill */
  --bx-button-border-radius: 10px;

  /* Form inputs */
  --bx-form-control-padding: 6px;
  --bx-form-control-border-radius: 10px;

  /* Main menu — WHITE sidebar (overrides the default brand-primary fallback) */
  --bx-main-menu-background: #ffffff;
  --bx-main-menu-font-color: #1a1a1a;
  --bx-main-menu-backdrop: rgba(227, 6, 19, 0.08);
  --bx-main-menu-border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
 *  Tier 2 — CSS recipes
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Buttons — flat clean shadow, no glass ── */

body.theme-paper .bx-button:not(.bx-button-link):not(.ng-disabled) {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
}
body.theme-paper .bx-button:not(.bx-button-link):not(.ng-disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.05);
}
body.theme-paper .bx-button:not(.bx-button-link):not(.ng-disabled):active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Link buttons — red CTA accent */
body.theme-paper .bx-button.bx-button-link:not(.ng-disabled) {
  color: #e30613;
}
body.theme-paper .bx-button.bx-button-link:not(.ng-disabled):hover {
  color: #c5000a;
}

/* ── Inputs ── */

body.theme-paper bx-input {
  font-size: 15px;
  line-height: 20px;
}

/* ── Page tabs — flat clean pill container ── */

body.theme-paper bx-content-tabs[static] {
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
body.theme-paper bx-content-tabs[static] .bx-tabs-slider {
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.05);
}

/* ── Main menu — WHITE paper sidebar, red accent for active items ── */

/* Menu items span the full sidebar width (no side margin, no pill shape).
   The red left bar on active becomes the key visual anchor, sitting flush
   with the sidebar's left edge. */
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link {
  margin: 0;
  border-radius: 0;
  padding: 4px 0;
}

/* More room around the icon — push it inward so items feel less cramped */
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link > bx-icon {
  padding: 8px 4px 8px 20px;
  font-size: 20px;
  opacity: 1;
  color: #4a4a4a;
}

/* Hover / focus on white — soft grey overlay (the default rules assume a
   dark sidebar and use a white overlay which would be invisible here). */
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:hover:not(.active),
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:focus-within:not(.active) {
  background: rgba(0, 0, 0, 0.04);
}

/* Active item: full-width red tint + flush-left red bar + red text + red icon */
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active,
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search-result {
  background: rgba(227, 6, 19, 0.06);
  color: #e30613;
  font-weight: 600;
  box-shadow: inset 4px 0 0 0 #e30613;
}
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active > bx-icon {
  color: #e30613;
}

/* More vertical breathing room between section blocks */
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-label {
  padding: 28px 24px 8px;
}

/* Active notch (:before) — red on the real framework menu */
body.theme-paper bx-main-menu .menu-item.menu-link.active:before {
  background: #e30613;
}

/* Search input chrome — needs dark overlays on white surface */
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search {
  background: rgba(0, 0, 0, 0.04);
}
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search:focus-within {
  background: rgba(0, 0, 0, 0.07);
}
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search input {
  color: #1a1a1a;
}
body.theme-paper :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* SHOWCASE-SPECIFIC — bxs-sidebar brand area + scrollbar on white.
   Reference shows a faint grey separator below the brand area. */
body.theme-paper bxs-sidebar .sidebar-brand {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.theme-paper bxs-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* Section labels — softer separator over the white surface (framework menu) */
body.theme-paper bx-main-menu .menu-item.menu-label .menu-item-background:after {
  background: rgba(0, 0, 0, 0.1);
}

/* ── Status badges — tinted pills with mid-radius (less pillish than aqua) ── */

body.theme-paper bx-status-badge {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 2px 10px 2px 4px;
  gap: 4px;
  font-weight: 500;
}
body.theme-paper bx-status-badge > .badge-icon {
  background-color: transparent;
  color: inherit;
  padding: 2px 4px;
  font-size: 16px;
}
body.theme-paper bx-status-badge > .badge-suffix {
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-weight: 400;
}
body.theme-paper bx-status-badge.status-primary {
  background: color-mix(in srgb, var(--bx-brand-primary) 10%, white);
  border-color: color-mix(in srgb, var(--bx-brand-primary) 20%, transparent);
}
body.theme-paper bx-status-badge.status-secondary {
  background: color-mix(in srgb, var(--bx-brand-secondary) 10%, white);
  border-color: color-mix(in srgb, var(--bx-brand-secondary) 20%, transparent);
}
body.theme-paper bx-status-badge.status-success {
  background: color-mix(in srgb, var(--bx-brand-success) 10%, white);
  border-color: color-mix(in srgb, var(--bx-brand-success) 20%, transparent);
}
body.theme-paper bx-status-badge.status-warning {
  background: color-mix(in srgb, var(--bx-brand-warning) 10%, white);
  border-color: color-mix(in srgb, var(--bx-brand-warning) 20%, transparent);
}
body.theme-paper bx-status-badge.status-danger {
  background: color-mix(in srgb, var(--bx-brand-error) 10%, white);
  border-color: color-mix(in srgb, var(--bx-brand-error) 20%, transparent);
}
body.theme-paper bx-status-badge.status-info {
  background: color-mix(in srgb, var(--bx-brand-info) 10%, white);
  border-color: color-mix(in srgb, var(--bx-brand-info) 20%, transparent);
}
body.theme-paper bx-status-badge.status-light {
  background: #f5f5f7;
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--bx-font-color-muted);
}
body.theme-paper bx-status-badge.status-dark {
  background: rgba(26, 26, 26, 0.06);
  border-color: rgba(26, 26, 26, 0.15);
  color: #1a1a1a;
}