/* =========================================================
   RWAD STRUCTURAL ENGINE v3 (Refactored)
   File: rw_page.css
   Layer: Common (Platform Neutral)
   Depends on: theme.css (tokens only)
========================================================= */


/* =========================================================
   0️⃣ GLOBAL HEIGHT CONTRACT
========================================================= */

html,
body {
  height: 100%;
}


/* =========================================================
   1️⃣ VIEW CONTAINERS
========================================================= */

/* ===== Page Root ===== */
.rw-view-page,
.r-v-p {
  display: flex;
  flex-direction: column;
  width: auto;
  min-height: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
}

/* ===== Body Layer ===== */
.rw-view-body,
.r-v-b {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ===== Scroll Layer ===== */
.rw-view-scroll,
.r-v-sc {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ===== Content Layer ===== */
.rw-view-content,
.r-v-c {
  flex: 1 1 auto;
  overflow-x: hidden;
  background: var(--bg-content);
  padding: var(--space-4);
  box-sizing: border-box;
}

/* ===== Header ===== */
.rw-view-header,
.r-v-h {
  flex: 0 0 auto;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-soft);
}

/* ===== Footer ===== */
.rw-view-footer,
.r-v-f {
  flex: 0 0 auto;
  background: var(--bg-footer);
  border-top: 1px solid var(--border-soft);
}

/* ===== Modal ===== */
.rw-view-modal,
.r-v-m {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  z-index: 1000;
}

/* ===== Desktop Window ===== */
.rw-view-window,
.r-v-w {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}


/* =========================================================
   2️⃣ LAYOUT ENGINE
========================================================= */

/* Flex Core */
.rw-layout-flex,
.r-l-f {
  display: flex;
}

.rw-layout-flex-col,
.r-l-c {
  display: flex;
  flex-direction: column;
  width: 100%
}

.rw-layout-flex-row,
.r-l-r {
  display: flex;
  flex-direction: row;
}

.rw-layout-flex-wrap,
.r-l-w {
  flex-wrap: wrap;
}

.rw-layout-flex-nowrap,
.r-l-nw {
  flex-wrap: nowrap;
}

/* Alignment */
.rw-layout-align-start,
.r-l-as {
  align-items: flex-start;
}

.rw-layout-align-center,
.r-l-ac {
  align-items: center;
}

.rw-layout-align-end,
.r-l-ae {
  align-items: flex-end;
}

.rw-layout-justify-start,
.r-l-js {
  justify-content: flex-start;
}

.rw-layout-justify-center,
.r-l-jc {
  justify-content: center;
}

.rw-layout-justify-between,
.r-l-jb {
  justify-content: space-between;
}

.rw-layout-justify-around,
.r-l-ja {
  justify-content: space-around;
}

/* Grid */
.rw-layout-grid,
.r-l-g {
  display: grid;
  gap: var(--space-3);
}

.rw-layout-grid-2,
.r-l-g2 {
  grid-template-columns: repeat(2, 1fr);
}

.rw-layout-grid-3,
.r-l-g3 {
  grid-template-columns: repeat(3, 1fr);
}

.rw-layout-grid-4,
.r-l-g4 {
  grid-template-columns: repeat(4, 1fr);
}


/* =========================================================
   3️⃣ COMPONENT PRIMITIVES
========================================================= */

/* ===== Card ===== */
.rw-comp-card,
.r-c-c {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rw-comp-card-header,
.r-c-c-h {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.rw-comp-card-body,
.r-c-c-b {
  padding: var(--space-3);
  flex: 1 1 auto;
}

.rw-comp-card-footer,
.r-c-c-f {
  padding: var(--space-3);
  border-top: 1px solid var(--border-soft);
}


/* =========================================================
   4️⃣ BUTTON SYSTEM
========================================================= */

.btn,
.rw-comp-btn,
.r-c-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font: inherit;
  cursor: pointer;

  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);

  background: var(--bg-card);
  color: var(--text-primary);

  padding:
    calc(0.5rem * var(--rw-scale, 1)) calc(0.9rem * var(--rw-scale, 1));

  transition: background var(--speed-fast) ease;
}

/* Variants */
.primary {
  background: var(--accent);
  color: var(--text-inverse);
}

.secondary {
  background: var(--bg-secondary);
}

.danger {
  background: var(--danger);
  color: var(--text-inverse);
}

.outline {
  background: transparent;
  border-color: var(--accent);
}


/* =========================================================
   5️⃣ INPUT SYSTEM
========================================================= */

.fr-input,
.rw-comp-input,
.r-c-i {
  width: 100%;
  font: inherit;

  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);

  background: var(--bg-card);
  color: var(--text-primary);

  padding: calc(0.5rem * var(--rw-scale, 1));
}


/* =========================================================
   6️⃣ FORM SYSTEM (fr-*)
========================================================= */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vertical-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.horizontal-stack {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Form Group */
.fr-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fr-group.fr-horizontal {
  flex-direction: row;
  align-items: center;
}

.fr-label {
  font-size: var(--font-size-sm);
  color: var(--text-label);
}

.fr-error {
  font-size: var(--font-size-xs);
  color: var(--danger);
}


/* =========================================================
   7️⃣ SIZE MODIFIERS (Token Scaling)
========================================================= */

.compact {
  --rw-scale: 0.85;
}

.small {
  --rw-scale: 0.9;
}

.medium {
  --rw-scale: 1;
}

.large {
  --rw-scale: 1.15;
}


/* =========================================================
   8️⃣ STATE SYSTEM
========================================================= */

.active {
  opacity: 1;
}

.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.error {
  border-color: var(--danger);
}

.success {
  border-color: var(--success);
}

.warning {
  border-color: var(--warning);
}


/* =========================================================
   9️⃣ UTILITIES
========================================================= */

/* Display */
.rw-util-hide,
.r-u-h {
  display: none !important;
}

.rw-util-block,
.r-u-b {
  display: block;
}

.rw-util-inline,
.r-u-i {
  display: inline;
}

/* Text */
.rw-util-text-center,
.r-u-tc {
  text-align: center;
}

.rw-util-text-end,
.r-u-te {
  text-align: right;
}

.rw-util-text-muted,
.r-u-tm {
  color: var(--text-muted);
}

/* Spacing */
.rw-util-m-1,
.r-u-m1 {
  margin: var(--space-1);
}

.rw-util-mb-2,
.r-u-mb2 {
  margin-bottom: var(--space-2);
}

.rw-util-p-1,
.r-u-p1 {
  padding: var(--space-1);
}


/* =========================================================
   🔟 SCROLL CONTROL
========================================================= */

.rw-scroll-y,
.r-sc-y {
  overflow-y: auto;
}

.rw-scroll-x,
.r-sc-x {
  overflow-x: auto;
}

.rw-scroll-none,
.r-sc-n {
  overflow: hidden;
}