/* ============================================================================
 * Ocean theme for BaseX — modern teal & blue SaaS aesthetic
 *
 * Crisp near-white canvas, deep-navy sidebar, teal→blue gradient accents,
 * Inter typography, generous radii, layered soft shadows. The look of a
 * modern product dashboard.
 *
 * USAGE (any BaseX-consuming app)
 * --------------------------------
 *   1. Drop this file into your public/ folder.
 *   2. Add `<link rel="stylesheet" href="path/to/ocean.css">` to index.html.
 *   3. Toggle `document.body.classList.toggle('theme-ocean')` to activate.
 *
 * Everything here is unlayered consumer CSS — the framework lives in
 * @layer bx.*, so these rules win without a single !important.
 *
 * Rules tagged "SHOWCASE-SPECIFIC" target the Nexxus showcase's own
 * components (bxs-sidebar); strip them when adapting to your app.
 * ============================================================================
 */

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

/* ─────────────────────────────────────────────────────────────────────────
 *  Token overrides
 * ───────────────────────────────────────────────────────────────────────── */

body.theme-ocean {
  /* Brand — vivid teal primary, electric blue secondary */
  --bx-brand-primary: #0d9488;
  --bx-brand-primary-contrast: #ffffff;
  --bx-brand-secondary: #2563eb;
  --bx-brand-secondary-contrast: #ffffff;
  --bx-brand-success: #10b981;
  --bx-brand-success-contrast: #ffffff;
  --bx-brand-warning: #f59e0b;
  --bx-brand-warning-contrast: #ffffff;
  --bx-brand-error: #ef4444;
  --bx-brand-error-contrast: #ffffff;
  --bx-brand-info: #06b6d4;
  --bx-brand-info-contrast: #ffffff;

  /* Surfaces — cool near-white, high contrast content */
  --bx-background-page: #f2f6f9;
  --bx-background-content: #fafcfe;
  --bx-background-control: #ffffff;
  --bx-background-hover: rgba(13, 148, 136, 0.06);

  /* Borders — barely-there slate */
  --bx-border-color: rgba(15, 23, 42, 0.08);
  --bx-border-radius: 12px;

  /* Typography — Inter, slate ink */
  --bx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bx-font-color-dark: #0f172a;
  --bx-font-color-muted: #64748b;
  --bx-font-color-placeholder: #94a3b8;

  /* Layered soft shadows */
  --bx-box-shadow-color: rgba(15, 23, 42, 0.35);
  --bx-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.18);

  /* Buttons */
  --bx-button-border-radius: 12px;
  --bx-button-font-weight: 600;
  --bx-button-background: #ffffff;
  --bx-button-color: #0f172a;
  --bx-button-border-size: 1px;
  --bx-button-border-color: rgba(15, 23, 42, 0.1);
  --bx-button-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.08);

  /* Form controls */
  --bx-form-control-background: #ffffff;
  --bx-form-control-border-color: rgba(15, 23, 42, 0.12);
  --bx-form-control-border-radius: 12px;
  --bx-form-control-box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --bx-form-control-color: #0d9488;

  /* Chrome — deep navy sidebar, white header */
  --bx-main-header-background: rgba(255, 255, 255, 0.9);
  --bx-main-header-font-color: #0f172a;
  --bx-main-header-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
  --bx-main-menu-background: #0b1626;
  --bx-main-menu-backdrop: #fafcfe;
  --bx-main-menu-font-color: #b0bfd4;
  --bx-main-menu-border-radius: 12px;

  /* Overlays */
  --bx-popup-background: #ffffff;
  --bx-popup-border: 1px solid rgba(15, 23, 42, 0.08);
  --bx-popup-border-radius: 14px;
  --bx-popup-box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --bx-dialog-background: #ffffff;
  --bx-dialog-backdrop: rgba(11, 22, 38, 0.45);
  --bx-dialog-box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.35);
  --bx-dialog-header-background: #fafcfe;
  --bx-dialog-header-font-color: #0f172a;
  --bx-chip-background: rgba(13, 148, 136, 0.08);
  --bx-chip-color: #0f766e;

  /* Scrollbars */
  --bx-scrollbar-track-color: rgba(15, 23, 42, 0.04);
  --bx-scrollbar-thumb-color: rgba(15, 23, 42, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────
 *  CSS recipes
 * ───────────────────────────────────────────────────────────────────────── */

body.theme-ocean ::selection {
  background: rgba(13, 148, 136, 0.25);
}

/* ── Buttons — quiet by default, gradient CTA, gentle lift ── */

body.theme-ocean .bx-button:not(.bx-button-link) {
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, filter 140ms ease;
}
body.theme-ocean .bx-button:not(.bx-button-link):not(.ng-disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 24px -8px rgba(15, 23, 42, 0.16);
}
body.theme-ocean .bx-button:not(.bx-button-link):not(.ng-disabled):active {
  transform: translateY(0) scale(0.98);
}

/* Primary CTA: the signature teal→blue gradient */
body.theme-ocean .bx-button-variant-primary:not(.bx-button-link):not(.ng-disabled):not(.bx-button-default-inverted) {
  background: linear-gradient(120deg, #0d9488 0%, #2563eb 100%);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.25), 0 8px 20px -6px rgba(37, 99, 235, 0.35);
}
body.theme-ocean .bx-button-variant-primary:not(.bx-button-link):not(.ng-disabled):not(.bx-button-default-inverted):hover {
  background: linear-gradient(120deg, #0ca79a 0%, #3b82f6 100%);
  box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3), 0 14px 28px -8px rgba(37, 99, 235, 0.45);
}

/* Secondary: soft tinted button — the classic counterpart to a filled CTA.
   Distinguishes it from the primary gradient (whose end color it shares). */
body.theme-ocean .bx-button-variant-secondary:not(.bx-button-link):not(.ng-disabled):not(.bx-button-default-inverted):not(.ng-active) {
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: none;
}
body.theme-ocean .bx-button-variant-secondary:not(.bx-button-link):not(.ng-disabled):not(.bx-button-default-inverted):not(.ng-active):hover {
  background: rgba(37, 99, 235, 0.16);
  color: #1e40af;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.25);
}

body.theme-ocean .bx-button.bx-button-link:not(.ng-disabled) {
  color: #2563eb;
  font-weight: 600;
}

body.theme-ocean :focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15);
}

