/**
 * ri-layout.css — Page Layout Shell
 * ===================================
 * Implementation Guide Reference: § 4 (Page Layout Shell)
 *
 * Creates the fixed three-column shell:
 *   [icon sidebar 64px] [label sidebar 220px] [main content flex-1]
 * with a fixed top bar across the full width.
 *
 * AI Agent note: All widths come from tokens in ri-tokens.css.
 * Do NOT hardcode pixel values here; use the --sidebar-* variables.
 */

/* ── Cassiopeia neutraliser (§ 12.3) ─────────────────────
   Hides Joomla 6 Cassiopeia defaults that conflict with
   the custom dark layout. */
.ri-dark-theme .container-fluid,
.ri-dark-theme .container {
  max-width: 100% !important;
  padding: 0 !important;
}
.ri-dark-theme .navbar.navbar-expand-md { display: none !important; }

/* ── Layout wrapper ───────────────────────────────────────
   Sits below the fixed top bar; pushes content down by topbar height. */
.ri-layout {
  display: flex;
  margin-top: var(--topbar-height);
  min-height: calc(100vh - var(--topbar-height));
}

/* ── Main content area ────────────────────────────────────
   Takes all remaining width after the two sidebars. */
.ri-main {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--color-bg-base);

  /*
   * Bootstrap 5 scopes its colour system through --bs-* variables.
   * Setting them here means every Bootstrap component rendered inside
   * .ri-main automatically inherits the dark-theme palette without
   * needing !important on every individual rule.
   */
  --bs-body-color:          #212529;
  --bs-body-color-rgb:      232, 234, 240;
  --bs-body-bg:             #ffffff;
  --bs-body-bg-rgb:         13, 15, 18;
  --bs-emphasis-color:      #212529;
  --bs-heading-color:       #212529;
  --bs-secondary-color:     #6c757d;
  --bs-tertiary-color:      #adb5bd;
  --bs-table-color:         #212529;
  --bs-table-striped-color: #212529;
  --bs-table-border-color:  #dee2e6;
  --bs-border-color:        #dee2e6;
  --bs-link-color:          #0d6efd;
  --bs-link-hover-color:    #0b5ed7;

  color: #212529;
}

/* ── Explicit element colours (belt-and-braces) ───────────
   Covers any component that writes direct hex/rgb values
   rather than using CSS vars. */
.ri-main h1, .ri-main h2, .ri-main h3,
.ri-main h4, .ri-main h5, .ri-main h6 { color: #212529; }

.ri-main p, .ri-main li, .ri-main dt, .ri-main dd { color: #212529; }

.ri-main label, .ri-main legend,
.ri-main .form-label, .ri-main .col-form-label { color: #212529; }

.ri-main td, .ri-main th { color: #212529; }

.ri-main .form-text, .ri-main small { color: #6c757d; }

/* Bootstrap text-utility overrides */
.ri-main .text-dark, .ri-main .text-body,
.ri-main .text-black                  { color: #212529 !important; }
.ri-main .text-muted, .ri-main .text-secondary { color: #6c757d !important; }

/* Bootstrap card & list-group */
.ri-main .card                        { background: #f8f9fa; border-color: #dee2e6; color: #212529; }
.ri-main .card-header, .ri-main .card-footer { background: #ffffff; border-color: #dee2e6; }
.ri-main .list-group-item             { background: #f8f9fa; border-color: #dee2e6; color: #212529; }

/* Bootstrap badge defaults */
.ri-main .badge.bg-secondary          { background-color: #dee2e6 !important; color: #212529; }

/* ── Page header ──────────────────────────────────────────
   Title bar shown at the top of every component view. */
.ri-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.ri-page-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
}

/* ── Responsive: collapse label sidebar at 1024px (§ 13) ─ */
@media (max-width: 1024px) {
  .ri-sidebar--labels {
    transform: translateX(calc(-1 * var(--sidebar-label-width)));
    transition: transform var(--transition-normal);
  }
  .ri-sidebar--labels.is-open {
    transform: translateX(0);
  }
}

/* ── Responsive: single column below 768px ──────────────── */
@media (max-width: 768px) {
  .ri-layout {
    flex-direction: column;
    margin-top: var(--topbar-height);
  }
  .ri-main {
    padding: var(--space-4);
  }
  .ri-sidebar--icons {
    display: none;
  }
}

/* ── Joomla system messages (joomla-alert web component) ──────────────────── */
/* The joomla-alert element uses its own CSS custom properties defined in      */
/* joomla-alert.css. We override them here for the dark theme.                */
joomla-alert {
  /* close-button contrast on dark */
  --jui-alert-button-color-dark:        #212529;
  --jui-alert-button-color-light:       #ffffff;

  /* success: dark green tint */
  --jui-alert-success-color:            #0a3622;
  --jui-alert-success-background-color: #d1e7dd;
  --jui-alert-success-border-color:     #198754;
  --jui-alert-success-link-color:       #0a3622;

  /* info / notice: dark surface + accent blue border */
  --jui-alert-info-color:               #212529;
  --jui-alert-info-background-color:    #ffffff;
  --jui-alert-info-border-color:        #0d6efd;
  --jui-alert-info-link-color:          #055160;

  /* warning: dark amber tint */
  --jui-alert-warning-color:            #664d03;
  --jui-alert-warning-background-color: #fff3cd;
  --jui-alert-warning-border-color:     #ffc107;
  --jui-alert-warning-link-color:       #664d03;

  /* danger / error: dark red tint */
  --jui-alert-danger-color:             #dc3545;
  --jui-alert-danger-background-color:  #f8d7da;
  --jui-alert-danger-border-color:      #dc3545;
  --jui-alert-danger-link-color:        #842029;
}

/* Close button stays light on all dark alert backgrounds */
joomla-alert .joomla-alert--close {
  color: #212529 !important;
  opacity: 0.8;
}
joomla-alert .joomla-alert--close:hover {
  opacity: 1;
}

/* ── Guest layout: full-width content, no sidebar offset ─────────────────── */
body.ri-guest .ri-main {
  margin-left: 0;
}