/* =============================
   Layout and Form Styles
   ============================= */
.form .name-row { display: grid; grid-template-columns: 1fr 100px; gap: 10px; align-items: start; }
.name-col, .pronouns-col, .phone-col, .extension-col, .address-col, .floor-col { display: flex; flex-direction: column; }
.pronouns-input, .phone-input, .extension-input, .floor-input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; }
:root {
  --bg: #f5f7fb;
  --card: #ffffff;
  --accent: #c41e3a;
  --muted: #666e75;
  --border: #e6eef8;
  --radius: 8px;
}
* { box-sizing: border-box; }
body { font-family: Inter, Segoe UI, Helvetica, Arial, sans-serif; background: var(--bg); color: #1b1f23; margin: 0; padding: 24px; }
.container { max-width: 1100px; margin: 0 auto; }
.site-header { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.site-header h1 { margin: 0; font-size: 1.6rem; color: var(--accent); }
.main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-section { display: flex; flex-direction: column; }
.previews-section { display: grid; grid-template-columns: 1fr; gap: 20px; align-content: start; }
.form { background: var(--card); padding: 18px; border-radius: var(--radius); box-shadow: 0 1px 4px rgba(15,23,42,0.06); }
.field { display: flex; flex-direction: column; margin-bottom: 10px; }
.field label, .sub-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; line-height: 1.2; }
.field input, .field select { padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; }
.phone-row, .address-row { display: grid; grid-template-columns: 1fr 100px; gap: 10px; align-items: start; }

/* =============================
   Preview and Action Styles
   ============================= */
.preview-section { background: var(--card); padding: 18px; border-radius: var(--radius); box-shadow: 0 1px 4px rgba(15,23,42,0.06); }
.preview-section h2 { margin-top: 0; color: #233243; }
.signature-preview { min-height: 120px; padding: 12px; border: 1px dashed var(--border); border-radius: 6px; background: linear-gradient(180deg,#fff,#fbfdff); }
.actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
button { background: var(--accent); color: #fff; border: none; padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.msg { margin-left: 8px; font-size: 0.9rem; }
.msg.success { color: #0f7a36; }
.msg.error { color: #b42318; }
.site-footer { margin-top: 16px; color: var(--muted); }

/* =============================
   Signature Preview Styles
   ============================= */
.sig-wrap { font-family: Arial, Helvetica, sans-serif; color: #111; }
.sig-name { color: #000; font-weight: bold; font-size: 14px; font-family: Verdana; }
.sig-title { color: #000; font-size: 14px; font-family: Verdana; }
.sig-title-en { color: #000; font-size: 11px; font-family: Verdana; }
.sig-pronouns { color: #000; font-size: 11px; font-family: Verdana; font-weight: normal; }
.sig-company { color: #891502; font-size: 12px; font-family: Verdana; margin-top: 0; }
.sig-contacts { color: #891502; font-size: 0.93rem; }
.sig-contacts a { color: #891502; text-decoration: none; }
.phone-label { color: #000; font-weight: bold; font-size: 11px; font-family: Verdana; }
.phone-number { color: #000; font-size: 11px; font-family: Verdana; }
.sig-email { color: #000; }
.sig-email a { color: #000; font-size: 11px; font-family: Verdana; text-decoration-line: underline; }
.sig-address { line-height: 1.4; color: #891502; font-size: 12px; font-family: Verdana; text-decoration: none; }
.sig-logo { display: block; margin-top: 0; }
.logo-only { display: flex; align-items: center; margin-top: 0; }
.sig-spacer { height: 12px; }
.sig-rest { margin-top: 6px; }

@media(max-width:900px) {
  .main { grid-template-columns: 1fr; }
  .signature-preview { min-height: 160px; }
}

@media(max-width:600px) {
   html, body { overflow-x: hidden; }
   body { padding: 16px; }
   .container, .main, .form-section, .previews-section, .form, .preview-section, .signature-preview { min-width: 0; }
   .form, .preview-section { padding: 14px; }
   .site-header { align-items: flex-start; flex-direction: column; gap: 8px; }
   .name-row { grid-template-columns: 1fr; }
   .phone-row, .address-row { grid-template-columns: minmax(0, 1fr) 92px; }
   .field input, .field select { width: 100%; max-width: 100%; }
   .actions { flex-wrap: wrap; }
   .msg { margin-left: 0; }
   .signature-preview { overflow-x: auto; }
   .signature-preview table { width: 100%; max-width: 100%; table-layout: fixed; }
   .signature-preview td { word-break: break-word; overflow-wrap: anywhere; }
   .signature-preview img { max-width: 100%; height: auto; }
   .signature-preview span[style*="white-space:nowrap"] { white-space: normal !important; }
}

@media screen and (min-width: 340px) and (max-width: 380px) and (min-height: 680px) and (max-height: 820px) and (orientation: portrait) {
   body { padding: 20px; }
   .form, .preview-section { padding: 12px; }
}