/* ── Inputs — calm wells, teal focus ring ── */

body.theme-ocean bx-input {
  font-size: 15px;
}
body.theme-ocean bx-input .input-element-box:focus-within {
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12);
}

/* ── Cards — floating panels ── */

body.theme-ocean .bx-card-element,
body.theme-ocean bx-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -16px rgba(15, 23, 42, 0.14);
}

/* ── Page tabs — segmented control, white raised slider ── */

body.theme-ocean bx-content-tabs[static] {
  background: rgba(15, 23, 42, 0.045);
  border: none;
  border-radius: 14px;
}
body.theme-ocean bx-content-tabs[static] .bx-tabs-slider {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -4px rgba(15, 23, 42, 0.12);
}

/* ── Main menu — deep navy, gradient active pill ── */

body.theme-ocean bx-main-menu .main-menu-content,
body.theme-ocean bxs-sidebar /* SHOWCASE-SPECIFIC */ {
  background: linear-gradient(180deg, #0b1626 0%, #0e1e33 100%);
}
body.theme-ocean :is(bx-main-menu, bxs-sidebar) .menu-item-background {
  background: transparent;
}
body.theme-ocean :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active,
body.theme-ocean :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search-result {
  background: linear-gradient(120deg, rgba(13, 148, 136, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 14px -4px rgba(13, 148, 136, 0.5);
}
body.theme-ocean :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active > bx-icon {
  color: #ffffff;
}
body.theme-ocean bx-main-menu .menu-item.menu-link.active:before {
  background: #14b8a6;
}
body.theme-ocean :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:hover:not(.active),
body.theme-ocean :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:focus-within:not(.active) {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Status badges — soft tinted pills ── */

body.theme-ocean bx-status-badge {
  border-radius: 9999px;
  box-shadow: none;
  border: none;
  font-weight: 600;
}
body.theme-ocean bx-status-badge > .badge-icon {
  background-color: transparent;
  color: inherit;
}
body.theme-ocean bx-status-badge.status-primary   { background: rgba(13, 148, 136, 0.1);  color: #0f766e; }
body.theme-ocean bx-status-badge.status-secondary { background: rgba(37, 99, 235, 0.1);   color: #1d4ed8; }
body.theme-ocean bx-status-badge.status-success   { background: rgba(16, 185, 129, 0.1);  color: #047857; }
body.theme-ocean bx-status-badge.status-warning   { background: rgba(245, 158, 11, 0.12); color: #b45309; }
body.theme-ocean bx-status-badge.status-danger    { background: rgba(239, 68, 68, 0.1);   color: #b91c1c; }
body.theme-ocean bx-status-badge.status-info      { background: rgba(6, 182, 212, 0.1);   color: #0e7490; }
body.theme-ocean bx-status-badge.status-light     { background: rgba(15, 23, 42, 0.05);   color: #64748b; }
body.theme-ocean bx-status-badge.status-dark      { background: #0f172a;                   color: #ffffff; }

/* ── Toasts ── */

body.theme-ocean .bx-toastr {
  border-radius: 14px;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.3);
}