/* 大森Office — standalone interactive pages: full-bleed shells + overlay UI */

html, body { height: 100%; background: #0b1320; }
#root { height: 100%; }

/* ─── Mobile full-bleed shell ─────────────────────────── */
.mobile-stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16223e 0%, #0b1320 60%);
}
.mobile-col {
  position: relative;
  width: min(100vw, 412px);
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
@media (min-width: 460px) {
  .mobile-col { height: min(100dvh, 900px); border-radius: 26px; }
}
.mobile-col .scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
}

/* faux status bar (kept slim, part of the app not a bezel) */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 45;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; pointer-events: none;
  font-family: 'Manrope','Inter',sans-serif; font-size: 13px; font-weight: 700;
  color: var(--on-surface);
}
.statusbar.dark { color: #fff; }
.statusbar .icons { display: inline-flex; align-items: center; gap: 5px; }

/* ─── PC full-bleed shell ─────────────────────────────── */
.pc-stage { position: fixed; inset: 0; overflow: hidden; }
.pc-fill { width: 100vw; height: 100dvh; display: flex; }

/* ─── Toast ───────────────────────────────────────────── */
#toast-layer {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 9000; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 86vw;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: rgba(7,18,30,.94); color: #fff;
  padding: 11px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .26s, transform .26s;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.good { background: #1c5e2a; }
.toast.warn { background: #8a5200; }
.toast.danger { background: #8a1414; }
.toast .material-symbols-outlined { font-size: 18px; }

/* ─── Overlay (modal + sheet) — absolute within shell ── */
.ovl {
  position: absolute; inset: 0; z-index: 200;
  display: flex; justify-content: center;
  background: rgba(4,12,24,.45); backdrop-filter: blur(2px);
  animation: ovl-in .2s ease;
}
@keyframes ovl-in { from { opacity: 0; } to { opacity: 1; } }
.ovl.center { align-items: center; }
.ovl.bottom { align-items: flex-end; }

.modal {
  width: max-content; max-width: min(620px, calc(100% - 48px));
  background: #fff; border-radius: 18px; padding: 22px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .26s cubic-bezier(.2,.9,.3,1);
}
.modal > div { max-width: 100%; }
@keyframes modal-in { from { opacity:0; transform: translateY(12px) scale(.96);} to {opacity:1;transform:none;} }

.sheet {
  width: 100%; background: #fff;
  border-radius: 22px 22px 0 0; padding: 8px 20px 26px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.25);
  animation: sheet-in .3s cubic-bezier(.2,.9,.3,1);
  max-height: 88%; overflow-y: auto;
}
@keyframes sheet-in { from { transform: translateY(100%);} to { transform: none;} }
.sheet-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--stroke); margin: 6px auto 16px; }
.sheet-title { font-family:'Manrope'; font-weight: 800; font-size: 17px; color: var(--on-surface); }

/* dark variants for VIP / owner contexts */
.modal.dark, .sheet.dark { background: #0d1f44; color: #fff; }
.sheet.dark .sheet-handle { background: rgba(255,255,255,.3); }

/* form field */
.field {
  width: 100%; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--on-surface); background: #fff; outline: none;
  transition: border-color .15s;
}
.field:focus { border-color: var(--primary); }
.field.err { border-color: var(--danger); background: #fff7f6; }
.field-label { font-size: 12px; font-weight: 700; color: var(--on-surface-variant); margin-bottom: 6px; display:block; }
.err-msg { color: var(--danger); font-size: 11px; margin-top: 5px; display: flex; align-items: center; gap: 3px; }

textarea.field { resize: none; line-height: 1.5; }

/* selectable tile active ring */
.sel-ring { outline: 2px solid var(--primary); outline-offset: 1px; }

/* pressable */
.press { transition: transform .12s, box-shadow .12s; cursor: pointer; }
.press:active { transform: scale(.97); }

/* link-ish */
.lnk { cursor: pointer; }

/* radio chip group */
.opt {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--stroke);
  font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--on-surface);
  transition: all .15s;
}
.opt.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* spinner */
.spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lease-billing-grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 16px; align-items: start; }
.lease-billing-preview { position: sticky; top: 0; min-width: 0; }
@media (max-width: 1250px) {
  .lease-billing-grid { grid-template-columns: minmax(0, 1fr); }
  .lease-billing-preview { position: static; }
}
@media (max-width: 1200px) {
  .contract-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .contract-detail-actions button {
    width: 34px;
    min-width: 34px;
    padding: 7px !important;
    justify-content: center;
    gap: 0 !important;
    font-size: 0 !important;
  }

  .contract-detail-topbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .term-file-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}