/* css/shared.css — JDG Draw Manager design tokens + shared styles */
*, *::before, *::after { box-sizing: border-box; }

/* Mobile Safari/Chrome auto-"boost" text that sits inside a column much
   narrower than the full device width (their heuristic for legibility on
   text-heavy pages) — this kicks in hard on wide, horizontally-scrollable
   content like the Gantt table and the flat Schedule table, inflating our
   deliberately-small 12/13px fonts well past what we set, independent of
   the iOS-zoom input rule below. This has nothing to do with pinch-zoom;
   it disables per-element auto-inflation only, standard/expected reset. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0; padding: 0;
  background: #F0F1F5;
  font-family: 'EB Garamond','Garamond','Times New Roman',serif;
}
input, select, textarea, button { font-family: 'EB Garamond','Garamond','Times New Roman',serif; }
textarea { width: 100%; }

/* iOS zoom prevention */
input[type="text"], input[type="number"], input[type="date"], select, textarea { font-size: 16px !important; }

/* Gantt milestone-name input (project-detail-component.js drawGantt) needs
   to stay small and dense — it's a per-row label in a compact table, not a
   form field, and the row height is tuned around a 12px line. Higher
   specificity than the input[type="text"] rule above (which otherwise wins
   as the later/equal-specificity rule) so it isn't blown up to 16px. */
input[type="text"].pd-gantt-name-input { font-size: 12px !important; }

/* Bidding line value input (js/bidding-project-component.js BidValueInput)
   — needs to match the 13px read-only $ figure shown for awarded-quote
   lines right next to it; without this it gets blown up to 16px by the
   iOS-zoom rule above, so the same $ figure looked two different sizes
   depending on whether that line had a plain allowance or an awarded quote. */
input[type="text"].bid-value-input { font-size: 13px !important; }

/* Bidding "Anticipated Start" date field (js/bidding-project-component.js
   BiddingTab) — reads as plain stat-tile text at rest, matching the KPI
   tiles beside it, and only grows a border/background once it's actually
   focused for editing. font-size pinned past the iOS-zoom rule above for
   the same reason as .bid-value-input; border/background stay a constant
   1px/transparent at rest so focusing doesn't shift the box size, only its
   color. */
input[type="date"].bid-date-input { font-size: 19px !important; font-weight: 500; border: 1px solid transparent; background: transparent; }
input[type="date"].bid-date-input:focus { border-color: #D0D8E8; background: #fff; }

/* Scrollbar */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #F0F1F5; }
::-webkit-scrollbar-thumb { background: #C8D0E8; border-radius: 2px; }

/* Loading screen */
#loading {
  position: fixed; inset: 0; background: #1C2340;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; z-index: 9998;
}
#loading-wordmark { display: inline-block; }
#loading-wordmark svg { display: block; height: 52px; width: auto; }
#loading-bar { width: 140px; height: 1px; background: rgba(184,151,90,0.25); border-radius: 1px; overflow: hidden; }
#loading-bar::after {
  content: ''; display: block; height: 100%; width: 35%; background: #B8975A; border-radius: 1px;
  animation: loadbar 1.8s ease-in-out infinite;
}
@keyframes loadbar { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }
#loading p { color: rgba(122,132,170,0.6); font-size: 12px; margin: 0; letter-spacing: 0.08em; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; text-transform: uppercase; }

/* Toast */
#toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 14px; padding: 10px 18px; border-radius: 8px;
  z-index: 9000; display: none; max-width: 340px; text-align: center; line-height: 1.5;
  font-family: 'EB Garamond','Garamond',serif;
}

/* Login screen */
#login {
  position: fixed; inset: 0; background: #1C2340;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; z-index: 9999;
}
#login .tagline { color: #B8975A; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; margin: 0; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; }
#login p { color: rgba(163,192,238,0.7); font-size: 15px; margin: 0; text-align: center; max-width: 300px; line-height: 1.6; }
#login-err { color: #FCA5A5; font-size: 14px; display: none; min-height: 20px; text-align: center; }
#login-form { display: flex; flex-direction: column; gap: 12px; width: 280px; }
#login-btn {
  padding: 0 24px; height: 48px; border-radius: 4px; border: 1px solid #dadce0;
  background: #fff; color: #3c4043;
  display: flex; align-items: center; gap: 12px; justify-content: center;
  font-size: 14px; font-weight: 500; letter-spacing: .25px;
  cursor: pointer; width: 280px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  transition: box-shadow .15s;
}
#login-btn:hover { box-shadow: 0 1px 3px rgba(60,64,67,.4), 0 2px 6px 2px rgba(60,64,67,.15); }

/* Login submit button — was falling back to unstyled default browser button
   (id didn't match #login-btn above, which is an orphaned Google-button
   style), giving it the wrong proportions next to the email/password
   fields. Padding + radius now match the inputs exactly so it reads as
   the same control family, filled in the brand gold. */
#login-form button {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border-radius: 8px; border: none;
  background: #B8975A; color: #1C2340;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  cursor: pointer; transition: background .15s;
}
#login-form button:hover { background: #c7a768; }
#login-form button:disabled { opacity: .6; cursor: default; }

/* Root reset (React mounts here) */
#root { min-height: 100vh; background: #F0F1F5; }