/* ═══════════════════════════════════════════════
   DO.css  — DataObjects App Styles
   Density system: XS / S / M (default) / L / XL
   All spacing controlled via CSS custom properties.
   Colors, fonts, borders stay in inline React styles.
   ═══════════════════════════════════════════════ */

/* ── Default (M) tokens — applied to body baseline ── */
body {
  --do-input-pad-v:   6px;
  --do-input-pad-h:   8px;
  --do-field-gap:     10px;
  --do-col-pad-v:     12px;
  --do-col-pad-h:     12px;
  --do-row-gap:       0px;
  --do-label-size:    11px;
  --do-label-gap:     4px;    /* space between label and input */
  --do-font-size:     14px;
}

/* ── XS — Micro ── */
body.do-xs {
  --do-input-pad-v:   2px;
  --do-input-pad-h:   4px;
  --do-field-gap:     6px;
  --do-col-pad-v:     8px;
  --do-col-pad-h:     8px;
  --do-row-gap:       0px;
  --do-label-size:    10px;
  --do-label-gap:     2px;
  --do-font-size:     12px;
}

/* ── S — Compact ── */
body.do-s {
  --do-input-pad-v:   4px;
  --do-input-pad-h:   6px;
  --do-field-gap:     8px;
  --do-col-pad-v:     10px;
  --do-col-pad-h:     10px;
  --do-row-gap:       0px;
  --do-label-size:    10px;
  --do-label-gap:     3px;
  --do-font-size:     13px;
}

/* ── M — Default (already on body, explicit class for toggling) ── */
body.do-m {
  --do-input-pad-v:   6px;
  --do-input-pad-h:   8px;
  --do-field-gap:     10px;
  --do-col-pad-v:     12px;
  --do-col-pad-h:     12px;
  --do-row-gap:       0px;
  --do-label-size:    11px;
  --do-label-gap:     4px;
  --do-font-size:     14px;
}

/* ── L — Relaxed ── */
body.do-l {
  --do-input-pad-v:   8px;
  --do-input-pad-h:   10px;
  --do-field-gap:     12px;
  --do-col-pad-v:     14px;
  --do-col-pad-h:     14px;
  --do-row-gap:       0px;
  --do-label-size:    11px;
  --do-label-gap:     5px;
  --do-font-size:     14px;
}

/* ── XL — Spacious ── */
body.do-xl {
  --do-input-pad-v:   10px;
  --do-input-pad-h:   12px;
  --do-field-gap:     14px;
  --do-col-pad-v:     16px;
  --do-col-pad-h:     16px;
  --do-row-gap:       0px;
  --do-label-size:    13px;
  --do-label-gap:     6px;
  --do-font-size:     15px;
}

/* ═══════════════════════════════════════════════
   Component classes — use these on elements.
   Colors/borders/widths remain in inline styles.
   ═══════════════════════════════════════════════ */

/* ── Field wrapper — controls bottom spacing ── */
.do-field-wrap {
  margin-bottom: var(--do-field-gap);
}

/* ── Label ── */
.do-label {
  font-size:     var(--do-label-size);
  margin-bottom: var(--do-label-gap);
  display:       block;
}

/* ── Text input + Textarea ── */
.do-input {
  padding:      var(--do-input-pad-v) var(--do-input-pad-h);
  font-size:    var(--do-font-size);
  width:        100%;
  box-sizing:   border-box;
  border:       1px solid #cbd5e1;
  border-radius: 5px;
}

textarea.do-input {
  resize:    vertical;
  min-height: 2.4em;
}

/* ── Select ── */
select.do-input {
  padding: var(--do-input-pad-v) var(--do-input-pad-h);
}

/* ── Card wrapper ── */
/* Padding matches col padding so do-row negative margins align flush */
.do-card {
  padding: var(--do-col-pad-v) var(--do-col-pad-h);
}

/* ── Column ── */
.do-col {
  padding: var(--do-col-pad-v) var(--do-col-pad-h);
  box-sizing: border-box;
}

/* ── Row ── */
.do-row {
  margin-bottom: var(--do-row-gap);
  display: flex;
  flex-wrap: wrap;
  margin-left:  calc(var(--do-col-pad-h) * -1);
  margin-right: calc(var(--do-col-pad-h) * -1);
}

/* ── Number input — right-aligned ── */
input.do-input-number {
  padding:    var(--do-input-pad-v) var(--do-input-pad-h);
  font-size:  var(--do-font-size);
  text-align: right;
}

/* ── Text / Label display object ── */
.do-text {
  padding:       var(--do-input-pad-v) var(--do-input-pad-h);
  margin-bottom: var(--do-field-gap);
  font-size:     var(--do-font-size);
  line-height:   1.5;
}

  font-size: calc(var(--do-label-size) - 1px);
  margin-top: 3px;
  color: #94a3b8;
}

/* ── Responsive — cascade columns on small screens ── */
@media (max-width: 900px) {
  .do-row {
    flex-direction: column;
    margin-left:  0 !important;
    margin-right: 0 !important;
  }
  .do-col {
    flex:      1 1 100% !important;
    width:     100%     !important;
    min-width: 100%     !important;
  }
}

@media (max-width: 600px) {
  .do-card {
    border-radius: 0;
  }
}

/* ── Guest / read-only fields ── */
.do-guest .do-input,
.do-guest input,
.do-guest textarea,
.do-guest select {
  background:  #f8fafc !important;
  cursor:      default !important;
  color:       #64748b !important;
  pointer-events: none;
}