/* Phone layout fixes for the door app and the windows app (pricer2).
   They are built bundles, so nginx adds this stylesheet to their pages together with the Home button
   (snippets/timbercraft-home.conf, see install_home_button.py). Phone widths only (the apps switch to
   their one-column layout at 768px); the computer layout is left exactly as it is. */
@media (max-width: 768px) {
  /* a leftover template rule gives the page a light 1rem frame around the dark app */
  html, body { background-color: #0b0f19 !important; }
  body { padding: 0 !important; color: #f1f5f9; }

  /* top bar: title on the first line, then the counter and the buttons; it scrolls away with the page
     so the form gets the whole screen */
  .header {
    position: relative !important; height: auto !important; flex-wrap: wrap; gap: 6px 10px;
    padding: 10px 14px !important;
  }
  /* first line: the Home house (home-button.js) and the title */
  .header h1 { flex: 1 1 0; min-width: 0; font-size: 1.35rem !important; line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .header > div { flex: 1 1 100%; flex-wrap: wrap; gap: 8px !important; }
  .header > div > span { margin-right: auto !important; font-size: .85rem !important; color: #94a3b8; }
  .header button { padding: 8px 14px !important; font-size: .85rem !important; }

  /* door app: Add to List / Generate Reports sit above the drawing instead of spilling over the bar */
  .display-area:has(> .action-buttons:not(.desktop-only-buttons)) {
    height: auto !important; justify-content: flex-start !important; gap: 12px;
  }
  .display-area > .action-buttons:not(.desktop-only-buttons) { width: 100%; flex-direction: row; }
  .display-area > .action-buttons button { padding: 11px 8px !important; font-size: .95rem !important; }
  .display-area:has(> .action-buttons:not(.desktop-only-buttons)) > .svg-container { width: 100%; max-height: 340px; }

  /* the white buttons in the form, in the dark style of the fields around them */
  .model-picker-button, .door-model-picker-button,
  .controls input + button,
  .controls button[style*="233, 236, 239"], .controls button[style*="e9ecef"] {
    background: rgba(255, 255, 255, .05) !important; color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 8px !important;
  }
  .controls input + button { padding: 0 10px !important; }
  /* the opened Notes & Attachments panel */
  .controls div[style*="248, 249, 250"], .controls div[style*="f8f9fa"] {
    background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .12) !important;
  }
  .controls div[style*="248, 249, 250"] textarea, .controls div[style*="f8f9fa"] textarea {
    background: rgba(15, 23, 42, .6) !important; color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 8px !important;
  }
  .controls div[style*="248, 249, 250"] label, .controls div[style*="f8f9fa"] label { color: #94a3b8 !important; }
  .controls div[style*="222, 226, 230"] { border-top-color: rgba(255, 255, 255, .1) !important; }
}