/* ===========================================================
   fitVibe Field — mobile field-capture PWA
   Ported from the FitVibe Design "fitVibe Field" prototype (crm/mobile.css).
   Greek UI · big touch targets (≥44px) · one-thumb · fast.
   Runs full-screen on the device (no iOS showcase frame).
   =========================================================== */
:root {
  --fvf-blue: #325DE6;
  --fvf-blue-dark: #1F4ACD;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body, #fieldRoot { height: 100%; margin: 0; }
body {
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  background: #F1F4FA; color: #1B1E25;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ---- app frame ---- */
.m-app { height: 100%; display: flex; flex-direction: column; background: #F1F4FA; color: #1B1E25; overflow: hidden; }
.m-app * { box-sizing: border-box; }
.m-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
.m-scroll::-webkit-scrollbar { display: none; }
.tnum { font-variant-numeric: tabular-nums; }
.is-hidden { display: none !important; }

/* header (clears status bar / notch via safe-area) */
.m-head { padding: calc(var(--safe-top) + 18px) 20px 12px; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.m-head.solid { background: #fff; border-bottom: 1px solid #ECEEF3; }
.m-ava { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.m-hello { line-height: 1.15; }
.m-hello b { font-size: 17px; font-weight: 800; letter-spacing: -.3px; display: block; }
.m-hello span { font-size: 12px; color: #98A0AD; font-weight: 600; text-transform: capitalize; }
.m-iconbtn { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: #fff;
  border: 1px solid #ECEEF3; color: #5F6E95; flex: 0 0 auto; position: relative; }
.m-iconbtn:active { transform: scale(.94); }

.m-navhead { padding: calc(var(--safe-top) + 16px) 16px 8px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.m-back { width: 42px; height: 42px; border-radius: 999px; background: #fff; border: 1px solid #ECEEF3; display: grid; place-items: center; color: #1B1E25; flex: 0 0 auto; }
.m-back:active { transform: scale(.94); }
.m-navhead .t { font-size: 22px; font-weight: 800; letter-spacing: -.5px; flex: 1; min-width: 0; }

/* ---- summary strip ---- */
.m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 20px 4px; }
.m-stat { background: #fff; border: 1px solid #ECEEF3; border-radius: 16px; padding: 14px 15px; }
.m-stat .n { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.m-stat .l { font-size: 12px; color: #5F6E95; font-weight: 700; margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.m-stat.warn { background: #FFF6EC; border-color: #F6E2C5; }
.m-stat.warn .n { color: #C98A1B; }

/* ---- primary CTA ---- */
.m-cta { margin: 16px 20px 4px; height: 58px; border-radius: 16px; background: #325DE6; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 800;
  border: 0; width: calc(100% - 40px); box-shadow: 0 8px 22px -6px #325de673; }
.m-cta:active { transform: scale(.985); background: #1F4ACD; }

/* ---- section ---- */
.m-sec { padding: 20px 20px 0; }
.m-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.m-sec-h b { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #98A0AD; }
.m-sec-h .more { font-size: 13px; font-weight: 700; color: #325DE6; }

/* ---- studio row card ---- */
.m-card { background: #fff; border: 1px solid #ECEEF3; border-radius: 16px; padding: 13px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.m-card:active { transform: scale(.99); }
.m-logo { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.m-card .info { flex: 1; min-width: 0; }
.m-card .info b { font-size: 15px; font-weight: 800; letter-spacing: -.2px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card .info .sub { font-size: 12.5px; color: #98A0AD; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-callbtn { width: 46px; height: 46px; border-radius: 999px; background: #EAF4EF; color: #1F8900; display: grid; place-items: center; flex: 0 0 auto; border: 0; }
.m-callbtn:active { transform: scale(.92); }

.m-due { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.m-due.over { background: #FCEAEA; color: #D62424; }
.m-due.today { background: #FBEFD7; color: #C98A1B; }
.m-due.soon { background: #EEF1F6; color: #5F6E95; }
.m-dist { font-size: 11.5px; font-weight: 700; color: #325DE6; background: #EAF1FF; padding: 2px 8px; border-radius: 999px; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.stars i { color: #EAB226; }

.m-status-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
.m-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }

/* ---- bottom tab bar ---- */
.m-tabs { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around;
  padding: 8px 8px calc(var(--safe-bottom) + 10px);
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #ECEEF3; position: relative; }
.m-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #A6AEBC; font-size: 10.5px; font-weight: 700;
  flex: 1; padding: 4px 0; background: transparent; border: 0; }
.m-tab.on { color: #325DE6; }
.m-tab:active { transform: scale(.94); }
.m-fab { width: 56px; height: 56px; border-radius: 999px; background: #325DE6; color: #fff; display: grid; place-items: center;
  margin-top: -26px; box-shadow: 0 8px 20px -4px #325de680; border: 4px solid #fff; flex: 0 0 auto; }
.m-fab:active { transform: scale(.93); }

/* ---- QUICK ADD form ---- */
.m-form { padding: 4px 20px 20px; }
.m-fld { margin-bottom: 20px; }
.m-fld > label { font-size: 12.5px; font-weight: 800; color: #5F6E95; display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.m-fld > label .opt { color: #C2C8D2; font-weight: 700; margin-left: auto; }
.m-input { width: 100%; height: 54px; border-radius: 14px; border: 1.5px solid #E4E8EF; background: #fff; padding: 0 16px;
  font-family: 'Manrope'; font-size: 17px; font-weight: 700; color: #1B1E25; outline: none; }
.m-input::placeholder { color: #C2C8D2; font-weight: 600; }
.m-input:focus { border-color: #325DE6; box-shadow: 0 0 0 4px #325de61f; }
.m-input.big { font-size: 19px; font-weight: 800; }

.m-chips { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; padding-right: 4px; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip { flex: 0 0 auto; height: 46px; padding: 0 16px; border-radius: 13px; border: 1.5px solid #E4E8EF; background: #fff;
  display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #5F6E95; white-space: nowrap; }
.m-chip:active { transform: scale(.96); }
.m-chip.on { border-color: #325DE6; background: #EAF1FF; color: #1F4ACD; }
.m-chip .gl { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.m-chiprow { display: flex; gap: 9px; flex-wrap: wrap; }
.m-chiprow .m-chip { flex: 0 0 auto; }

/* region autocomplete */
.m-aclist { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid #ECEEF3;
  border-radius: 14px; box-shadow: 0 12px 30px -8px #0b355833; overflow: hidden; max-height: 260px; overflow-y: auto; }
.m-acitem { padding: 12px 16px; border-bottom: 1px solid #F3F4F8; cursor: pointer; }
.m-acitem:last-child { border-bottom: 0; }
.m-acitem:active, .m-acitem:hover { background: #EAF1FF; }
.m-acitem b { display: block; font-size: 15px; font-weight: 800; color: #1B1E25; }
.m-acitem span { font-size: 12px; color: #98A0AD; font-weight: 600; }

.m-gps { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #325DE6; background: #EAF1FF; }
.m-gps .pin { color: #325DE6; }
.m-gps b { font-size: 16px; font-weight: 800; color: #1F4ACD; }
.m-gps .chg { margin-left: auto; font-size: 13px; font-weight: 800; color: #325DE6; }

.m-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.m-toggle { height: 54px; border-radius: 14px; border: 1.5px solid #E4E8EF; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  font-size: 14.5px; font-weight: 800; color: #5F6E95; }
.m-toggle .tk { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #D7DCE5; display: grid; place-items: center; color: transparent; margin-left: auto; flex: 0 0 auto; }
.m-toggle.on { border-color: #325DE6; background: #EAF1FF; color: #1F4ACD; }
.m-toggle.on .tk { background: #325DE6; border-color: #325DE6; color: #fff; }

.m-stars { display: flex; gap: 10px; }
.m-star { color: #CDD3DD; background: transparent; border: 0; padding: 0; }
.m-star.on { color: #EAB226; }
.m-star:active { transform: scale(.9); }

.m-scorebar { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #ECEEF3; margin-bottom: 18px; }
.m-ring { width: 54px; height: 54px; position: relative; flex: 0 0 auto; }
.m-ring svg { transform: rotate(-90deg); }
.m-ring .v { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 800; }
.m-scorebar .meta b { font-size: 14px; font-weight: 800; display: block; }
.m-scorebar .meta span { font-size: 12px; color: #98A0AD; font-weight: 600; }
.m-match { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 800; }

.m-save { flex: 0 0 auto; display: flex; gap: 11px; padding: 12px 20px calc(var(--safe-bottom) + 14px); background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid #ECEEF3; }
.m-save .primary { flex: 1; height: 56px; border-radius: 15px; background: #325DE6; color: #fff; font-size: 16px; font-weight: 800;
  border: 0; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 8px 20px -6px #325de673; }
.m-save .primary:active { transform: scale(.985); background: #1F4ACD; }
.m-save .primary:disabled, .m-save .ghost:disabled { opacity: .5; }
.m-save .ghost { height: 56px; padding: 0 20px; border-radius: 15px; background: #EEF1F6; color: #5F6E95; font-size: 15px; font-weight: 800; border: 0; }
.m-save .ghost:active { transform: scale(.97); }

/* ---- STUDIO quick view ---- */
.m-hero2 { padding: 8px 20px 16px; }
.m-hero2 .row1 { display: flex; gap: 14px; align-items: flex-start; }
.m-hero2 .nm { font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; }
.m-hero2 .sub { font-size: 13.5px; color: #98A0AD; font-weight: 700; margin-top: 4px; }
.m-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 20px 8px; }
.m-act { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 4px; border-radius: 15px; background: #fff; border: 1px solid #ECEEF3; }
.m-act:active { transform: scale(.95); }
.m-act .ai { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: #fff; }
.m-act .al { font-size: 11.5px; font-weight: 800; color: #5F6E95; }

.m-block { background: #fff; border: 1px solid #ECEEF3; border-radius: 18px; margin: 14px 20px 0; overflow: hidden; }
.m-block-h { padding: 15px 16px 4px; font-size: 12.5px; font-weight: 800; color: #98A0AD; text-transform: uppercase; letter-spacing: .4px; }
.m-block-b { padding: 6px 16px 16px; }

.m-out { display: flex; gap: 9px; flex-wrap: wrap; }
.m-outbtn { flex: 1 1 auto; min-width: calc(50% - 5px); height: 50px; border-radius: 13px; border: 1.5px solid #E4E8EF; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; color: #1B1E25; }
.m-outbtn:active { transform: scale(.97); }
.m-outbtn .d { width: 9px; height: 9px; border-radius: 999px; }

.m-followup { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #ECEEF3; }
.m-followup .lab { font-size: 12.5px; font-weight: 800; color: #5F6E95; margin-bottom: 10px; }

.m-tl { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid #F3F4F8; }
.m-tl:last-child { border-bottom: 0; }
.m-tl .ti { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; }
.m-tl .tt b { font-size: 13.5px; font-weight: 800; }
.m-tl .tt .tx { font-size: 12.5px; color: #5F6E95; font-weight: 600; line-height: 1.45; margin-top: 1px; white-space: pre-wrap; }
.m-tl .tt .tm { font-size: 11px; color: #A6AEBC; font-weight: 700; margin-top: 3px; }

.m-kv { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid #F3F4F8; font-size: 14.5px; font-weight: 700; }
.m-kv:last-child { border-bottom: 0; }
.m-kv .ki { color: #A6AEBC; flex: 0 0 auto; }
.m-kv .kv-l { color: #98A0AD; font-weight: 700; }
.m-kv .kv-v { margin-left: auto; color: #1B1E25; font-weight: 800; }
.m-kv .kv-v.link { color: #325DE6; }

/* ---- toast ---- */
.m-toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 96px); transform: translateX(-50%) translateY(20px); opacity: 0;
  background: #0B3558; color: #fff; padding: 13px 20px; border-radius: 14px; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 9px; box-shadow: 0 12px 30px -6px #0b355866; z-index: 90; transition: all .26s cubic-bezier(.2, .8, .2, 1);
  white-space: nowrap; pointer-events: none; max-width: 90vw; }
.m-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.m-toast .tc { width: 22px; height: 22px; border-radius: 999px; background: #1F8900; display: grid; place-items: center; flex: 0 0 auto; }

/* ---- map ---- */
.m-map { position: relative; height: 320px; margin: 4px 20px 0; border-radius: 18px; overflow: hidden; border: 1px solid #ECEEF3; background: #EEF2F8; }
.m-map .grid { position: absolute; inset: 0; background-image: linear-gradient(#dbe1ec 1px, transparent 1px), linear-gradient(90deg, #dbe1ec 1px, transparent 1px); background-size: 34px 34px; opacity: .6; }
.m-mpin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.m-mbub { border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; border: 2px solid #fff; box-shadow: 0 4px 10px -2px #0b355840; }

.m-empty { text-align: center; color: #A6AEBC; font-size: 13.5px; font-weight: 600; padding: 50px 30px; }

/* ---- skeleton ---- */
.m-skel { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.m-skel i { display: block; height: 64px; border-radius: 16px; background: linear-gradient(90deg, #ECEFF4 25%, #F5F7FA 37%, #ECEFF4 63%); background-size: 400% 100%; animation: mshim 1.3s ease infinite; }
@keyframes mshim { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ===========================================================
   LOGIN
   =========================================================== */
.fv-login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 28px;
  background: radial-gradient(900px 600px at 80% -10%, #E1E8FE 0%, transparent 55%), radial-gradient(700px 500px at 0% 110%, #EAF1FF 0%, transparent 50%), #F1F4FA; }
.fv-login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid #ECEEF3; border-radius: 22px; padding: 28px 24px; box-shadow: 0 18px 50px -16px #0b35581f; }
.fv-login-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #E1E8FE; color: #325DE6; font-weight: 800; font-size: 12px; }
.fv-login h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: #0B3558; margin: 16px 0 6px; }
.fv-login p { font-size: 13.5px; color: #5F6E95; font-weight: 500; margin: 0 0 18px; }
.fv-login-error { background: #FCEAEA; color: #D62424; border-radius: 12px; padding: 11px 13px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.fv-login-form label { display: block; font-size: 12px; font-weight: 800; color: #5F6E95; margin: 12px 0 7px; }
.fv-login-form input { width: 100%; height: 52px; border-radius: 14px; border: 1.5px solid #E4E8EF; background: #fff; padding: 0 16px;
  font-family: 'Manrope'; font-size: 16px; font-weight: 700; color: #1B1E25; outline: none; }
.fv-login-form input:focus { border-color: #325DE6; box-shadow: 0 0 0 4px #325de61f; }
.fv-login-btn { width: 100%; height: 54px; margin-top: 20px; border-radius: 15px; background: #325DE6; color: #fff; font-size: 16px; font-weight: 800;
  border: 0; box-shadow: 0 8px 20px -6px #325de673; }
.fv-login-btn:active { transform: scale(.985); background: #1F4ACD; }
.fv-login-foot { text-align: center; font-size: 11.5px; color: #98A0AD; font-weight: 600; margin-top: 18px; }